2 spaltiges Layout - horizontal unendlich

[leridan]

also das würde mich jetzt auch wundern .. haste den nochmal nachgeschaut ob das bild zu 100% 360 breit ist?^^

hatte ich auch mal ... aber da hat sich rausgestellt das das bild bisschen kleiner war.


könnte aber auch mim padding was zu tun haben ....musste mal schauen

 

[simoptim]

ui...
ich glaube das hängt mit padding-left: 20px;
zusammen. Oder?
Das padding bewirkt ja, dass der inhalt um 20 pixel nach rechts gerückt wird.
fazit: mein bild muss 380 pixel groß sein und nicht 360px.

oder ich arbeite mit einem weiteren div für den text, innterhalb des linken balken containers......


wie auch immer... bekomme das noch heraus.

back to topic:

Wie ermögliche ich, dass die balken nach unten unendlich sind?
ich meine, sie sind zwar in einem content-div aber dieser begrenzt sie ja nicht in der höhe nur in der breite.
??????

 

[leridan]

....versuchs einfach mal ohne den content div... packe den linken und rechten nicht in den content .. einfach mal versuchen ;)

 

[simoptim]

geht leider auch nicht... :sad:

 

[leridan]

hmm... ist dort das gleiche problem? oder ein anderes

 

[leridan]

ok versucht mal das float wegzulassen

 

[leridan]

glaube ich ahbe die lösung für dein problem


unter den containern mit float kommt dann nochmal ein kleiner code teil in css blog


der hier

p.clear {
clear: left;
clear: right;
}

 

[simoptim]

hm, schnall da grade nicht durch.

wohin soll:


p.clear {
clear: left;
clear: right;
}


??

 

[leridan]

tu das einfach unter alle anderen css contents :)

 

[simoptim]

#content {
    
    width: 615px;
    
    margin: auto;
    margin-top: 10px;
    font-size: 10px;
    font-family:Verdana, Arial, helvetica, sans serif;
    
}

#linker_content {
    
    padding-left: 20px;
    position: relative;
    float: left;
    color: #FFFFFF;
    background-image: url(bilder/bg_linker_content.jpg);
    background-repeat: repeat-y;
    background-position:top left;
    width: 360px;
    
    
    
    
}

#rechter_content {
    position: relative;
    float: right;
    color: #FFFFFF;
    background-color: #303030;
    width: 200px;
}

#linker_reiter {
    
    float: left;
    width: 34px;
    height: 132px;
    background-image: url(bilder/reiter_myangebot.jpg);
    
}

p.clear {
clear: left;
clear: right;
}

????

wenn das so stimmt... da ändert sich nix

 

[leridan]

...dann versuchs mal direkt in den contents also

#rechter_content {
position: relative;
float: right;
color: #FFFFFF;
background-color: #303030;
width: 200px;
clear: right;
}

 

[simoptim]

:)
bei clear:right im rechten content ändert sich gar nix.
und bei zusätzlichem clear:left im linken content verhauts mir mein float und
beide contents sind unter dem linken reiter...
;ugl

 

[leridan]

hmmm.... was passiert den wenn du im rechten reiter den float weglässt?

 

[simoptim]

es gibt noch gar keinen rechten reiter :)
und wenn ich beim linken weglasse => verhauts

 

[leridan]

sry hatte im rehcten content gemeint^^

 

[simoptim]

aso ;)
wenn ich da den float entferne dann verhauts mir auch das layout.

 

[leridan]

...hmm ^^

also irgendwie liegts dann denke ich an den containern, den deine sachen in den containern ist richtig.

 

[simoptim]

:(

hm.
werde wohl mal ne nacht drüber schlafen und morgen weiter schauen.
vlt. fällt dir ja noch was dazu ein.

ich denke auch die ganze zeit, dass es irgendwas mit dem
container (der alle spalten umfasst) zusammen hängt.

hm....
dank dir aber schonmal für die hilfe!

 

[leridan]

sry ich weiss nicht mehr weiter....

werde es mir morgen nochmal alles in ruhe anschauen, habe heute viel geschafft und werde mich erstmal aufs ohr hauen.


Wünsche dir noch einen schönen abend und ggf wenn noch jemand was weiss viel erfolg

PS: immer gerne :)

Gruß Leri

 

[simoptim]

hey leridan & co,

es gibt news.
hab etwas rumgebastelt und bin zu einer lösung gekommen die funktioniert.
hab das ganze durch eine hintergrundgrafik gelöst die beide spalten + seiten hintergrund enthält.
das ganze im content div definiert.
wenn es noch eine andere lösung gibt, bitte posten :)

achja. es hat sich daraus eine weitere frage gestellt.
und zwar möchte ich die background grafik ja bis zum browser ende nach unten dynamisch kacheln.
das macht es auch, jedoch etwas weiter als mein browser fenster geht. es gibt also eine scrolleiste.
sieht unschön aus, vor allem da ich nicht soviel inhalt habe.
wie kann ich das eingrenzen, damit es nur zum browser ende geht?

hier der aktuelle code:

 <div id="content">
            <div id="linker_reiter">
            </div>
            
            <div id="linker_content">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et vulputate risus. Vivamus nec nisi tellus. Nulla gravida tincidunt tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce nec risus eget ipsum vulputate vestibulum ut a eros. Morbi ullamcorper magna sit amet eros sagittis id pellentesque arcu euismod. Sed ac odio quis neque accumsan varius. Maecenas ac nunc vel mauris vehicula mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eu velit vitae quam consequat congue. Duis quis erat iem. Integer eget justo porta turpis auctor consequat a sit amet eros. Duis dapibus sagittis libero, nec imperdiet enim euismod bibendum. Etiam nec ligula at quam lobortis consequat. In hac habitasse platea dictumst. Mauris at massa velit, eu mollis justo. Mauris varius dignissim magna vitae sodales. Nam ac metus vitae diam faucibus volutpat id eget tortor. Vestibulum vel posuere metus.
                </p>
            </div>
            
            <div id="rechter_content">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et vulputate risus. Vivamus nec.
                </p>
            </div>
            <div id="rechter_reiter">
            </div>
        </div>

html { height: 100%; }    
   
body { 
  background-color: #d5dfff; 
  color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;   
  height: 100%;
}

#content {
    
    width: 638px;
    margin-top: 10px;
    font-size: 10px;
    font-family:Verdana, Arial, helvetica, sans serif;
    background-image: url(bilder/bg_leiste.jpg);
    background-repeat: repeat-y;
    height: 100%;
    position:absolute;
    left: 50%;
    margin-left: -325px;
}

#linker_content {
    
    padding-left: 10px;
    padding-top: 5px;
    position: relative;
    float: left;
    color: #FFFFFF;
    width: 340px;
    height: 100%;
}

#rechter_content {
    padding-left:30px;
    padding-top: 5px;
    position: relative;
    float: left;
    color: #FFFFFF;
    width: 180px;
    
}

#linker_reiter {
    
    float: left;
    width: 34px;
    height: 132px;
    background-image: url(bilder/reiter_myangebot.jpg);
}


#rechter_reiter {
    
    float: right;
    width: 34px;
    height: 132px;
    background-image: url(bilder/reiter_unserenews.jpg);
}