nicht angemeldet
<div> in die mitte - ohne Tabellen
Hallo liebes Forum.
Ich versuche schon den ganzen Tag, ein einfaches div in die Mitte der Seite zu bekommen: horizontal und vertikal zentriert eben.
Bekam es nicht hin, suchte im Internet. Tausend Lösungen, teils mit Tabellen, teils mit _zwei_ divs...
Aber bitte, Tabelle stören nur den Rest meines Layouts.
Welche Möglichkeiten gibt es, _ein_ div mittig zu halten, und zwar _ohne_ Tabellen ?
Wäre glücklich über eine Lösung.
Danke für die Zeit,
schu-schu
-
schu-schu,
Welche Möglichkeiten gibt es, _ein_ div mittig zu halten, und zwar _ohne_ Tabellen ?
Angabe von width und height für die entsprechenden Elemente (html!) und margin:auto; der IE sollte nicht im Quirks-Modus sein und auch nicht zu alt.
Gunnar
--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
body
{
background-image: url(Design_new.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}.el_center
{
margin:auto;
height:425px;
width:100px;
}
</style></head>
<body bgcolor="#FFFFFF">
<div align="center" class="el_center">
Test
</div></body>
</html>Das funktioniert nicht.
Du sagtest, height und width einstellen. Dabei hast du "html" in Klammern geschrieben. Es gibt für den div-Tag kein width und kein height. Das muss per CSS geschehn.-
schu-schu,
Du sagtest, height und width einstellen. Dabei hast du "html" in Klammern geschrieben. Es gibt für den div-Tag kein width und kein height. Das muss per CSS geschehn.
Ich sagte auch nicht
Angabe (html!) von width und height für die entsprechenden Elemente
sondern
Angabe von width und height für die entsprechenden Elemente (html!)Also
html {height:100%}
nicht vergessen.Gunnar
--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
body
{
background-image: url(Design_new.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}.el_center
{
margin:auto;
height:425px;
width:100px;
}html
{
height:100%;
}
</style></head>
<body bgcolor="#FFFFFF">
<div align="center" class="el_center">
Test
</div></body>
</html>Auch das funktioniert nicht. Was mache ich wieder falsch ?
-
Hallo
Auch das funktioniert nicht. Was mache ich wieder falsch ?
Du vergisst offenbar, dass du ein Element nur zentrieren kannst, wenn dem Browser die Dimension des umgebenden Elements bekannt ist. Das ist in diesem Falle <body>, wobei, wie Gunnar bemerkte, auch <html> dimensioniert werden sollte (damit's auch alle (graphischen) Browser kapieren).
html,body { width:100%; }
.el_center {
width:60%;
margin:auto;
}Wenn das <div> keine feste Breite haben muss, geht auch
.el_center {
width:60%;
margin-left:20%;
}Noch ein Hinweis: Bei einem solchen, nur einmal auf der Seite vorkommenden Element, ist die Vergabe einer id besser. Außerdem solltest du in id- und class-Namen den Unterstrich vermeiden. Benutze stattdessen den Bindestrich. Einige ältere Browser kommen mit Ersterem nicht zurecht, da die Verwendung des Unterstrichs in den genannten Fällen erst später zum CSS-Standard hinzugefügt wurde (CSS 2(?)).
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
body
{
background-image: url(Design_new.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}.elcenter
{
height:425px;
width:60%;
margin-left:20%;
}html, body
{
height:100%;
}
</style></head>
<body bgcolor="#FFFFFF">
<div align="center" class="elcenter">
Test
</div></body>
</html>Jetzt wirds albern. Es funktioniert immer noch nicht.
Ach übrigens: Das alles wird mit Opera 7.54 getestet
-
Hi,
Jetzt wirds albern. Es funktioniert immer noch nicht.
warum sollte es? Ich sehe nirgends Angaben zur vertikalen Zentrierung.
Vielleichts schaust Du mal auf meine Seite http://www.1ngo.de/web/zentrierung.html das letzte Beispiel an. Hier wird ein IMG zentriert - eine komplette (größere) Seite würde ich so allerdings nicht zentrieren, da in zu kleinen Fenstern Inhalte unzugänglich werden.freundliche Grüße
Ingo
-
-
-
-
-
-
-
Hallo schu-schu
Welche Möglichkeiten gibt es, _ein_ div mittig zu halten, und zwar _ohne_ Tabellen ?
z.B. http://skop.net/self/zentriertes_div.html
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Dafür brauche ich auch zwei divs. Geht es auch mit einem einzigen?
Oder anders: Gibt es eine Möglichkeit, ein div ohne Hilfe eines anderen, mittig zu positionieren?
-
Hallo schu-schu
Oder anders: Gibt es eine Möglichkeit, ein div ohne Hilfe eines anderen, mittig zu positionieren?
Ja, z.B:
http://d-graff.de/demos/selfhtml/center1.html
Das ist allerdings nicht groß getestet und wird bei zu kleinem Browserfenter
in vielen Browsern abgeschnitten.
Hier eine Variante mit einem zweiten Div als spacer:
http://d-graff.de/demos/selfhtml/center2.htmlAuf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hallo schu-schu,
Ich versuche schon den ganzen Tag, ein einfaches div in die Mitte der Seite zu bekommen: horizontal und vertikal zentriert eben.
Bekam es nicht hin, suchte im Internet. Tausend Lösungen, teils mit Tabellen, teils mit _zwei_ divs...
und bestimmt auch welche mit margin:auto und ggf. Ersatz für andere Browser die das nicht richtig umsetzen, und verschiedene Klimmzüge um auch vertikal in die Mitte zu kommen? Z.B. so Center Div, Zentriertes Div, Zentriertes Div für alle Browser. Ansonsten ist für mich nicht ganz nachvollziehbar wo ein grundsätzliches, also jenseits einer Quelltextästhetik, Problem bei "_zwei_ divs" liegt, wenn du da funktionierende Lösungen ohne CSS-Browserweichen usw. gefunden hast hat das doch Vorteile?
Grüsse
Cyx23