Wer zuviel Zeit hat, kann sich ja folgendes Problem ansehen:
Und zwar will ich meinen Navigationscontainer vertikal zentrieren. Viel erklären bringt da nichts, einfach folgenden Quelltext in einen Editor einfügen, sehen und - staunen :D
Mit dem Befehl vertical-align: middle; haut das jedenfalls nicht hin.
Kann jemand helfen?
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Robert Schenkenfelder" />
<meta name="description" content="Layout mit Hilfe von CSS" />
<title>Testdatei CSS-Layout</title>
<style type="text/css">
<!--
/* ------------------------------------ */
/* Allgemeine Definitionen */
/* ------------------------------------ */
body {
font-family: Verdana;
font-size: 12px;
background-color: #bdbec6;
text-align: center;
margin: 0px;
}
h1 {
font-size:18px;
color: #000000;
margin-bottom: 0px;
}
h2 {
font-size: 16px;
color: #000000;
}
h3 {
font-size: 14px;
color:#000000;
}
code {
font-size: 14px;
color: #0000ff;
}
pre {
font-size: 14px;
color: #0000ff;
padding: 5px;
}
a:link, a:visited, a:active, a:hover {
text-decoration: underline;
font-weight: normal;
color: #ff0000;
font-size: 12px;
}
a:active, a:hover {
color: #009999;
}
/* ------------------------------------ */
/* Navigationseinstellungen */
/* ------------------------------------ */
a.menu {
line-height: 23px;
height: 23px;
display: block;
color: #666666;
text-decoration: none;
font-weight: bold;
background-color: #EEEEEE;
border: 1px solid #666666;
border-left-width: 0px;
border-right-width: 1px;
border-right-color: #000000;
border-bottom-color: #000000;
border-top-color: #fff;
padding-left: 10px;
}
a.menu:link, a.menu:visited {
color: #666666;
background-color: #EEEEEE;
text-decoration: none;
font-weight: bold;
}
a.menu:active, a.menu:hover {
background-color: #999999;
color: #FFFFFF;
}
.menutitle{
font-weight: bold;
font-size: 11px;
font-family: Verdana,Arial,sans-serif;
text-align: right;
margin: 2px;
background-color: #CCCCCC;
}
.menucontainer {
width: 120px;
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: outside;
border: 1px solid #666666;
border-bottom-width: 0px;
vertical-align: middle; // haut da ned hin ... ^^
background-color: #EEEEEE;
}
/* ------------------------------------ */
/* Containereinstellungen */
/* ------------------------------------ */
.main {
width: 760px;
margin: 0px auto;
text-align: left;
background-color: #D5EBFF;
border: 1px solid #000000;
}
.header {
height: 34px;
padding: 5px;
background-color: #D5EBFF;
border-bottom: 1px solid #000;
}
.banner {
float: right;
width: 300px;
height: 31px;
margin-left: 3px;
border: 0px;
}
.left {
background-color: #FFFFFF;
width: 128px;
height: 463px;
float: left;
}
.content {
border: 0px solid #efeff7;
background-color: #ffffff;
width: 612px;
height: 442px;
overflow: auto;
float: right;
padding: 10px 10px;
display: block;
}
.logo {
float: none;
text-align: center;
width: 400px;
height: 400px;
margin-left: 20%;
border: 0px;
}
//-->
</style>
</head>
<body>
<div class="main">
<div class="header">
<img src="header.jpg" class="banner" alt="krensche.design" />
<h1>Startseite</h1>
</div>
<div class="left">
<div class="menucontainer">
<p class="menutitle">.main</p>
<a class="menu" href="#">Home</a>
<a class="menu" href="#">News</a>
<a class="menu" href="#">About</a>
<a class="menu" href="#">Guestbook</a>
<a class="menu" href="#">Forum</a>
<a class="menu" href="#">Links</a>
<a class="menu" href="#">Impressum</a>
<a class="menu" href="#">Disclaimer</a>
</div>
<div class="menucontainer">
<p class="menutitle">.work</p>
<a class="menu" href="#">Projects</a>
<a class="menu" href="#">Designing</a>
<a class="menu" href="#">Layouts</a>
<a class="menu" href="#">Vorlagen</a>
<a class="menu" href="#">Helping</a>
</div>
</div>
<div class="content">
<img src="logo-ringe.jpg" class="logo" alt="krensche.design" /><br />
dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt. dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt. dies ist ein text ohne jeden sinn. genau aus diesem grund, und keinem andrem, ist dies ein sinnloser text. ein sinnloser blindtext ohne jeglcihe art von irgendeinem nutzen ausser sinnlos den inhalt von irgendwas zu füllen. natürlcih darf jeder selbst entscheiden ob er/sie in diesem text einen sinn findet. ich muss aber sagen das dieser text ohne jeglcihen sinn und zweck geschrieben wurde. also bringt das suchen auch nichts. lückenfüllende texte, eben die blindtexte, sollen auch keinen sinn haben, denn sonst wären es ja schließlich keine sinnlosen, lückenfüllenden texte ohne jeglcihe absicht für irgendwas. ich weiß nicht wie lang ich diesen sinnlosen text noch weiterschreiben soll, denn so sinnlos wie er ist, fällt mir auch nich wirklich ein was noch sinnloses unbedingt hier reinsollte. vielleicht sollte man auch bedenken das dieser text für jede art von lückenfüllung freigegeben ist, den ich Papa Noah ( dies sollte bestandteil des textes sein) distanziere mich vollkommen von diesem text und es ist mir egal was damit gemacht wird, hauptsache mein name steht, unverändert im sinn, hier drin. da es sich eben gereimt hat, hör ich jetzt damit auf. mal scheun welche sinnlosen blindtexte ihr schreiben könnt.
</div>
<br style="clear:both;" />
</div>
</body>
</html>