Afbeelding: http://test.djnoiz.be/test.jpg
Het rode en groene vlak zijn beide div's met een bepaalde hoogte en breedte.
In het rode vlak kan tekst komen te staan en de tekst kan groter zijn dan de hoogte van het vlak => vlak wordt uitgerokken.
Hoe kan ik ervoor zorgen dat het groene vlak steeds volledig onderaan het rode vlak blijft?
Alvast erg bedankt!!
Het probleem nu is, dat ik voor het groene vlak steeds een bepaalde top-waarde geef, maar omdat het rode vlak een variabele hoogte heeft, klopt de opgegeven top-waarde in 90% van de gevallen niet ...
Ik zoek dus een manier om op de 1 of de manier het groene vlak steeds onderaan het rode vlak te houden.
<div style="width: 200px; border: 1px solid #000000; background-color: red;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor arcu, interdum in, porta sit amet, placerat ac, leo. Mauris elementum, leo vel ultrices pulvinar, nibh lectus mollis ante, id volutpat augue odio at risus. Sed pharetra, elit ut nonummy malesuada, felis ante consequat tellus, sit amet suscipit leo risus non purus. Fusce et nisi. Pellentesque venenatis ligula nec magna. Fusce rutrum ligula at est. Aenean sit amet tellus. Proin diam. Donec at dolor nec urna imperdiet hendrerit. Fusce ac justo vitae erat placerat imperdiet. Phasellus congue fringilla urna. Vivamus aliquam purus vitae elit.
</div>
<div style="width: 200px; height: 80px; border: 1px solid #000000; background-color: green;"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor arcu, interdum in, porta sit amet, placerat ac, leo. Mauris elementum, leo vel ultrices pulvinar, nibh lectus mollis ante, id volutpat augue odio at risus. Sed pharetra, elit ut nonummy malesuada, felis ante consequat tellus, sit amet suscipit leo risus non purus. Fusce et nisi. Pellentesque venenatis ligula nec magna. Fusce rutrum ligula at est. Aenean sit amet tellus. Proin diam. Donec at dolor nec urna imperdiet hendrerit. Fusce ac justo vitae erat placerat imperdiet. Phasellus congue fringilla urna. Vivamus aliquam purus vitae elit.
<div style="position; absolute; ...">
<div style="width: 200px; border: 1px solid #000000; background-color: red;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor arcu, interdum in, porta sit amet, placerat ac, leo. Mauris elementum, leo vel ultrices pulvinar, nibh lectus mollis ante, id volutpat augue odio at risus. Sed pharetra, elit ut nonummy malesuada, felis ante consequat tellus, sit amet suscipit leo risus non purus. Fusce et nisi. Pellentesque venenatis ligula nec magna. Fusce rutrum ligula at est. Aenean sit amet tellus. Proin diam. Donec at dolor nec urna imperdiet hendrerit. Fusce ac justo vitae erat placerat imperdiet. Phasellus congue fringilla urna. Vivamus aliquam purus vitae elit.
</div>
<div style="width: 200px; height: 80px; border: 1px solid #000000; background-color: green;"></div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor arcu, interdum in, porta sit amet, placerat ac, leo. Mauris elementum, leo vel ultrices pulvinar, nibh lectus mollis ante, id volutpat augue odio at risus. Sed pharetra, elit ut nonummy malesuada, felis ante consequat tellus, sit amet suscipit leo risus non purus. Fusce et nisi. Pellentesque venenatis ligula nec magna. Fusce rutrum ligula at est. Aenean sit amet tellus. Proin diam. Donec at dolor nec urna imperdiet hendrerit. Fusce ac justo vitae erat placerat imperdiet. Phasellus congue fringilla urna. Vivamus aliquam purus vitae elit.
Bedankt ontani!
Het is nu bijna 100% zoals ik het wil (maar op de 1 of de manier is er nog een whitespace tussen de div's ...)
Hier een voorbeeld van hoe het eruitziet: http://test.djnoiz.be/bijna.jpg
wrom heb je id en class, dat is precies hetzelfde alleen je gebruikt het in samenhang of je # of . gebruikt, dus zou er 1tje gebruike, (regel1,2)
btw ontani wat heeft iedereen met dit turks ofzo..
Citaat:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor arcu, interdum in, porta sit amet, placerat ac, leo. Mauris elementum, leo vel ultrices pulvinar, nibh lectus mollis ante, id volutpat augue odio at risus. Sed pharetra, elit ut nonummy malesuada, felis ante consequat tellus, sit amet suscipit leo risus non purus. Fusce et nisi. Pellentesque venenatis ligula nec magna. Fusce rutrum ligula at est. Aenean sit amet tellus. Proin diam. Donec at dolor nec urna imperdiet hendrerit. Fusce ac justo vitae erat placerat imperdiet. Phasellus congue fringilla urna. Vivamus aliquam purus vitae elit.
Ultimatum, dat is gewoon opvulling http://www.lipsum.org. wordt door designers gebruikt om een layout wat opvullende tekst te geven zodat je een idee hebt hoe het eruit ziet.
DjNoiz ik was aan't denken om die groene div in die rode te zetten, maar met bottom: 0px; dat staat ie ook automatisch onderaan in die div. je zet dan margin-bottom van die rode div op 80px zodat de text niet over de groene zou gaan, daarmee zou je het moeten kunnen oplossen
DjNoiz ik was aan't denken om die groene div in die rode te zetten, maar met bottom: 0px; dat staat ie ook automatisch onderaan in die div. je zet dan margin-bottom van die rode div op 80px zodat de text niet over de groene zou gaan, daarmee zou je het moeten kunnen oplossen
Hmm, ik snap wat je wil zeggen, maar blijkbaar snapt dreamweaver er niet veel van:s : http://test.djnoiz.be/vaag.jpg
=> Linkse afbeelding is zelfs volledig verdwenen
ik zie niet meteen wat de bedoeling van alles is, volgens mij staan ook niet alle afbeeldingen in de map, maak eens een goede tekening van hoe er alles moet uitzien
Ik heb de index-pagina nu online gezet op http://test.djnoiz.be/sitemasters en in de map images staan alle afbeeldingen.
(de code is wel wat gestript want er stond php-code etc in).
De bedoeling lijkt mij duidelijk als je naar de index-pagina kijkt: http://test.djnoiz.be/sitemasters/index_.html
=> onderaan moet het lijnje mooi aansluiten bij de inhoud-div, zodat de inhoud-shape mooi afgelijnd is.
Nogmaals: Alvast ERG bedankt ontani!
blocklevel elements zijn elementen zoals divs.
om die op te knappen kun je best eens je positionering van je div's herzien. nu zitten die overelkaar en door elkaar. probeer die allemaal mooi te laten aansluiten. probeer ook zo min mogelijk met absolute positionering te werken