Jump to content

1 ul inside another


virtualadz

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>

Link to comment
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.

Link to comment
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>

Link to comment
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.
Link to comment
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>

Link to comment
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> :)
Link to comment
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. :)
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...