zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zentrierproblem mit px und %

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2010, 15:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 52
alsodenn befindet sich auf einem aufstrebenden Ast
Frage 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>
CSS:
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; }
Kann mir jemand helfen? Wie kann ich die grüne Fläche ( div#contentBox ) zentrieren?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2010, 08:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 52
alsodenn befindet sich auf einem aufstrebenden Ast
Standard

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 .
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2010, 11:12
Benutzer
neuer user
 
Registriert seit: 02.02.2010
Beiträge: 52
RolWg befindet sich auf einem aufstrebenden Ast
Standard

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, ...
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2010, 12:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von RolWg Beitrag anzeigen
Klar, daß Du für den IE ein text-align:center; mit einbauen solltest?
Nicht mit vernünftigem Doctype (abgesehen vom IE 5.x).
__________________
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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2010, 09:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 52
alsodenn befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.06.2010, 10:02
Benutzer
neuer user
 
Registriert seit: 02.02.2010
Beiträge: 52
RolWg befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Nicht mit vernünftigem Doctype (abgesehen vom IE 5.x).
Echt? Das ist Doctype-abhängig? Wie das? IE kann das, je nach Doctype?
__________________
cu
RolWg
-------------------------------------------------
Mac Yosemite / Win7, Moz. FF, Opera, Thunderbird, ...
Mit Zitat antworten
  #7 (permalink)  
Alt 22.06.2010, 11:24
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von RolWg Beitrag anzeigen
Echt? Das ist Doctype-abhängig? Wie das? IE kann das, je nach Doctype?
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
Mit Zitat antworten
  #8 (permalink)  
Alt 22.06.2010, 16:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von alsodenn Beitrag anzeigen
contentBox mittig ausrichten
#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.

Zitat:
Zitat von alsodenn Beitrag anzeigen
Transparenz ist nicht überall gleich hell, auch wenn gleiche Grafik
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.)
Mit Zitat antworten
  #9 (permalink)  
Alt 23.06.2010, 11:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 52
alsodenn befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Schau Dir mal den Inline-Style von #content an.
Ay, stimmt, da hat sich ein JS eingeschlichen, das ich gar nicht wollte. Vielen Dank für den Hinweis!

Zitat:
#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.
Ok, hab das mal so gemacht. Einmitten funktioniert, aber es gibt mir jetzt oben einen Abstand!:
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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.06.2010, 14:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von alsodenn Beitrag anzeigen
es gibt mir jetzt oben einen Abstand
collapsing margins durch margin-top von #contentBox - verwende padding statt margin.

Zitat:
Zitat von alsodenn Beitrag anzeigen
Und im IE6 sieht es ganz übel aus. Sidebar ist komplett weg.
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.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:59 Uhr.