|
|||
Zentrierproblem mit px und %
Hallo Community
Hier die Darstellung meines Problems: http://lukas.twwc-test.ch/css_problem.jpg Blau (div#sidebar) = Sidebar mit fixer Breite in Pixel und 100% Höhe des Browserfensters Rot (div#content-container) = veränderbare Grösse gemäss Browserfenster, immer 100% Höhe des Browsers und 100% Breite des Browsers minus die Breite der Sidebar Grün (div#contentBox) = Contentbox mit fixer Breite in Pixel (sollte zentriert werden) Der Grüne Bereich müsste aber zentriert sein, wie mach ich das am Besten? Hier mein Code: HTML: HTML-Code:
<body> <div id="container"> <div id="sidebar"> SIDEBAR </div> <div id="content-container"> <div id="contentBox"> contentBox </div> </div> </div> </body> Code:
html{ height: 100%; overflow-y: scroll; } body{ color: #fff; font: 12px/22px arial,sans-serif; height: 100%; margin: 0; padding: 0; } #container{ background-color: pink; height: 100%; z-index: 3; position: relative; } #container #sidebar{ background-color: blue; float: left; height: 100%; width: 270px; } #container #content-container{ height: 100%; background-color: red; } #container #content-container #contentBox{ width: 688px; height: 500px; background-color: green; margin: 0 auto; } |
Sponsored Links |
|
|||
Ist mein Problem nicht lösbar mit CSS oder habe ich mein Problem nicht verständlich genug geschildert?
Falls es nicht verständlich ist, bitte melden, dann versuche ich es nochmals . |
Sponsored Links |
|
|||
Hallo alsodenn,
ich glaube, mir fehlen noch ein paar Infos, daher kann ich nur mutmaßen. Aber spontan fällt mir auf, daß die Sidebar bei Dir gefloatet ist, der Content-Container (selbe Ebene) aber nicht. Entsprechend hast Du das Floaten in dieser Ebene abschließend wahrscheinlich nicht gecleart. So eine Inkonsistenz beim Floaten bringt Dir ungeahnte Folgeeffekte. Also grundsätzlich: Einmal angefangen, in einer Ebene zu floaten, dann _alle_ Elemente floaten und zum Schuß clearen! An sich ist 'ne horizontale Zentrierung über margin: 0 auto; ganz O.K. Klar, daß Du für den IE ein text-align:center; mit einbauen solltest?
__________________
cu RolWg ------------------------------------------------- Mac Yosemite / Win7, Moz. FF, Opera, Thunderbird, ... |
|
|||
Danke für die Anworten.
Leider bin ich noch nicht viel weiter. Ich habe es mal ohne float versucht, hier mein Testcase: Testcase CSS Probleme Also links ist die halbdurchsichtige Sidebar (100% height). Dies funktioniert auch soweit überall. Dann ist aber noch die contentBox mit abgerundeten Ecken. Diese sollte mittig sein. Wie mache ich das? Noch ein merkwürdiges Phänomen: Transparenz erreiche ich mit png24-Hintergrundbilder. Die obere Grafik der contentBox ist die gleiche wie die wiederholende Grafik in der Mitte. Aber in der Mitte ist sie heller als oben. Wieso das denn? Hat jemand schon das gleiche Problem? Also momentan habe ich zwei Probleme: 1.) contentBox mittig ausrichten (nur mit JS möglich oder auch mit CSS?) 2.) Transparenz ist nicht überall gleich hell, auch wenn gleiche Grafik Danke für die Tipps und Hilfe schon im voraus. |
|
|||
Echt? Das ist Doctype-abhängig? Wie das? IE kann das, je nach Doctype?
__________________
cu RolWg ------------------------------------------------- Mac Yosemite / Win7, Moz. FF, Opera, Thunderbird, ... |
|
||||
das horizontale Zentrieren mit Breite + margin:0 auto; kann schon der IE 6.
Nur wenn er sich im Quirksmodus befindet, kommt er als IE 5.5 daher, der wiederum das text-align:center braucht.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
||||
#container kann padding-left passend zur Sidebar bekommen, die dann mit neg. margin in diesen Bereich geschoben wird (der IE 6 wird da erstmal Fehldarstellungen produzieren). Dann kann der Content per margin zentr. werden.
Schau Dir mal den Inline-Style von #content an.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Zitat:
Zitat:
Testcase CSS Problem Und im IE6 sieht es ganz übel aus. Sidebar ist komplett weg. Kann man das korrigieren oder ist für IE6 alles verloren? (wegen Transparenz ist klar,da gibt es noch ein pngfix) Allgmeine Frage wegem dem Zentrierungsproblem: Was meint ihr, lohnt sich der extra Aufwand mit CSS einzumitten? Mit JS wäre es ja einfacher und auf der Seite wird ja schon JS benutzt für das Hintergrundbild. Oder ist weniger JS umso besser? |
Sponsored Links |
|
||||
collapsing margins durch margin-top von #contentBox - verwende padding statt margin.
Sidebar bekommt display: inline; gegen den doubled-float-margin-bug. Aber ich glaube Du machst einen Denkfehler: Du möchtest anscheinend mitwachsende Spalten, aber die bekommst Du nicht, indem beide min-height: 100%; haben, sondern am besten per FAQ 1.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div-Tag Zentrierproblem | Stef90 | CSS | 3 | 07.01.2009 14:43 |
Zentrierproblem | Douglas | CSS | 10 | 30.07.2007 18:43 |
Zentrierproblem beim IE | Michael Dittrich | CSS | 4 | 10.05.2006 20:18 |