login  Naam:   Wachtwoord: 
Registreer je!
 Forum

2 DIV's boven elkaar

Offline Frederic - 03/04/2005 17:49
Avatar van FredericPHP ver gevorderde Hoe kan ik ervoor zorgen dat deze boven elkaar komen staat ipv naast elkaar?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. div.rechterkolom {
  3. border: 1px dashed #E9E9E9;
  4. color: #F0F0F0;
  5. background-color: orange;
  6. text-align: right;
  7. width: 200px;
  8. margin: 0px;
  9. padding: 4px;
  10. float: right;
  11. }
  12. div.rechterkolom-titel {
  13. border: 1px dashed #E9E9E9;
  14. color: #F0F0F0;
  15. background-color: orange;
  16. text-align: right;
  17. width: 200px;
  18. float: right;
  19. }
  20.  
  21. </style>
  22. <div class="rechterkolom-titel">hey, dit is de titel</div>
  23. <div class="rechterkolom">gegroet, dit is het bericht</div>

10 antwoorden

Gesponsorde links
Offline barry - 03/04/2005 18:05
Avatar van barry PHP interesse je moet position: absolute; erin zetten...
:)

En dan positioneren met left:; en right:;
Offline Frederic - 03/04/2005 18:08
Avatar van Frederic PHP ver gevorderde hmmm, maar de dingen die erboven komen zijn variabel in lengte (erboven wordt nog een tekst uit een DB gehaald), dus dan loopt die er gewoon door?
Offline TFOL - 03/04/2005 18:59
Avatar van TFOL PHP beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="rechterkolom-titel">hey, dit is de titel</div>
  2. <br>
  3. <div class="rechterkolom">gegroet, dit is het bericht</div>


dit werkt bij mij wel:cool:
Offline Frederic - 03/04/2005 19:07
Avatar van Frederic PHP ver gevorderde hmmm, ik heb dan al 2 br's nodig, en hij sluit niet echt aan (er zit ruimte tussen de 2) 
Ik wou ze eigenlijk gewoon gebruiken zoals rijen bij tabellen
Offline Fenrir - 03/04/2005 19:38 (laatste wijziging 03/04/2005 19:42)
Avatar van Fenrir PHP expert Divs komen standaard naast elkaar door display: block; Maar aangezien je float gebruikt, is dit niet zo. Je moet clear: both gebruiken om iets onder een float te krijgen.

Mss zo:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.rechterkolom {
  2. clear: both;
  3. border: 1px dashed #E9E9E9;
  4. color: #F0F0F0;
  5. background-color: orange;
  6. text-align: right;
  7. width: 200px;
  8. margin: 0px;
  9. padding: 4px;
  10. float: right;
  11. }
  12. div.rechterkolom-titel {
  13. border: 1px dashed #E9E9E9;
  14. color: #F0F0F0;
  15. background-color: orange;
  16. text-align: right;
  17. width: 200px;
  18. float: right;
  19. }


Edit:
Aan je class-namen te zien zijn het titels, dan kun je beter deze code gebruiken:

<div class="rechterkolom">
<h2>titel</h2>
<p>rechterkolom</p>
</div>
Offline Frederic - 03/04/2005 20:34 (laatste wijziging 03/04/2005 20:40)
Avatar van Frederic PHP ver gevorderde OK, hartelijk bedankt 
Laatste vraagje nog mss:
Ik heb nu
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.rechterkolom {
  2. clear: both;
  3. border: 1px dashed #CCCCCC;
  4. color: #F0F0F0;
  5. background-color: #F0F0F0;
  6. text-align: right;
  7. width: 175px;
  8. margin: 0px;
  9. padding: 4px;
  10. float: right;
  11. color: #333333;
  12. font-size:10pt;
  13. font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  14. }
  15. div.rechterkolom-titel {
  16. clear: both;
  17. border: 1px dashed #CCCCCC;
  18. color: #E9E9E9;
  19. background-color: #E9E9E9;
  20. text-align: left;
  21. width: 175px;
  22. margin: 0px;
  23. padding: 4px;
  24. float:right;
  25. color: #333333;
  26. font-size:12pt;
  27. font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  28. }

Waar er tussen de 2 helemaal niet veel verschil is, wat mss wel onnodig veel code oplevert? Is er geen manier om te zeggen:
het ene is het andere PLUS nog enkele extra's?
Offline AcIdBuRn - 03/04/2005 22:15
Avatar van AcIdBuRn HTML beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.rechterkolom, div.rechterkolom-titel {
  2. clear: both;
  3. border: 1px dashed #CCCCCC;
  4. color: #F0F0F0;
  5. background-color: #F0F0F0;
  6. text-align: right;
  7. width: 175px;
  8. margin: 0px;
  9. padding: 4px;
  10. float: right;
  11. color: #333333;
  12. font-size:10pt;
  13. font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  14. }
  15. div.rechterkolom-titel {
  16. color: #E9E9E9;
  17. background-color: #E9E9E9;
  18. text-align: left;
  19. float:right;
  20. font-size:12pt;
  21. }
Offline Frederic - 04/04/2005 11:39 (laatste wijziging 04/04/2005 11:39)
Avatar van Frederic PHP ver gevorderde Dit is echt hét laatste 
Dit is mijn code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <title>Untitled Document</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <style type="text/css">
  5. div.rechterkolom, div.rechterkolom-titel {
  6. clear: both;
  7. border: 1px dashed #CCCCCC;
  8. border-left: 3px double #CCCCCC; 
  9. background-color: #F0F0F0;
  10. text-align: right;
  11. width: 175px;
  12. width: 100px;
  13. margin: 0px;
  14. padding: 4px;
  15. float: right;
  16. color: #333333;
  17. font-size:10pt;
  18. font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  19. -moz-border-radius: 6px 6px 6px 6px;
  20. }
  21. div.rechterkolom-titel {
  22. background-color: #E9E9E9;
  23. text-align: left;
  24. font-size:11pt;
  25. font-weight: bold;
  26. }
  27.  
  28. div.inhoud {
  29. border: 1px dashed #FF0000;
  30. text-align: center;
  31. padding: 4px;
  32. float: right;
  33. margin: 0px;
  34. }
  35. </style></head>
  36.  
  37. <body>
  38. <div class="rechterkolom" align="right"><input type="button" value="Go"></div>
  39. <div class="inhoud">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus tempus. Nulla ut tortor. Integer ac lectus. Maecenas commodo vehicula purus. Suspendisse et nibh id libero lobortis ullamcorper. Suspendisse iaculis turpis vitae lacus. Vestibulum commodo, nulla nec eleifend pretium, massa pede placerat neque, non dignissim sem pede non mi. Nunc ut tellus in velit convallis molestie. Quisque in urna nec pede semper rhoncus. Proin posuere turpis id tellus. Curabitur suscipit egestas est.
  40. </body>
  41. </html>

Nu, wat staat in de div van 'rechterkolom' heeft een variabele lengte, maar het lukt me niet de 2 gewoon langs elkaar te zetten? gewoon zo:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ---------
  2. |     |    |
  3. ---------

Maar ze komen de hele tijd boven elkaar?
Offline vinTage - 04/04/2005 11:45 (laatste wijziging 04/04/2005 12:01)
Avatar van vinTage Nieuw lid uhm, ik plak net jou code in dreamweaver, maar bij mij is het resultaat gewoon zoals jij het wilt hebben

Citaat:
Nu, wat staat in de div van 'rechterkolom' heeft een variabele lengte, maar het lukt me niet de 2 gewoon langs elkaar te zetten? gewoon zo:



php code - Bekijk de code zonder highlighting - Klap code in 
  1. ---------
  2. |     |    | 
  3. ---------

zo dus


edit ow, dat is in IE wel goed, maar niet in Fx

edit 2
(gedelete omdat dat ook niet goed was)
maar je bent zoiezo je div vergeten te sluiten <div class="inhoud">blabla</div>
Offline Frederic - 04/04/2005 11:51
Avatar van Frederic PHP ver gevorderde Jep, IE doet het perfect, maar hoe krijg ik dat ook zo in FF?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.25s