scott100 Posted June 17, 2006 Share Posted June 17, 2006 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 More sharing options...
virtualadz Posted June 17, 2006 Author Share Posted June 17, 2006 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 More sharing options...
virtualadz Posted June 18, 2006 Author Share Posted June 18, 2006 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 More sharing options...
scott100 Posted June 18, 2006 Share Posted June 18, 2006 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 More sharing options...
virtualadz Posted June 18, 2006 Author Share Posted June 18, 2006 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 More sharing options...
scott100 Posted June 18, 2006 Share Posted June 18, 2006 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 More sharing options...
virtualadz Posted June 18, 2006 Author Share Posted June 18, 2006 used <h1> </h1>, and it has now corrected, but will wait and see until i add my links to it. thanks Link to comment Share on other sites More sharing options...
virtualadz Posted June 18, 2006 Author Share Posted June 18, 2006 thanks very much , displays as intended, bhuratea.com/sitemap.php Link to comment Share on other sites More sharing options...
S@m Posted June 19, 2006 Share Posted June 19, 2006 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 thankshuh?!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 More sharing options...
virtualadz Posted June 19, 2006 Author Share Posted June 19, 2006 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. <{POST_SNAPBACK}> 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now