Hallo allemaal,

Hierbij wil ik even het aandacht voor het volgende probleem: Ik werk al een tijdje met divs, maar in het verleden heb ik ook gewerkt met tabellen (toen er nog geen andere oplossing was).

Bij het gebruik van tabellen kon je de content laten uitrekken. Nu is dit ook mogelijk bij div. Maar hoe moet je dit dan opbouwen? Of is dit per design verschillend?

Ik verneem graag jullie reactie.

Je kunt de div een min-height geven of een height van 100 %

Ok. Ik heb al verschillende dingen geprobeerd. Echt waar ik op een gegeven moment gewoon geen raad meer weet.

Laat ik het even over mijn eigen (test) site hebben: BJ-Media.nl. Deze website staat compleet in div. De stylesheet staat onder opmaak.css achter bj-media.nl.

Deze lay-out heb ik even snel in elkaar gezet met div. Ik heb het fout gedaan, omdat ik de gehele lay-out in één div heb staan. Ik heb ook een div met inhoud staan. Daarin staat de content van de website. Deze heb ik op overflow: auto; staan.

Bij de pagina portfolio zie je dat dit van toepassing is. Maar het is toch ook mogelijk om die div uit te rekken, maar ook dat de lay-out verder uitrekt?

Door gewoon geen height op te geven?
Een goede opbouw is:
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Origineel gepost door Mathijs Kingma

Door gewoon geen height op te geven?
Een goede opbouw is:
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Over welke div heb jij het dan qua height? Ik snap je opbouw wel verder hoor ;)

Origineel gepost door Jeroen Burgers

Over welke div heb jij het dan qua height? Ik snap je opbouw wel verder hoor ;)

je content div

Origineel gepost door Samet Y

je content div

Oké, die is duidelijk. Nu zou de lay-out nog moeten. Hoe zou ik die kunnen laten meerekken? Hetzelfde proberen?

Als je je indeling een beetje verfijnd zal het een stuk gemakkelijker zijn denk ik.

Code:

<div id="maincontainer">
    <div id="headercontainer"></div>
    <div id="contentcontainer"> 
      <div id="menu"></div>
      <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

geef vervolgens in de 'contentcontainer' de achtergrondafbeelding aan. Height:auto (of gewoon weglaten dus) en het is schaalbaar ;) Je hebt nu jouw achtergrondafbeelding als een geheel. Als je deze netjes sliced zou het prima werken :)

Origineel gepost door MelvinKooper

Als je je indeling een beetje verfijnd zal het een stuk gemakkelijker zijn denk ik.

Code:

<div id="maincontainer">
    <div id="headercontainer"></div>
    <div id="contentcontainer"> 
      <div id="menu"></div>
      <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

geef vervolgens in de 'contentcontainer' de achtergrondafbeelding aan. Height:auto (of gewoon weglaten dus) en het is schaalbaar ;) Je hebt nu jouw achtergrondafbeelding als een geheel. Als je deze netjes sliced zou het prima werken :)

Oké, nou in ieder geval bedankt. Ik ga er wel even mee stoeien! :)

Ik snap uw probleem niet echt. Heeft u een voorbeeld van wat er nou mis is en/of een werkende/niet werkende versie online staan?

~Jeroen Kamphuis

Ik krijg het echt niet voor elkaar! Ik heb even een simpele lay-out gemaakt en die heb ik ook gewoon de div staan. Nu probeer ik hetzelfde (zoals het probleem in mijn opening stond), maar opnieuw lukt het mij niet.

Ik heb even een zip file gemaakt: www.bj-media.nl/v4.zip. In het HTML document staat ook de css en in de map images staan gewoon de afbeeldingen voor de website. Misschien is er iemand die mij raad kan geven of mij even wilt helpen?!

Ik heb een voorbeeld over wat ik bedoel. Als je kijkt naar de website http://www.erwinoudshoorn.nl/. In eerste instantie zie je de home, maar als je op portfolio klikt, dan wordt de pagina langer (uit gerekt). Misschien dat men hierdoor een beeld krijgt van wat ik bedoel...

Alvast bedankt.

div#content {opmaak.css (regel (65)
height:680px; , maak daar eens auto van
, dan moet het werken

Origineel gepost door alco w.

div#content {opmaak.css (regel (65)
height:680px; , maak daar eens auto van
, dan moet het werken

Beste Alco,

Met die versie die jij bedoelt lukt dat niet, omdat ik deze niet goed gesliced heb. Ik heb net een bovenstaande reactie gegeven (waarbij ik een nieuwe lay-out heb gemaakt en ook de div beter heb gezet).

Misschien dat je mij daarbij even kunt helpen indien je het snel weet?
Aanvullend bericht:
Het is gelukt! Topic mag gesloten worden :)