...

View Full Version : multiple DIV IDs in CSS



Partizan
02-25-2009, 02:09 PM
I am getting an error saying ID "SUBWRAPPER" already defined when I validate
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.minifigtimes.com%2Fnews-legoland.shtml&charset=(detect+automatically)&doctype=Inline&group=0


I understand why I am getting because I am using the ID multiple times. How do I fix the CSS to make more IDs that are in-effect copies of the SUBWRAPPER ID? So I would have, SUBWRAPPER2, SUBWRAPPER3, SUBWRAPPER4.. etc

HTML

<div id="subwrapper">
<div>
<img src="http://www.minifigtimes.com/images-2009/news/2009-02-23-p1.png" alt="test">
<p>
Nation's third largest bank collapses after filing record losses

<a href="http://www.minifigtimes.com/news/2009/2009-02-23-story01.shtml" class="link-blue">Read</a>
</p>

</div>

<div class="mid">

<img src="http://www.minifigtimes.com/images-2009/news/2009-02-21-p1.png" alt="test">
<p>
Van Basten let go by LFC as Legoland United go top

<a href="http://www.minifigtimes.com/news/2009/2009-02-21-story01.shtml" class="link-blue">Read</a>
</p>


</div>

<div>
<img src="http://www.minifigtimes.com/images-2009/news/2009-02-20-p1.png" alt="test">
<p>
Calls for government to resign as unemployment rockets

<a href="http://www.minifigtimes.com/news/2009/2009-02-20-story01.shtml" class="link-blue">Read</a>
</p>
</div>

</div> <!-- sub wrapper Div end -->


CSS


#subwrapper{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:0px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}

#subwrapper div{
margin: 0; /* above left below right */
padding:0px;
border:0px solid #f00; /*diagnostic*/
width:20%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper img{
width: 169px;
height: 129px;

}

#subwrapper .mid {
margin: 0 8%;
}

BoldUlysses
02-25-2009, 02:14 PM
Why can't you make subwrapper a class?


<div class="subwrapper">

Multiple classes in your CSS are okay too, e.g.:


.subwrapper .mid {
margin: 0 8%;
}

Rowsdower!
02-25-2009, 04:15 PM
Like msuffern said, using a "subwrapper" class is the best way unless you have a specific need to have ID's (like a javascript that alters the style or content). If you DO have a need for ID's instead of classes then you could definitely do ID's like subwrapper1, subwrapper2, etc.

If you want to have the same CSS style for each of these you would code the CSS like this:
#subwrapper1,
#subwrapper2,
#subwrapper3
{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:0px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}

#subwrapper1 div,
#subwrapper2 div,
#subwrapper3 div
{
margin: 0; /* above left below right */
padding:0px;
border:0px solid #f00; /*diagnostic*/
width:20%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper1 img,
#subwrapper2 img,
#subwrapper3 img
{
width: 169px;
height: 129px;
}

#subwrapper1 .mid,
#subwrapper2 .mid,
#subwrapper3 .mid
{
margin: 0 8%;
}

Just note that you can't start a class or id name with a number (e.g. 1, 2, 3) but you CAN end them with one. :thumbsup:

Excavator
02-25-2009, 04:45 PM
I understand why I am getting because I am using the ID multiple times. How do I fix the CSS to make more IDs that are in-effect copies of the SUBWRAPPER ID? So I would have, SUBWRAPPER2, SUBWRAPPER3, SUBWRAPPER4.. etc


In this case a class is what's called for.
Have a look at a description of the two different identifiers - http://www.tizag.com/cssT/cssid.php

Partizan
02-25-2009, 06:41 PM
Thanks guys. I tried making a class earlier but messed up.

As this is my existing CSS,


#subwrapper{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:0px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}

#subwrapper div{
margin: 0; /* above left below right */
padding:0px;
border:0px solid #f00; /*diagnostic*/
width:20%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper img{
width: 169px;
height: 129px;

}

#subwrapper .mid {
margin: 0 8%;
}

do you suggest I add:



.subwrapper{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:0px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}

.subwrapper div{
margin: 0; /* above left below right */
padding:0px;
border:0px solid #f00; /*diagnostic*/
width:20%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

.subwrapper img{
width: 169px;
height: 129px;

}

.subwrapper .mid {
margin: 0 8%;
}

?

Rowsdower!
02-25-2009, 06:56 PM
Yep, just change the hash marks (#) to periods (.) and you've changed ID's to classes. Be sure to update your HTML to use class="<whatever>" rather than id="<whatever>" and you should be pretty much done.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum