[HTML] Probleem met DIV - Softwareontwikkeling

woensdag 23 februari 2005 08:55

Acties:

Topicstarter

Ik ben bezig met het ontwerpen van een nieuwe website, waarbij ik gebruik wil maken van DIV's in plaats van tabellen, ed. Maar ik ben tegen een probleem aangelopen.

Ik heb een webpage die 780px breed is en in het midden van het scherm gecentreerd wordt. Deze webpage heeft als eerste DIV een main-area waarin alle ellementen geplaatst worden. Ik wil in deze main-area een achtergrondplaatje hebben die over de volledige hoogte (height) van de pagina weergegeven wordt, maar dit lukt niet. Ik kan mijn elementen gewoon in de mainarea plaatsen, maar de mainarea (en dus de achtergrond) wordt niet weergegeven. Hoe moet ik dit oplossen?

Een voorbeeld van mijn code:
website.css

Cascading Stylesheet:

body {font-family: verdana, arial, sans-serif; background: url(./background_outside.gif); margin: 0; padding: 0; text-align: center;}
div {text-align: left;}

#main {
        position: relative;
    width: 780px; 
    margin: 0 auto;
    top: 0;
    background: url(./background.jpg);
    border: #000000 1px solid;
}
#header {
    width: 780px; 
    height: 100px;
    background: transparent url(./header.gif);
    top: 0px; 
    left: 0px;
}
#content {
    width: 500px; 
    position: absolute;
    background: white;
    top: 155px; 
    left: 25px;
    padding-bottom: 20px;
}
#contentmain {
    float: right; 
    width: 500px;
    padding: 0;
    margin: 0;
}

En dan de body van de html:
website.html

HTML:

<body>
  <div id="main">
    <div id="header"></div>
    <div id="content">
        <div id="contentmain"></div>
                </div>
  </div>
</body>

Ik weet wel dat als ik elementen niet absoluut positioneer, de main-area de achtergrond wel weergeeft tot de onderkant van dat element, maar ik zoek naar een oplossing waarbij de achtergrond tot aan de onderkant van het onderste element wordt weergegeven (de hele pagina dus).
Hoop dat iemand een oplossing kan bieden. Alvast bedankt!

[ Voor 34% gewijzigd door Willem op 23-02-2005 09:09 ]

woensdag 23 februari 2005 08:57

Acties:

Willem

Wil zo vriendelijk zijn je code tussen [html] ... [/html] en [css] ... [/css] haken te plaatsen?

Motor (of auto) onderhoud bijhouden

woensdag 23 februari 2005 08:58

Acties:

crisp

Devver

Pixelated

misschien als je je #content geen background geeft?

Intentionally left blank

woensdag 23 februari 2005 09:00

Acties:

Woudloper

« - _ - »

willem169 schreef op woensdag 23 februari 2005 @ 08:57:
Wil zo vriendelijk zijn je code tussen [html] ... [/html] en [css] ... [/css] haken te plaatsen?

Nooit geweten dat we ook [css] [/css] haken hebben....

woensdag 23 februari 2005 09:00

Acties:

Zoefff

❤ 

Dat komt omdat je #content absoluut positioneert. Maak je hier relative van (of haal je het weg), dan werkt het wel

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 23 februari 2005 09:03

Acties:

j_odijk

Topicstarter

Ja, ik heb al ontdekt dat het komt doordat ik het absoluut posititioneer, maar is er geen oplossing die ook werkt als ik mijn elementen absoluut positioneer?
Of hoe kan ik een element plaatsen dat niet absoluut gepositioneerd is, maar wel onder alle andere elementen komt te staan? Zodat ik toch de volledige height van de website meepak? (Work-around)

[ Voor 9% gewijzigd door j_odijk op 23-02-2005 09:03 ]

woensdag 23 februari 2005 09:06

Acties:

Verwijderd

Dat je de background.jpg nooit te zien krijgt, is logisch.

Je div #main heeft geen hoogte opgegeven. Die wordt dus niet hoger dan de elementen die hij bevat. Voor alle elementen die hij bevat, heb je een achtergrond opgegeven. Al die elementen heb je ook dezelfde breedte gegeven.

De enige die me dwars zit op dit punt, is de 'header'. Die heeft een (neem ik aan transparant) gifje als achtergrond, en als kleur 'transparent'. Daar zou je je background dus wel moeten zien.

Voor de rest klopt je positionering niet, zo heb je bv. 'position:absolute' staan voor je content div, wat inhoudt dat hij buiten je main div gaat vallen.

Mijn tip: haal overal de positionerings-zaken weg (left, top, position) en haal even bij header in je css de background regel weg. Je zult zien dat je dan je background wel ziet. Werk van daaruit verder.

woensdag 23 februari 2005 09:07

Acties:

Verwijderd

Aargh ik had weer eens te lang zitten kijken naar je .css en .html.. spuit 11.

j_odijk schreef op woensdag 23 februari 2005 @ 09:03:
Ja, ik heb al ontdekt dat het komt doordat ik het absoluut posititioneer, maar is er geen oplossing die ook werkt als ik mijn elementen absoluut positioneer?
Of hoe kan ik een element plaatsen dat niet absoluut gepositioneerd is, maar wel onder alle andere elementen komt te staan? Zodat ik toch de volledige height van de website meepak? (Work-around)

Waarom wil je daar absoluut positioneren? Er is geen workaround voor, en dat moet je ook niet willen. Je wil juist iets met DIV's doen, doe dat dan ook

Wat wil je precies bereiken, en waarom denk je daar absolute positionering voor nodig te hebben?

//edit
nou ja, er is natuurlijk wel een workaround, je zou met javascript de hoogte van je main div op de juiste kunnen zetten.. maar.. smerig smerig smerig..

[ Voor 10% gewijzigd door Verwijderd op 23-02-2005 09:08 ]

woensdag 23 februari 2005 09:08

Acties:

crisp

Devver

Pixelated

j_odijk schreef op woensdag 23 februari 2005 @ 09:03:
Ja, ik heb al ontdekt dat het komt doordat ik het absoluut posititioneer, maar is er geen oplossing die ook werkt als ik mijn elementen absoluut positioneer?
Of hoe kan ik een element plaatsen dat niet absoluut gepositioneerd is, maar wel onder alle andere elementen komt te staan? Zodat ik toch de volledige height van de website meepak? (Work-around)

Je kan je #content toch gewoon een:

Cascading Stylesheet:

1 2	margin-top: 55px; /* #header heeft al 100px hoogte */ margin-left: 25px;

geven?

Intentionally left blank

woensdag 23 februari 2005 09:20

Acties:

j_odijk

Topicstarter

@ hezik:
Sorry, beetje onduidelijk. Ik krijg de achtergrond inderdaad wel gewoon in de header te zien.

Ik wil niet perse absoluut positioneren, maar ik had de indruk dat dat de enige manier was om de elementen op een plek naar keuze te krijgen. Zonder afhankelijk te zijn van andere elementen. (Dat is dus wat ik wil bereiken) Heb ik dat verkeerd geinterpreteerd? Of hoe moet ik dat anders doen?

En thnx, maar laat die smerige javascript work-arounds maar zitten.

@ crisp:
Ik heb jouw tip geprobeerd, maar als ik die positionering weghaal en margin-top aanpas naar 55, plaatst hij hem direct onder de header, zonder de margin. Ook als ik een grotere margin-top waarde neem, blijft hij direct onder de header gepositioneerd.

[ Voor 5% gewijzigd door j_odijk op 23-02-2005 09:21 ]

woensdag 23 februari 2005 09:24

Acties:

Verwijderd

Ik weet wel dat als ik elementen niet absoluut positioneer, de main-area de achtergrond wel weergeeft tot de onderkant van dat element, maar ik zoek naar een oplossing waarbij de achtergrond tot aan de onderkant van het onderste element wordt weergegeven (de hele pagina dus).
Hoop dat iemand een oplossing kan bieden. Alvast bedankt!

Mits je niet absoluut positioneert, en geen floats gebruikt, doet alles precies wat je wilt, zolang je je elementen maar binnen je #main div plaatst.

Wil je toch floats gebruiken, kun je een truukje toepassen. Zet in je css:

Cascading Stylesheet:

1 2	br.clearing { clear: both; }

en plaats je floating divs in een andere div, met als laatste item deze <br>. Dus:

HTML:

<div>
  <div style="float: left"></div>
  <br class="clearing"/>
</div>

j_odijk schreef op woensdag 23 februari 2005 @ 09:20:
@ crisp:
Ik heb jouw tip geprobeerd, maar als ik die positionering weghaal en margin-top aanpas naar 55, plaatst hij hem direct onder de header, zonder de margin. Ook als ik een grotere margin-top waarde neem, blijft hij direct onder de header gepositioneerd.

Voeg dit nog eens toe aan Crisps' code:

Cascading Stylesheet:

1
2
3

margin-top: 55px; /* #header heeft al 100px hoogte */ 
margin-left: 25px;
left: 280px;

Dus de float weghalen. Je weet immers hoe breed je div is (780px); dan is een left van 280px opgeven gelijk aan een float right en een width van 500px..

dat, of geef je header een margin-bottom mee..

[ Voor 44% gewijzigd door Verwijderd op 23-02-2005 09:29 ]

Pagina: 1

Reageer