zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierte Elemente verschieben sich bei Schriftvergrößerung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.06.2008, 16:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2008
Beiträge: 83
accessoire befindet sich auf einem aufstrebenden Ast
Standard 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;}
Danke schonmal im Voraus .
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.06.2008, 19:21
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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:
Mir wird gesagt position:relative mit floats wäre Schwachsinn.
Mit welcher Begründung?

Zum Beispiel schafft ein position:relative plus z-index einen neuen Stacking Context für die Stapelung von Elementen, was float allein nicht kann.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.06.2008, 08:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2008
Beiträge: 83
accessoire befindet sich auf einem aufstrebenden Ast
Standard

Hmm ich kann dir leider nicht ganz folgen, wie genau ich die Bilder floaten lassen soll? Kanz du vllt. mal ein Beispiel posten?
Mit Zitat antworten
  #4 (permalink)  
Alt 30.06.2008, 09:34
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

selektor img { float: left}
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 30.06.2008, 10:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Code:
#menu-fläche {position:relative; top:142px; background:#e1e3ee; width:127px; height:306px;}
Das sieht nicht gut aus - Du hast doch nicht etwa Sonderzeichen in Deinen Selektoren?

Edit: Ja, Du hast. Und machst dazu auch noch den übl(ich)en Fehler, Dein CSS zwar als utf-8 zu speichern, aber es ohne Zeichencodierung auszuliefern (z.B. per .htaccess).

Geändert von heiko_rs (30.06.2008 um 10:32 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 30.06.2008, 11:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2008
Beiträge: 83
accessoire befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Code:
#menu-fläche {position:relative; top:142px; background:#e1e3ee; width:127px; height:306px;}
Das sieht nicht gut aus - Du hast doch nicht etwa Sonderzeichen in Deinen Selektoren?

Edit: Ja, Du hast. Und machst dazu auch noch den übl(ich)en Fehler, Dein CSS zwar als utf-8 zu speichern, aber es ohne Zeichencodierung auszuliefern (z.B. per .htaccess).
Nein, das habe ich schon ausgebessert. Das mit der Zeichencodierung sagt mir leider garnichts .

Zitat:
Zitat von IChao Beitrag anzeigen
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.



Mit welcher Begründung?

Zum Beispiel schafft ein position:relative plus z-index einen neuen Stacking Context für die Stapelung von Elementen, was float allein nicht kann.
Wo du das gerade sagt, mit dem img. Ich habe keine img-Tags verwendet.

Geändert von accessoire (30.06.2008 um 11:31 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:50 Uhr.