nicht angemeldet
Layoutprobleme im IE
Hallo,
ich versuche grad eine Seite komplett von Tabellenlayout auf css umzustellen. Die Seite soll auf eine bestimmte Breite festgelegt und auf dem Bildschirm zentriert werden (s.u.)
Absolute Positionierung scheidet daher aus - die Positionierungen würden sich auf den body-tag beziehen, da eine Ausrichtung am Elternelement nur dann klappt, wenn es selbst absolut positioniert ist.
Also hab ich folgende Alternative probiert, im Wesentlichen float: für die horizontale und position:relative für die vertikale Positionierung.
Leider stoße ich auch hier schon ganz am Anfang auf massive Schwierigkeiten:
- Warum werden das Menü und die hr vom IE6 nach rechts verschoben?
-Warum ist auch das Bild dort nicht wie gewünscht 140px vom oberen Rand entfernt? Der Freiraum im Text ist ja korrekt positioniert.
Im Firefox ist das Ergebnis absolut in Ordnung...
Vielleicht weiß auch jemand einen Link zu einer guten Seite über css. Bisher fand ich nur solche, die bestimmte Vorlagen erläuter haben; ich suche was Allgemeineres.
Vielen Dank, Pida
<style type="text/css">
<!--
#logo {
float:left;
}
#kontakt {
float:right;
}
#menu {
font-weight:bold;
position:relative;
top:80px;
text-align:center;
}
#hr1 {
position:relative;
top:80px;
}
#text {
position:relative;
top:140px;
margin-left:15px;
}
-->
</style>
</HEAD>
<body style="text-align:center">
<div style="width:760px;margin:15px auto; text-align:left">
<div id="logo">
<img src="dateien/logo.jpg" width="605" height="63" border="0" alt="logo">
</div>
<div id="kontakt">
<b>Kontakt:</b><br>
Name<br>
Nummer<br>
<a href="dateien/kontakt.html" target="_blank">eMail-Kontakt</A>
</div>
<div id="hr1"><hr size=4></div>
<div id="menu">
<a href="dateien/info.html">Veranstalterinfos</a> |
<a href="dateien/gb.html" target="Gästebuch">Gästebuch</a> |
<a href="dateien/gallerie/gallerie.html">Galerie</a> |
<a href="dateien/impressum.html">Impressum</a>
</div>
<div id="text">
<img src="dateien/band.jpg" style="width:374px; height:251px; float:left; margin-right:18px; margin-bottom:10px" border="0" alt="">
Text, Text und noch mehr Text.<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.<p>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr Text.<p>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr TextText, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch
mehr Text.
Text, Text und noch mehr Text<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr Text
</div>
</div>
</body>
</html>
-
Hi,
Absolute Positionierung scheidet daher aus - die Positionierungen würden sich auf den body-tag beziehen, da eine Ausrichtung am Elternelement nur dann klappt, wenn es selbst absolut positioniert ist.
wenn es _positioniert_ ist, nicht _absolut positioniert_. Und es muss nicht das Elternelement sein, sondern der innerste Vorfahr.
- Warum werden das Menü und die hr vom IE6 nach rechts verschoben?
Doubled Float Margin Bug?
-Warum ist auch das Bild dort nicht wie gewünscht 140px vom oberen Rand entfernt?
Sondern?
<div id="logo">
<img src="dateien/logo.jpg" width="605" height="63" border="0" alt="logo">
</div>Sieht nach <h1> aus.
<div id="kontakt">
<b>Kontakt:</b><br>
Name<br>
Nummer<br>
<a href="dateien/kontakt.html" target="_blank">eMail-Kontakt</A>
</div><address> kennst Du?
<div id="hr1"><hr size=4></div>
Eieiei. Üble ID, und der Sinn des <div> erschließt sich mir auch nicht so recht.
<div id="menu">
<a href="dateien/info.html">Veranstalterinfos</a> | Du meinst sicher <ul>, und die vielen meinst Du garantiert nicht.
Text, Text und noch mehr Text.<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.<p>Du meinst sicher <h2> und <p>...</p>, nicht ...<br>...<p>. Der Einsatz von <br> ist immer ein starkes Warnzeichen dafür, dass die Struktur vermutlich nicht stimmt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
wenn es _positioniert_ ist, nicht _absolut positioniert_. Und es muss nicht das Elternelement sein, sondern der innerste Vorfahr.
Wie auch immer, es klappt nicht. Gebe ich dann bei einem Element position:absolute; left:0px ein, wird es ganz nach links gerückt.
Doubled Float Margin Bug?
Aber hier ist weit & breit kein "margin"?!?
-Warum ist auch das Bild dort nicht wie gewünscht 140px vom oberen Rand entfernt?
Sondern?
Es erscheint im IE direkt unter der hr.
<address> kennst Du?
"<address> leitet einen eigenen Absatz für Internet-Adressen ein."
Ich sähe auch keinen Vorteil, wenn diese Angaben aus optisch aus der Seite "herausgerissen" werden.<a href="dateien/info.html">Veranstalterinfos</a> |
Du meinst sicher <ul>, und die vielen meinst Du garantiert nicht.
Naja, es funktioniert wie's soll.
Text, Text und noch mehr Text.<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.<p>Du meinst sicher <h2> und <p>...</p>, nicht ...<br>...<p>. Der Einsatz von <br> ist immer ein starkes Warnzeichen dafür, dass die Struktur vermutlich nicht stimmt.
Funktioniert auch wie's soll. Zeilenumbrüche, wo Zeilenumbrüche hin sollen; Absätze, wo Absätze hin sollen. Keine Überschrift, weil da keine hin soll.
Wenn du vielleicht mal argumentieren würdest, WARUM dich etwas stört, könnte ich da evtl. sinnvoll drauf eingehn.Gruß, Pida
-
Hi,
wenn es _positioniert_ ist, nicht _absolut positioniert_. Und es muss nicht das Elternelement sein, sondern der innerste Vorfahr.
Wie auch immer, es klappt nicht. Gebe ich dann bei einem Element position:absolute; left:0px ein, wird es ganz nach links gerückt.dann hast Du das Element, an dem Du es ausrichten möchtest, nicht positioniert.
Doubled Float Margin Bug?
Aber hier ist weit & breit kein "margin"?!?War nur 'ne Vermutung.
Es erscheint im IE direkt unter der hr.
Btw, kannst Du zu dem Problem einen Link nennen? Das würde die Problembeobachtung erheblich erleichtern.
<address> kennst Du?
"<address> leitet einen eigenen Absatz für Internet-Adressen ein.""The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document."
Ich sähe auch keinen Vorteil, wenn diese Angaben aus optisch aus der Seite "herausgerissen" werden.
<address> ist Struktur, nicht Optik. Diese regelst Du nur und ausschließlich mit CSS.
Du meinst sicher <ul>, und die vielen meinst Du garantiert nicht.
Naja, es funktioniert wie's soll.Das ist nie ein gutes Argument. Deine Struktur ist einfach verbesserungswürdig.
Du meinst sicher <h2> und <p>...</p>, nicht ...<br>...<p>. Der Einsatz von <br> ist immer ein starkes Warnzeichen dafür, dass die Struktur vermutlich nicht stimmt.
Funktioniert auch wie's soll.Siehe oben.
Zeilenumbrüche, wo Zeilenumbrüche hin sollen;
Zeilenumbrüche werden durch Block-Elemente erzeugt, nicht durch <br>. Es existiert kein Grund, diesen darstellerischen Wunsch durch strukturelle Information zu transportieren.
Absätze, wo Absätze hin sollen.
Nein, offenbar ist bereits vor Deinem ersten <p> ein Absatz, den Du nicht als solchen vermittelst.
Keine Überschrift, weil da keine hin soll.
"Kurzer Text<br>" riecht _sehr_ stark danach, dass es sich bei "Kurzer Text" um eine Überschrift handelt.
Wenn du vielleicht mal argumentieren würdest, WARUM dich etwas stört, könnte ich da evtl. sinnvoll drauf eingehn.
Mich stören die Dinge, die ich nannte, weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht. Dadurch ist Deine Datenbasis suboptimal, was per se Probleme erzeugt, so dass es Unfug ist, bereits vor der Korrektur Deiner Struktur beobachtete Probleme zu korrigieren zu versuchen - es ist ungewiss, ob sie aufgrund der genannten Codefehler bestehen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
dann hast Du das Element, an dem Du es ausrichten möchtest, nicht positioniert.
Es ging ja darum, dass ich einen 760px breiten div horizontal zentriert habe (siehe Quelltext).
Btw, kannst Du zu dem Problem einen Link nennen? Das würde die Problembeobachtung erheblich erleichtern.
Leider nein; alle Probleme sind aber anhand des gegebenen Quelltextes exakt wiedergegeben, wenn du daraus eine htm-Datei erstellst.
"The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document."
Da sind sich wohl die Experten nicht einig.
"Kurzer Text<br>" riecht _sehr_ stark danach, dass es sich bei "Kurzer Text" um eine Überschrift handelt.
"Kurzer Text"? Steht da nicht!
Wenn du vielleicht mal argumentieren würdest, WARUM dich etwas stört, könnte ich da evtl. sinnvoll drauf eingehn.
Mich stören die Dinge, die ich nannte, weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht.Der Sinn ist für mich die Verwendbarkeit dieser Sprachen zum Darstellen von Webseiten. Mit ganz einfachen Mittel (Tabellen) kann ich die Seite so gestalten, dass sie von den allermeisten Internetnutzern und vermutlich der kompletten Zielgruppe besucht werden können.
Nun möchte ich das ganze noch etwas besser machen, weil's mir halt Spaß macht. Aber irgendwo ist halt Schluß, die Benennung von Standards durch eine Organisation oder die um 1% erhöhte Kompatibilität wird mich nicht dazu bringen, mich tagelang mit bestimmten Thematiken zu beschäftigen - damit stehe ich vermutlich nicht allein da. Mir scheint im Zuge der Debatte um Barrierefreiheit vergessen worden zu sein, dass die meisten Seiten von Amateuren geschrieben und betrieben werden, die sich nicht alle Kenntnisse aneignen können/wollen, ihre Seite mit "aktuellen" Mitteln zu gestalten.
Eben aus diesem Grund ist für mich "...weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht" kein überzeugendes Argument.Gruß, Pida
-
Hi,
dann hast Du das Element, an dem Du es ausrichten möchtest, nicht positioniert.
Es ging ja darum, dass ich einen 760px breiten div horizontal zentriert habe (siehe Quelltext).nein. Es ging darum, dass Du behauptet hast, absolute Positionierung würde ausscheiden. Das tut sie aber nicht, den Grund - also die Lösung - habe ich genannt.
"The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document."
Da sind sich wohl die Experten nicht einig.Der uneinige Experte (Stefan Münz) hat eine Interpretation vorgenommen. Obiges ist die _Definition_.
"Kurzer Text<br>" riecht _sehr_ stark danach, dass es sich bei "Kurzer Text" um eine Überschrift handelt.
"Kurzer Text"? Steht da nicht!Da steht zwar nicht "Kurzer Text", aber es steht kurzer Text da.
Wenn du vielleicht mal argumentieren würdest, WARUM dich etwas stört, könnte ich da evtl. sinnvoll drauf eingehn.
Mich stören die Dinge, die ich nannte, weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht.
Der Sinn ist für mich die Verwendbarkeit dieser Sprachen zum Darstellen von Webseiten.Genau das meine ich: Nur CSS kann zum Darstellen von Webseiten verwendet werden, nicht HTML.
Mit ganz einfachen Mittel (Tabellen) kann ich die Seite so gestalten, dass sie von den allermeisten Internetnutzern und vermutlich der kompletten Zielgruppe besucht werden können.
Mit diesen sogenannten einfach Mitteln machst Du es Dir dummerweise unnötig schwer.
Aber irgendwo ist halt Schluß, die Benennung von Standards durch eine Organisation oder die um 1% erhöhte Kompatibilität wird mich nicht dazu bringen, mich tagelang mit bestimmten Thematiken zu beschäftigen - damit stehe ich vermutlich nicht allein da.
Ja, der Irrtum, man habe durch die sinnvolle Verwendung von CSS in semantischem Markup nicht ebenso große Vorteile wie der Besucher (sondern sogar erheblich größere), ist in der Tat weit verbreitet.
Mir scheint im Zuge der Debatte um Barrierefreiheit
Barrierefreiheit ist ein netter Nebeneffekt, nicht mehr.
Eben aus diesem Grund ist für mich "...weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht" kein überzeugendes Argument.
Dann lies meine Begründung bitte noch bis zum Ende.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Genau das meine ich: Nur CSS kann zum Darstellen von Webseiten verwendet werden, nicht HTML.
Das stimmt doch einfach nicht; vor einigen Jahren gab's noch kein css und dennoch in HTML verfasste Webseiten.
Mit diesen sogenannten einfach Mitteln machst Du es Dir dummerweise unnötig schwer.
...
Ja, der Irrtum, man habe durch die sinnvolle Verwendung von CSS in semantischem Markup nicht ebenso große Vorteile wie der Besucher (sondern sogar erheblich größere), ist in der Tat weit verbreitet.
Trotz der inzwischen vorhandenen Vorkenntnisse sitz ich jedenfalls schon länger an den vergeblichen css-Versuchen als an der kompletten Tabellenseite...
Eben aus diesem Grund ist für mich "...weil Dein Code am Sinn von HTML _und_ von CSS vorbeigeht" kein überzeugendes Argument.
Dann lies meine Begründung bitte noch bis zum Ende.Du beziehst dich vermutlich auf "...so dass es Unfug ist, bereits vor der Korrektur Deiner Struktur beobachtete Probleme zu korrigieren".
Da ist was dran; mir ging's aber gar mehr das konkrete Beispiel, sondern um die Frage, ob ich meine css-Versuche überhaupt fortführen soll.Gruß, Pida
-
Hi,
Genau das meine ich: Nur CSS kann zum Darstellen von Webseiten verwendet werden, nicht HTML.
Das stimmt doch einfach nicht; vor einigen Jahren gab's noch kein css und dennoch in HTML verfasste Webseiten.ich rede von HTML/4.01, nicht von HTML/2.0. Den Stand von Ende 1999 kann ich mittlerweile voraussetzen.
Trotz der inzwischen vorhandenen Vorkenntnisse sitz ich jedenfalls schon länger an den vergeblichen css-Versuchen als an der kompletten Tabellenseite...
Sicher. Der Einstieg in CSS ist schwerer als der Einstieg in HTML. Wenn Du ein gewisses Grundverständnis erlernt hast, ist die Nutzung von CSS jedoch leichter als die von HTML ohne CSS, also mit Tabellenlayout und ähnlichem.
Da ist was dran; mir ging's aber gar mehr das konkrete Beispiel, sondern um die Frage, ob ich meine css-Versuche überhaupt fortführen soll.
Meiner Erfahrung nach lohnt sich das sehr, und bereut hat den Versuch höchstens jemand, der ihn aufgegeben hat.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
-
-
Hi,
Absolute Positionierung scheidet daher aus - die Positionierungen würden sich auf den body-tag beziehen, da eine Ausrichtung am Elternelement nur dann klappt, wenn es selbst absolut positioniert ist.
korrekt: anders als static. Es ist aber dennoch sinnvoll, darauf zu verzichten.
Also hab ich folgende Alternative probiert, im Wesentlichen float: für die horizontale und position:relative für die vertikale Positionierung.
Das dürfte nichts bringen. Wozu überhaupt eine vertikale Zentrierung? Bist Du Dir sicher, daß der Inhalt unter allen Umständen (insb. Berücksichtigung unterschiedlicher Schriftgrößen) in das Fenster paßt und etwas vertikal zu zentrieren bleibt?
freundliche Grüße
Ingo-
Hallo,
Das dürfte nichts bringen. Wozu überhaupt eine vertikale Zentrierung? Bist Du Dir sicher, daß der Inhalt unter allen Umständen (insb. Berücksichtigung unterschiedlicher Schriftgrößen) in das Fenster paßt und etwas vertikal zu zentrieren bleibt?
Keine vertikale Zentrierung, nur Positionierung. Zentriert soll der Inhalt nur in der Horizontalen werden.
Gruß, Pida
-
Hi,
Keine vertikale Zentrierung, nur Positionierung. Zentriert soll der Inhalt nur in der Horizontalen werden.
Um Abstände zu definieren, solltest Du margin verwenden. Zur Positionierung - wenn dies über margin nicht möglich sein sollte - position:absolute.
freundliche Grüße
Ingo-
Hi,
hat sich zwar schon ziemlich erledigt (zumindest vorerst bleib' ich beim Tabellen-Layout), aber eigentlich ging's hier darum, dass/warum position-absolute eben nicht geht.
Gruß, Pida
-
Hi,
aber eigentlich ging's hier darum, dass/warum position-absolute eben nicht geht.
es geht. Deine Behauptung, das umliegende Element müsse ebenfalls position:absolute besitzen, entspricht nicht den Tatsachen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
es geht. Deine Behauptung, das umliegende Element müsse ebenfalls position:absolute besitzen, entspricht nicht den Tatsachen.
Das Thema hatten wir ja auch schon im anderen Zweig angesprochen. Vielleicht liegt hier auch ein Mißverständnis vor (z.B. im Verständnis von "Positionierung").
Im Quelltext habe ich für mein Verständnis einen div (den, der direkt nach dem Body-tag kommt) positioniert, und zwar sowohl vertikal (15px Abstand zum oberen Bildschirmrand) als auch vertikal (zentriert).
Wenn ich jetzt aber etwas in diesen <div> einfüge und absolut positioniere, erfolgt die Ausrichtung dennoch am Body - ich seh's vor mir, im IE wie im Mozilla.Gruß, Pida
-
Hi,
Im Quelltext habe ich für mein Verständnis einen div (den, der direkt nach dem Body-tag kommt) positioniert, und zwar sowohl vertikal (15px Abstand zum oberen Bildschirmrand) als auch vertikal (zentriert).
und wie? Über margin:15px auto 0; ? Dies setzt zwar die Position des Elements, ist aber keine andere Positionierung als static.
freundliche Grüße
Ingo-
Hi,
und wie? Über margin:15px auto 0; ? Dies setzt zwar die Position des Elements, ist aber keine andere Positionierung als static.
Aber immerhin eine Positionierung!? Das soll nämlich lt. Cheatahs 1. Antwort reichen. Siehst du's anders?
Gruß, Pida
-
Hi,
Aber immerhin eine Positionierung!? Das soll nämlich lt. Cheatahs 1. Antwort reichen. Siehst du's anders?
umgangssprachlich ja, aber formal nein. Für eine von static abweichende Positionierung mußt Du schon die position-Egenschaft ändern.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-