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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post

    content not right

    Hi guys,

    I want to add 3 sections to my content area, however it doesn't show right.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title>Title Here</title
    <
    style
    body margin:0background:#e5e5e5 url(bg.gif) repeat-x; }
     
    #top-wrap { width:100%; }
    #header { width:960px; margin:0 auto; height:85px; }
    #nav { width:960px; margin:0 auto; height:69px; font-family: tahoma; font-weight: bold; font-size: 18px; color: white; }
    #wrap { width:100%;  }
    .bg1 width:980pxmargin:0 autobackgroundurl(shd.pngrepeat-y; }
    #middle { width:960px; margin:0 auto; background: #fff; }
     
    #left { width: 200px; float: left }
    #center { width: 560px; float: left }
    #right { width: 200px; float: left }
     
    #footer-wrap { width:100%; background: #c5c5c5;  }
    #footer { width:960px; margin:0 auto; }

    #home { height: 20px; width: 50px; float: left; margin-left: 25px; margin-right: 5px; margin-top: 15px; }
    #anzeige { height: 20px; width: 160px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #forum { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #hilfe { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #faq { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #Tipps { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #agb { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px;  }
    #privacy { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
    #contact { height: 20px; width: 50px;  float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
     
    </style
    </
    head
    <
    body
    <
    div id="top-wrap">  
            <
    div id="header"
                
    header.
            </
    div
            <
    div id="nav"
                <
    div id="home">
                
    home
                
    </div>
                <
    div id="anzeige">
                
    anzeige eintragen
                
    </div>
                <
    div id="forum">
                
    forum
                
    </div>
                <
    div id="hilfe">
                
    hilfe 
                
    </div>
                <
    div id="faq">
                
    FAQ 
                
    </div>
                <
    div id="Tipps">
                
    tipps
                
    </div>
                <
    div id="contact">
                
    kontakt
                
    </div>
            </
    div
    </
    div
    <
    div id="wrap"
        <
    div class="bg1"
            <
    div id="middle"
                <
    div id="left">
                
    left area 
                
    </div>
                <
    div id="center">
                    
    center area
                
    </div>
                <
    div id="right">
                    
    right area
                
    </div>
        </
    div
    </
    div
    <
    div id="footer-wrap"
        <
    div class="bg1"
            <
    div id="footer"
                
    This is the footer.
            </
    div
        </
    div
    </
    div
    </
    body
    </
    html
    here is a live version: http://derderder.cwsurf.de/

    Am I doing it right? With the divs under divs to create each section?
    Last edited by OGGordon; 11-07-2009 at 02:25 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like you're missing a closing </div> for #middle to me...

  • Users who have thanked SB65 for this post:

    OGGordon (11-07-2009)

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Looks like you're missing a closing </div> for #middle to me...
    yeah you were right. I added it but still no change

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'm looking at it now in FF3.5.5. The live version is still missing that </div>

    What is it that doesn't look right?

  • Users who have thanked SB65 for this post:

    OGGordon (11-07-2009)

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    I'm looking at it now in FF3.5.5. The live version is still missing that </div>

    What is it that doesn't look right?
    alright I just uploaded it.

    The content area is suppose to be white.

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    #middle { width:960px; margin:0 auto; background: #fff; }
     
    #left { width: 200px; float: left }
    #center { width: 560px; float: left; background:#fff; }  /* this */
    OR you aren't clearing #left, #center, #right, so #middle isn't expanding with the content. Set a BG fro #center, or add <div style="clear:both;"></div> after #right </div>


    (you should add a clearing div regardless).

  • Users who have thanked met for this post:

    OGGordon (11-07-2009)

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by met View Post
    Code:
    #middle { width:960px; margin:0 auto; background: #fff; }
     
    #left { width: 200px; float: left }
    #center { width: 560px; float: left; background:#fff; }  /* this */
    OR you aren't clearing #left, #center, #right, so #middle isn't expanding with the content. Set a BG fro #center, or add <div style="clear:both;"></div> after #right </div>


    (you should add a clearing div regardless).
    I just added the clearing div and it works without any other changes. Thank you so much! I'm not sure what it does but I'll look it up. Thanks to both you guys for helping me!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    A neater alternative here to adding the clear div would be to add

    Code:
    overflow:auto
    to the css for #middle. This clears the floats contained in #middle, and hence extends the div to show the background, without any additional markup.


  •  

    Posting Permissions

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