CSS Layer 100%

mixmastertobsi

Hallo ich möchte in einem layer 3 spalten als layer einfügen, die immer die höhe haben wie der übergeordnetet layer. das heißt wenn der text in der einen layerspalte länger ist als in der anderen soll, er so hoch sein wie der andere auch. ich habe es mir height: 100%; probiert. geht aber nicht

#content {margin: 10px 0 0 0;}

#content1 { margin: 0px 2px 0px 3px; float: left; width: 285px; background: rgb(235,237,242); }
#content1 h1 { border-bottom: solid 3px rgb(0,36,106); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content1 p { padding: 5px 15px 10px 5px;}
#content1 img { margin: 10px; border: solid 1px rgb(0,0,0);}

#content2 { margin: 0px 2px 0px 5px; float: left; width: 285px; background: rgb(239,241,245);}
#content2 h1 { border-bottom: solid 3px rgb(71,97,147); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content2 p { padding: 5px 15px 10px 5px;}
#content2 img { margin: 10px; border: solid 1px rgb(0,0,0);}

#content3 { margin: 0px 0px 0px 5px; float: left; width: 285px; background: rgb(250,250,240);}
#content3 h1 { border-bottom: solid 3px rgb(158,172,198); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content3 p { padding: 5px 15px 10px 5px;}
#content3 img { margin: 10px; border: solid 1px rgb(0,0,0);}

danke[/img]

sejuma

Lies dir mal diese Anleitung über faux columns durch.
Das ist ein "CSS-Trick" mit dem man die Containerhöhen zum "mitwachsen" zwingen kann.

mixmastertobsi

Hallo, du wirst lachen aber das habe ich schon gemacht nur leider habe ich dort ein neues problem gehabt. der ie und firefox geben die pixel positionsangaben nicht 100% gleich wieder, so dass die hintergrundgrafik nicht 100% in die spalten gepasst hat.

sejuma

Hast du einen Doctype mit Verweis-URL in deiner HTML-Datei? Falls nein, gib mal einen ein. Könnte an dem Box-Hack des IE liegen, wenn dieser im Quirks-Mode ist.
Gib mal versuchsweise auch das noch in deine CSS ein:

Code

* {margin:0; padding:0;}

mixmastertobsi

hallo vielen danke für deine antwort. habe es auch schon gehabt. anbei das css

Code

/* ####### */
 /*   CSS   */
 /* ####### */
 




*                                    { padding: 0; margin: 0;}
html                                 { height: 100%; }
body                                 { height: 100%; width: 100%; font-size: 13px; text-align: center; font-family: Arial, Helvetica, sans-serif; background: url(/gfx/site/bg.gif);} 


#site                                { position: relative; height: 100%; width: 885px; margin: auto; padding: 0 0 0 0; text-align: left; background: #ffffff;}
body>#site                           { min-height: 100%; height: auto; }


h1                                   { font-family: Arial; font-size: 22px;  font-weight: normal;}


a:link,
a:visited                            { color: rgb(0,0,0); text-decoration: underline; }
a:active,
a:hover                              { color: rgb(0,0,0); text-decoration: none;  }




#navi                                { width: 875px;  height: 169px; margin: 0px 5px; background: url(/gfx/site/navibg.gif);}
#navilogo                            { height: 169px; width: 250px; margin: 0px 50px; background: url(/gfx/site/logo.gif); }
#navimenu                            {}


#kopf                                { width: 875px; height: 324px; margin: 0px 5px; background: url(/gfx/site/kopf.jpg) no-repeat;}


#content                             { margin: 10px 0 0 10px; }
#content p                           { padding: 5px 15px 10px 5px;}
#content img                         { margin: 10px; border: solid 1px rgb(0,0,0);}
#content h1                          { padding: 0 0 0 28px; background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; font-weight: bolder;}


#content1                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(235,237,242); }
#content1 h1                         { border-bottom: solid 3px rgb(0,36,106); }


#content2                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(239,241,245);}
#content2 h1                         { border-bottom: solid 3px rgb(71,97,147); }


#content3                            { margin: 0px 5px 0px 0px;  float: left; width: 285px; background: rgb(250,250,240); }
#content3 h1                         { border-bottom: solid 3px rgb(158,172,198); }


#fuss                                { height: 43px; width: 875px; margin: 8px 5px 10px 5px; padding: 35px 0 0 0; font-size: 12px; font-weight: bolder; background: url(/gfx/site/fuss.gif) repeat-x; text-align: center; }


.clear                              { clear: both; }
.noclear                            { clear: none; }
.aus                                { display: none; }
.print                              { display: none; }
.seo                                { display: none; }
.nix                                { }

Alles anzeigen

danke

sejuma

Ich kann's jetzt leider nicht nachvollziehen, da ich momentan keinen FF zum Vergleich habe und auch der HTML-Code sowie die background-gifs fehlen.
Was mir aber aufgefallen ist: Abweichend zur faux-columns-Anleitung hat du kein repeat-y drin. Und die Pixel-Grafik (alsoe der "Querschnitt" deiner drei Container) zum dynamischen Anpassen müsste doch wohl auch in den #site container rein? Innerhalb der Einzelcontainer nützt's ja nichts, da diese ja unabhängig voneinander sind.

mixmastertobsi

Hallo, vielen dank für deine hilfe, habe es jetzt hinbekommen. Muss nachher mal daheim schauen wie es im ie 7 aussieht. dort hat man dann wieder neue überraschungen

CSS Layer 100%

Tags

Benutzer online in diesem Thema