Forums

nchipping

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

StuartThom

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>.

nchipping

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?

apostrophe

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;

nchipping

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!

TheDoc

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

<body>

<div id=\"wrap\"><!--this isn't always necessary, but I like to use it for added control-->

<h1>Title</h1><!--you can edit h1 elements the same as you would a div in your CSS-->

<ul id=\"nav\"><!--you can edit ul elements the same as you would a div in your CSS-->
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
</ul><!--close nav-->

<div id=\"maincontent\">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a risus dolor. Mauris sit amet ipsum sit amet mauris dictum pulvinar id at nisi.</p>

    <div id=\"sidebar\">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a risus dolor. Mauris sit amet ipsum sit amet mauris dictum pulvinar id at nisi.</p>
    </div><!--close sidebar-->

</div><!--close maincontent-->

<div id=\"footer\">
<p>Lorem ipsum</p>
</div><!--close footer-->

</div><!--close wrap-->

</body>

Clean and easy to manage!

treehouse : what would you like to learn today?

Forums

My nav is moving, and I can't get it to stay in one place