1 ul inside another

[virtualadz]

hi, ihave my sitemap and it shows 3 errors, as it being the sitemap i dont want any validation errors(for bots). ----------------------------<tr> <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_TEA_HEALTHBENEFIT); ?>"><?php echo TWO_FOR_HEALTH; ?></a></li> <li><a href="<?php echo tep_href_link(FILENAME_TEA_ANTI); ?>"><?php echo TWO_ANTI; ?></a></li> <ul> <li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_ANTIOXIDANTS) . '">' . 'Flavonoids' . '</a>'; ?> </li> </ul></ul></td> </tr>----------------------------and the error isError Line 228 column 4: document type does not allow element "UL" here; assuming missing "LI" start-tag. <ul> i dont i can't use another ul before closing one, but i need to do it for my sitemap, anyway to validate it.

[S@m]

Depending on your doc type, you need to leave the LAST </li off.Then insert the <ulFinally, put the closing </li after the </ul Check out the code below. This is a great tutorial on lists:LINKAGETry using css to do your entire layout. That will cut your page sizes down a lot. But, that is up to you.

<tr><td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_TEA_HEALTHBENEFIT); ?>"><?php echo TWO_FOR_HEALTH; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_TEA_ANTI); ?>"><?php echo TWO_ANTI; ?></a><ul><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_ANTIOXIDANTS) . '">' . 'Flavonoids' . '</a>'; ?></li></ul></li></ul></td></tr>

[virtualadz]

thanks, it validates, i will think of changing my sitemap to css but later, for now i need a little help more regarding this sitemap's layout.

[virtualadz]

currently the layout of my site map is as such (please note i chave cut down all the ul ='s and li's to make it smaller). this a three column layout. i want to make for now only the three columns using css, but dont have any idea. also i want a 100px space in between the three layouts. any help appreciated.<table align="left" width="220"> <tr> <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo ONE_OUR_PRODUCTS; ?></a></b></td> </tr></table><table align="left" width="220"><tr> <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_WHERE_TO_BUY); ?>"><?php echo FOUR_WHERE_TO_BUY; ?></a></b></td> </tr></table> <table width="220"><tr> <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></b></td> </tr></table>

[S@m]

Here is some bits from a site map that I did.CSS

.sitemaptitle {background-color:#eee;border-bottom:1px solid #ccc;font-weight:bold;padding:5px 0 4px 5px;color:#000;}.sitemapL {float:left;margin-right:60px;position:relative;}.sitemapR {float:left;margin-right:60px;position:relative;}

HTML

	<div class="sitemaptitle">Category Title</div><br />         <div class="sitemapL"><strong>Section Title</strong><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a><br /></div>         <div class="sitemapR"><strong>Section Title</strong><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a></div>         <div class="sitemapR"><strong>Home Equity Loans</strong><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a><br />              - <a href="#" rel="next" title="#">Item</a></div>	<p style="clear:both;"> </p>	<div class="sitemaptitle">Category Title</div><br />         <div class="sitemapL"><strong>Section Title</strong><br />              - <a href="#" rel="next" title="#">Format repeats from here</a></div>

Just keep adding the sitemapR to add another column. To start another column below, just clear the float, and add a sitemapL. You can adjust the spacing in the CSS style(s).Hope that helps.

[virtualadz]

ok now i adding my ul and li's , will turn back here if any problems. thanks

[virtualadz]

??: why do use strong, i have <b></b> , any SEO speciality, also i have to remove <br /> with <br> this at the end, my site isnt strict XHTML.

[boen_robot]

??: why do use strong, i have <b></b> , any SEO speciality

It's for screen readers compatability. <b> means only bold, while <strong> also tells the screen reader to read the fragment more... um... strongly. If you want to customize <strong>s sreen reader behaviour, you can use aural properties, but the default is a stronger voice.

[virtualadz]

woops, boen_robot, i added more content to it after you replied, so here's it againalso i have to remove <br /> with <br> this at the end, my site isnt strict XHTML.perhaps if you like to see the current html table layout here it isww.bhuratea.com/sitemap.php

[S@m]

Yeah, depending on what doctype you have, on my pages they are:

<!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" lang="en" xml:lang="en">

So I need to use <br />I would use <strong> and not <b> no matter what I was working on.Your pages may/may not validate depening on what you have. You will have to fix accordingly.A little heads up - your page renders a little funny in firefox. The grey boxes don't connect, and the header/footer go off the page a little. (right side)

[virtualadz]

A little heads up - your page renders a little funny in firefox. The grey boxes don't connect, and the header/footer go off the page a little. (right side)

<{POST_SNAPBACK}>

does this happen only for my sitemap or for all other pages as well. i downloaded firefix many times, but it auto exits displaying "Unable to initialize memory stream", that's reason i am unable to see what exactly my site looks in FF.

[pulpfiction]

checked in IE, same problem with the gray boxes but the header and footer are good. then there's no gap between the column 1 and column 2 but a thin gap [white strip] appears between col 2 and 3....

[virtualadz]

thanks, i will address this later, now i am goign to convert the html to css. will be back after a hour or so.

[virtualadz]

i am at my wit's end, couldn make out anything, i need to make my site live as soon as possible. the layout which i want is this using css, in the code below i have given how i did it using tables. thanks for any help

<table align="left" width="220">          <tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo ONE_OUR_PRODUCTS; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link('index.php', 'cPath=21'); ?>"><?php echo ONE_DARJEELING; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=26'); ?>"><?php echo ONE_GREEN; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=25'); ?>"><?php echo ONE_BLACK; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=22'); ?>"><?php echo ONE_ASSAM; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=24'); ?>"><?php echo ONE_FLAVOURED; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=23'); ?>"><?php echo ONE_TEA_BAGS; ?></a></li>	<li><a href="<?php echo tep_href_link('index.php', 'cPath=27'); ?>"><?php echo ONE_BLENDED; ?></a></li></ul></td>          </tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_TEA_HEALTH); ?>"><?php echo TWO_TEA_HEALTH; ?></a></b></td></tr><tr><td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_TEA_HEALTHBENEFIT); ?>"><?php echo TWO_FOR_HEALTH; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_TEA_ANTI); ?>"><?php echo TWO_ANTI; ?></a><ul><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_ANTIOXIDANTS) . '">' . 'Flavonoids' . '</a>'; ?></li></ul></li></ul></td></tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_T_ZONE); ?>"><?php echo THREE_T_ZONE; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_T_HISTORY); ?>"><?php echo THREE_HISTORY; ?></a><ul><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_TIMELINE) . '">' . 'Timeline' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_NATIONS) . '">' . 'Tea Growing Regions' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_TYPES) . '">' . 'Tea Types' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_CUR_TREND) . '">' . 'Current Trend' . '</a>'; ?></li></ul></li>	<li><a href="<?php echo tep_href_link(FILENAME_T_GLOSSARY); ?>"><?php echo THREE_GLOSSARY; ?></a></li>	<li><a href="<?php echo tep_href_link(FILENAME_T_RECIPES); ?>"><?php echo THREE_RECIPES; ?></a></li>	<li><a href="<?php echo tep_href_link(FILENAME_T_DOWNLOADS); ?>"><?php echo THREE_DOWNLOADS; ?></a><ul><li><?php echo '<a href="' . tep_href_link(FILENAME_TEA_PHOTOS) . '">' . 'Tea Photos' . '</a>'; ?></li></ul></li></ul></td>          </tr></table><table align="left" width="220"><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_WHERE_TO_BUY); ?>"><?php echo FOUR_WHERE_TO_BUY; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo FOUR_BUY_ONLINE; ?></a></li>	<li><a href="<?php echo tep_href_link(FILENAME_LOCATE_A_STORE); ?>"><?php echo FOUR_LOCATE; ?></a></li></ul></td>          </tr>          <tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_TOOLS); ?>"><?php echo FIVE_TOOLS; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo FIVE_CURRENCY; ?></a></li>	<li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo FIVE_CON_CAL; ?></a></li>	<li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo FIVE_WORLD_CLOCK; ?></a></li></ul></td>          </tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_INFO); ?>"><?php echo SIX_INFO; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_NEWSROOM); ?>"><?php echo SIX_NEWSROOM; ?></a></li></ul></td>          </tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_ABOUTUS); ?>"><?php echo SEV_ABOUT; ?></a></b></td></tr><tr><td height="20"></td></tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><?php echo BOX_HEADING_INFORMATION; ?></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><a href="<?php echo tep_href_link(FILENAME_CONTACT_US); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_CONDITIONS); ?>"><?php echo BOX_INFORMATION_CONDITIONS; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_PRIVACY); ?>"><?php echo BOX_INFORMATION_PRIVACY; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_SHIPPING); ?>"><?php echo BOX_INFORMATION_SHIPPING; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_FAQ); ?>"><?php echo BOX_INFORMATION_FAQ; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_WHOLESALE); ?>"><?php echo BOX_INFORMATION_WHOLESALE; ?></a></li><li><a href="<?php echo tep_href_link(FILENAME_SITEMAP); ?>"><?php echo BOX_INFORMATION_SITEMAP; ?></a></li></ul></td>          </tr></table>  <table width="220"><tr>            <td class="main" bgcolor="#D9D9D9"><b><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_EDIT, '', 'SSL') . '">' . 'Registration Information' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL') . '">' . 'Address Book' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL') . '">' . 'Change Password' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' . 'Order History' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL') . '">' . 'Newsletter Subscription' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_NOTIFICATIONS, '', 'SSL') . '">' . 'Product Notifications' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_GV_SEND, '', 'SSL') . '">' . 'Send Gift Voucher' . '</a>'; ?></li></ul></td>          </tr>          <tr>            <td class="main" bgcolor="#D9D9D9"><b><?php echo '<a href="' . tep_href_link(FILENAME_ALL_PRODUCTS) . '">' . 'Buy' . '</a>'; ?></b></td></tr><tr>              <td class="main"><ul class="sitemap"><li><?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . 'Register to Buy' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . 'Shopping Cart' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . 'Checkout' . '</a>'; ?></li></ul></td>          </tr><tr>            <td class="main" bgcolor="#D9D9D9"><b><?php echo '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . 'Search' . '</a>'; ?></b></td></tr><tr><td height="20"></td></tr><tr>               <td class="main" bgcolor="#D9D9D9"><b><?php echo TEXT_EXTRAS; ?></b></td></tr><tr><td><ul><li><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . 'New Products' . '</a>'; ?></li>	<li><?php echo '<a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . 'Specials' . '</a>'; ?></li><li><?php echo '<a href="' . tep_href_link(FILENAME_REVIEWS) . '">' . 'Product Reviews' . '</a>'; ?></li></ul></td>          </tr></table>  

[S@m]

No offence, but I think you will find this SO much cleaner/easier.

<!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">/* GENERAL DOCUMENT SETTINGS */body, html{background-color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;margin:20px 0 0 20px;padding:0;}img{border:none;padding:0;margin:0;}#wrapper{margin:0;padding:0;}h4{margin:0;padding:0;font-size:12px;}#clear{clear:both}/* BOX SETTINGS */.box{width:200px;float:left;margin-right:60px;position:relative;padding:0;border:1px solid #39c;background-color:#fff;}.boxtitle{background-color:#39c;margin:0;padding:5px;color:#fff;text-align:center;}.box ul{list-style-type:none;margin:0;padding:5px 0 5px 5px;}.box ul li a{text-decoration:none;color:#666;margin:0;padding:0;}.box ul li a:hover{text-decoration:none;color:#f30;margin:0;padding:0;}.box ul li ul{list-style-type:none;margin:0;padding:0 0 0 5px;}.box ul li ul li a{text-decoration:none;color:#666;margin:0;padding:0 0 0 10px;}.box ul li ul li a:hover{text-decoration:none;color:#f30;margin:0;padding:0 0 0 10px;}</style></head><body><div id="wrapper"><!-- box 1 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a>  <ul>  	<li><a href="#" rel="" title="Item">Item</a></li>  	<li><a href="#" rel="" title="Item">Item</a></li>  	<li><a href="#" rel="" title="Item">Item</a></li>  </ul></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 1 --><!-- box 2 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 2 --><!-- box 3 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 3 --><div id="clear"> </div><!-- box 4 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a>  <ul>  	<li><a href="#" rel="" title="Item">Item</a></li>  	<li><a href="#" rel="" title="Item">Item</a></li>  	<li><a href="#" rel="" title="Item">Item</a></li>  </ul></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 4 --><!-- box 5 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 5 --><!-- box 6 --><div class="box">	<div class="boxtitle"><h4>Heading</h4></div>	<ul>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>  <li><a href="#" rel="" title="Item">Item</a></li>	</ul></div><!-- end box 6 --></div></body></html>

No tables all CSS driven. 1/2 the file size. CSS (can) be a beautiful thing. Unless it's not doing what you want, then it's a pain. :)Hope that helps.

[virtualadz]

thanks, but the boxes are aligned to each other, you see bhuratea.com/sitemap.php , and will note that the tools box is a bit down, i want tools straight after where to buy, i think you arranged each box, is a way to change it.

[virtualadz]

just one more thing:this is the current pure css sitemap: www.bhuratea.com/sitemap.phpand this the html table based sitemap: www.bhuratea.com/sitemap2.phpnow suppose if we take the table (sitemap2.php) based layout as css (sitemap.php). so taking the table (sitemap2.php) based layout as css (sitemap.php), what i only need there is a space between the three columns. in your css layout the difference i am ponting out is: in the current css the next heading only comes after takign the full height of the longest header. for example, the tools header comes after the our products header finishing. whereas in the table based, there is no difference where the height of the first colums's first header ends, the tools menu is shown right after the where to buy, unlike the css where there is a lot of space. most probably this image will explain more clearly

[scott100]

for example, the tools header comes after the our products header finishing. whereas in the table based, there is no difference where the height of the first colums's first header ends, the tools menu is shown right after the where to buy, unlike the css where there is a lot of space. most probably this image will explain more clearly

Ok so you create a 3 column layout, then you put the menu boxes in that... simplehttp://scott100.atspace.com/3Cols.htm

[virtualadz]

the url gives a cannot find server error.

[scott100]

the url gives a cannot find server error.

<{POST_SNAPBACK}>

I think we had this problem before, there must be some kind of problem with you accessing that site

<html><head><style>#left {  position : absolute;  width : 150px;}#middle {  position : absolute;  margin : 0px 0px 0px 170px;  width : 150px;} #right {  position : absolute;  margin : 0px 0px 0px 330px;  width : 150px;} .menus{  border:1px solid black;  padding:3px;}</style></head><body><div id="left"><div class="menus"><h2>Menu1a</h2><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"><h2>Menu1b</h2><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"><h2>Menu2a</h2><ul>  <li><a href="#">Home</a></li>  <li><a href="#">About</a></li></ul></div><br /><div class="menus"><h2>Menu2b</h2><ul>  <li><a href="#">Home</a></li>  <li><a href="#">About</a></li></ul></div></div><div id="right"><div class="menus"><h2>Menu3a</h2><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 /><br /><br /><br /><div class="menus"><h2>Menu3b</h2><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>

[virtualadz]

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 thanksand by the way i could see your site, i forgot the other way around.

[scott100]

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

Yeah just remove the borders, i put them there so that you could visulize how it worked.as for the coloured headings just add something like this to the css

h2{color:white;background-color:black;}

That would give you the effect your after

and by the way i could see your site, i forgot the other way around.

Other way around?

[virtualadz]

Other way around?  :blink:

safari test ok hi this is the code now what i need more here is : i have kept the border to explain what i need1.you will notice that , there is space between the top border of each box and it's heading, i want to decrease the space.2. second how could there be some more space between the 3 columns, i want to add some more space.3. the proecudure you told to make the heading background coloured, what i need there is , the colour like to be of a td's <td bgcolor="black"> , here in your code you can select the text and then it's background becomes white, i dont want this to happen, or in other words, it shoul be like a fixed background of td.

h4{color:white;background-color:black;}

thanks very much, this is the full code:

<html><head><style>#left {  position : absolute;  width : 150px;}#middle {  position : absolute; margin : 0px 0px 0px 170px;  width : 150px;}#right { position : absolute;  margin : 0px 0px 0px 330px;  width : 150px;}.menus {border:1px solid black;  padding:3px;}h4{color:white;background-color:black;}</style></head><body><div id="left"><div class="menus"><h4>Menu1a</h4><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"><h4>Menu1b</h4><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"><h4>Menu2a</h4><ul>  <li><a href="#">Home</a></li>  <li><a href="#">About</a></li></ul></div><br /><div class="menus"><h4>Menu2b</h4><ul>  <li><a href="#">Home</a></li>  <li><a href="#">About</a></li></ul></div></div><div id="right"><div class="menus"><h4>Menu3a</h4><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"><h4>Menu3b</h4><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>

[scott100]

1&2 see line spacing: http://www.w3schools.com/css/tryit.asp?fil...css_line-height3 I'm not quite sure what you mean section of the top part of the div with a span or another div...

[virtualadz]

1. i am not talking about line space ratherthe space between the top border of a menu and it's heading title, a pic's worth a thousand words, i have marked them with a pencil i.e. i want to decrease that space. (makred with blue arrows)2. i want to increase the gap in between the three columns (marked with red arrows in the image)3. about the header background:i will come to that later. 4. thanks