nicht angemeldet
Zentrierungsproblem mit Safari-Engine
0 0 
Matthias Apsel
0 0 Matthias Apsel
0 0 0 Matthias Apsel
0 0 Matthias Apsel
0 0 Matthias Apsel
Zentrierungsproblem mit Safari-Engine
Hallo zusammen!
Ihr findet unten einen Versuch ein Blockelement vertikal zu zentrieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
[code lang=css]
.block {
position: absolute;
top: 50%;
margin-top: -20%;
left: 50%;
margin-left: -40%;
width: 80%;
border: 1px solid black;
background-color: #808080;
}
</style>
</head>
<body>
<div class="block">
<img src="blanko.jpg" style="width: 100%;">
</div>
</body>
</html>
[/code]
Dazu gibt es noch folgendes zu sagen: Das Bild "blanko.jpg" ist genau 1x2 Pixel groß. Vergrößert sich das Browserfenster, vergrößert sich das Bild, vergrößert sich der Block genau im Verhältnis 1x2. Sollte der Anwender das Fenster schmaler als dieses Verhältnis machen, rutscht der Inhalt aus dem Sicht- und scrollbaren Bereich. Das wäre im Entferntesten für den Augenblick akzeptabel.
Nun weiß ich schon, ist dies nicht die eleganteste Art etwas vertikal zu zentrieren, schön wäre auch das herausrutschen ganz loszuwerden. Aber das Problem für mich ist eher, der Safari-Engine interpretiert mein Geschreibsel anders als seine Kollegen. Er mag den Zusammenhang zwischen Breite und Höhe nicht so für mich recht annehmen.
Grüße.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #centhelp { width: 1px; height: 50%; margin-bottom: -20%; float: left; } #block { width: 80%; margin: 0 auto; clear: left; border: 1px solid black; } </style> </head> <body> <div id="centhelp"></div> <div id="block"><img src="blanko.jpg" style="width: 100%;"></div> </body> </html>Ich habe es nun so in den Griff bekommen. Allerdings sind mit die "margin-bottom: -20%" in #centhelp noch nicht ganz schlüssig, die ich durch probieren herausgefunden habe. Normalerweise sollte dort die Hälfte der Höhe des zu zentrierenden Elements stehen.
-
Om nah hoo pez nyeetz, Dave!
Aus den von dir genannten Gründen, ist absolute Positionierung keine optimale Lösung für dein Vorhaben. Glücklicherweise ist das eine oft gefragte Frage. Die erste, die den Weg ins Wiki gefunden hat.
Der Preis fürs lesen dürfen ist das Erstellen eines weiteren FAQ-Artikels ;-) Du kannst von den http://de.selfhtml.org/navigation/faq.htm@title=hiesigen einen auswählen. Unter trello.com/selfhtml/ (Anmeldung und Einladung erforderlich) kannst du einsehen, welche im Wesentlichen unverändert übernommen werden können und welche neu erstellt werden sollen.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
danke dir für die Zusammenfassungen. Anscheinend sind mir durch unregelmäßige Beschäftigung mit dem Thema einige Lösungen abhanden gekommen. Früher habe ich sehr gerne dieses "blinde Tabellen"-Konstrukt verwendet. Wie mir ausgerechnet die eingangs erwähnte Lösung geblieben ist, kann ich auch nicht sagen.
Nun, fünf Minuten vor deiner Antwort habe ich ja den neuen Ansatz gepostet, der sich auch in deinen Verweisen findet. Allerdings habe ich nun Probleme die Inhalte zu platzieren. Ich bin ziemlich sicher, dass ich um absolute Positionierung nicht herumkomme, auch wenn ich schon einem Ansatz mit float nachging, der recht vielversprechend wirkte, den ich aber dennoch verwerfen musste.
Wie man bereits vermuten konnte, soll in den zentrierten Bereich Inhalt hinein, der über dem Bild liegt, was dazu genutzt wurde, das Seitenverhältnis anzupassen. Auf einer Seite beispielsweise sollen in sechs Spalten abwechselnd ein Bild von oben und unten erscheinen. Dazu habe ich etwas vorbereitet, was es schematisch darstellt.
Sobald die Breite ungefähr 1024 Pixel unterschreitet, legen sich die Spalten übereinander, weil sie mittels margin-left mit Prozentangaben positioniert wurden. Hat da jemand einen Rat?http://dl.redsquare.de/solving/
Den Quellcode poste ich hier auch einmal:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> [code lang=css] html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #centhelp { height: 50%; margin-bottom: -22%; float: left; } #centered { width: 80%; margin: 0 auto; clear: left; border: 1px solid black; background-color: red; } #navi1,#navi2 { width: 80%; margin: 0 auto; clear: left; border: 1px solid red; } #centered,#navi1,#navi2 { min-width: 816px; } .spalte { position: absolute; width: 13.33%; /* 80%/6 */ min-width: 136px; /* 1024 - 204,8 (10% links, 10% rechts)/6 = 136,53... */ border: none; } img { width: 100%; }</style>
</head>
<body>
<div id="centhelp"></div>
<div id="navi1">navi</div>
<div id="centered">
<!-- für selbstangelegte area map mit mouseover-highlights einer anderen unterseite
<div style="position: absolute; margin-left: 10.25%; margin-top: 20%; border: 1px solid green; width: 5%; height: 5%;"></div>
//-->
<div style="margin-left: 0%;" class="spalte">
<img src="1x2.jpg" />
<div style="position: absolute; margin-left: 5%; width: 90%; border: 1px solid yellow; color: beige;">B i l d b e s c h r e i b u n g</div>
<img src="1x1.jpg" />
</div>
<div style="margin-left: 13.33%;" class="spalte">
<div style="position: absolute; margin-left: 5%; width: 90%; border: 1px solid yellow; color: beige;">B i l d b e s c h r e i b u n g</div>
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<div style="margin-left: 26.66%;" class="spalte">
<img src="1x2.jpg" />
<img src="1x1.jpg" />
</div>
<div style="margin-left: 39.99%;" class="spalte">
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<div style="margin-left: 53.32%;" class="spalte">
<img src="1x2.jpg" />
<img src="1x1.jpg" />
</div>
<div style="margin-left: 66.65%;" class="spalte">
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<img src="2x1.jpg" />
</div>
<div id="navi2">navi</div>
</body>
</html>
[/code]-
Om nah hoo pez nyeetz, Dave!
Sobald die Breite ungefähr 1024 Pixel unterschreitet, legen sich die Spalten übereinander, weil sie mittels margin-left mit Prozentangaben positioniert wurden. Hat da jemand einen Rat?
Du könntest
* für Seiten mit einer geringeren Breite ein anderes Layout und Media Queries verwenden
* minimale Breiten festlegen
* CSS rechnen lassenMatthias
--
1/z ist kein Blatt Papier.
-
Die beiden Tipps bringen mich leider nicht weiter, auch wenn erster und letzterer recht interessant sind. Mittleren habe ich ja bereits versucht umzusetzen, nur nicht mit dem Erfolg, den ich erhofft hatte. Alle Elemente haben bereits, wo nötig, eine Mindestbreite. Was mir fehlt, ist eher eine Art "min-margin-left" für die Position der Spalten, die sich ja beim zusammenziehen überlappen.
-
Ich helfe mir jetzt mit einer Tabelle.
Das klappt auch und minimiert den Aufwand.
Allerdings möchte ich noch erwähnen, dass ich den Eindruck habe, als würde beim obigen "min-margin"-Problem etwas missinterpretiert. Selbst wenn ichbody,html { min-width: 1024px; }festlege, nutzt meine absolute Positionierung mittels margin-left dennoch die Fensterbreite als Ausgangswert.-
Om nah hoo pez nyeetz, Dave!
Allerdings möchte ich noch erwähnen, dass ich den Eindruck habe, als würde beim obigen "min-margin"-Problem etwas missinterpretiert. Selbst wenn ich
body,html { min-width: 1024px; }festlege,min width bedeutet, dass bei einer zur Verfügung stehenden Breite von weniger als 1024px Scrollbalken erscheint, nicht mehr und nicht weniger.
nutzt meine absolute Positionierung mittels margin-left
???
dennoch die Fensterbreite als Ausgangswert.
Vielleicht hast du das Konzept der Positionierung noch nicht richtig verstanden.
Matthias
--
1/z ist kein Blatt Papier.
-
Vielleicht hast du das Konzept der Positionierung noch nicht richtig verstanden.
Das gebe ich sogar ganz offen zu. Ich gehe dabei immer mehr "Trial&Error"-mäßig vor, auch wenn ich mir darüber schon einiges angelesen habe. So bin ich von einigen Ergebnissen meiner Intuitionen oft verwirrt.
Dein Verweis liest sich da schon recht passend, Missverständnisse beseitigt. Allerdings habe ich gerade nicht die Zeit, werde es aber heute Abend noch nachholen.
Der Bezug zu den Elternelementen war mir klar, allerdings hinke ich oft, auch bei z-index damit hinterher, dass das Elternelement, auf die sich mein "position: absolute"-Kindchen beziehen soll, bzw. alle Elemente, die ich im Vorder- oder Hintergrund sehen will, auch absolut positioniert haben muss.
So noch einmal an das "min-margin"-Problem herangegangen, habe ichbody, html { position: absolute; }hinzugefügt und siehe da, so funktioniert es auch.
Danke nochmal für deine Mühen.-
Om nah hoo pez nyeetz, Dave!
Der Bezug zu den Elternelementen war mir klar, allerdings hinke ich oft, auch bei z-index damit hinterher, dass das Elternelement, auf die sich mein "position: absolute"-Kindchen beziehen soll, bzw. alle Elemente, die ich im Vorder- oder Hintergrund sehen will, auch absolut positioniert haben muss.
So noch einmal an das "min-margin"-Problem herangegangen, habe ichbody, html { position: absolute; }hinzugefügt und siehe da, so funktioniert es auch.Entsprechende Elemente müssen einen gültigen, von "static" verschiedenen Position-Wert haben. position: relativ ist meist ohne Nebenwirkungen.
Matthias
--
1/z ist kein Blatt Papier.
-
[latex]Mae govannen![/latex]
position: relativ ist meist ohne Nebenwirkungen.
Ohne Nebenwirkungen, weil es von den Browsern komplett ignoriert wird ;)
Stur lächeln und winken, Männer!
Kai--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet-
Om nah hoo pez nyeetz, Kai345!
position: relativ ist meist ohne Nebenwirkungen.
Ohne Nebenwirkungen, weil es von den Browsern komplett ignoriert wird ;)
Ich schenk dir ein 2,718281828...
Matthias
--
1/z ist kein Blatt Papier.
-
[latex]Mae govannen![/latex]
position: relativ ist meist ohne Nebenwirkungen.
Ohne Nebenwirkungen, weil es von den Browsern komplett ignoriert wird ;)
Ich schenk dir ein 2,718281828...
Stur lächeln und winken, Männer!
Kai--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet-
Om nah hoo pez nyeetz, Kai345!
Hoffentlich ist da kein 9,8696044010893586188344909998762... drin.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
-
-
-
-