Zur Navigation

<div>-Layer in CSS zentrieren [2]

11 othmar (Gast)

yow, cool, danke!
schaut aus, als ob es funktionieren würde
macht spass, 'n frameset einer alten site durch css zu ersetzen :)
nur schade, dass der server meines kunden kein php unterstützt, von wegen includes, aber was solls... danke auf alle fälle und grüsse aus sbg

09.02.2005 21:55

12 pat (Gast)

Ja, das Zentrieren klappt mit:

<div style="text-align:center">
<div style="margin:auto">Layer, der auch in Firefox und Opera zentriert wird</div>
</div>

...aber wenn der zu zentrierende Div-Container breiter ist, als die Bildschirmauflösung werden auf der linken Seite ca 100-150px abgeschnitten und man kann nur nach rechts scrollen.

Hat jemand eine Idee um das zu vermeiden?

12.02.2005 23:57

13 Jörg Kruse

Hallo pat,

Ich bin mir nicht ganz sicher, was du meinst: möchtest du, dass bei zu kleinem Fenster der horizontale Scrollbalken sich in der Mitte befindet? Die Voreinstellung bei den Browsern ist, dass man nach rechts scrollt, weil man ja auch links zu lesen beginnt; ich wüsste jetzt nicht, wie man das ändern könnte, außer vielleicht mit JavaScript: scrollTo()

13.02.2005 00:38

14 wrtlprnft (Gast)

Aber das Problem ist ja, dass der linke Teil der Box gar nicht mehr zu lesen ist.
Wenn man einen Container mit 1500px Breite in der Mitte zentrieren will und das Fenster nur 1000 Pixel breit ist werden links 250 Pixel abgeschnitten, an die man mit dem Scrollblaken gar nicht hinkommt...
Die einzige Möglichkeit, das zu vermeiden wäre wohl max-width:100%, aber das können ja nicht alle Browser.

13.02.2005 10:30

15 Jörg Kruse

Hallo wrtlprnft,

Ok, jetzt verstehe ich. Das Problem tritt aber nicht grundsätzlich auf, hier wird z.B. nichts links abgeschnitten bei 1024*768:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center">
<div style="margin:auto; width:1500px; border:solid 1px red; text-align:left">Großer Container, dder zentriert wird</div>
</div>
</body>
</html>

Am Zentrieren alleine wird es nicht liegen, habt ihr ein Beispielcode oder eine URL, wo das Problem auftritt?

13.02.2005 11:16 | geändert: 13.02.2005 11:21

16 pat (Gast)

Hi Jörg,

es ist das Border-Attribut! Probier mal das in Mozilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;">
<div style="margin:auto; width:1500px; text-align:left;"><div style="border:solid 1px red;">Großer Container, der zentriert wird</div></div>
</div>
</body>
</html>

Danke! Du hast mich auf den richtigen Weg gebracht.

pat

13.02.2005 21:59

17 Jörg Kruse

Ja, jetzt seh ich's auch, und zwar in Netscape 6.1 (entspricht in etwa Mozilla 0.9) wird der Inhalt in deinem Beispiel links abgeschnitten; der Bug scheint in neueren Mozilla Versionen behoben zu sein, in Mozilla 1.75 wird der Container ebenso vollständig angezeigt, wie in allen anderen Browsern. Aber der Anzeigefehler ist dann ja auch leicht zu beheben, wenn der Inhalt in dem Container liegt, für den die Breite definiert ist

13.02.2005 22:24 | geändert: 13.02.2005 22:26

18 pat (Gast)

Hallo Jörg,
Also bei meinem (Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.3.1) Gecko/20030425) tritt der Bug noch auf...

Danke
pat

14.02.2005 16:19

19 rossi (Gast)

Hallo aus Kanada,

Es sollte hoffentlich gehen. Ich hatte das Problem einen zentrierten Container für eine ganze Navigation zu schaffen.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>
<style type="text/css">
<!--
#container {
margin-left: auto;
position: absolute;
width: 200px;
}
#nested {
background-color: #66FF66;
position: absolute;
width: 100px;
}
-->
</style>
</head>
<body>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="50" bgcolor="#99CCCC">
<div id="container">
<div id="nested">Hallo</div>
</div>
</td>
</tr>
</table>
</body>
</html>

19.02.2005 06:06

20 Jörg Kruse

Hallo rossi,

das Zentrieren funktioniert auch mit dem HTML-Attribut align="center", wie du es gemacht hast. Allerdings ist dies kein XHTML 1.0 Strict, dort kann man nur noch mit CSS zentrieren. Wenn du validen XHTML Code haben möchtest, solltest du den Dokumenttyp ändern auf:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

oder mit CSS zentrieren, und dabei vielleicht auch auf die Tabelle verzichten (falls diese nicht noch einen anderen Zweck erfüllt):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>
<style type="text/css">
<!--
#container {
background-color:#99CCCC;
margin:auto;
width:200px;
}
#nested {
background-color:#66FF66;
width:100px;
}
-->
</style>
</head>
<body>
<div id="container">
     <div id="nested">Hallo</div>
</div>
</body>
</html>

19.02.2005 11:18 | geändert: 19.02.2005 11:21