nicht angemeldet
Hallo Leute!
Ich möchte den Inhalt einer HTML-Datei so anordnen, wie man es von wohl jeder(?) grafischen Oberfläche her kennt:
Über die Breite des Fensters werden die Symbole jeweils mit Untertitel verteilt. Das ganz soll dynamisch geschehen, d.h. mit verkleinern des Fensters rutschen die Symbole in die nächste Zeile.
Das funktioniert mit meinem Code (s.u.) auch schon. Allerdings nur im IE5.5 bzw. bei IE6 und Opera im Quirks-Modus. Im Standards-Compliant-Modus werden die divs untereinander und nicht nebeneinander dargestellt.
Was muß da denn geändert werden, wenn es richtig "Standards-Compliant" sein soll? Bin da etwas ratlos.
Im folgenden der Inhalt der html-Datei, danach die CSS-Datei.
HTML: (Anzahl der div#menusymbol-Container bei Bedarf erhöhen)
<!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="formatmenu.css">
</head>
<body>
<div id="menuzeile">
<div id="menulinks"><a href="">Hauptseite</a></div>
<div id="menurechts"><a href="">vorherige Seite</a></div>
</div>
<div id="menu">
<div class="menusymbol"><a href=""><img src="icon.gif" alt="" /><br />Symbol1</a></div>
<div class="menusymbol"><a href=""><img src="icon.gif" alt="" /><br />Symbol1</a></div>
<div class="menusymbol"><a href=""><img src="icon.gif" alt="" /><br />Symbol1</a></div>
<div class="menusymbol"><a href=""><img src="icon.gif" alt="" /><br />Symbol1</a></div>
<div class="menusymbol"><a href=""><img src="icon.gif" alt="" /><br />Symbol1</a></div>
</div>
</body>
</html>
CSS:
body {
background-color:fffff2;
font-family:Arial,Helvetica;
font-size:13px;
color:black;
margin: 10px 10px 10px 10px;
line-height:1.6em;
}
div.menusymbol {
width:90px;
display:inline;
text-align:center;
line-height:1;
vertical-align:top;
margin: 5px;
padding: 1px 1px 5px 1px;
font-family:Tahoma;Arial;
overflow:hidden;
}
div#menuzeile {
position:fixed;
background-color: white;
border-width:1px;
border-style:solid;
height:25px;
left:0;
font-family:Tahoma;Arial;
}
div#menulinks {
position:absolute;
left: 15px;
}
div#menurechts {
position:absolute;
right:15;
}
a:link {
color:black;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
}
a:visited {
color:black;
text-decoration:none;
}
img {
border-width:0px;
}
Grüße
Martin