Please help with my simple css problem. [Archive]

Click to See Complete Forum and Search --> : Please help with my simple css problem.

jeddik

08-14-2006, 03:59 AM

I am using the following style for my "button"s

#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;
}

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

<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>

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

WebJoel

08-14-2006, 09:52 AM

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

<!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>

DaveinLondon

08-14-2006, 10:04 AM

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 ?

scojo1

08-14-2006, 03:43 PM

WebJoel

08-14-2006, 06:27 PM

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

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

jeddik

08-15-2006, 06:53 AM

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 ?

<!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>

Thanks.

scojo1

08-15-2006, 01:18 PM

I think this is what you want (hopefully):

<!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: block;
float: left;
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>
<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>

</body>
</html>

jeddik

08-15-2006, 02:18 PM

Excellent - thats it - the block instead of inline !!!
and the float.

Thank you very much ! :)

scojo1

08-15-2006, 02:27 PM

Excellent - thats it - the block instead of inline !!!
and the float.

Thank you very much ! :)

You're quite welcome