Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › My nav is moving, and I can’t get it to stay in one place

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 15, 2009 at 11:08 am #24585
    nchipping
    Member

    Hi,

    I’m new to CSS, and so this is probably a dumb mistake I made, but I cannot figure it out.

    Simply put, I’m just making a mock-up site right now to get a handle on things, but I can’t get my nav bars to stay in place. The person who wants to see the mock-up wants this little "NEW" image placed just on the side of my bar, which is fine if someone’s screen resolution is set high and their browser is open wide, but not when you re-size the browser down (all browsers I’ve tried – Opera, Firefox, Safari, IE) or have a smaller screen.

    Anyway, the link is: http://www.meandmyback.com/bambuku2

    I will just post the code below my message for your convenience, and picking me apart. I want feedback because I obviously need improvement, and a lot of help.

    I have tried using the CSS *margin: 0 auto* without any help, I’ve tried *position:(all types)*, and just can’t get the nav bars to stay in the same place.

    ANY help would be appreciated. Thanks!

    Here’s the code for the whole thing:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bambuku</title>
    <style type="text/css">
    body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    background-color: #fff;
    }
    #headerbackground {
    background-image:url(images/headeracross.png);
    background-repeat:repeat-x;
    width:100%;
    height:250px;
    }
    #crazy_bg_wrap {
    background-color: #FFF;
    margin: 0 auto;
    width: 1200px;
    }
    #page_wrap {
    background-image: url(images/headeracross.png);
    background-repeat:repeat-x;
    width: 100%;
    }
    #header {
    font-family: Arial, Helvetica, sans-serif;
    width:1200px;
    height:250px;
    text-align: left;
    border: none;
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    color:#FFF;

    }
    #headertable {
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    text-align:right;
    padding-right:165px;
    padding-top:170px;
    }
    #headertable a {
    color:#FFF;
    text-decoration:none;
    }
    #headertable a:visited {
    color: #FFF;
    text-decoration:none;
    }
    #headertable a:hover {
    color:#CCC;
    text-decoration:underline
    }
    #img {
    position:relative;
    top: 38px;
    left: 119px;
    }
    #bg_wrap {
    background-color: #000;
    margin: 0 auto;
    width: 910px;
    }
    #header2 {
    background-image:url(images/header2.png);
    width:1200px;
    height:25px;

    }
    #nav {
    float: left;
    width: 430px;
    margin: 0 auto;
    padding-left: 45px;
    padding-top: 4px;
    background-image:url(images/nav.png);
    background-repeat:no-repeat;
    height: 258px;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    #blog a {
    color:#FFF;
    text-decoration:none;
    }
    #blog a:visited {
    color:#FFF;
    text-decoration:none;
    }
    #blog a:hover {
    color:#CCC;
    text-decoration:underline;
    }
    #content {
    float: left;
    width: 60%;
    background: #996633;
    margin: 2px;
    padding: 20px;
    }
    #nav2 {
    float: right;
    width: 430px;
    margin: 0px;
    padding-left: 5px;
    padding-top: 4px;
    background-image:url(images/nav2.png);
    background-repeat:no-repeat;
    height:259px;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    #footer {
    clear: both;
    background-color: #99cc66;
    margin: 2px;
    text-align: center;
    font-weight: bold;
    border: 3px solid black;
    }
    h2 {
    margin-top: 8px;
    }
    </style>
    </head>
    <body>
    <div id="headerbackground">
    <div id="crazy_bg_wrap">
    <div id="page_wrap">
    <div id="header">
    <table id="headertable" align="right" cellspacing="4px" cellpadding="2px" >
    <tr>
    <td><a href="">tour</a> |
    </td>
    <td><a href="">join</a> |
    </td>
    <td><a href="">blog</a> |
    </td>
    <td><a href="">forums</a> |
    </td>
    <td><a href="">resources</a> |
    </td>
    <td><a href="">about</a></td>
    </tr>
    </table>
    </div>
    </div>
    <div id="img"><img src="images/new.png" /></div>
    </div>
    </div>

    <div id="header2">
    </div>
    <div id="bg_wrap">
    <div id="body">
    <div id="nav"><h3>latest Blog updates<h5 id="blog"><a href="">(see all blogs)</a></h5></h3>
    <ul>
    <li>7 mistakes to avoid when signing legal docs to form your<br /> C corp (July 6, 07:18:43)</li>
    <li>blah blah blah</li>
    <li>adfadfs</li>
    <li>asdfasdf</li>
    </ul>
    </div>

    <div id="nav2"><h3>Forums</h3>
    <ul>
    <li>7 mistakes to avoid when signing legal docs to form your<br /> C corp (July 6, 07:18:43)</li>
    <li>blah blah blah</li>
    <li>adfadfs</li>
    <li>asdfasdf</li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    May 15, 2009 at 11:58 am #57553
    StuartThom
    Member

    might be easier to fix this with a style sheet based approach.

    inside the header <div>. You should be able to make a divider and call it navigation. Navigation holds the size – width and positioning for all of the list items for the buttons. Setting padding on the top or bottom will give you the vertical positioning you want.
    you should then be able to float the navigation <div> to the right OR absolutely position it using Top & Left.

    At that point you could then add styling to individual ‘buttons / list items. So instead of adding cellspacing. Just add a bit of padding around each list item or the <a>.

    May 15, 2009 at 12:17 pm #57557
    nchipping
    Member

    I wasn’t able to fix it the way that you suggested…

    I tried adding a #navigation in the CSS like you said, and that div into the html, but it still doesn’t work. When I shrink a window, it still moves both my nav divs to the left and they won’t stay in the right place.

    Any other ideas?

    May 15, 2009 at 12:33 pm #57558
    apostrophe
    Participant

    Oh boy….. where to start?

    You have way, way too many divs in there, some of them not doing anything at all. Why use a table for the nav when a simple list will do?

    The simple solution to your problem is to set the headeracross.png as the body background, wrap everything else in div and center it with margin:0 auto;

    May 15, 2009 at 1:04 pm #57560
    nchipping
    Member

    I honestly don’t know exactly what I’m doing, because I’ve only learned what I know from books. I’m sure there is a much more simple way of doing things here (like apostrophe said), but I just don’t understand what that would be. If someone would be willing to give me an example of the correct coding for this, or just get on some IM with me to figure it out, that would be SUPER helpful.

    Sorry I don’t know much yet – I’ll get it down soon though!

    May 15, 2009 at 1:56 pm #57565
    TheDoc
    Member

    Here is an example of what your document should look like (starting from the body):

    Code:

    Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a risus dolor. Mauris sit amet ipsum sit amet mauris dictum pulvinar id at nisi.

    Clean and easy to manage!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.