ugrás a tartalomhoz

Rés a CSS ben

superman · 2010. Júl. 14. (Sze), 23.30
Csináltam egy honlap sablont, amit később tervezek beprogramozni is, de egy olyan hibáb
a ütköztam amilyennel eddig soha sem találkoztam, mert máshogy csináltam. A tartalom rész 3 rétegből áll. Bal és jobb oldalt 1 "keret", középen az a rész ahova a tartalom megy. Mivel a középső rétegbe megy a tartalom, a két oldalsó rész marad ugyan akkora.
Mindhárom rétegnek minimum magasság van megadva.
Bemásolom a forráskódot is:

#container
{
    margin: 0 auto;
    width: 688px;
    background-color: red;
    min-height: 500px;
}

#header
{
    background-image: url(images/header2.jpg);
    width: 688px;
    height: 126px;
}

#holder_left
{
    background-image: url(images/border_up_left.jpg);
    width: 34px;
    height: 50px;
}

#holder_right
{
    background-image: url(images/border_up_right.jpg);
    width: 34px;
    height: 50px;
}

#ad_line
{
    position: relative;
    background-image: url(images/ad_line.jpg);
    width: 688px;
    height: 49px;
}

#ad_text
{
    position: relative;
    top: 15px;
    left: 25px;
    background-color: #3ed0ea;
    width: 638px;
    height: 24px;
}

#border_left
{
    background-image: url(images/border_left.jpg);
    background-repeat: repeat-y;
    float: left;
    width: 34px;
    min-height: 250px;
}

#contents
{
    background-color: #efefef;
    float: left;
    width: 620px;
    min-height: 250px;
}

#border_right
{
    background-image: url(images/border_right.jpg);
    background-repeat: repeat-y;
    float: left;
    width: 34px;
    min-height: 250px;
}

#footer
{
    background-image: url(images/footer.jpg);
    float: left;
    width: 688px;
    height: 87px;
    clear: both;
}
Szemléltetés:
http://www.woodoocaudron.uw.hu/index.php -> A jó
http://www.woodoocaudron.uw.hu/index2.php -> A hibás

Ha tudtok légyszíves segítsetek. Köszönöm!
‹ HTML hírlevél + képek TEXTAREA formázó ›
 ■
1

Tedd bele a #contentet

Ajnasz · 2010. Júl. 14. (Sze), 23.57
Tedd bele a #contentet mondjuk a #border_left-be, a right border backgroundot allitsd be a #contentnek, igy a #border_left a #contenttel egyutt fog noni plusz megsporolsz egy elemet. A width property-t termeszetesen vedd le a #border_leftrol.
2

Ezzel a módszerrel elég fura

superman · 2010. Júl. 15. (Cs), 11.37
Ezzel a módszerrel elég fura eredményt kaptam...
3

Tekintve, hogy a #border_left

LeGaS · 2010. Júl. 15. (Cs), 13.02
Tekintve, hogy a #border_left és #border_right elemekben nem lesz semmi tartalom, szerintem jobban jársz, ha egyszerűen úgy vágod ki a képet, hogy benne van a két széle is és azt állítod a #contents hátterének. Így egyrészt kevesebb lesz a HTML markup, másrészt a háttér is úgy fog nőni, ahogy a tartalom.
4

Igen tudom, de úgy kilóg a

superman · 2010. Júl. 15. (Cs), 13.23
Igen tudom, de úgy kilóg a szöveg a háttérbe is, ami nem túl szép. Bekezdésekkel meg nem nagyon tudom variálni:S De mindegy. Köszönöm a segítséget.
5

De tudod szabályozni. Vagy

LeGaS · 2010. Júl. 15. (Cs), 14.30
De tudod szabályozni. Vagy padding-ot alkalmazol a #contents div-re, ebben az esetben a megadott padding értékekkel csökkentened is kell a div szélességét, vagy pedig ahogy írtad paragrafusokba teszed és azoknak megadsz margót (margin).

Bocsi, nem a válaszra nyomtam.