Das ist mit CSS nicht ohne weiteres möglich. Diese Lösung funktioniert mit sogut wie allen Browsern.
Vollständiges Codebeispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
* { margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
text-align:center; /* horizontal centering for IE Win quirks */
}
#distance {
width:1px;
height:50%;
margin-bottom:-10em; /* half of container's height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:20em;
width:20em;
clear:left;
background-color:yellow; /* for demo purpose only */
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<p><strong>CSS vertical and horizontal centering<br>
using float and clear<br>crossbrowser</strong></p>
<p>This box stays in the middle of the browser's viewport.</p>
</div>
</body>
</html>
Verwandte Artikel:
Beispiel:
long div that is scrollable independently from the browser window * langer div Tag, der unabhängig vom Browserfenster scrollbar ist * even longer * noch längerer
Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Horizontaler Scrollbalken für ein DIV</title>
<style type="text/css">
div#thumbs {
height:40px; /* must be set due to IE height calculation */
overflow: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="thumbs">long div that is scrollable independently from the browser window *
langer div Tag, der unabhängig vom Browserfenster scrollbar ist</div>
</body>
</html>
Verwandte Artikel:
Für Einträge mit gleichem Abstand eignet sich:
li { display:inline; }
Für gleichverteilte Listeneinträge hingegen:
float:left;
Im zweiten Fall kann man noch eine Breite mit width vergeben, weil das li Element weiterhin als Block-Element behandelt wird. Damit ist die Breite eines Listeneintrages unabhängig von dessen Inhalt.
Bei Inline Elementen ist das nicht mehr möglich. Hier kann man mit padding für Abstand sorgen. Beispiel:
Stylesheet:
ul { padding-left:0; margin:0; }
li { display:inline; padding-left:45px; }
li.first { padding-left:0; }
HTML:
<ul>
<li class="first">Erster</li>
<li>Zweiter</li>
<li>Letzter</li>
</ul>
Verwandte Artikel: