|
|||
div positionierung
hallo, habe ein kleines problem mit der positionierung eines div blocks. Arbeite mich grade in css und weg von tabellen ein und hab noch nicht so viel ahnung.
möchte einen "Hauptdivblock" wo alles andere drin ist mit fester breite und höhe mittig auf der seite positionieren. Zentriert funktioniert, aber der div ist immer oben bündig. hir mal der code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XXX</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="rahmen"></div> </body> </html> Code:
body { background-color:#666666; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; text-align:center; } .rahmen { text-align:left; background-color: #FFFFFF; background-repeat: repeat; height: 500px; width: 850px; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; } |
Sponsored Links |
|
|||
Versuch es einmal hiermit:
Code:
body { background-color: #f00; margin: 0; padding: 0; text-align: center; } .rahmen { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 850px; height: 500px; background-color: #000; } |
|
|||
Hi,
du positionierst einen div-Container mittig, indem du ihn mit left:50% und top:50% mittig positionierst und dann mit negativem margin um die halbe Breite nach links und die halbe Höhe nach oben verschiebst. Code:
body { background-color:#666666; } .rahmen { position:absolute; left:50%; top:50%; height: 500px; width: 850px; margin-left:-425px; margin-top:-250px; } Gruß Thomas www.css4you.de |
|
|||
Code:
.rahmen { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 850px; height: 500px; background-color: #000; } Code:
.rahmen { position:absolute; left:50%; top:50%; height: 500px; width: 850px; margin-left:-425px; margin-top:-250px; } |
|
|||
Zitat:
Mit welchem Browser schaust du dir denn die Seite an? |
|
|||
@bw
Füge mal ein Code:
border:1px solid #f00; ein Code:
background-color:#efefef; @cric Zitat:
Mit welchem Browser hast du das eigentlich getestet? Gruß Thomas www.css4you.de |
Sponsored Links |
|
|||
1. Ich habe gar nicht gewusst, dass der IE6 immer noch so schwach in der CSS-Unterstützung ist.
2. Meine Browsertests: Mozilla + Abkömmlinge, Safari, Opera 7.5, Konqueror, OmniWeb. In allen funktioniert dies einwandfrei. Und wenn MS endlich eine bessere CSS Unterstützung bieten wird, wird dies auch da klappen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |