Jump to content
virtualadz

1 ul inside another

Recommended Posts

Remove the header tags, they were causing unwanted space at top. Increase the gap between box by changing the values in the css, i have marked them in red.

<html><head><style>#left {  position : absolute;  width : 150px;}#middle {  position : absolute; margin : 0px 0px 0px [color="red"]200px[/color];  width : 150px;}#right { position : absolute;  margin : 0px 0px 0px [color="red"]400px[/color];  width : 150px;}.menus {border:1px solid black;  padding:3px;}.header{color:white;background-color:black;}</style></head><body><div id="left"><div class="menus"><div class="header">Menu1a</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li><li><a href="#">Etc</a></li></ul></div><br /><div class="menus"><div class="header">Menu1b</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div><div id="middle"><div class="menus"><div class="header">Menu2a</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div><br /><div class="menus"><div class="header">Menu2b</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div></div><div id="right"><div class="menus"><div class="header">Menu3a</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><br /><div class="menus"><div class="header">Menu3b</div><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div></body></html>

Share this post


Link to post
Share on other sites

thanks Scott, i will go now and test this with my site & IE and FF. :) ah to increase the height of the header background should i add height:25px and make it like this .header{color:white;background-color:black;height:25px}and to change the border-color:fromborder:1px solid black;toborder:1px solid white;are they both right.

Share this post


Link to post
Share on other sites

well forget about my earlier post, and see bhuratea.com/sitemap.php for what's coming, i think the code which you gave cannot ordinary text after it. just after the 2 closing div's try adding <br>Text is here, and the text will come at the top of the page behind the layouts. what could be done now.please use this code if you edit anything , as i customized it for to my site's look, so as i dont again have to customzie it.

<html><head><style>/*sitemap starts here*/#sleft {position : absolute;  width : 200px;}#smiddle {position : absolute; margin : 0px 0px 0px 300px;  width : 200px;}#sright {position : absolute;  margin : 0px 0px 0px 600px;  width : 200px;}.smenus {border:1px solid white; padding:3px;}.sheader {color:#000000;background-color:#D9D9D9;font-weight:bold;}.sitemap {color:#999999;}/*sitemap ends here*/</style></head><body><div id="sleft"><div class="smenus"><div class="sheader">Menu1a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu1b</div><ul class="sitemap"> <li><a href="#">Home</a></li>  <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div><div id="smiddle"><div class="smenus"><div class="sheader">Menu2a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu2b</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div></div><div id="sright"><div class="smenus"><div class="sheader">Menu3a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu3b</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div></body></html>

Share this post


Link to post
Share on other sites
i think the code which you gave cannot ordinary text after it. just after the 2  closing div's try adding <br>Text is here, and the text will come at the top of the page behind the layouts. what could be done now.
That's correct, this happens because the menus are position:absolute - this basically means they are not part of the page content anymore, like they float on top of the page.So what you would have to do is recreate blank space behind the menus with a dozen <br /> tags then put in your text/image.

Share this post


Link to post
Share on other sites

but giving so many <br>'s before will it not ruin ratings. is there any other possibilty. if not then i will go with <br>'sthis is the ode with a little top and bottom of my page

  <tr>        <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>      </tr>      <tr>        <td><table border="0" width="100%" cellspacing="0" cellpadding="2">          <tr>            <td class="main"><?php echo TEXT_INFORMATION; ?></td>          </tr> <tr>            <td class="main" ><div id="sleft"><div class="smenus"><div class="sheader">Menu1a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu1b</div><ul class="sitemap"> <li><a href="#">Home</a></li>  <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div><div id="smiddle"><div class="smenus"><div class="sheader">Menu2a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu2b</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li></ul></div></div><div id="sright"><div class="smenus"><div class="sheader">Menu3a</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><br /><div class="smenus"><div class="sheader">Menu3b</div><ul class="sitemap"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div></div></td></tr>        </table></td>      </tr>      <tr>

Share this post


Link to post
Share on other sites
but giving so many <br>'s before will it not ruin ratings. is there any other possibilty. if not then i will go with <br>'s
You could create a div and specify it's heigt as 500px or whatever, or use <h1> </h1> :)

Share this post


Link to post
Share on other sites
wow, after a long timei get what i want, thanks,, but if you notice in bhuratea.com/sitemap2.php, you will find that the headers, are within a coloured backgroun , i.e. the headings Menu1a, Menu1b, Menu2a, Menu2b etc. ... should have a coloured background, i did not want the borde so removed the solid black , with solid white. now only heading needs to be coloured, just like the current html tabled layout. many thanks
huh?!I think I am having a bad day, so sorry If I come off bluntly.If you are in such a hurry, you can search for a 3 column layout here:GoogleI love to help people as much as I can. I'm hardly an expert in anything, but I do like to provide a place where people can learn. That way you might find something that I need help with down the road.I apologize I didn't lay out your entire page for you. :)

Share this post


Link to post
Share on other sites
If you are in such a hurry, you can search for a 3 column layout here:GoogleI love to help people as much as I can. I'm hardly an expert in anything, but I do like to provide a place where people can learn. That way you might find something that I need help with down the road.I apologize I didn't lay out your entire page for you. :)

you dont need to apologize, you did whatever you could and that's nothing wrong. CHEER UP!!! :) thanks

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...