2 spaltiges Layout - horizontal unendlich
- Ersteller simoptim
- Erstellt am
simoptim
Neues Mitglied
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.
??????
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.
??????
simoptim
Neues Mitglied
PHP:
#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
simoptim
Neues Mitglied
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:
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:
HTML:
<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>
PHP:
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);
}