Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    multiple DIV IDs in CSS

    I am getting an error saying ID "SUBWRAPPER" already defined when I validate
    http://validator.w3.org/check?uri=ht...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
    PHP Code:
    <div id="subwrapper">
        <
    div>
            <
    img src="http://www.minifigtimes.com/images-2009/news/2009-02-23-p1.png" alt="test">
            <
    p>
            
    Nations 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

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

    #subwrapper div{
     
    margin0/* 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{
     
    width169px;
     
    height129px;
     
    }

    #subwrapper .mid {
    margin0 8%;


  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Why can't you make subwrapper a class?

    Code:
    <div class="subwrapper">
    Multiple classes in your CSS are okay too, e.g.:

    Code:
    .subwrapper .mid { 
    margin: 0 8%; 
    }
    matt | design | blog

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:
    Code:
    #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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Partizan (02-25-2009)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Partizan View Post

    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Partizan (02-25-2009)

  • #5
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks guys. I tried making a class earlier but messed up.

    As this is my existing CSS,
    PHP Code:
    #subwrapper{
     
    margin0 0 0 0/* above left below right */
     
    padding0
     
    border:0px solid #f00; /*diagnostic*/
     
    overflow:auto/*these two lines*/
     
    width:75%; /*uncollapse the box*/
    }

    #subwrapper div{
     
    margin0/* 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{
     
    width169px;
     
    height129px;
     
    }

    #subwrapper .mid {
    margin0 8%;

    do you suggest I add:


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

    .
    subwrapper div{
     
    margin0/* 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{
     
    width169px;
     
    height129px;
     
    }

    .
    subwrapper .mid {
    margin0 8%;

    ?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Partizan (02-25-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •