login  Naam:   Wachtwoord: 
Registreer je!
 Forum

linkerdiv even hoog als rechterdiv

Offline Ultimatum - 06/06/2007 22:22
Avatar van UltimatumPHP expert Ik heb 2 divs, een linker en een rechter en ze staan wel goed als er in de linker tekst staat en in de rechter een input box of tekst, maar staat er een textarea dan gaat dat ding op zijn bek.

Dit is de code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form method="post" action="">
  2.  
  3.         <h2 class="title">Contact</h2>
  4.  
  5.         <div class="table">
  6. 	        <div class="left">Name:</div>
  7. 	        <div class="right"><input type="text" name="name" value="Ultimatum" /></div>
  8.  
  9. 	        <div class="left">Email:</div>
  10. 	        <div class="right"><input type="text" name="email" value="ultimatum22@hotmail.com" /></div>   
  11.  
  12. 	        <div class="left">Subject:</div>
  13. 	        <div class="right"><input type="text" name="subject" value="Subject" /></div>
  14.  
  15. 	        <div class="left">Category:</div>
  16. 	        <div class="right">
  17. 	        	<select name="category" size="1">
  18. 	        		<option value="category1">Category 1</option>
  19. 	        		<option value="category2">Category 2</option>
  20. 	        		<option value="category3">Category 3</option>
  21. 	        		<option value="category4">Category 4</option>
  22. 	        		<option value="category5">Category 5</option>
  23. 	        	</select>
  24. 	        </div> 
  25.  
  26. 	        <div class="left">Message</div>
  27. 	        <div class="right"><textarea name="message" cols="40" rows="10"></textarea></div>
  28. 		</div>	    
  29. 	</form>


En dit is de css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.table {
  2. 	width: 100%;
  3. }
  4.  
  5. div.left {
  6. 	padding: 8px 0px 9px 8px;
  7. 	width: 30%;
  8. 	float: left;
  9. 	border-left: 1px #eeeee8 solid;
  10. 	border-bottom: 1px #eeeee8 solid;
  11. }
  12.  
  13. div.right {
  14. 	padding: 6px 0px 7px 0px;
  15. 	width: 65%;
  16. 	float: left;
  17. 	border-right: 1px #eeeee8 solid;
  18. 	border-bottom: 1px #eeeee8 solid;
  19. }
  20.  
  21. div.right input {
  22. 	height: 14px;
  23. 	width: 230px;
  24. 	padding-left: 4px;
  25. 	font-size: 10px;
  26.     font-family: Verdana;
  27. 	color: #333333;	
  28. 	border: 1px solid #CB7575;
  29. }
  30.  
  31. div.right select {
  32. 	height: 14px;
  33. 	width: 230px;
  34. 	padding-left: 4px;	
  35. 	font-size: 10px;
  36.     font-family: Verdana;
  37. 	color: #333333;	
  38. 	border: 1px solid #CB7575;
  39. }
  40.  
  41. div.right textarea {
  42. 	border: 1px solid #CB7575;
  43. }


Dit is een script en zoals je ziet loopt de border in de linkerdiv niet door tot dezelfde border aan de rechterdiv

http://img501.i...eenvf4.jpg

5 antwoorden

Gesponsorde links
Offline MindPrison - 06/06/2007 22:35
Avatar van MindPrison PHP gevorderde Ik vrees dat je dit alleen kan oplossen met door de linkerdiv een hoogte mee te geven (of eventueel via javascript).
Uiteraard moet je de textarea in de rechterdiv dan ook een hoogte meegegeven, want die "rij"-hoogte verschilt wat van browser tot browser.
Offline Pieter - 07/06/2007 08:33
Avatar van Pieter Gouden medaille

SEO guru		 Een hoogte meegeven is zeker niet de meest logische en verstandige oplossing.
Waarom zorg je dat je het deel links doet, met border en dan het deel rechts doet met border?

Dat kan je toch gewoon in 1 keer doen?
Maak gewoon de css aan voor 1 zo'n rij. Met behulp van een class laat je de inputs en textarea's een grote margin hebben van vb 400px ofzo, aangezien margin toch niet ten opzichte van het vorige element is.
Vervolgens zwier je er een grijze border omheen en dan heb je in misschien 4-5regeltjes css je code. Je zal wel je html moeten aanpassen (werk eens met labels enzo in je form, das veel netter en gebruiksvriendelijker).
Offline Ultimatum - 07/06/2007 10:01
Avatar van Ultimatum PHP expert Hoe bedoel je? 1 div maken voor een rij en dan dmv van labels en de input velden die zooi op de juiste plek zetten?
Offline Pieter - 07/06/2007 11:08
Avatar van Pieter Gouden medaille

SEO guru		 Jup. Je moet dan enkel volgende zaken stylen:

-De horizontale rijen (dmv een div bijvoorbeeld of gewoon de labels stylen) met een border errond.
-de inputs/textarea's een bepaalde margin meegeven.

Vervolgens maak je je code netter door niet eens left en right divs enzo nodig te hebben.
Als het je echt niet lukt wil ik je wel helpen, maar het zal voor na de examens zijn hoor.
Offline Ultimatum - 07/06/2007 11:27
Avatar van Ultimatum PHP expert Ik zal vanavond wel even testen..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s