3 divs | beide Seiten dynamische Breite

[JerryCurwen]

Hallo,

ich bin gerade dabei eine Homepage für meinen Clan zu erstellen. Ich habe aber da ein kleines css Problem bei dem ich einfach nicht weiter komme.

Ich habe eine Header-Grafik welche sich in der Mitte der Seite befindet. Links uns rechts der Header-Grafik sind zwei divs die sich eigentlich dynamisch an die Fenstergröße des Browser anpassen sollen. Die beiden Grafiken an den Seiten sollen immer den leeren Bereich vom jeweiligen Seitenrand bis zum Headerbereich in der Mitte füllen. Die beiden seitlichen Garfiken haben unterschiedliche Höhen.

Kann mir einer sagen wie ich das in css lösen kann? Denn wenn ich beiden eine width von 100% gebe ziehen sich die divs immer über die ganze Seite.

Danke

 

[fakerer]

AW: 3 divs | beide Seiten dynamische Breite

wenn du in den beiden divs rechts und links nur Bilder hast leg die doch in den Hintergund und den Conent zeigst du dann einfach Mittig an.
Ich glaube man kann auf einer Seite immer nur eine Spalte mit auto width versehen. Kann mich aber auch täuschen.

 

[MegaAdi]

AW: 3 divs | beide Seiten dynamische Breite

wenn dein "mittelblock" eine Feste breite hat gibst du den beiden äußeren divs width: auto; und als hintergrundgrafik die Grafik mit repeat-x! (Ich denke mal dass du es so lösen wolltest oder?!).

Gruß Adrian

Edith meint grade: Wenn der Mittelteil prozentual angegeben ist, also z.B. width: 70%; dann musste natürlich rechts und links jeweils 15% geben.

 

[JerryCurwen]

AW: 3 divs | beide Seiten dynamische Breite

Mein mittelteil (komplette Page) hat width: mit 1100 px angegeben.

Die beiden äußeren Spalten müsste ich ja in % angeben. Das mit dem in Hintergrund legen habe ich ja gemacht aber die beiden Grafiken verlaufen nur oben im Header bereich, wie bei PSD-Tutorials.de oben der blaue Balken der sich immer dynamisch anpasst.

 

[MegaAdi]

AW: 3 divs | beide Seiten dynamische Breite

also da dein Content 1100px breite hat kannst du den anderen beiden Divs width: auto geben, da du ja schon eine Feste breite hast.
Ich verstehe nicht ganz auf was du hinaus willst! Du willst grafiken oben rechts und links von deinem Header haben die "dynamisch" sich der browser / Bildschirmbreite anpassen?!

Dann ist das doch genau das richtige! Erstelle eine Grafik die 1px breit ist und y Pixel hoch ist (je nachdem wie hoch dein Header ist) und mach die als Hintergrundgrafik rein.

denen gibst du dann noch repeat-x und somit werden sie dynamisch in der Horizontalen wiederholt bis de Content anfängt...

Gruß Adrian
ps: Poste mal den Stück Code (HTML & CSS) den du hast, dann kann man da evtl genauer drauf eingehen... noch besser wäre wenn du das Projekt mal online stellst und uns Zeigst was du meinst.

 

[sokie]

AW: 3 divs | beide Seiten dynamische Breite

also da dein Content 1100px breite hat kannst du den anderen beiden Divs width: auto geben,

mich würde mal interessieren, wie das in funktionierend aussieht, ich bekomme kein szenario hin, wo ich ein blockelement in der mitte habe und rechts und links daneben jeweils welche mit width: auto...
kannst du mal so etwas notieren?

@JerryCurwen: ich hab den Eindruck nicht verstanden zu haben, wie genau deine gestaltung aussehen soll. (Eigentlich könnte man die Grafiken rechts und links positionieren, ohne weitere div-container zu verwenden) vielleicht kannst du mal 'nen screenshot oder 'ne skizze posten?

 

[MegaAdi]

AW: 3 divs | beide Seiten dynamische Breite

stimmt... man soll nicht mit Kopfweh antworten und versuchen zu denken. Ist natürlich voller Nonsens den ich da von mir gegeben Habe! Sry dafür und ich leg mich nu auch wieder hin =)

Grüße Adi und danke @ Sokie =)

 

[JerryCurwen]

AW: 3 divs | beide Seiten dynamische Breite

Hey,

ja sorry Leute das hätte ich vielleicht schon im ersten Post anhängen sollen.

Hier mal ein Screenshot vom Headerbereicht:

Also wenn ich die beiden divs auf width: auto stelle zieht das linke div immer komplett bis zum Seitenende. Der Header rutscht dann nach unten. Ausserdem ist dann das rechte div unter dem Header. Also müsste ich ja floaten aber dann funktioniert das mit dem Header nicht mehr, bzw das linke div verschwindet.

Oh man das ist das wenn man etzwas länger nichts mehr mit CSS und Co gemacht hat, dann vergisst man schon wieder die einfachsten dinge

 

[JerryCurwen]

AW: 3 divs | beide Seiten dynamische Breite

Oh man man man. Ich habe es hinbekommen.

Ich sag ja wenn man da nicht jeden Tag dran sitzt vergisst man selbst die einfachsten dinge

#header_wrapper       
 {width: 1100; font-family:Arial, Helvetica, sans-serif;
   font-size: 12px; 
   color: #c4b388; 
   position: relative; 
   z-index: 2;}

#topline_left        
{width: 50%; 
 height:  76px; 
 background: url(images/topline-left.jpg)  
 repeat-x; 
 position: absolute; 
 left:  0; 
 z-index: 1;}
#topline_right        
{width: 50%;
 height: 120px; 
background: url(images/topline-right.jpg) 
 repeat-x;
 position: absolute; 
 right: 0; 
 z-index: 1;}