|
|||
Positionierte Elemente verschieben sich bei Schriftvergrößerung
Wenn ich die Schrift vergrößere, verschieben sich die Flaggen und das Menü nach unten. Woran liegt das? Mir wird gesagt position:relative mit floats wäre Schwachsinn.
Unbenanntes Dokument CSS-Code: Code:
@charset "UTF-8"; * { margin: 0; padding: 0; } #alles {width:882px; height:500px;} #schatten-oben-links {background-image:url(images/schatten-oben-links.gif); width:16px; height:16px; float:left;} #schatten-oben {background:url(images/schatten-oben.gif) repeat-x; width:850px; height:16px; float:left;} #schatten-oben-rechts {background-image:url(images/schatten-oben-rechts.gif); width:16px; height:16px; float:left;} #schatten-links {background:url(images/schatten-links.gif) repeat-y; width:16px; height:468px; clear:left; float:left;} #rahmen { width:850px; height:468px; float:left;} #schatten-rechts {background:url(images/schatten-rechts.gif) repeat-y; width:16px; height:468px; float:left;} #schatten-unten-links {background-image:url(images/schatten-unten-links.gif); width:16px; height:16px; clear:left; float:left;} #schatten-unten {background:url(images/schatten-unten.gif) repeat-x; width:850px; height:16px; float:left;} #schatten-unten-rechts {background-image:url(images/schatten-unten-rechts.gif); width:16px; height:16px; float:left;} #flaggen-fläche {position:relative; top:81px; background:#98a4b1; width:127px; height:20px;} #flaggen {position:relative; top:2px; float:right; margin-right:5px;} #menu-fläche {position:relative; top:142px; background:#e1e3ee; width:127px; height:306px;} #menu-float {float:right; position:relative; top:66px;} #unternehmen {background:url(images/unternehmen.gif) no-repeat; width:79px; height:20px; padding:4px 0 4px 0;} #philosophie {background:url(images/philosophie.gif) no-repeat; width:79px; height:20px; padding:4px 0 4px 0;} #leistungen {background:url(images/leistungen.gif) no-repeat; width:79px; height:20px; padding:4px 0 4px 0;} #referenzen {background:url(images/referenzen.gif) no-repeat; width:79px; height:20px; padding:4px 0 4px 0;} #kontakt {background:url(images/kontakt.gif) no-repeat; width:79px; height:20px; padding:4px 0 4px 0;} li {list-style-type:none;} a {display:block; width:79px; height:20px;} |
Sponsored Links |
|
|||
Wenn du nur die Schrift vergrößerst, dann schieben sich die Flaggen aus dem grauen Fläche nach unten. Der Grund ist, dass <img> als Inline Replaced Elements auf der Grundlinie hocken, wie Buchstaben es tun, und diese gedachte Linie verschiebt sich nun einmal bei Schriftvergrößerung.
Abhilfe würde es schaffen, diese img selbst zu floaten, d.h. sie als Blocks nebeneinander stehen zu lassen. Zitat:
Zum Beispiel schafft ein position:relative plus z-index einen neuen Stacking Context für die Stapelung von Elementen, was float allein nicht kann. |
Sponsored Links |
|
|||
selektor img { float: left}
|
|
|||
Zitat:
Zitat:
Geändert von accessoire (30.06.2008 um 11:31 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div Elemente verschieben sich wenn ich Text/Links in die Navigation schreibe | grubentaucher | CSS | 1 | 18.01.2010 20:52 |
css Frage: Elemente im div verschieben | hallo2008 | CSS | 2 | 05.08.2009 20:49 |
Div-Layout: Positionierte Elemente wollen die Seite nicht verlängern | nickie12 | (X)HTML | 8 | 30.09.2007 23:03 |
Elemente lassen sich nicht in FF verschieben | SyntaxError | (X)HTML | 6 | 17.01.2007 14:45 |
bei hover->bold und alle elemente verschieben sich? | xy2er | CSS | 4 | 16.03.2005 16:00 |