Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Navigation Menu Spillover

    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

    Code:
    <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 -->


    Code:
    .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
    Last edited by jjf83; 01-22-2013 at 06:47 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,177
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Take your menu out of the <div class="wrapper"> and put it into the <div id="top"> and position accordingly.

  • Users who have thanked sunfighter for this post:

    jjf83 (01-22-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •