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 4 of 4
  1. #1
    mjs
    mjs is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    97
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Menu not on the right place, help please

    Thanks a lot and sorry for bothering.. I'm still a html/css code rookie and i need you help, please


    and please have a look here

    Regards,

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by mjs View Post
    Thanks a lot and sorry for bothering.. I'm still a html/css code rookie and i need you help, please


    and please have a look here

    Regards,
    Add clear:left; to the style for "#leftpanel" and "#menuL_buttom" and those will slide under your menu as desired.

    Also, you need to review your use of ID for these items. You have used the same ID more than once, which is not allowed. Some of your IDs should change to classes on this page.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    mjs
    mjs is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    97
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Add clear:left; to the style for "#leftpanel" and "#menuL_buttom" and those will slide under your menu as desired.
    OK, so many thanks for your attention, i very appreciated, and my problem fixed, but i'm sorry if i can understand your message :
    Quote Originally Posted by Rowsdower! View Post
    Also, you need to review your use of ID for these items. You have used the same ID more than once, which is not allowed. Some of your IDs should change to classes on this page.
    could you please give me an example?

    and the css code inside look like:

    #leftpanel{float: left; width:199px; height:auto; background-image:url(back_left.png); background-repeat:repeat-y;}
    #menuL_buttom{float:left; width:199px; height:58px; background-image:url(menuL_buttom.png);}
    HTML code:
    <div id="leftpanel">
    <div align="justify">
    <span class="smalltitle">&nbsp;</span>
    </div>
    </div>
    <div id="menuL_buttom">
    <div align="justify">
    <span class="smalltitle">&nbsp;</span>
    </div>
    </div>
    Regards,

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    See the highlighted portions below for some of your cases of IDs being used more than once in a page:
    Code:
    <!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 name="author" content="DoHoZ Hosting (www.dohoz.com)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>DoHoZFoto Gallery |:| </title>
    	<script src="includes/lightbox/lightbox.js" type="text/javascript"></script>
    	<link href="includes/lightbox/lightbox.css" rel="stylesheet" type="text/css" />
    	<link href="templates/images/style.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    	<div id="page" align="center">
    		<div id="content" style="width:800px">
    			<div id="logo">
    
    				<div align="left" class="address">
    								</div>
    			</div>
    
    			<div id="topheader">
    			<span class="titletext">My World, My Life, My Pride</span>
    			</div>
    			
    			<div id="menuL">
    			</div>
    			<div id="menuR">
    			</div>
    			
    			<div id="submenu">
    
    				<div align="left" class="smallgraytext" style="padding:8px;">
    					<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a>				</div>
    
    			</div>
    
    			<div id="menuBorderL">
    				<div class="smallwhitetext">
    				Wednesday, 23 June 2010				</div>
    			</div>
    			<div id="">
    			</div>
    				
    		<div id="contenttext">
    
    			<div id="rightpanel">&nbsp;
    			</div>
    			<div class="bodytext" align="justify">
    						<div id="homepage">
    		<h3><font color="#FF6600">DoHoZ</font>Gallery</h3>
    
    			<div class="center">
    		<h3>Latest Photos Added<a href="#" onclick="javascript:popup_latestupdate();" title="Notes About Latest Added Photos"></a></h3><br />
    
    			        	<div class="thumb_wrapper tile">
    					<div class="title">Shot 3</div>
    	        		<div class="container">
    	            		<div class="shadow">&nbsp;</div>
    						<div class="thumb"><a href="?dir=My+Shots&pic=Shot+3"><img src="data/thumbdata_TXkgU2hvdHNdfFtTaG90XzMuanBnXXxbMTI3Njc5MTU0MAjp.jpg" border="0"/></a></div>
    					</div>
    				</div>
    					        	<div class="thumb_wrapper tile">
    
    					<div class="title">Shot 1</div>
    	        		<div class="container">
    	            		<div class="shadow">&nbsp;</div>
    						<div class="thumb"><a href="?dir=My+Shots&pic=Shot+1"><img src="data/thumbdata_TXkgU2hvdHNdfFtTaG90XzEuanBnXXxbMTI3Njc5MTU0MAjp.jpg" border="0"/></a></div>
    					</div>
    				</div>
    					        	<div class="thumb_wrapper tile">
    					<div class="title">Shot 4</div>
    
    	        		<div class="container">
    	            		<div class="shadow">&nbsp;</div>
    						<div class="thumb"><a href="?dir=My+Shots&pic=Shot+4"><img src="data/thumbdata_TXkgU2hvdHNdfFtTaG90XzQuSlBHXXxbMTI3Njc5MTU0MAjp.jpg" border="0"/></a></div>
    					</div>
    				</div>
    					        	<div class="thumb_wrapper tile">
    					<div class="title">Shot 2</div>
    	        		<div class="container">
    
    	            		<div class="shadow">&nbsp;</div>
    						<div class="thumb"><a href="?dir=My+Shots&pic=Shot+2"><img src="data/thumbdata_TXkgU2hvdHNdfFtTaG90XzIuanBnXXxbMTI3Njc5MTU0MAjp.jpg" border="0"/></a></div>
    					</div>
    				</div>
    					</div>
    	
    	</div>
    				</div>
    			<div id="rightpanel">&nbsp;
    			</div><br />
    
    			<div id="">
    			<span class="smallgraytext">
    							</div>
    			<div id="rightpanel">&nbsp;
    			</div>
    		</div>
    
    			<div id="leftpanel">
    				<div align="justify">
    
    					<span class="smalltitle"><ul><li class="home_button"><a href="?">Home</a></li><li ><a href="?dir=Interior" title="Interior">Interior</a></li>        <li ><a href="?dir=My+Shots" title="My Shots">My Shots</a></li></ul></span>
    				</div>
    			</div>
    			<div id="leftpanel">
    				<div align="justify">
    					<span class="smalltitle">&nbsp;</span>
    				</div>
    
    			</div>
    			<div id="menuL_buttom">
    				<div align="justify">
    					<span class="smalltitle">&nbsp;</span>
    				</div>
    			</div>
    			
    			<div id="footer" class="smallgraytext">
    			</div>
    		</div>
    
    	</div>
    
    <!-- offsite thumbnail file creator -->
    	<iframe id="thumbgen" name="thumbgen" style="width:0px; height:0px; border: 0px" src="thumb_generator.php?dir="></iframe>
    	</body>
    </html>
    As you can see, you have used the IDs of "rightpanel" and "leftpanel" more than once each. There may be more IDs being duplicated, but these are the two that caught my eye.

    Just run your code through the html validator and correct the errors that it shows you.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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