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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What's wrong with this DIV coding?

    Hello,
    I'm a beginner at DIV coding, and I own a designing company.
    I'm learning coding at moment, so i don't know everything about it.

    Now,
    I'm coding my layout, and i've got a problem.
    I've added two navigations, (Latest Layouts and Latest Graphics), and i've changed the nav images to:
    LATEST LAYOUT NAVIGATION:
    TOP= layout_top.gif
    MID= layout_middle.gif
    BOT= layout_bottom.gif


    LATEST GRAPHICS NAVIGATION:
    TOP= graphic_top.gif
    MID= graphic_middle.gif
    BOT= layout_bottom.gif


    If you want the whole code of the layout, here it is:
    <!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>
    <meta http-equiv="Content-Language" content="sv">
    <title>MetiDesigns.com Coming Soon!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <style type="text/css">
    <!--
    body {
    text-align: center;
    background-color: #ffffff;
    }
    # layouts {
    width: 390px;
    }
    #top {
    background: url(layout_top.gif);
    height: 80px;
    }
    #mid {
    background: url(layout_middle.gif);
    }
    #bot {
    background: url(layout_bottom.gif);
    height: 10px;
    }
    body {
    text-align: center;
    background-color: #ffffff;
    }

    #graphics {
    width: 390px;
    }

    #top {
    background: url(graphic_top.gif);
    height: 80px;
    }
    #mid {
    background: url(graphic_middle.gif);
    }
    #bot {
    background: url(graphic_bottom.gif);
    height: 10px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="layouts" style="width: 191px; height: 73px;">
    <div id="top" style="width: 191px; height: 31px"></div>
    <div id="mid">Expandable <br /></div>
    <div id="bot" style="width: 191px; height: 12px"></div>

    <div id="graphics" style="width: 191px; height: 36px;">
    <div id="top" style="width: 191px; height: 31px"></div>
    <div id="mid">Expandable <br /></div>
    <div id="bot" style="width: 191px; height: 12px"></div>
    </body>
    </html>
    What's wrong?
    Why won't it be
    Latest Layout
    Latest Graphic

    ??

    Hope you understand what i mean.


    meti

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    so whats you're problem? you don't see the the image that you're supposed to see??

    have you put the images in your images directory??

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by MetiDesigns View Post
    What's wrong?

    […]

    Hope you understand what i mean.
    Uhm, not really… But I can tell you some errors: An ID has to be unique in a document. You can’t use the same ID more than one time on a page. For that purpose classes were made.
    Oh and while I was writing this post I noticed that you forgot to close some divs.

    Secondly: If you write #top {…} it will affect all elements with the ID “top”. Additionally, latter rules will override former rules.
    So, effectively in your CSS:
    Code:
    # layouts {
    width: 390px;
    }
    #top {
    background: url(layout_top.gif);
    height: 80px;
    }
    
    […]
    
    #graphics {
    width: 390px;
    }
    
    #top {
    background: url(graphic_top.gif);
    height: 80px;
    }
    …although it’s wrong to use the same ID multiple times with CSS there’ll be no big issue. But the way you’ve written it the second #top rule will override the first one, hence both elements with the ID “top” will have the same graphic that was specified in the latest rule.

    Correctly it should look like this:
    Code:
    <div id="layouts">
     <div class="top"></div>
     <div class="mid"></div>
     <div class="bot"></div>
    </div>
    
    <div id="graphics">
      <div class="top"></div>
      <div class="mid"></div>
      <div class="bot"></div>
    </div>
    and
    Code:
    # layouts {
    width: 390px;
    }
    #layouts .top {
    background: url(layout_top.gif);
    height: 80px;
    }
    #layouts .mid {
    background: url(layout_middle.gif);
    }
    #layouts .bot {
    background: url(layout_bottom.gif);
    height: 10px;
    }
    
    #graphics {
    width: 390px;
    }
    
    #graphics .top {
    background: url(graphic_top.gif);
    height: 80px;
    }
    #graphics .mid {
    background: url(graphic_middle.gif);
    }
    #graphics .bot {
    background: url(graphic_bottom.gif);
    height: 10px;
    }
    See the difference?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You have this in twice.


    Code:
    #top {
    background: url(graphic_top.gif);
    height: 80px;
    }
    #mid {
    background: url(graphic_middle.gif);
    }
    #bot {
    background: url(graphic_bottom.gif);
    height: 10px;
    }
    Divs can only be used once. If you need to use it more, then you should use classes. Even so, only the last version will be used if the div has the same name. That's why they call it "Cascading Style Sheets." There are some comment tags inside the style section that need removing.

    Validating the code shows a number of errors.

    http://validator.w3.org/#validate_by_input


    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks. this helped me alot


  •  

    Posting Permissions

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