...

View Full Version : Menu not on the right place, help please



mjs
06-23-2010, 02:00 PM
Thanks a lot and sorry for bothering.. I'm still a html/css code rookie and i need you help, please

http://promoiklan.com/images/menu.png
and please have a look here (http://promoiklan.com/)

Regards,

Rowsdower!
06-23-2010, 02:20 PM
Thanks a lot and sorry for bothering.. I'm still a html/css code rookie and i need you help, please

http://promoiklan.com/images/menu.png
and please have a look here (http://promoiklan.com/)

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.

mjs
06-23-2010, 04:19 PM
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 :


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,

Rowsdower!
06-23-2010, 05:09 PM
See the highlighted portions below for some of your cases of IDs being used more than once in a page:

<!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 (http://validator.w3.org/) and correct the errors that it shows you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum