www.webdeveloper.com
Results 1 to 5 of 5

Thread: Navigation Menu Position

  1. #1
    Join Date
    Jun 2011
    Posts
    64

    Question Navigation Menu Position

    I have a navigation menu under my content on my page (non-scrolling page) but for some reason it is floating around 30px under my content instead of flush with the bottom of my content where it needs to be. The problem is demonstrated here http://i52.tinypic.com/f2ljwn.jpg. How can I fix this?

    Code:
    <body bgcolor="#d5d5d5">
    
    	<!--<div id="wrap">-->
    
    	<div id="content">
        	
            <div id="left"> <a href="http://www.theregencyguesthouse.co.uk"><img src="images/logo.png" alt="The Regency Guset House" width="316" height="61" border="0" align="absmiddle" style="margin-top:80%; margin-left:-10%;" /></a>
        </div><!--END LEFT-->
    	<!-- InstanceBeginEditable name="content" -->
            
            <div id="right">
       	      <!-- Begin DWUser_EasyRotator -->
                    <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
                    <div class="dwuserEasyRotator" style="width: 100%; height: 100%; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-84-104-111-109-97-115-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47'}" data-ername="regencyguesthouse">
                      <div data-ertype="content" style="display: none;">
                        <ul data-erlabel="Main Category">
                          <li> <img class="main" src="images/DSC_0484.JPG" /> <img class="thumb" src="images/DSC_0484.JPG" /> </li>
                          <li> <img class="main" src="images/DSC_0473.JPG" /> <img class="thumb" src="images/DSC_0473.JPG" /> </li>
                          <li> <img class="main" src="images/DSC_0421.JPG" /> <img class="thumb" src="images/DSC_0421.JPG" /> </li>
                          <li> <img class="main" src="images/DSC_0419.JPG" /> <img class="thumb" src="images/DSC_0419.JPG" /> </li>
                        </ul>
                      </div>
                      <div data-ertype="layout" data-ertemplatename="NONE" style="">
                        <div class="erimgMain" style="position: position; left:0;right:0;top:0;bottom:0;" data-erconfig="{__numTiles:3, scaleMode:'scaleUpAndDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
                          <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
                            <div class="erimgMain_slide">
                              <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                            </div>
                          </div>
                          <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
                          <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
                        </div>
                        <div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
                          <br />
                          Need a powerful <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">Flash slideshow</a> creator with built-in iPhone/iPad/Android support?  EasyRotator is supported by the <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">XML Flash Slideshow v4 Software</a>. <br />
                          <br />
                          <a style="color:#FFF;" href="#" class="erabout_ok">OK</a> </div>
                        <noscript>
                          Powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy <a href="http://www.dwuser.com/easyrotator/">jQuery slider</a> builder from DWUser.com.
                        </noscript>
                      </div>
                    </div>
                    <!-- End DWUser_EasyRotator -->
          </div><!--END RIGHT-->
            <!-- InstanceEndEditable -->
            <br class="clearFloat" />
        
        
        <div id="nav">
        
        <div class="navMenu">
    		<ul>
    			<li id="currentpg"><a href="index.html">Home</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="about.html">About</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="gallery.html">Gallery</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="videos.html">Booking</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="contact.html">Contact</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
        
        <div class="navMenu">
    		<ul>
    			<li>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
       <br class="clearFloat" />
    </div><!--END NAV-->
    
    
    </div><!--END CONTENT-->
    
    <div id="filler">
    </div><!--END FILLER-->
    
    
    <!--</div><!--END WRAP-->
    
    </body>

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {
    	height:100%;
    	overflow:hidden;
    }
    
    * {
    	margin:0;
    	padding:0;
    }
    
    #content {
    	background-color:#ffffff;
    	width:1000px;
    	height:550px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:-10px;
    	border:60px solid #000000;
    }
    
    #left {
    	width:30%;
    	float:left;
    	border-right:1px dotted #333;
    	padding-left:10px;
    	padding-right:10px;
    	margin-bottom:20px;
    	height:100%;
    }
    
    #right {
    	width:65%;
    	float:right;
    	padding-left:10px;
    	padding-right:10px;
    	margin-bottom:20px;
    	height:100%;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    
    #filler {
    	background-color:#000;
    	height:10000px;
    	margin-left:auto;
    	margin-right:auto;
    	width:1000px;
    	border:60px solid #000000;
    }
    
    h1 {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	color:#0B0B0B;
    	margin-top:20px;
    }
    
    p {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:12px;
    	margin-top:20px;
    	margin-left:4px;
    	margin-right:20px;
    	margin-bottom:30px;
    }
    
    a {
    	color:#333;
    	text-decoration:none;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:12px;
    }
    
    a:hover {
    	color:#CCC;
    	text-decoration:underline;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:12px;
    }
    
    a:active {
    	text-decoration:underline;
    	color:#000;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:12px;
    }
    
    
    
    /*********************************NAVIGATION****************************************/
    
    
    .navMenu {
    	margin-top:20px;
    	margin-left:0px;
    	margin-right:60px;
    	margin-bottom:20px;
    	padding:0;
    }
    
    .navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:100%;
    }
    
    .navMenu li {
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:#FF0000;
    	margin-right:5px;
    	border-bottom-left-radius:10px;
    	border-bottom-right-radius:10px;
    }
    
    #currentpg {
    	background-color:#AA0000;
    }
    
    #currentpg a {
    	color:#FFFFFF;	
    }
    
    .navMenu ul li a {
    	text-align:center;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:9px;
    	font-weight:bold;
    	text-decoration:none;
    	width:60px;
    	height:100%;
    	display:block;
    	color:#FFFFFF;
    }
    
    .navMenu a:hover {
    	top:0px;
    	color:#FFFFFF;
    	text-decoration:none;
    	background-color:#AA0000;
    	border-bottom-left-radius:10px;
    	border-bottom-right-radius:10px;
    }
    
    .clearFloat {
    	clear:both;
    	margin:0;
    	padding:0;
    }

    Thanks
    Thomas

  2. #2
    Join Date
    Mar 2011
    Location
    Ponca City, OK
    Posts
    42
    Code:
    .navMenu {
    	margin-top:20px;
    	margin-left:0px;
    	margin-right:60px;
    	margin-bottom:20px;
    	padding:0;
    }
    Looks to be the issue

  3. #3
    Join Date
    Jun 2011
    Posts
    64

    Question Still not working...

    I have changed .navMenu to

    .navMenu {
    margin:0;
    padding:0;
    }

    but, although the gap is now less, there is still a gap

    Any ideas?

    Thanks
    Thomas

  4. #4
    Join Date
    Jul 2006
    Posts
    207
    The causes: The clear float line-break, the #left and #right margin-bottom.

    The solution: Remove the #left and #right margin-bottom's and change the .navMenu margin to '-10px 0 0'.

  5. #5
    Join Date
    Jun 2011
    Posts
    64

    Smile Thanks

    Thanks, that sorted the problem. Unfortunately now I have changed all my measurements from percentages to pixels the menu has disappeared altogether. If you have any ideas then the new thread is here http://webdeveloper.com/forum/showth...76#post1167076

    Thanks
    Thomas

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles