...

View Full Version : Navigation Menu Spillover



jjf83
01-22-2013, 06:40 PM
I have a navigation menu that I am struggling to fit in this defined area. If I make the width of the navigation menu too long, it seems to clear the area. Is there a way to make the width of this menu long enough to work with, but not clear the area in which I want it located. I basically want the menu to spillover the parent div.

I created an illustration that will give you the best idea what I'm trying to do
http://img163.imageshack.us/img163/6871/spillover.jpg



<div id="top">
<div class="wrapper">

<div id="logo">
</div> <!-- logo end -->


<div id="menu">
<ul>

<a title="About Us" alt="About Us" href="about.html">
<li>
<p class="navtitle">About Us</p><p class="navp">Pledge of Service</p>
</li>
</a>

<a title="F.A.Q" alt="About Us" href="faq.html">
<li>
<p class="navtitle">F.A.Q</p><p class="navp">Fence Questions</p>
</li>
</a>

<a title="News" alt="News" href="news.html">
<li>
<p class="navtitle">News</p><p class="navp">The Latest</p>
</li>
</a>

<a title="Contact" alt="Contact" href="contact.html">
<li>
<p class="navtitle">Contact</p><p class="navp">Get in Touch</p>
</li>
</a>

</ul>
</div> <!-- menu end -->

</div> <!-- wrapper end -->
</div> <!-- top end -->






.wrapper {
margin: 0 auto;
width: 960px;
}

#top {
background:url(../images/topbg.jpg);
background-repeat:repeat-x;
height:131px;
position:relative;
}

#logo {
float:left;
}

#menu {
float:right;
width:758px;
}

#menu ul {
margin:0px;
padding:0px;
}

#menu li {
display:block;
float:left;
padding:22px 32px 24px 15px;
list-style-type:none;
position:relative;
}




Any help or suggestions are appreciated. Thanks in advance

sunfighter
01-22-2013, 07:29 PM
Take your menu out of the <div class="wrapper"> and put it into the <div id="top"> and position accordingly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum