nicht angemeldet
DIV-Layer positionieren
Hallo,
ich möchte einen Div-Tag so auf der Seite positionieren, dass er immer in der Mitte der Seite erscheint. Ich habe eine Möglichkeit gefunden für die horizontale Anordnung gefunden mit:
<body style="text-align:center;">
<div id= ...
Kennt jemand vielleicht eine ähnliche Möglichkeit für die vertikale Ausrichtung???
-
hallo
Kennt jemand vielleicht eine ähnliche Möglichkeit für die vertikale Ausrichtung???
schon mit vertical-align versucht? ... bin mir aber nicht sicher, ob das geht ...
cu
ulli-
Hallo,
ein altbekanntes und noch nie gelöstes Problem. Lösungsansätze gehen in die Richtung, das/den <div> in eine Tabellenzelle zu packen, weil da die Ausrichtung in horizontaler und vertikaler Richtung funktioniert.
Weitere Anmerkungen findest du im Archiv.
MfG
André
--
ss:{ zu:} ls:? fo:| de:] va:) ch:] sh:) n4:{ rl:( br:^ js:| ie:| fl:) mo:}
http://forum.de.selfhtml.org/archiv/2003/10/60651/#m341175
-
-
Hi,
ich löse das Problem immer so:<table width="100%" heigth = "100%">
<tr>
<td width="50%"></td>
<td> DEIN INHALT </td>
<td width="50%"></td>
</tr>
</table>gruss
GugelHupf -
Allein mit CSS kenne ich leider keine Möglichkeit, jedenfalls keine, die in allen gängigen Browsern funktioniert.
Mit Javascript kann man zwar uneingeschränkt zentrieren, der nötige Code ist aber realtiv komplex und fehleranfällig auf nicht damit getesteten Browsern...
-
Hallo,
Kennt jemand vielleicht eine ähnliche Möglichkeit für die vertikale Ausrichtung???
Guck mal hier - vielleicht gibt Dir das eine Idee:
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert
Testseite:
http://www.tiptom.ch/homepage/bsp/tabellezentriert.htmlPrinzip: Hoehe, margin-top und margin-bottom in % angeben,
margin-top und margin-bottom gleiche Werte.Funktioniert ordentlich in vielen Browsern, solange das
Browserfenster genug hoch ist.Gruesse,
Thomas
-
Hallo Micha,
also, den CSS-Code in in den einleitenden <BODY>-tag zu postieren
(wie Du es gemacht hast), finde ich nicht so gut.
Dort ist die Notierung ja nachrangig, d.h. der CSS-Code, der mal im
BODY-Textkörper notiert wird, überschreibt ihn.
Das sähe dann so aus:
Die im <BODY>-tag erfolgte Centrierung könnte eine im
<BODY>-Textkörper erfolgte Ausrichtung z.B. nach rechts
die oben erfolgte Centrierung zunichte machen, da die Notierung im Textkörper immer vorgeht, also Vorrang hat.Meines Wissens gibt es tatsächlich keine vertikale Ausrichtung - ohne dass man zu einem Kunstgriff oder zu HTML-Tabellen-tags greift.
Ich schlage deshalb Folgendes vor:
Notiere die Style-Sheet-Angaben, die für das horizontale Centrieren erforderlich sind, in einer separaten Textdatei und binde diese Datei in jede x-beliebige HTML-Datei mit ein.
Dann hättest Du einen schlanken HTML-Code.Nun kommt es noch darauf an, ob Du gleichzeitig auch noch horizontal centrieren möchtest.
Da, denke ich, geht es nur, wenn Du eine weitere CSS-Definition nimmst.
Ich habe das mal wie nachstehend aufgeführt, gelöst.
<DIV style="position:absolute; height:94%; width:100%; background-color: red; ">
<DIV style="position:relative; height:100%; width:100%; text-align:center; FONT-SIZE: 1em; color: blue; font-family : comic sans ms; top:45%">
Bayern gewinnt gegen Anderlecht.
</DIV></DIV>
Wenn Du das mal in Deinen HTML-Editor eingibst und ausführst, kannst Du es sehen.
Die Textzeile steht richtig schön horizontal und vertikal zentriert.
Auch, wenn Du dabei mal die Funktionstaste F11 drückst, bleiben die Proportionen erhalten.
Demnach müßte es also auch auf großen Monitoren (19 Zoll und größer) gehen.
(ok - korrekt ist nur die horizontale Zentrierung. Bei der vertikalen Zentrierung muß
eben ein wenig getrickst werden, wenn es mehrere Zeilen sein sollen. Aber auch dort bleibt der Auswand ziemlich gering - kann mit der Definition 'top...' gemacht werden - .Insgesamt bleibt also alles ziemlich schlank. Und kann noch schlanker werden, wenn Du den CSS-Code in eine separate Definitions-Datei auslagerst.
Ich vermute mal, dass Du eine Art Kopf für Deine Web-Seiten erstellen möchtest, der dann auf allen Seiten an immer der gleichen Stelle stehen soll.
Sowas geht mit meinem Vorschlag recht gut.
Heinz