Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, so I'm designing this site and for some reason I can't get this standard CSS list navigation menu to sit in the white DIV container. It should be a simple fix, but I can't work it out. I'd appreaciate it if you guys had a look at it and see if you can work it out.

    The page is located here: http://diddy29.110mb.com/cr2/index.html

    For your quick references, the HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html lang="en" xml:lang="en">
        <head>
            <title>Home | Essential Self Solutions</title>
            <link media="all" type="text/css" href="mainstyle.css" rel="stylesheet" />
        </head>
        <body spellcheck="false">
            <div id="WhiteWrapper">
            <div id="ContentWrapper">
            <div id="Header">logo</div>
            <div id="navcontainer">
            <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Feel The Fear Workshops</span></a></li>
                <li><a href="#"><span>Other Workshops</span><!--</a--></a></li>
            </ul>
            </div>
            </div>
            </div>
        </body>
    </html>

    And the CSS:

    Code:
    body {
    background: #444444;
    margin: 0;
    padding: 0;
    }
    
    div#WhiteWrapper {
    background: #ffffff;
    width: 950px;
    margin: 0 auto;
    padding: 0 auto;
    }
    
    div#ContentWrapper {
    background: #ffffff;
    border: 1px solid black;
    margin: 0 auto;
    padding: 0px 20px 0px 20px;
    width: 700px;
    }
    
    div#Header {
    width: 100%;
    clear: both;
    margin-bottom: 30px;
    }
    
    div#navcontainer ul 
    {
    margin: 0 0 10px;
    }
    
    div#navcontainer ul li 
    {
    list-style-type: none;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    }
    
    div#navcontainer ul li a,
    div#navcontainer ul li a:link,
    div#navcontainer ul li a:active,
    div#navcontainer ul li a:visited 
    {
    display: block;
    width: 180px;
    height: 50px;
    background-image: url(nav1.png);
    text-decoration: none;
    }
    
    div#navcontainer ul li a:hover 
    {
    display: block;
    width: 180px;
    height: 50px;
    background-image: url(nav2.png);
    text-decoration: none;
    }
    
    div#navcontainer ul li a span 
    {
    display: block;
    padding: 20px 0;
    text-align: center;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: normal;
    }

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    What does this mean? navigation menu to sit in the white DIV container

    Do you mean those 3 blue nav buttons need to go where the word "logo" is?

    Or do you mean the white part should extend down below the blue buttons?


  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I want the navigation menu to be inside the white area, but just below where it says "logo". That means it needs to be insite #WhiteContainer. But for some reason this is not happening.

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    using float is collapsing your div, kinda the same way absolute positioning does. remove that line and edit display to
    display: inline-block;

    while($get_it !== true){ continue; }

  6. #5
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Thanks Dorky, that worked! I never thought you could go display: inline-block;, so thanks for that!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com