nicht angemeldet
Ränder, wiedermal
Tach,
danke jetzt schon mal an alle die den ganzen Text durchlesen, aber knackig und kompakt hab ich's leider nicht beschreiben können. Aber mit den gelinkten Seiten als Hilfe sollte klar sein um was es geht.
über Rändereinstellungen ist schon viel geschrieben worden, aber was ich suche, habe ich trotz Recherche im Archiv nicht gefunden.
Meine aktuelle Seite sieht so aus: http://www.eyrich-net.org/index.html sowohl unter IE 5.0/5.5 als auch Mozilla, IE 6 kann ich nicht testen.
Jetzt will ich das Menü oben fixiert haben unter der Inhalt soll drunter wegscrollbar sein (in Browsern die position:fixed verstehen, bei den anderen soll wenigstens obiges Layout erhalten bleiben).
Was ich mache ist den Menücode mit
"position:fixed; top:0px; left:0px; right:0px; z-index:100;"
umschließen und den Inhalt mit
"position:absolute; top:70px; left:10px; right:10px; z-index:75;"
Der Knackpunkt ist, daß das Menü links und rechts genau mit den Seitenrändern abschließen soll, der Inhaltstext nicht, die beiden Bilder aber doch wieder.
In http://www.eyrich-net.org/index2.html habe ich das untere Bild samt Text absichtlich dupliziert.
Erstes Bild wurde mit STYLE="margin-left:-13px;" nach links gerückt, das zweite mit STYLE="position:relative; left:-13px;" (jeweils im IMG-Tag).
Nun sieht es im Mozilla so aus, das das erste Bild samt Text ok sind, im IE 5.0/5.5 aber ein blöder weißer Rand links vom Bild.
Das zweite Bild ist in beiden Browsern richtig positioniert, der Text rechts davon aber leider in viel zu großem Abstand dazu.
Nun endlich meine Frage: 1. wie macht man's richtig und 2. welcher Browser von beiden zeigt's standardkonform an?
Zusatzfrage: Der Text am Seitenende klebt am Rahmen, wie bekomme ich einen schönen Abstand hin (leider weder mit bottom:5px; in obiger Positionsangabe noch mit margin-bottom:5px;)?
Bye,
Christian
-
Hallo Christian,
ein kurzer Test: OP6 zeigt die Seite korrekt an fixiert die Kopfleiste aber nicht. Bei IE6 gerät einiges durcheinander. Kopfleiste und Inhalt rutschen ineinander. Da ist also noch einiges im argen.
Die Sache mit der css-Positioniererei ist am Anfang ziemlich frustrierend. Das liegt zum einen daran, daß selbst die aktuellen Browser die css-Eigenschaften sehr uneinheitlich interpretieren,
zum anderen daran daß, bei der Positionierung eine css-Angabe nicht für sich allein funktioniert sondern im Zusammenspiel mit Angaben im Eltern- Kinder- oder im eigenen Element.Hier ein paar allgemeine Tipps: (ohne Anspruch auf Vollständigkeit)
----
-Browser:
NN6, Moz: konform
OP5/6, IE6: ziemlich konform
IE5: halbwegs konform
NN4: reine Glückssache-position:
bei 'postition:' spielt die Definition der Eigenschaften 'float:' und 'clear:' im Elternelement und den Geschwisterelementen. Je nach Eigenschaft müssen ausserdem Angaben zu top, left oder width dazu.Die Beschreibung in Self ist da ganz gut und nach ein paar mal lesen und ein wenig experiementieren werden die Zusammenhänge dann klarer.
Mach dir auch den Unterschied zwischen block- und inline-Elementen nochmal klar.Am einfachsten machst du es dir, wenn du dich auf der ganzen Seite für eine Positionierungsart entscheidest. Möchtest du mischen, dann empfiehlt es sich verschiedene Positionierungsarten in einem "neutralen" div zu kapslen um Nebeneffekte zu vermeiden.
-margin: & padding:
Wie im Forum schon mehrfach erwähnt tanzt hier IE5/5.5 aus der Reihe weil er die Angaben zu padding nicht standardkonform interpretiert und damit ganz gern mal das gesamt Layout zerschießt.Am besten verteilt man auch hier die Angaben zu Breite einerseits und den Rändern andererseits auf zwei verschachtelte div und vermeide es padding und margin gleichzeitig zu setzen.
Beispiel:
<div style="width:200px; padding:0px; margin:0px;">
<!-- Aussen: festlegen von Größe, Position und Fluss --//>
<div style="padding:20px; margin:0px;">
<!-- Innen: festlegen von Anständen und Rändern --//>
Inhalt
</div>
</div>----
Natürlich kann man das ganze auch anders machen, aber so vermeidest du nach meiner Erfahrung viele typische css-Problemchen.
Viel Geduld und Spaß beim probieren
Paul-
Servus Paul,
danke erstmal für Deine Antwort.
ein kurzer Test: OP6 zeigt die Seite korrekt an fixiert die Kopfleiste aber nicht.
Autsch ja, OP6 hab' ich ganz vergessen und jetzt mal besorgt. In index2.html fixiert er bei mir die Kopfleiste allerdings.
Bei IE6 gerät einiges durcheinander. Kopfleiste und Inhalt rutschen ineinander. Da ist also noch einiges im argen.
Im argen im IE oder auf meiner Seite bezüglich der Paßgenauigkeit?
Daß der Inhalt teilweise in/unter dem Menü hängt, finde ich seltsam. Wenn er fixed nicht versteht soll er es eben Anzeigen als wäre es absolute, wie es die 5.0 auch macht. Und wenn er fixed versteht müßte alles in Butter sein.Die Sache mit der css-Positioniererei ist am Anfang ziemlich frustrierend.
Oh ja, aber da gibt's auch Lichtblicke wenn was schön geht.
Eigentlich bescheuert daß die Seitenprogrammierer die Fehler der Hersteller ausbügeln müssen ...Mach dir auch den Unterschied zwischen block- und inline-Elementen nochmal klar.
Ist das wichtig außer daß Block- nicht in Inlineelementen vorkommen dürfen?
Am einfachsten machst du es dir, wenn du dich auf der ganzen Seite für eine Positionierungsart entscheidest. Möchtest du mischen, dann empfiehlt es sich verschiedene Positionierungsarten in einem "neutralen" div zu kapslen um Nebeneffekte zu vermeiden.
-margin: & padding:
Wie im Forum schon mehrfach erwähnt tanzt hier IE5/5.5 aus der Reihe weil er die Angaben zu padding nicht standardkonform interpretiert und damit ganz gern mal das gesamt Layout zerschießt.Hm, muß ich mal nachlesen. Zumindest der 5er hier hat mit dem rudimentären padding meines Layouts kein Problem.
Einziger Haken sind die 2 Pixel die er trotz margin:0px links und rechts läßt.Am besten verteilt man auch hier die Angaben zu Breite einerseits und den Rändern andererseits auf zwei verschachtelte div und vermeide es padding und margin gleichzeitig zu setzen.
Beispiel:
<div style="width:200px; padding:0px; margin:0px;">
<!-- Aussen: festlegen von Größe, Position und Fluss --//>
<div style="padding:20px; margin:0px;">
<!-- Innen: festlegen von Anständen und Rändern --//>
Inhalt
</div>
</div>Hm, mir fehlt plötzlich die vertikale Scrollbar in Mozilla und in Opera ist sie da aber wirkungslos wenn ich meine div schachtle statt hintereinander zu schreiben, vom Layout her ändert sich nix ...
Mir als Win95-User ist der IE 6 verwehrt, würdest du Dir kurz mal die Seite unter http://www.eyrich-net.org/index2.html ansehen und sagen ob der Text immer noch ins Menü geschoben ist und ob irgendwo weiße Ränder links bzw. rechts der Bilder zu sehen sind?
Gruß,
Christian-
hi
Ist das wichtig außer daß Block- nicht in Inlineelementen vorkommen dürfen?
inline-Elemente haben viele CSS-Eigenschaften nicht (width, height, position oder white-space um nur einige zu nennen)
Mir als Win95-User ist der IE 6 verwehrt
..der besondere Kundenservice von MS....
Grüße aus Bleckede
Kai
[dem jeglicher MSIE dank des Betriebssystems verwehrt ist und sich darüber freut *g*]
-
Moin Christian,
uups ich hatte index.html betrachtet. Bei index2.html sieht es schon viel besser aus. Bei Opera fixiert und auch in IE6 in Ordnung.
Was jetzt noch auffällt ist, daß deine Seite ein wenig Überbreite hat. Es erscheint ein horizontaler Scrollbar.
Paul
-
Moin Christian,
uups ich hatte index.html betrachtet. Bei index2.html sieht es schon viel besser aus. Bei Opera fixiert und auch in IE6 in Ordnung.
Oh, gut, sehr schön.
Was jetzt noch auffällt ist, daß deine Seite ein wenig Überbreite hat. Es erscheint ein horizontaler Scrollbar.
Jep, das war weil wie geschrieben der IE trotz margin:0px noch einen Rand macht und ich die Bilder deshalb etwas in den Rand geschoben habe. Schaut man das jetzt mit einem Browser an der es richtig macht (z.B. Mozilla) erscheint ein Scrollbar.
In der Version von heute Nacht (1 Uhr oder so, einfach mal Reload), laß' ich das und wer IE hat, hat eben Pech.Paul
Danke,
Christian
-
-
-