login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div's: variabele grootte

Offline DjNoiz - 27/09/2005 18:20
Avatar van DjNoizNieuw lid Hallo Sitemasters,

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!!

19 antwoorden

Gesponsorde links
Offline Dolfje - 27/09/2005 18:42
Avatar van Dolfje Gouden medailleGouden medailleGouden medaille

PHP ver gevorderde		 sorry maar ik versta je vraag niet zo goed.

ik denk dat het antwoord is een hoogte specifieren.
Offline DjNoiz - 27/09/2005 18:49
Avatar van DjNoiz Nieuw lid 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.
Offline Ontani - 27/09/2005 21:37
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 gewoon zo:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 200px;  border: 1px solid #000000; background-color: red;">
  2. 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.
  3. </div>
  4. <div style="width: 200px; height: 80px; border: 1px solid #000000; background-color: green;"></div>
Offline DjNoiz - 27/09/2005 23:19
Avatar van DjNoiz Nieuw lid Probleem is dat de div's al gepositioneerd zijn (dus met position:absolute) ...
En blijkbaar werkt het dan niet?!
Iemand enig idee?:(
Offline Ontani - 27/09/2005 23:22 (laatste wijziging 27/09/2005 23:22)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position; absolute; ...">
  2.  <div style="width: 200px;  border: 1px solid #000000; background-color: red;">
  3. 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.
  4.  </div>
  5.  <div style="width: 200px; height: 80px; border: 1px solid #000000; background-color: green;"></div>
  6. </div>
Offline DjNoiz - 27/09/2005 23:40
Avatar van DjNoiz Nieuw lid 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

De code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="inhoud_bg" class="inhoud_bg" style="position:absolute; left:92px; top:114px; width:708px; height:464px; z-index:1; background-image:url(/images/inhoud.jpg); background-repeat:repeat">
  2. 	<div id="inhoud" class="inhoud" style="position:relative; left:158px; top:0px; width:550px; height:464px; z-index:1">
  3. 		<div style="margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom:20px">
  4. 		<?php include ($include); ?>
  5. 		</div>
  6. 	</div>
  7. 	<div id="links_bottom_right2" style="position:absolute; width:158px; height:5px; z-index:2">
  8. 		<img src="/images/links_bottom_right2.jpg" width="158" height="5">
  9. 	</div>
  10. 	<div id="inhoud_bottom" style="position:absolute; left:158px; width:550px; height:5px; z-index:2">
  11. 		<img src="/images/inhoud_bottom.jpg" width="550" height="5">
  12. 	</div>
  13. 	<div id="footer" style="position:absolute; left:158px; width:550px; height:17px; z-index:2; text-align:center">
  14. 		<font face="Arial" size="1">&copy; De Klinkaard</font>
  15. 	</div>
  16. </div>
Offline Ultimatum - 28/09/2005 07:45
Avatar van Ultimatum PHP expert 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.

zie ik opzich wel vaker 
Offline Ontani - 28/09/2005 09:43
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 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
Offline DjNoiz - 28/09/2005 12:32
Avatar van DjNoiz Nieuw lid
Citaat:
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 
Offline Ontani - 28/09/2005 12:40
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 zet je afbeeldingen weer eens online, zal k nog eens wat proberen 
Offline DjNoiz - 28/09/2005 13:57
Avatar van DjNoiz Nieuw lid Alles staat nu in de map http://test.djnoiz.be/sitemasters.
Afbeeldingen staan in de submap met dezelfde naam.
Alvast heeeel erg bedankt ontani:!:
Offline Ontani - 28/09/2005 14:07
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 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
Offline DjNoiz - 28/09/2005 19:17
Avatar van DjNoiz Nieuw lid @ Ontani:

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!
Offline Ontani - 28/09/2005 21:44
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 ik zie het ja, heb je al eens je blocklevel elements bekeken?
dat ziet er niet zo bepaald mooi uit.

http://ontani.net/storage/blockelements.jpg

check die rode lijnen, die geven uw div's weer. dat ziet er niet goed uit, probeer dat wat op te knappen
Offline DjNoiz - 28/09/2005 22:06 (laatste wijziging 28/09/2005 22:07)
Avatar van DjNoiz Nieuw lid Wat zijn juist blocklevel elements en hoe kan je deze bekijken?
En wat kan je dan doen om deze "op te knappen" zoals jij zo mooi zegt:)
Offline Ontani - 28/09/2005 22:28
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 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
Offline DjNoiz - 28/09/2005 22:37
Avatar van DjNoiz Nieuw lid bestaat daar soms een soort van tutorial van? (van div's in het algemeen)
Of kan je me soms op weg helpen?
Bedankt hè!;-)
Offline Ontani - 28/09/2005 23:03
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 geen idee of daar tutorials van bestaan, zal waarschijnlijk wel. ik heb het geleerd door te oefenen.
Offline DjNoiz - 28/09/2005 23:43 (laatste wijziging 01/10/2005 22:14)
Avatar van DjNoiz Nieuw lid Nu, ik snap wel wat je zegt, maar ik heb geen idee hoe ik hetzelfde als dat nu het geval is kan bekomen door de div's te laten aansluiten .. 

[EDIT]
Iemand die me kan helpen?
Ik kom niet meteen tot een goed resultaat ..
ERG bedankt!
[/EDIT]
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s