Navigation CSS / HTML

Question

I have this navigation and its not showing up in the position I want it to.

I would like to have it next to the logo on the right side, for some reason it shows up on the right at the very top. (kinda hard to describe, but im sure once u see it, u will know what I am talking about)

HTML CODE

<div class="header">

<div class="logo">
<img src="images/logo.jpg" width="350" height="120" border="0" />
</div><!--logo-->

<div class="nav">
Home | About Us | Gallery | Contact Us
</div><!--nav-->

</div><!--header-->

CSS CODE

.header{
width:1009px;
}

.logo{
float:left;
width:350px;
}

.nav{
float:right;
width:260px;
color:#FFF;
}

Also while I am here in IE 7 there is a gap between the topConent and the contentArea, also between the contentArea and bottomContent

http://jamessuske.com/thornwood2/

HTML CODE

<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->

<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->

<div class="contentArea">

</div><!--contentArea-->

<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->

<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->

Any help with either issue would be greatly appreciated.

Thanks

CSS CODE .topContent{ width:1009px; } .leftContent{ float:left; } .contentArea{ background:#FFF; width:912px; min-height:494px; float:left; } .rightContent{ float:right; } .bottomContent{ width:1009px; } — user979331
– user979331, Commented Oct 27, 2011 at 16:57

bobek · Accepted Answer · 2011-10-27 17:17:30Z

1

.nav { float:left; }

if you want it next to the picture. If you want it on the right but further down - just crop your picture. It has some whitespace up the top, or add margin-top:20px or so.

IE7 bug As of the bug you need to remove padding and margin from each picture and div so do something like this for each div.

.top-content
{
padding:0px;margin:0px;
}
.top-content img
{
padding:0px;margin:0px;
}

edited Oct 27, 2011 at 17:17

answered Oct 27, 2011 at 16:50

bobek

8,0388 gold badges41 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user979331 Over a year ago

well I still want it on the right side, just down, so its at the same level as the logo

bobek Over a year ago

add margin to it .nav {margin-top:10px;}

user979331 Over a year ago

Removing the padding and margin for the top and bottom images didn't work, there is still a gap in IE 7

bobek Over a year ago

you have to do all images in all divs .topContent, .leftContent. container - all of them.

Collectives™ on Stack Overflow

Navigation CSS / HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related