nicht angemeldet
mittige positionierung
Hallo Forum!
Bei meinen ersten CSS-Bemühungen brauche ich noch mal Hilfe.
Ich möchte ein Bild mit dem darunterliegenden Erklärungstext immer mittig (horizontal + vertikal) im Viewport anzeigen. Durch einen Trick (auf den ich schon stolz bin) habe ich es geschafft die horizontale Ausrichtung zu erreichen. Vertikal funktionierts so aber nicht (Quelltext unten).
Wie könnte das gehen?
Oder ist das alles Quatsch und es geht viel einfacher?
Vielen Dank, Bernd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Szpilman: Hanbabas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="szm.css">
</head>
<body style="background-color:#FFFFFF; margin:0; padding:0">
<div style="position:absolute; left:50%">
<div style="position:absolute; left:-366px">
<img src="bilder/p.han.jpg" style="width:733px; height:550px; border:none">
<p class="text" style="margin-top:10px; margin-left:55px; width=700px">
Für das große Fest der Familie Hanbaba mit Trauung und Taufe bringen im September 2005 Patrick Koch und Valerie Sietzy<br>
die Berliner Villa Elisabeth in die richitge Form.</p>
</div>
</div>
</body>
</html>
-
Hallo Bernd
Ich möchte ein Bild mit dem darunterliegenden Erklärungstext immer mittig (horizontal + vertikal) im Viewport anzeigen.
Schau dir mal die Beispiele an.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
Schau dir mal die Beispiele an.
Dein erstes Beispiel wird bei mir korrekt angezeigt. Die anderen nicht. Liegt das an meinem alten IE 5.0 für Mac? Das Element wird am unteren Rand des Viewport dargestellt und man kann sehr weit nach unten scrollen. Insgesamt ist das Element dann schon in der Mitte, der Inhalt der Seite ist nur leider viel zu groß.
Ich habe versucht das erste Beispiel in meinen Quelltext zu integrieren. Hat nicht geklappt. Ich bin verwirrt. Kann ich die Positionierung auch direkt beim div-Element als style angeben?
Gruß, Bernd
-
Hallo Bernd
... Die anderen nicht. Liegt das an meinem alten IE 5.0 für Mac?
Das ist anzunehmen. Dies Beispiele sollen das Abschneiden bei kleinen
Browserfenstern beseitigen. Sie sollen auch keine fertige Lösung, sondern
eher Anregung sein und sind auch nicht mit allen Browsern getestet
(besonders nicht mit dem Mac).Das Element wird am unteren Rand des Viewport dargestellt und man kann sehr weit nach unten scrollen.
Da ich keinen Mac habe, kann ich dies nicht testen, oder eine Lösung dafür
suchen.Ich habe versucht das erste Beispiel in meinen Quelltext zu integrieren. Hat nicht geklappt. Ich bin verwirrt.
Dann hast du wohl irgendetwas dabei falsch gemacht.
Versuche zu verstehen, was dort für welches Element definiert ist, warum es
genau so definiert ist, und welche Eigenschaft genau welche Auswirkung hat,
dann wirst du das auch für dich passend umsetzen können.Kann ich die Positionierung auch direkt beim div-Element als style angeben?
Genau das solltest du dir abgewöhnen.
Wenn du Inlinestyles verwendest (<... style="..." ...>), dann könntest du
auch gleich auf CSS verzichten, HTML-Attribute verwenden und zur Ausrichtung
Tabellen benutzen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Dann hast du wohl irgendetwas dabei falsch gemacht.
Versuche zu verstehen, was dort für welches Element definiert ist, warum es
genau so definiert ist, und welche Eigenschaft genau welche Auswirkung hat,
dann wirst du das auch für dich passend umsetzen können.OK. Ich versuche es weiterhin.
Wenn du Inlinestyles verwendest (<... style="..." ...>), dann könntest du
auch gleich auf CSS verzichten, HTML-Attribute verwenden und zur Ausrichtung
Tabellen benutzen.Was ist denn daran so verpönt? Wegen der Lesbarkeit für andere Benutzer? Mit Inlinestyles funktionierts halt ganz intuitiv und direkt.
Danke auf jeden Fall,
Bernd-
Hallo,
Was ist denn daran so verpönt? Wegen der Lesbarkeit für andere Benutzer? Mit Inlinestyles funktionierts halt ganz intuitiv und direkt.
Inline-Styles laufen eigentlich dem Konzept von CSS zuwider:
Der "Witz" bei CSS ist ja die strikte Trennung von Layout und Inhalt.
Damit soll es möglich sein, dass Änderungen am Inhalt das Layout nicht beeinflussen und umgekehrt, was die Wartung von Webseiten erheblich vereinfacht.
Ein schönes Beispiel dafür ist CSS Zen Garden (falls Du das nicht ohnehin schon kennst, gehört ja inzwischen zur CSS-Pflichtlektüre) - die Seite dort sieht je nach gewähltem Design immer komplett anders aus, obwohl der HTML-Code immer der gleiche bleibt, es werden nur die Styles ausgetauscht.Ein weiterer Punkt ist, dass Du bei Inline-Styles die ganzen schönen "Goodies" von CSS (Klassen, Hierarchien, Vererbung usw.) nicht hast.
Deswegen sollte man in sauberem CSS-Design Inline-Styles nur in begründeten Ausnahmen verwenden.
Gruesse,
Joerg
-
-
-
-
-
Hallo Bernd,
<div style="position:absolute; left:50%">
<div style="position:absolute; left:-366px">In der Tat, stylisch gelöst.
AFAIK kannst Du auch ein <div style="margin: auto"> benutzen, um dieses DIV zu zentrieren. Weiss allerdings nicht, ob das alle Browser können.
IE6 und Mozilla könnens jedenfalls.Was die vertikale Positionierung angeht:
Hier würd ich ggf. etwas ähnliches versuchen, wie du schon für die horizontale positionierung probiert hast: Positionierung bei 50% der Seite minus der Größe des Divs.
Leider gibt es so etwas wie "vertical-align: middle" nicht für divs, was die Vertikale Mittelstellung etwas schwierig macht.Hoffe, das hilft weiter,
Viele Grüße,
Jörg-
Hallo Jörg,
AFAIK kannst Du auch ein <div style="margin: auto"> benutzen, um dieses DIV zu zentrieren.
Ich steh auf dem Schlauch. Was heißt AFAIK?
Hier würd ich ggf. etwas ähnliches versuchen, wie du schon für die horizontale positionierung probiert hast: Positionierung bei 50% der Seite minus der Größe des Divs.
Habe ich auch gedacht, nur nicht hingekriegt. Das Bild hat immer trotzdem oben am Rand gehangen.
Gruß, Bernd
-
Hallo,
Ich steh auf dem Schlauch. Was heißt AFAIK?
Sorry, "As far as I know" sollte das heissen - dachte, das wär ein hinreichend weit-verbreitetes Akronym :)
-
-