nicht angemeldet
Symbol-Menü - Ausrichtungsproblem
Hallo Leute!
Ich habe ein Menü erstellt, welches sich an der Symbol-Ansicht von Windows orientiert. Das funktioniert schon recht gut.
Das Problem: Wie schaffe ich es, daß der Symboltitel
a) bei längerem Text umbricht und
b) vertikalb mittig ausgerichtet wird
Bislang habe ich nur entweder das eine oder andere hinbekommen. Es muß doch auch beides gehen.
Hier nun der Quelltext.
Die HTML-Datei dokument.html:
<!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>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel, leider nicht vertikal mittig</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Hier steht ein längerer Symboltitel. Es sollte ein Umbruch stattfinden, wenn der Text nicht in eine Zeile paßt.</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
<div class="menusymbol"><a href=""><img src="bild.gif" alt="" width="48" heigth="48" />Symboltitel</a></div>
</div>
</body>
</html>
und hier die CSS style.css
Die Angaben zum Menü finden sich in Bereich "SYMBOL-MENUE"
html {
width:100%;
}
body {
background-color:fffff2;
font-family:Arial,Helvetica;
font-size:13px;
color:black;
margin: 10px
border:none;
line-height:1.6em;
width:100%;
}
/*
--------------------------------------------------------------------------
VERWEISE
--------------------------------------------------------------------------
*/
a:link {
color:darkblue;
text-decoration:underline;
}
a:visited {
color:darkblue;
text-decoration:underline;
}
a:hover {
color:darkblue;
text-decoration:none;
background-color:lightblue;
}
/*
--------------------------------------------------------------------------
SONSTIGES
--------------------------------------------------------------------------
*/
body > img {
border-width: 0px;
border-style:none;
margin: 10px 0px 10px 0px;
}
img {
border-width: 0px;
border-style:none;
color:black;
margin: 0px 0px 0px 0px;
}
p img {
vertical-align:middle;
}
/*
--------------------------------------------------------------------------
SYMBOL-MENUE
--------------------------------------------------------------------------
*/
div#menu {
}
div.menusymbol {
display:block;
float:left;
width:300px;
height:52px;
overflow:hidden;
margin: 5px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
line-height:1em;
text-align:left;
font-family:Tahoma,Arial,sans-serif;
border-style:dotted;
border-width:1px;
border-color:lightgrey;
}
div.menusymbol img {
margin:0 10 0 0px;
vertical-align:middle;
float:left;
}
div.menusymbol a:link {
color:black;
text-decoration:none;
display:block;
height:50px;
}
div.menusymbol a:visited {
color:black;
text-decoration:none;
display:block;
height:50px;
}
div.menusymbol a:hover {
color:darkblue;
text-decoration:none;
display:block;
background-color:lightblue;
height:50px;
}
Für Anregungen bin ich dankbar.
Grüße
Martin