Please help with my simple css problem.

@jeddikAug 14.2006

I am using the following style for my “button”s

[CODE] #menu a, #menu a:visited { text-decoration:none; text-align:center; background-color:yellow; font-size:0.8em; font-family:Tahoma; font-weight:bold; color:blue; display:block; width:10 em; border:2px solid #fff; border-color:#def #678 #345 #cde; padding:0.25em; margin:0.5em ; }

#menu a:hover { top:2px; left:2px; color:#fff; border-color:#345 #cde #def #678; background-color:#cc6699; }

[/CODE]

they form a column of “buttons” when use with these links:

[code=html] <div id=”menu” style=’position:absolute; left: 2px; top:250px’> <a href=”index.php”>Home</a> <a href=”<?php echo “a_run_top.php?m=LS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Local Services</a> <a href=”<?php echo “a_run_top.php?m=RF&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Rooms & Flats</a> <a href=”<?php echo “a_run_top.php?m=JO&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Jobs on offer</a> <a href=”<?php echo “a_run_top.php?m=EC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Events Calender</a> <a href=”<?php echo “a_run_top.php?m=CB&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Cars Bikes Boats</a> <a href=”<?php echo “a_run_top.php?m=PC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Pets Corner</a> <a href=”<?php echo “a_run_top.php?m=IS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0″; ?>” >Items for sale</a> </div> [/code]

I want to repeat them at the botton of my page in this format:

link link link link
link link link link

i.e. two rows of four “buttons”

I can not see how I need to change my css or my layout code in order to do this though !

Would appreciate some help !
Thanks

to post a comment

CSS

8 Comments(s) _↴

@WebJoelAug 14.2006 — #I haven't yet quite figured out a uniform width for each LI, but this gets you started:

[code=html]<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="" />
 <meta name="Author" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <style type="text/css">
 body, html   {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
 #menu a, #menu a:visited {
 text-decoration:none; 
 text-align:center; 
 background-color:yellow;
 font-size:0.8em;
 font-family:Tahoma; 
 font-weight:bold;
 color:blue; 
 
 border:2px solid #fff;
 border-color:#def #678 #345 #cde;
 padding:0.25em;
 margin:0.5em ;
 }
 
 #menu a:hover {
 top:2px;
 left:2px;
 color:#fff;
 border-color:#345 #cde #def #678;
 background-color:#cc6699; 
 }
 
 #menu ul li	  {display:inline; width:125px; margin:2px 0px 0 0; border:none;}
 ul li	{width:150px;}
 </style>
 </head>
 
 <body>
 <div id="menu" style='position:absolute; left: 2px; top:50px;'>
 <ul style="list-style-type: none; width:600px; height:35px;">
 <li><a href="index.php">Home</a></li>
 <li><a href="<?php echo "a_run_top.php?m=LS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Local Services</a></li>
 <li><a href="<?php echo "a_run_top.php?m=RF&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Rooms & Flats</a></li>
 <li><a href="<?php echo "a_run_top.php?m=JO&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Jobs on offer</a></li>
 </ul>
 </div>
 
 <div id="menu" style='position:absolute; left: 2px; top:90px;'>
 <ul style="list-style-type: none; width:700px; height:35px;">
 <li><a href="<?php echo "a_run_top.php?m=EC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Events Calender</a> </li>
 <li><a href="<?php echo "a_run_top.php?m=CB&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Cars Bikes Boats</a></li>
 <li><a href="<?php echo "a_run_top.php?m=PC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Pets Corner</a> </li>
 <li><a href="<?php echo "a_run_top.php?m=IS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Items for sale</a> </li>
 </ul>
 
 
 
 
 </body>
 </html>
 [/code]

@DaveinLondonAug 14.2006 — #Yes - I tried it and its good - but as you say the width needs sorting out as it keeps changing.

I tried putting width:200px; in the css but it didn't do any good !!!

How come the single column version has a constant width and this dosn't ?

@scojo1Aug 14.2006 — #Yes - I tried it and its good - but as you say the width needs sorting out as it keeps changing.

I tried putting width:200px; in the css but it didn't do any good !!!

How come the single column version has a constant width and this dosn't ?[/QUOTE]

to have constant width, try adding display:block to WebJoel's example

@WebJoelAug 14.2006 — #to have constant width, try adding display:block to WebJoel's example[/QUOTE]

Yes, -I think I changed that and didn't see what I had hoped to see, but didn't change it back. "block" should restore width control

@jeddikauthorAug 15.2006 — #I tried putting in the display:block;

and the widths all changed to very wide (maybe 400px ?)

so I then added the width:10 em; after the block but it didn't make adifference.

the single page scrit now looks like this:

Anyone with more ideas on solving this ?

[code=php]
 <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html> 
 <head> 
 <title> New Document </title> 

 <meta name="Generator" content="" /> 

 <meta name="Author" content="" /> 

 <meta name="Keywords" content="" /> 

 <meta name="Description" content="" /> 
 <style type="text/css"> body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */ 
 #menu a, #menu a:visited { 
 text-decoration:none; 
 text-align:center; 
 background-color:yellow; 
 font-size:0.8em; 
 font-family:Tahoma; 
 font-weight:bold; 
 color:blue;
 display:block; 
 width:10 em;
 border:2px solid #fff; 
 border-color:#def #678 #345 #cde; 
 padding:0.25em; 
 margin:0.5em ; 
 } 
 
 #menu a:hover { 
 top:2px; 
 left:2px; 
 color:#fff; 
 border-color:#345 #cde #def #678; 
 background-color:#cc6699; 
 } 
 
 #menu ul li {
 display:inline; 
 margin:2px 0px 0 0; 
 border:none;
 } 
 
 ul li {width:150px;}
 
 </style> 
 </head> 
 <body> 
 
 <div id="menu" style='position:absolute; left: 2px; top:50px;'> 
 <ul style="list-style-type: none; width:600px; height:35px;"> 
 <li><a href="index.php">Home</a></li> 
 <li><a href="<?php echo "a_run_top.php?m=LS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Local Services</a></li> 
 <li><a href="<?php echo "a_run_top.php?m=RF&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Rooms & Flats</a></li> 
 <li><a href="<?php echo "a_run_top.php?m=JO&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Jobs on offer</a></li> 
 </ul> 
 </div> 
 
 <div id="menu" style='position:absolute; left: 2px; top:90px;'> <ul style="list-style-type: none; width:700px; height:35px;"> 
 <li><a href="<?php echo "a_run_top.php?m=EC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Events Calender</a> </li> 
 <li><a href="<?php echo "a_run_top.php?m=CB&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Cars Bikes Boats</a></li> 
 <li><a href="<?php echo "a_run_top.php?m=PC&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Pets Corner</a> </li> 
 <li><a href="<?php echo "a_run_top.php?m=IS&a=$N_ow&b=$N_city&c=$N_area&d=$N_cat&e=$sorter&f=0&g=1&h=0"; ?>" >Items for sale</a> </li> 
 </ul> 
 </body> 
 </html>
 [/code]

Thanks.

@scojo1Aug 15.2006 — #I think this is what you want (hopefully):

<i>
 </i>&lt;!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; New Document &lt;/title&gt;  <br/>
 &lt;meta name="Generator" content="" /&gt;  <br/>
 &lt;meta name="Author" content="" /&gt;  <br/>
 &lt;meta name="Keywords" content="" /&gt;  <br/>
 &lt;meta name="Description" content="" /&gt;
 &lt;style type="text/css"&gt; body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
 #menu a, #menu a:visited {
 text-decoration:none;
 text-align:center;
 background-color:yellow;
 font-size:0.8em;
 font-family:Tahoma;
 font-weight:bold;
 color:blue;
 display:block;
 width:10 em;
 border:2px solid #fff;
 border-color:#def #678 #345 #cde;
 padding:0.25em;
 margin:0.5em ;
 }
 
 #menu a:hover {
 top:2px;
 left:2px;
 color:#fff;
 border-color:#345 #cde #def #678;
 background-color:#cc6699;
 }
 
 #menu ul li {
 display: block;
 float: left;
 margin:2px 0px 0 0;
 border:none;
 }
 
 ul li {width:150px;}
 
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="menu" style='position:absolute; left: 2px; top:50px;'&gt;
 &lt;ul style="list-style-type: none; width:600px; height:35px;"&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=LS&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Local Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=RF&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Rooms &amp; Flats&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=JO&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Jobs on offer&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;ul style="list-style-type: none; width:600px; height:35px;"&gt;
 &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=LS&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Local Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=RF&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Rooms &amp; Flats&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="&lt;?php echo "a_run_top.php?m=JO&amp;a=$N_ow&amp;b=$N_city&amp;c=$N_area&amp;d=$N_cat&amp;e=$sorter&amp;f=0&amp;g=1&amp;h=0"; ?&gt;" &gt;Jobs on offer&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@jeddikauthorAug 15.2006 — #Excellent - thats it - the block instead of inline !!!

and the float.

Thank you very much ! ?

@scojo1Aug 15.2006 — #Excellent - thats it - the block instead of inline !!!

and the float.

Thank you very much ! ?[/QUOTE]

You're quite welcome

Also in #CSS _↴

custom css text width for menu how to make the divs side by side Can't scroll to the bottom, on IE

Success!

Help @jeddik spread the word by sharing this article on Twitter...

Tweet This

Please help with my simple css problem.

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Please help with my simple css problem.

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴