nicht angemeldet
DIV Box nur mit StyleSheets zentrieren
Hallo!
Wie kann ich eine DIV Box mittig auf dem Bildschirm zentrieren, ohne Tabellen oder align=center etc.
Ziel ist, eine Box horizontal zu zentrieren. Bisher hab ich es nicht hinbekommen, so das es mit IE, NS und Opera gleich aussieht.
text-align: center; funktioniert nur für den Innenraum der DIV Box.
Momentan habe ich es so gelöst, aber es gefällt mir nicht:
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<div id="container">Inhalt</div>
</td>
</tr>
</table>
Es muss doch eine Lösung geben, das nur mit CSS zu machen. Hat jemand eine Idee?
Danke,
Peter
-
Hallo,
Wie kann ich eine DIV Box mittig auf dem Bildschirm zentrieren, ohne Tabellen oder align=center etc.
So: http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
Viele Grüße,
Stefan
-
So: http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
Genaus sowas suchte ich! Vielen Dank für den Link!
Gruß
Peter
-
-
Hallo, Peter !
Früher war das halt alles einfacher !
Hab' ein ähnliches Problem !
Weder in N7 noch Opera7 gelingt es mir untenstehende Tabelle mittels
CSS_Anweisung {text-align:center;} mittig zu kriegen . . .
Mit alignment klappt's auch nicht :-(
Es gelingt erst dann, wenn ich das deprecated attribute align="center" einbaue !!?<html><head><title></title>
<style type="text/css">
.center { text-align:center; }
.text { font-size:12px; }
.h1 { margin-left:auto; margin-right:auto; text-align:center; width:350px; background-color:#ffdddd; border:solid 1px black;}
.tabelle { background-color:#ddeeff; border:solid 1px black; width:80%; height:80%;}
</style>
</head>
<body>
<div class="center">
<h1 class="h1">Honi soit qui mal y pense !<div class="text">Redete es aus dem Div-Container !</div></h1>
</div>
<div style="text-align:center;"><table class="tabelle" align="center"><tr><td class="center">
<h2>N'est-ce pas !?<div class="text">Sprach die Tabelle</div></h2></td></tr></table></div>
</body></html>Liegt's am Browser, oder an meinen beschränkten CSS-Kenntnissen ??
Gruß 08/15-
Hallo,
Weder in N7 noch Opera7 gelingt es mir untenstehende Tabelle mittels
CSS_Anweisung {text-align:center;} mittig zu kriegen . . .Seltsam, bei der Klasse "h1" wusstest du, wie's geht, bei der Tabelle nicht...
Im Übrigen ist es nicht sehr sinnvoll, die Klasse namensgleich dem Tag zu verwenden.Gruß
Kurt
--
"Mut ist eine Tugend, doch Angst beweist Vernunft, Bewusstsein und Phantasie. Die Kunst ist es abzuwägen."
http://faq.united-web.at
http://elektro-dunzinger.at
http://shop.elektro-dunzinger.at -
Hallo,
Weder in N7 noch Opera7 gelingt es mir untenstehende Tabelle mittels
CSS_Anweisung {text-align:center;} mittig zu kriegen . . .Jepp, so wie du dir das denkst, mag es dir vielleicht logisch erscheinen, ist allerdings nicht ganz richtig.
<style type="text/css">
[...]
.tabelle { background-color:#ddeeff; border:solid 1px black; width:80%; height:80%;}Ergänze einfach noch ein margin-left:auto und ein margin-right:auto und es sollte mit der horizontalen Zentrierung funktionieren. Bei h2 gings doch auch so :-)
Hoffe es hilft
Torsten-
Hallo TorstenA, hallo KD-one !!
Ergänze einfach noch ein margin-left:auto und ein margin-right:auto und es sollte mit der horizontalen Zentrierung funktionieren. Bei h2 gings doch auch so :-)
Hoffe es hilft
TorstenFüg ich das ein, geht's jetzt zwar im N7, im MSIE aber nicht mehr !
Hab jetzt herausgefunden, daß es in Beiden gleichzeitig nur dann geht, wenn ich die Zentrierung über einen div-Tag vornehme :<html><head><title></title>
<style type="text/css">
.center { text-align:center; }
.text { font-size:12px; }
.h1 { margin-left:auto; margin-right:auto; width:350px; background-color:#ffdddd; border:solid 1px black;}
.tabelle { margin-left:auto; margin-right:auto; background-color:#ddeeff; border:solid 1px black; width:80%; height:80%;}
</style>
</head>
<body>
<div class="center"><h1 class="h1">Honi soit qui mal y pense !<div class="text">Redete es aus dem Div-Container !</div></h1>
<div class="center"><table class="tabelle"><tr><td class="center"><h2>N'est-ce pas !?<div class="text">Sprach die Tabelle</div></h2></td></tr></table></div>
</body></html>Der Versuch das Attribut class="center" im table-Tag zu plazieren scheitert kläglich !
Ebenso der Versuch die Anweisung text-align:center; in der generischen Festlegung der Klassen .h1 und .tabelle zu plazieren !!
Was ist damit nun gewonnen !?
Es bleibt dabei : Früher war alles einfacher !!
Ergo : <table align="center">
;o)-
Hi,
Es bleibt dabei : Früher war alles einfacher !!
Ergo : <table align="center">aber nur, wenn Du es so umständlich versucht..
dasselbe erreichst du z.b. so:<html><head><title></title>
<style type="text/css">
body, td { text-align:center; }
h1 span, p { font-size:12px; }
h1 { margin-left:auto; margin-right:auto; width:350px; background-color:#ffdddd; border:solid 1px black; }
table { margin-left:auto; margin-right:auto; background-color:#ddeeff; border:solid 1px black; width:80%; height:80%;}
</style></head><body>
<h1>Honi soit qui mal y pense !<br /><span>Redete es aus dem Div-Container !</span></h1>
<table><tr><td><h2>N'est-ce pas !?</h2><p>Sprach die Tabelle</p></td></tr></table></body></html>
freundliche Grüße
Ingo-
Nicht übel, Herr Dübel !!
:-)dasselbe erreichst du z.b. so:
<html><head><title></title>
<style type="text/css">
body, td { text-align:center; }
h1 span, p { font-size:12px; }
h1 { margin-left:auto; margin-right:auto; width:350px; background-color:#ffdddd; border:solid 1px black; }
table { margin-left:auto; margin-right:auto; background-color:#ddeeff; border:solid 1px black; width:80%; height:80%;}
</style>
</head><body>
<h1>Honi soit qui mal y pense !<br /><span>Redete es aus dem Div-Container !</span></h1>
<table><tr><td><h2>N'est-ce pas !?</h2><p>Sprach die Tabelle</p></td></tr></table>
</body></html>
freundliche Grüße,IngoNur :
Daß ich dazu margin-left:auto; margin-right:auto; zwingend benötige, kann und will ich nicht nachvollziehen ...
Es bleibt dabei : Früher war alles einfacher !!
Ergo : <table align="center">
Gruß 08/15 :-)
-
-
Hallo,
Füg ich das ein, geht's jetzt zwar im N7, im MSIE aber nicht mehr !
Ups, könnte evtl. an einem fehlenden Dokumententyp liegen. Ich habe deinen Code mal etwas umgebaut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
.center { text-align:center; }
.text { font-size:12px; }
.h1 { margin-left:auto; margin-right:auto; text-align:center; width:350px; background-color:#ffdddd; border:solid 1px black;}
.tabelle { background-color:#ddeeff; border:solid 1px black; width:80%; height:80%; margin-left:auto;margin-right:auto}
//-->
</style>
</head>
<body>
<div class="center">
<h1 class="h1">Honi soit qui mal y pense !<div class="text">Redete es aus dem Div-Container !</div></h1>
</div>
<table class="tabelle">
<tr>
<td>
<h2>N'est-ce pas !?</h2>
</td>
</tr>
</table>
</body>
</html>Funktioniert im NN 6.2 und im IE 6.
Viele Grüße
Torsten
-
-
-
-
Weise der Div margin:auto zu.