DivContainer

[augenball]

Moin, ich habe ein Problem...

Also ich habe einen Header einen Contentbereich und einen Footer programmiert. So weit, so gut. So ist auch alles Top, wenn ich aber den Zoomfaktor des Viewport meines Browsers (STRG + Mausrad) vergrößere, verschiebt sich mein Contentcontainer nach links, also rutscht aus der Zentrierung raus.

Habe schon versucht mehrere Container drum zu legen um das Problem zu lösen aber nichts.

/*Contentbereich*/

div#wrapper div#contentcontainer { width:100%; height:100%; }

div#wrapper div#contentcontainer div#contentzone { width:100%; }

div#wrapper div#contentcontainer div#content { width:960px; height:59px; background:url(../images/layout/content_bg.jpg) 0 0 repeat-y; margin:0 auto; }

Hat wer einen Vorschlag das Problem zu lösen?

 

[Leonid_D]

AW: DivContainer

Hallo,
du könntest einen float im letzten Container setzen und in die contentzone einen margin 0 und auto, sodass es mittig wird...

div#wrapper div#contentcontainer div#contentzone { margin: 0 auto; }

div#wrapper div#contentcontainer div#content
{ width:960px; height:59px; background:url(../images/layout/content_bg.jpg) 0 0 repeat-y; float: left; }


Viele Grüße
Leonid

 

[augenball]

AW: DivContainer

Vielen Dank! - Werde ich probieren und mich dann nochmal melden ...

 

[Llynyania]

AW: DivContainer

ganz schön viele divs. Vielleicht unnötig. Was ist der Unterschied von contentzone und content?

Soll es ein fluides Konstrukt sein?

wenn man float setzt, sollte man diesen auch wieder stoppen.

mit einem <div class="clear"> - .clear {clear: both;} zum beispiel.

 

[hubspe]

AW: DivContainer

Habe schon versucht mehrere Container drum zu legen um das Problem zu lösen aber nichts.

man zentriert eine Webseite horizontal indem man um alle Container einen div#wrapper legt, dem eine feste Breite und margin:0 auto; gibt.
Das klappt immer zuverlässig.

Wo ist der Link zum Problem??

/*Contentbereich*/

div#wrapper div#contentcontainer { width:100%; height:100%; }

div#wrapper div#contentcontainer div#contentzone { width:100%; }

div#wrapper div#contentcontainer div#content { width:960px; height:59px;  background:url(../images/layout/content_bg.jpg) 0 0 repeat-y; margin:0  auto; }

Dieses Codebeispiel ist weitgehend sinnfrei.

Hallo,
du könntest einen float im letzten Container setzen und in die contentzone einen margin 0 und auto, sodass es mittig wird...

Das hier auch.

 

[augenball]

AW: DivContainer

Danke erstmal für die vielen Beiträge

@leon ID ... Funktioniert nicht ...

@ andere hier nochmal der komplette CSS-CODE, habe die Seite noch nicht hochgeladen ... hier mal die Seite in Action

[FONT=Courier New]* { margin:0; padding:0; border:0; }

html { background:url(../images/layout/html_bg.jpg) 0 0 repeat; }

body { font-family: "Verdana", Arial, sans-serif; font-size:10px; color:#444; background:url(../images/layout/body_bg.jpg) 15px 0 repeat-x; }

/*Klassen*/
.clear { clear:both; float:none; }

/*Content Klasse*/

.column { width:400px; float:left; background-color:blue;  margin:25px 0 25px 52px;}

/*Master*/
div#wrapper { width:100%; height:100%; }

/*Header*/

div#wrapper div#headercontainer { width:100%; height:301px; }
div#wrapper div#headercontainer div#headerbg { width:1400px; height:301px; background:url(../images/layout/header_oly.jpg) 0 0 no-repeat; margin: 0 auto; }
div#wrapper div#headercontainer div#header { width:960px; height:301px; margin:0 auto; position:relative; background:url(../images/layout/header.jpg) 0 0 no-repeat; }

/*Content*/

div#wrapper div#contentcontainer { width:100%; height:100%; }

div#wrapper div#contentcontainer div#contentwrapper { width:100%; height:100%; }

div#wrapper div#contentcontainer  div#contentwrapper div#content { width:960px; height:100%; background:url(../images/layout/content_bg.jpg) 0 0 repeat-y; margin:0 auto; } 

/*Footer*/

div#wrapper div#footercontainer { width:100%; height:256px; background:url(../images/layout/footer_bg.jpg) 0 0 repeat-x; }
div#wrapper div#footercontainer div#footerbg { width:1400px; height:256px; background:url(../images/layout/footer_oly.jpg) 0 0 no-repeat; margin: 0 auto; }
div#wrapper div#footercontainer div#footerbg div#foofront { width:960px; height:256px; background:url(../images/layout/footer.jpg) 0 0 no-repeat; margin:0 auto; }[/FONT]

 

[hubspe]

AW: DivContainer

das macht es auch nicht sinnvoller.
Wo ist das XHTML dazu?

man zentriert eine Webseite horizontal indem man um alle Container einen div#wrapper legt, dem eine feste Breite und margin:0 auto; gibt.
Das klappt immer zuverlässig.

Hast du das probiert? Ich habe nicht den Eindruck.

 

[cebito]

AW: DivContainer

Wo ist das XHTML dazu?

1. Link anklicken
2. Rechtsklick in die Seite
3. Seitenquelltext anzeigen
4. 

 

[augenball]

AW: DivContainer

Danke cebito

 

[Bigmemo]

AW: DivContainer

...
sehr verzwickt die Lage...
solange die 1400px in deinem viewpoint sichtbar ist, wird sich auch nichts verschieben...
sobald nicht mehr im viewpoint, richtet sich das ganze nach 1400px mal vergröserungsfaktor...
am besten mal in die andere richtung drehen, dann sieht man es...

"width: 100%" wird doch eh bei table tags benutzt, oder???ansonsten verwende ich die angabe überhaupt nicht...

cu
Bigmemo

 

[augenball]

AW: DivContainer

okay, werde ich mal probieren. Danke

 

[hubspe]

AW: DivContainer

ich hab mir jetzt mal die Mühe gemacht den Quelltext deines Links mit Bildern JS und anderen Dateien runterzuladen.
Dann habe ich deine CSS anstelle der CSS der Website eingesetzt.

Wenn das Browserfenster eine gewisse Größe unterschreitet (1400px) sind die unteren Rechtecke genüber den oberen nicht mehr vertikal bündig.
#content verschiebt sich nach links und nicht #contentcontainer, das kann man mit Firebug sehr gut sehen.
Ist bei dem Orignallink auch der Fall.

height:100%; für #wrapper kannze streichen, weil das eh keinerlei Wirkung haben kann.
Bei Prozent muss man sich immer fragen 100% von was? Da das Elternelement (body) mit dem Defaultwert belegt ist (height:auto;) kann logischerweise 100% für #wrapper nicht errechnet werden und fällt deshalb auf height:auto; zurück.
body brauchen die 100% und der Initial Containing Block (html) auch, dann kann die Höhe für #wrapper wirken.

Damit die vier blauen Rechtecke vertikal immer bündig sind bekommt #wrapper width:960px; und margin:0 auto;
Außerdem wird width:1400px; für div#headerbg und div#footerbg ersatzlos gestrichen.
Danach läßt sich auch auf der Originalwebsite das Browserfenster beliebig vergrößern und verkleinern ohne das die Zentrierung verlorengeht (mit Firebug getestet).

Die Struktur der Originalwebsite taugt allenfalls als gutes Beispiel für schlechtes Coding.
Durch eine geänderte XHTML-Struktur ist es möglich die HG-Grafiken wie gewünscht über das ganze Browserfenster laufen zu lassen und trotzdem alles horizontal zentriert zu haben.

So wie es jetzt ist bekommen alle mit einem Bildschirm unter 1400px Breite eine zerschrotete Darstellung.

@cebito Was ist los? Gestern schlechten Tag gehabt?
Erst warst du ironisch, dann war ich es in meiner Erwiderung und du löscht meinen Beitrag einfach raus.
Sehr souverän hat das nicht auf mich gewirkt.

edit. Blockelemente werden immer so breit wie es geht (100%), sodass eine diebezügliche Angabe in der CSS nicht notwendig ist, außer man braucht HasLayout für den IE6/7.

 

[augenball]

AW: DivContainer

Hi hubspe,

danke für Deinen ausführlichen Beitrag, jetzt läuft es :, hm ist eben ein Lernprozess und mein erster Versuch eine Textur über x zu kacheln. Von der Vorgehensweise halte ich mich eigentlich an ein Tutorial von hier (Graphic Jungle oder so), woher ich meine Kenntnisse habe.

Die Struktur der Originalwebsite taugt allenfalls als gutes Beispiel für schlechtes Coding.
Durch eine geänderte XHTML-Struktur ist es möglich die HG-Grafiken wie gewünscht über das ganze Browserfenster laufen zu lassen und trotzdem alles horizontal zentriert zu haben.

Eigentlich hat sich die vorgehensweise bisher immer als Stabil erwiesen. Wie sollte man sonst eine Struktur für ein Layout aufbauen?

Danke und Gruß Ulf

PS. noch einfacher geht es die mittleren Container auf die widht 1400px zusetzen und auch mit margin 0 auto zu zentrieren ... schon gibt es keine Problme mehr

 

[hubspe]

AW: DivContainer

noch einfacher geht es die mittleren Container auf die widht 1400px zusetzen und auch mit margin 0 auto zu zentrieren ... schon gibt es keine Problme mehr

einen Container auf 1400px Breite setzen beschert dir praktisch immer horizontale Scrollbalken, was imho sehr unschön ist.

Das häufigste Grundlayout:

<div id="umhang">

<div id="kopf">
</div><!-- Ende #kopf -->

<div id="navi">
</div><!-- Ende #navi -->

<div id="inhalt">
</div><!-- Ende #inhalt -->

<div id="fuss">
</div><!-- Ende #fuss -->

</div><!-- Ende #umhang -->

Kopf, zwei Spalten, Fuss.
Alles mit #umhang (is mir lieber als #wrapper) umgeben.

#umhang bekommt eine feste Breite und wird i.d.R mit margin:0 auto;. horizontal zentriert.
Allgemein hat sich da 960px als feste Breite für #umhang ziemlich durchgesetzt (jedenfalls bei vielen Agenturen und Webdesignern).
Persönlich nehme ich maximal 900px Breite, weil man da bei normalen netbooks mit kleinem Bildschirm noch nicht horizontal scrollen muss.

Willst du z.B. oben eine farbige Grafik über die ganze Bildschirmbreite haben weist du die als HG-Grafik einfach body zu.

Will ich das auch noch für den Fuss, bekommt #umhang z.B. keine Breite.
Dann ziehe ich noch einen #umhang-innen ein, der die feste Breite fürs horizontale zentrieren bekommt.
#umhang-innen wird dann vor dem Anfang von #fuss geschlossen und #fuss bekommt keine Breite und die HG-Grafik für unten zugewiesen.
Da wird dann noch ein #fuss-innen eingeschachtelt was mit Breite und margin:0 auto; horizontal zentriert wird. Da kommt dann auch der Inhalt rein.

Will ich z.B. rechts und links von #umhang Verläufe nach außen haben, mach ich mir eine HG-Grafik von 2500px Breite und 50px Höhe (wo ich in der Mitte Platz für #umhang lasse! ), die ich dann später per CSS vertikal kachel.
Die Grafik bekommt body mit background-position:center top; zugewiesen.
#umhang bekommt eine feste Breite und wird mit margin:0 auto; horiz. zentriert.
So paßt #umhang genau in die Grafik und wir haben die gewünschten Verläufe rechts und links.
Da die modernen Browser mittlerweile alle den Zoom können ist ein Pixellayout ja kein Problem mehr.

 

[augenball]

AW: DivContainer

einen Container auf 1400px Breite setzen beschert dir praktisch immer horizontale Scrollbalken, was imho sehr unschön ist.

nö stimmt nicht ... habe bisher nie horizontale Scrollbalken gehabt, in keinem Browser also selbst im InternetExplorer nicht

Das einzige was nicht funktioniert ist das der Header nicht nahtlos in den header_bg übergeht ... eben nur beim InternetExplorer 8 *grrrr*

Danke hubspe, sehr gute Erklärung ich werde das mal reflektieren...

Gruß Ulf

 

[hubspe]

AW: DivContainer

nö stimmt nicht ... habe bisher nie horizontale Scrollbalken gehabt, in keinem Browser also selbst im InternetExplorer nicht

dann mach mal dein Browserfenster kleiner.

Bei meinem 26er hätte ich auch keine Scrollbalken, wenn ich das Fenster ganz aufziehen würde, aber viele haben auch notebooks.

Unter vielen Webdesignern/Agenturen hat sich eine maximale Containerbreite von 960px ziemlich durchgesetzt, ohne das man das groß verabredet hätte.

 

[augenball]

AW: DivContainer

Sorry hat etwas gedauert,

aber Du hast tatsächlich Recht, habe heute an meinem Mac (andere Monitorauflösung) die Seite abgecheckt und: Scrollbalken an allen unteren und rechten Ecken :'(, nun ja werde Deine Vorgehensweise mal etwas mehr verinnerlichen ... das mit 960px als Standart ist mir wohlbekannt. Hatte nur gedacht der Browser ist schlau und weiß was ich meine

Gruß Ulf