Veröffentlicht 17. April 200619 j hi ich versuche, einen text in einer html-seite mittels einer "div-box" (weiss nicht, ob man so dazu sagt) genau oben an den rand zentral auf die seite zu machen. die box definiere ich so: <style type="text/css"> <!-- #box1 { position: absolute; top: 0px; z-index: 1; } --> </style> im body rufe ich dann die box mit <div id="box1"> TEXT </div> auf. damit ist die schrift ganz oben am rand. aber ich krieg die schrift nicht in die mitte der seite. ein "text-align: center" in der box-definition hab ich schon probiert, das funzt nicht. ein <center> [...] </center> um die div-tags bringt auch nix. über eine tabelle innerhalb des div klappt es, aber dann bleibt die box nicht ganz oben am rand (das ist aus platzgründen ein muss). wäre nett, wenn mir einer sagen könnte, wie ich die schrift in die mitte kriegen kann. irgendwie muss man das der box ja klarmachen können. vielen dank schon mal norman
18. April 200619 j Hi! <style type="text/css"> <!-- body { margin: 0px; } #box1 { position: relative; text-align: center; top: 0px; } --> </style> und <div id="box1"> TEXT </div> funktioniert sowohl im Internet Explorer als auch in Mozilla Firefox. MfG Zaubi
18. April 200619 j text-align betrifft nur den Inhalt des DIV. Da das DIV per default so breit wie die Anzeige ist, ist damit auch der Inhalt in der Mitte. Wenn die Box aber einen Rahmen o.ä. hat geht es damit nicht mehr. <style type="text/css"> <!-- #box1 { margin: 0 auto; width: 50%; border: 1px solid #000000; } --> </style> ... <div id="box1"> TEXT </div> sollte aber gehen. Ach ja: Nur weil die Box in der Mitte ist, ist es der Inhalt deswegen noch nicht Dann brauchst du u.U. doch den text-align.
18. April 200619 j Man sieht: viele Wege führen nach Rom. Es gibt noch weitere Möglichkeiten, einen DIV-Container zu zentrieren. Hier geht es allerdings um den Text/Inhalt des Containers (zumindest habe ich das so verstanden). Und dieser lässt sich mit text-align: center; zentrieren. Der Knackpunkt war jedoch das position: absolute;. Dieses sorgt dafür, dass sich der Container in der oberen linken Ecke befindet und genau so breit ist wie sein Inhalt. Eine Kombination aus den letzten beiden Lösungsansätzen dürfte dich ans Ziel bringen. Grüße, Zaubi
18. April 200619 j super, damit klappts jetzt die box wird sauber in die mitte gepflanzt. vielen dank zaubi und jester
18. April 200619 j Der Knackpunkt war jedoch das position: absolute;. Dieses sorgt dafür, dass sich der Container in der oberen linken Ecke befindet und genau so breit ist wie sein Inhalt.i Kann man vereinfacht so sagen, aber genauer nimmt ein position:absolute; das so gestylte Element aus dem Textfluss (wie ein Float) und es schwebt sozusagen über allen anderen Elementen. Da sich ein Element normalerweise nach seinem Elternelement ausrichtet und das Elternelement ja jetzt nicht mehr vorhanden ist, hängt es einfach am Anfang (oben, links) und die 100% Breite (des Elternelements) fällt eben auch weg. EDIT: Ganz aus dem Textfluss aber auch wieder nicht, denn floatende Elemente haben einen eigenen Textfluss. Wie dieses Bsp. beweist: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- #box1 { position: absolute; left: 30%; border: 1px solid #000000; width: 50%; height: 125px; } #box2 { position: absolute; right: 0; border: 1px solid #ff0000; height: 50px; } //--> </style> </head> <body> <div id="box1"> <div id="box2"> Test2 </div> Test1 </div> </body> </html>
19. April 200619 j Da hast du Recht. Wollt's nur vereinfacht auf dieses Besipiel beziehen. @ alleswarschonbelegt: Kein Problem, immer wieder gerne... Ich denke, damit sollten wir das Thema bei dem belassen. Alles, was jetzt nocht kommt, wäre OT. Grüße, Zaubi
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.