nicht angemeldet
Explorer-Symbol-Ansicht mit CSS nachbauen
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
-
Hi,
Ü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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="formatmenu.css">bei xhtml müssen auch empty-Elemente geschlossen werden.
body {
background-color:fffff2;ungültiger Wert.
font-family:Arial,Helvetica;
generische Schrift (sans-serif) fehlt.
margin: 10px 10px 10px 10px;
margin:10px;
}
div.menusymbol {
display:inline;ersetzen durch
display:block;
float:left;line-height:1;
ungültiger Wert. Einheit fehlt.
font-family:Tahoma;Arial;
generische Schrift fehlt. Trenner zwischen Schriftnamen ist das Komma.
}
div#menuzeile {
position:fixed;daß das im IE nicht funktioniert, ist Dir bekannt?
font-family:Tahoma;Arial;
generische Schrift fehlt. Trenner zwischen Schriftnamen ist das Komma.
}
div#menurechts {
right:15;ungültiger Wert. Einheit fehlt.
}
a:link {
a:hover {
a:visited {
Reihenfolge falsch. link, visited, focus, hover, active
img {
border-width:0px;m.E. besser:
border:none;}
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
a:hover {
a:visited {» Reihenfolge falsch. link, visited, focus, hover, active
Vielen Dank! War alles richtig. Waren meist nur kleine Fehler, nur auf den Float bin ich nicht gekommen.
Interessehalber zu der Reihenfolge der pseudo-classes: wieso müssen die in einer bestimmten Reihenfolge stehen?Grüße
Martin-
Hi,
Interessehalber zu der Reihenfolge der pseudo-classes: wieso müssen die in einer bestimmten Reihenfolge stehen?
na denk doch mal nach... für einen Link können auch mehrere Zustände auf einmal zutreffen und dann ist entscheidend, welcher zuletzt definiert wurde.
freundliche Grüße
Ingo -
Hi,
Interessehalber zu der Reihenfolge der pseudo-classes: wieso müssen die in einer bestimmten Reihenfolge stehen?
Weil bei gleichwertigen Selektoren (und alle haben hier die gleiche "specificity", nämlich ein Element und eine Pseudoklasse) die Werte der zuletzt genannten Deklarationen die aus vorhergehenden überschreiben.
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
-
-
-
Hallo Martin,
Ü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.
Ich habe Deinen Code nicht angeschaut.
Dafuer hab ich einen Link, der Dir vielleicht weiterhilft:
http://www.alistapart.com/stories/practicalcss/
Deren Beispiel funktioniert jedenfalls bei mir in Mozilla 1.2.1/Linux.mfg
Thomas