Variabler Hintergrund

[Tom]

Hallo zusammen

stehe wieder mal auf dem Schlauch. Die Website ist www.lebon.ch/Kunden/stp/k3web

Nun sind die Texte überall verschieden lang und eigentlich möchte ich den Hintergrund der Navigation und Content (#content) je nach Textlänge grösser oder kleiner haben.

Im Css ist der Content und Navigation in #block eingefasst.

Css:

html, body{
   text-align: center;
    height: 101%;
	min-height: 101%;
   margin: 0;
   padding: 0;
	
}

#block{
   margin-top: 10px;
   width: 900px;
   margin-left: auto;
   margin-right:auto;
   text-align: left;
   height:100%;
}


 
 #navigation{
    width: 125px;
    position: relative;
    left: 0px;
    background-color: #6A7471;
    float: left;
	min-height: 100%;
	height:100%;
   padding-left: 50px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: silver;
   
   
    
 }
 #navigation1{
    width: 145px;
    position: relative;
    left: 0px;
    background-color: #DCE1DD;
    float: left;
	min-height: 100%;
	height:100%;
   padding-left: 30px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: white;
   left: 3px;
   
    
 }
 
 #content{
   width: 722px;
   background-color: #DCE1DD;
   position: relative;
   float: left;
   min-height: 100%;
   height: 100%;
   left: 3px;
   z-index: 0;
   background-image: url(../bilder/startsite/produkttest1.jpg);
   background-repeat: no-repeat;
   
}

 #content2{
   width: 722px;
   background-color: #DCE1DD;
   position: relative;
   float: left;
   min-height: 100%;
   height: 100%;
   left: 3px;
   z-index: 0;
  
   
}

Wo liegt mein Fehler? Danke für euer Feedback....Grüsse...Tom

[hero-master]

Zitat von Tom

Wo liegt mein Fehler? Danke für euer Feedback....Grüsse...Tom

Wo soll ich anfangen

Warum machst du einen Mix aus Containern und Tabellen? Arbeite bei Navigationen mit Listen, nicht mit Tabellen

Arbeite nicht mit height:100%, sondern mit min-height. Dazu gibt es dann für den IE noch ein Workaround:

min-height:100%;
height:auto !important;
height:100%;

Navi immer gleich hoch wie Content? geht nicht, ein Div passt sich nicht einer Höhe an. Was Abhilfe schafft: faux-columns

[Tom]

Super, hat geklappt. Nur leider hört die Navigation dort auf wo es keinen Text mehr gibt. Diese sollte (also Hintergrund) genau so lang sein wie der Content....

Ich hab im Moment ein absolutes blackout...

[hero-master]

Haste das neue schon hochgeladen? mach mal

[Tom]

ich habs jetzt anders gemacht, und zwar in #block eine hintergrundgrafik hinterlegt, aber die passt sich einfach nicht automatisch in die höhe an..

[Tom]

und so sieht das #block-css aus:
#block{
margin-top: 10px;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;
height: 100%;
min-height: 100%;
background: url(../bilder/startsite/bg.jpg) repeat-y;
margin-bottom: 0;


}

ich glaub ich geb meinen job auf...

[hero-master]

Hab mich wohl mit mit min-.height falsc hausgedrückt..
Pack mal überall (!!) height:100% und den anderen Müll dazu raus (min-height auch). Das bringt null
Das im html,body kannste so lassen. Um dann die Seite 100% anzeigen zu lassen, benutzt du dann nur für den #block den Fast-Hack

Nun hast du in dem #block einige Elemente floaten lassen. Dem musst du entgegenwirken, damit das #block vollkommen sichtbar ist.
http://www.andreas-kalt.de/webdesign.../float-theorie

Dann setzt du bei fast jedem Element float und position zusammen, warum? Entweder du lässt es floaten oder positionieren
pack es weg, ebenso wie die z-index Angaben und das left:0

[Tom]

Nach langem wieder....ich kriegs einfach nicht hin. habe das css geändert, jetzt zeigt es keinen Hintergrundmehr an, d.h. ich weiss nicht genau wie ich den #block sichtbar machen kann...ich steh total auf dem schlauch..

Hier noch das CSS:

html, body{
text-align: center;
min-height:100%;
height:auto;
height:100%;
margin: 0;
padding: 0;



}

#block{
margin-top: 10px;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;
min-height: 90%;
height: 90%;
height:auto!important;
background: url(../bilder/startsite/bg.jpg) repeat-y;


}

Danke für das feedback..

[hero-master]

Kannst du mal eine Testseite zeigen und evtl. noch ein Screenshot wie du das alles haben willst?
Pack erstmal die height auto Sachen weg aus dem html.body. Auch den "Hack" für den IE unten hast du falsch eingessetzt:

min-height: 90%;
height:auto!important;
height: 90%;

Eine weitere Sache: Stichwort Boxmodell - 10px + 90% = ???
Was hast du wenn du 3 Äpfel und 3 Birnen addierst? Bestimmt keine 6 Biräpfel.
Was ich damit sagen will:
http://www.thestyleworks.de/basics/boxmodel.shtml
http://www.css4you.de/wsboxmodell/index.html
http://nicogutmann.de/tuts/?p=21

[Tom]

nun die Site ist www.lebon.ch/Kunden/stp/k3web1

im ie wird es sauber angezeigt (also der hintergrund ist entweder 100% oder passt sich dem inhalt an.) im Firefox leider nicht....

[hero-master]

Okay
ich kann mcih eigentlich nurr wiederholen, was ich oben schon erwähnt habe:
Pack mal überall das min-height:90% und das auto und das height da raus!

ab mich wohl mit mit min-.height falsc hausgedrückt..
Pack mal überall (!!) height:100% und den anderen Müll dazu raus (min-height auch). Das bringt null
Das im html,body kannste so lassen. Um dann die Seite 100% anzeigen zu lassen, benutzt du dann nur für den #block den Fast-Hack

Nun hast du in dem #block einige Elemente floaten lassen. Dem musst du entgegenwirken, damit das #block vollkommen sichtbar ist.
http://www.andreas-kalt.de/webdesign.../float-theorie

Dann setzt du bei fast jedem Element float und position zusammen, warum? Entweder du lässt es floaten oder positionieren
pack es weg, ebenso wie die z-index Angaben und das left:0

Das Problem hierbei ist wie gesagt, dass du das FLOATE wieder CLEARen musst (siehe Link).

Wie gesht du dabei vor?

Bevor du den #block-Div wieder schließt durch </div> ganz unten im HTML, baust du das hier noch mit ein:
<br style="clear:left;" />

also

<br style="clear:left;" />
</div>
</body>
</html>

[Tom]

super hat geklappt, jetzt ist nur noch in html, body die height drin. aber das ding schneided mir den hintergrund ab, wenns nicht sowiel text hat. gugg mal im anhang. ich bin irgendwie überforderd.....

[hero-master]

Welcher Browser macht das? Im FF siehts gut aus