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?

Fang
09-21-2008, 07:15 AM
<!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 :)