Click to See Complete Forum and Search --> : [RESOLVED] Center <li> buttons with CSS?
Patchie
09-21-2008, 05:45 AM
Hello. I want to center <li> buttons with CSS.
Here is the site:
http://www.beeindruckende-technologie.de/spotlight/BUTTONTEST3.html
And here a picture that showes that there is more space left than right:
http://www.beeindruckende-technologie.de/spotlight/abstand.jpg
I got absolutly no idea how to do that.:confused:
Some one got an idea?
<!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"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>nummer1</title>
<style type="text/css" media="screen">
body { color: black; background-color: #CCCCFF; margin: 0pt; }
#mainWrapper { height: auto; width: 720px; margin: 0pt auto; background-color: white;
border: 1px solid #3749bc; overflow:hidden; }
ul {list-style-type: none; width:664px; margin:auto; padding:0;}
li {
border: 1px solid #000;
margin: 2px;
padding: 5px;
text-align: center;
width: 150px;
float: left;
}
.button:link { color: #0f659e;}
.button:visited { color: #0f659e;}
.button:hover { color: red; border: 1px solid red; }
.button:active { color: #0f659e; }
</style>
</head><body>
<div id="mainWrapper">
<img src="BUTTONTEST3_files/testbild.htm" alt="" border="0" width="720" height="160" />
<ul>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Item 1</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Contact</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Login</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Info</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Langer Text</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Contact</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Login</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Info</a></li>
<li class="button"><a href="http://www.beeindruckende-technologie.de/spotlight/%28EmptyReference%21%29">Langer Text</a></li>
</ul>
</div>
</body></html>
http://www.w3.org/Style/Examples/007/center
http://www.quirksmode.org/css/clearing.html
Patchie
09-21-2008, 01:03 PM
:) :)
Thank you very mutch!
Cool solution. And yehr, I made a mistake in the <il> with the width 5px :mad: did not saw that
Was to late yesterday but I wanted to finish my work :rolleyes:
deonetop
11-04-2009, 12:58 AM
thanks Fang :)