• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 spaltiges Layout - horizontal unendlich

simoptim

simoptim

Neues Mitglied
Hallo,
bin jetzt schon ewig am rumprobieren und auch "dein bester freund" google hat mir nicht weiter geholfen.

ich habe ein zweispaltiges layout welches quasi unter dem menü aus 2 spalten besteht.
ich möchte nun das die zwei balken nach unten unendlich sind und sich eben dem browser anpassen.
achja... neben dem linken content balken ist noch ein div links davon positioniert und neben dem rechten balken ist ein div rechts davon. sind aber nur jeweils 1 bild ohne repeat.

ich hoffe ihr könnt mir helfen.

hier der 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.
                </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: 
#content {
    
    width: 615px;
    height: 100%;
    margin: auto;
    margin-top: 10px;
}

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

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

#linker_reiter {
    
    float: left;
    width: 43px;
    height: 132px;
    background-image: url(bilder/reiter_myangebot.jpg);
}
Bin noch nicht so fit in css von daher ist ed gut möglich das in den selektoren teilweise unnütze angaben gemacht wurde ;) korrigiert mich ruhig.


grüße
 
Werbung:
du hast jedem bild eine größenangabe gemacht.

Wenn das bild unendlich wiederholt werden soll mach es doch mit repeat


wo du es hinhaben möchtest z.b repeat: x;


ich hoffe das du die bilder gemeint hast ;)
 
Werbung:
also habs probiert, gab aber nicht den gewünschten effekt.
es hat nach entfernen von width beim linker_content
mein float verhauen und der 2 div ist unter den ersten ggerutscht. die grafik bilder/bg_linker_content.jpg
hats auch nicht horizontal unendlich gekachelt
 
.....dann versuchs mal mit größenangabe.

also z.b so
background-image: url(blabla.jpg);
width: ..px;
height:...px;
background-repeat: repeat-x; oder y musste gucken

so müsste es eignt funktionieren
 
Werbung:
danke für die hilfe,
habs so probiert aber klappt nicht.
aber für mich würde es auch kein sinn machen wenn ich eine feste höhe angebe.

also nochmal hier übersichtlicher:

mein html 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 ipsum, ut facilisis sem. 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>


so also alle 4 divs, 2 content divs und 2 reiter divs jeweils links und recht der content divs positioniert.
das ganze wird durch das div content zusammengehalten:
PHP: 
#content {
    
    width: 615px;
    height: 100%;
    margin: auto;
    margin-top: 10px;
}

die zwei content inhalte sollen nach unten hin unendlich laufen, dafür habe ich ein 1px hohes background image gemacht mit der richtigen breite jeweils für den content inhalt.
content css:

PHP: 
#linker_content {
    padding-left: 0px;
    position: relative;
    float: left;
    color: #FFFFFF;
    position:relative;
    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;
}

die 2 reiter. einer links von content_links und einer rechts von content_rechts platziert:

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

(der rechte reiter ist von mir noch nicht eingefügt worden)
 
das heißt du hast einen bereich der fix ist .. der alle anderen zusammenhält .. hab ich das richtig verstanden?^^

falls es so ist, liegt die lösung eignt auf der hand....

wenn der hauptreiter fest ist werden die anderen inneren nicht unnendlich gehen, weil das äußere div ja fix ist und sie nicht darüber hinaus gehen.


hast du vllt einen hoster wo man das mal genau angucken kann? ^^
 
du hast alles in content reingemacht, dieser gilt sozusagen für die reiter als volle seite, dieser hat eine höhe von so und so und eine weite von so und so.

die reiter sollen über das ganze html dokument gehen ;)

da musste die 2 reiter getrennt vom content machen

dü könntest content keine größe geben, wenn es gehen würde ... dann könnten sich dei backgrounds auch über das ganze html dokument legen
 
Werbung:
nene, also die breiten von den 2 balken stimmen. sind ja quasi auch durch die breite der hintergrund grafik vorgegeben.
ich möchte diese genau so groß haben wie sie jetzt sind, mit dem zwischenabstand.
nur, dass eben die balken nach unten unendlich sind. :)
zudem habe ich plötzlich das problem das der text über den div herausragt (im linken content balken).

:O
 
Werbung:
ja so siehts bei mir auch aus :)

wie gesagt, 2 momentane probleme:

1. die 2 content divs sollen nach unten hin unendlich dunkelgrau sein, also das hintergrundbild gekachelt.

und

2. der text beim linken content feld geht über das div hinaus

:(
 
..mach den linken content ein bisschen breiter also weidth ... un für dac weitere kacheln muss der content div größer werden b.z.w er darf keine feste größe haben


du sperrst die 2 anderen ein in dem content... sie repeaten nur so viel wie der content groß ist und das sind 100% hight

lass die 100% mal weg und guck was passiert die 100% stehen eignt immer für 100% vom bild
 
Werbung:
hm, ich glaub das mit der überstehenden schrift liegt an dem margin / padding.
also das es dann irgendwie nicht stimmt von der größe.
weil wenn ich es kleiner mache, width im linken balken, dann passt sich der text an. wenn ich es größer mache, dann klappt es nicht. normalerweise ist das bild 360px breit, aber ich muss 340px angeben damit das mit dem text hinhaut...

ja also wegen dem endlos repeat, ich krieg das nicht hin,
hab meinem content 100% gegeben aber es ändert sich nix


#content {

width: 615px;
height: 100%;
margin: auto;
margin-top: 10px;
font-size: 10px;
font-family:Verdana, Arial, helvetica, sans serif;
}
 
die height 100% hatte ich davor immer weg
und background repeat bringt doch nichts, wenn das nur der zusammenhaltende container ist ohne definiertes hintergrund bild.
das hintergrund bild ist hier definiert und dort war immer das repeat dabei:


#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: 340px;
}
 
Werbung:
langsam gehen mir auch die ideen aus , vllt liegts an den zeichen , du schreibst ja was und somit orientiert sich vllt die größe des bildes danach ... also in etwa je mehr du schreibst desto größer das bild .... versuch mal weniger zu shreiben und dann mal mehr ob sich dann da was tut
 
hm.

also jetzt sieht der linke balken so aus:

#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: 340px;


}

ist als auf 340px breite begrenzt. fazit: text bricht gut um und nichts geht über den balken hinaus.
wenn ich jetzt eine kleiner zahl eingebe funktioniert es auch. es bricht eben anders um und der block wird automatisch länger.
das seltsame: wenn ich 360px breite eingebe haut es mir den text darüber hinaus, als wäre das bild einfach zu kurz.
es ist aber 360px breit!!!
habs auch mit einem 1px solid border getestet. das div geht weiter aber das bild bricht? ab.
hm.....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben