css probleempje

[mhproductions]

Ik heb een probleempje met een css script, ik ben pas net begonnen met css en weet er nog niet zoveel vanaf, maar ik wil twee kolommen met daarboven een menubalk en een soort banner! Ik heb dat nu ongeveer voor elkaar, alleen is het probleem dat die twee kolommen wel langer worden als je er meer tekst in plaatst, maar dat de onderkant niet meeloopt naar beneden als er meer regels in een van die kolommen komen. Het zal wel iets heel simpels zijn, maar kan iemand mij helpen......

Dit is de code waar het om gaat:

code:

body {
    font-family:        Arial;
    color:          #000000;
    background-color:   #FFFFFF;
    font-size:      12px;
    padding:        0px;
    margin-left:        0px;
    margin-top:         0px;
    margin-right:       0px;
    margin-bottom:      0px;
    text-align:         center;
    background-image:   url('images/body.jpg');
    background-repeat:  repeat-x;
}

a:link, a:visited {
    color:          #5680BC;
    text-decoration:    none;
}

a:hover {
    color:          #1848B4;
    text-decoration:    none;
}

div {
    margin:         0px; 
    padding:        0px;
}

img {   border:         0px;
}

#main {
    text-align:         left;
    margin:         0px auto;
    height:         auto;
    width:          750px;
    position:relative; 
    top: 0px; 
    left: 0px; 
    background-color: #FFFFFF;
}

#top {
    text-align:         center;
    margin:         0px;
    height:         160px;
    width:          750px;
    background-image:   url('images/top.gif');
    background-repeat:  repeat-x;
}

#menu {
    text-align:         center;
    margin:         0px;
    padding-top:        10px;
    height:         40px;
    width:          750px;
    position:absolute; 
    top: 160px; 
    left: 0px; 
    background-image:   url('images/menu.gif');
    background-repeat:  repeat-x;
}


#left {
    width:          213px;
}

#right {
    width:          525px;
}


#left_top {
    text-align:         left;
    margin:         0px;
    height:         15px;
    width:          213px;
    position:absolute; 
    top: 200px; 
    left: 0px; 
    background-image:   url('images/top_left.gif');
    background-repeat:  no-repeat;
}

#right_top {
    text-align:         left;
    margin:         0px;
    height:         15px;
    width:          525px;
    position:absolute; 
    top: 200px; 
    left: 213px; 
    background-image:   url('images/top_right.gif');
    background-repeat:  no-repeat;
}


#left_content {
    background-image:   url('images/content_left.gif');
    background-repeat:  repeat-y;
    width:          213px;
    position:absolute; 
    top: 215px; 
    left: 0px; 
    padding-top:        0px;
    padding-left:       18px;
}

#right_content {
    background-image:   url('images/content_right.gif');
    background-repeat:  repeat-y;
    width:          525px;
    position:absolute; 
    top: 215px; 
    left: 213px; 
    padding-top:        0px;
    padding-left:       18px;
}

#left_bottom {
    background-image:   url('images/bottom_left.gif');
    background-repeat:  no-repeat;
    clear:          both;
    height:         100px;
    width:          213px;
    position:absolute; 
    top: 365px; 
    left: 0px; 
}

#right_bottom {
    background-image:   url('images/bottom_right.gif');
    background-repeat:  no-repeat;
    clear:          both;
    height:         30px;
    width:          525px;
    position:absolute; 
    top: 365px; 
    left: 213px; 
}

alvast bedankt.....

[mocean]

misschien is het een idee om ook gewoon de hele HTML online te zetten, zodat we die ook kunnen zien?

[mhproductions]

mocean schreef op zondag 09 oktober 2005 @ 22:05:
misschien is het een idee om ook gewoon de hele HTML online te zetten, zodat we die ook kunnen zien?

Eigenlijk best goed plan, ik heb het maar even hierop gezet:

http://www.mhproductions.org/new/

Hopelijk kan iemand mijn probleempje oplossen....

[Pixeldude]

Onzin, afgezien van de indeling (die 100.000en sites hebben) komt er niets overeen

[ Voor 82% gewijzigd door André op 09-10-2005 23:04 ]

[equationunequal]

Komt volgens mij door het span element waar je tekst zich in bevind. Omdat je right_content divje absoluut gepositioneerd is trekt ie zich niets aan van geneste relatieve elementen (je span) en rekt ie daarom niet mee met de inhoud. Die span is bovendien totaal overbodig, weghalen dus...

_{Daarnaast kan je lay-out bestaan uit een stuk minder elementen, zitten een hoop overbodige tussen...}

[ Voor 7% gewijzigd door equationunequal op 09-10-2005 22:52 ]

[mhproductions]

Hankey schreef op zondag 09 oktober 2005 @ 22:51:
_{Daarnaast kan je lay-out bestaan uit een stuk minder elementen, zitten een hoop overbodige tussen...}

Zoals?

[equationunequal]

mhproductions schreef op zondag 09 oktober 2005 @ 22:53:
[...]


Zoals?

Alle span elenten, left_top & left_right...

Valt op zich nog wel mee, maar toch...

_{Bovendien is je naamgeving niet echt geweldig. De plaats van de elementen hoef je niet vast te leggen in de naam van de id's, daar heb je css voor. Je kan beter voor het gangbare "header", "menu", "content", "footer" ed. gaan...}

[mhproductions]

klopt op zich wel, maar ik zit met die verschillende achtergrondjes voor het design zegmaar....

Dus ik heb die verschillende toch wel nodig!

Die namen heb je gelijk in, zal ik nog wel veranderen...

[Pixeldude]

André schreef op zondag 09 oktober 2005 @ 22:30:
Onzin, afgezien van de indeling (die 100.000en sites hebben) komt er niets overeen

offtopic:
Als je iets verder kijkt dan je neus lang is dan zie je dat wij linkjes van elkaar op de websites hebben staan (check zn oude site bij link partners) dus daarmee verklein je de kans wel een aanzienlijk stukje vind je niet?

[Verwijderd]

aub: http://css.maxdesign.com.au/listamatic/

aub2: http://css.maxdesign.com.au/floatutorial/index.htm

tutorial 8 http://css.maxdesign.com.au/floatutorial/tutorial0801.htm en tutorial 9 http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

aub3:

[equationunequal]

Skyline GTR schreef op zondag 09 oktober 2005 @ 23:12:
[...]

offtopic:
Als je iets verder kijkt dan je neus lang is dan zie je dat wij linkjes van elkaar op de websites hebben staan (check zn oude site bij link partners) dus daarmee verklein je de kans wel een aanzienlijk stukje vind je niet?

De enige overeenkomst die ik kan zien is de menubalk die zich over de hele breedte van het venster bevindt. Dat is echter vrij common en niet iets waar jij de artistieke rechten op hebt. De 2 column lay-out (header, menu links & content rechts) is verreweg de meest gebruikte lay-out, dus ook dat is niet iets wat hij perse van jou heeft overgenomen...

[mhproductions]

Skyline GTR schreef op zondag 09 oktober 2005 @ 23:12:
[...]

offtopic:
Als je iets verder kijkt dan je neus lang is dan zie je dat wij linkjes van elkaar op de websites hebben staan (check zn oude site bij link partners) dus daarmee verklein je de kans wel een aanzienlijk stukje vind je niet?

Zoals Hankey al zegt: Die menubalk zie je tegenwoordig overal... Maar ik kan niet ontkennen dat ik het idee van twee kolommen van petersplace.tk heb, maar daar houdt het ook wel op en als dat al niet meer zou mogen.... ...er zijn honderden sites met 2 kolommen!!! Het design en al het scripten heb ik helemaal zelf gedaan....anders had het nu wel gewerkt...

[ Voor 15% gewijzigd door mhproductions op 10-10-2005 00:08 ]

[mhproductions]

Verwijderd schreef op zondag 09 oktober 2005 @ 23:16:
aub: http://css.maxdesign.com.au/listamatic/

aub2: http://css.maxdesign.com.au/floatutorial/index.htm

tutorial 8 http://css.maxdesign.com.au/floatutorial/tutorial0801.htm en tutorial 9 http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

aub3:

bedankt, ik zal eens kijken hoever ik kom...

[ Voor 5% gewijzigd door mhproductions op 09-10-2005 23:22 ]