login  Naam:   Wachtwoord: 
Registreer je!
 Forum

floating elements (Opgelost)

Offline verhaba - 28/03/2009 17:33
Avatar van verhabaLid Hallo

Ik heb een probleempje. Ik ben mijn site-tje aan het maken met css en gebruik verschillende div's voor alle informatie blokken zeg maar.

Zo heb ik een main divje en een navbar divje. Probleempje: Mijn main divje lijnt mooi uit onder mijn navbar divje. En dat is nu net niet de bedoeling. Ik vermoed dat ik 'm moet laten zweven... Maar hoe doe je dat nu?

Neem maar eens gerust een kijkje

5 antwoorden

Gesponsorde links
Offline jvs - 28/03/2009 17:55
Avatar van jvs HTML beginner Allereerst wil even zeggen dat je ervoor moet zorgen dat je div's, ofwel geen ofwel een uniek id moeten hebben. Nu heb je twee div's met het id navbar_rigth... Dat best even oplossen dus. Verder kan je best je menu's in een <ul> (unordered list) zetten. Zo ben je ook meteen van die tables af binnen je div (niet dat je die nu nodig hebt ofzo... Maar ik zie dat je ze wel gebruikt) Een <ul> kan je ook perfect stylen met css zodat je een witte achtergrond hebt enz... Verder gooi ja dan best die 2 menu's in 1 div deze geef je een float: left; en die maindiv geef je dan een float: left; mee en dan moet het normaal in orde zijn. Succes!
Offline verhaba - 28/03/2009 18:34 (laatste wijziging 28/03/2009 18:35)
Avatar van verhaba Lid Hey jvs, thx for the info. idd, elke div moet uniek zijn. Had ik over het hoofd gekeken.
Maar hoe kan je in die div dan verder werken. Via classes ofzo? en hoe gedragen die zich? gelden alle elementen die je in je div hebt gespecifieerd ook voor de ingebedde class?
Ik zoek ondertussen wel wat verder. Alvast bedankt voor je hulp.  
Offline jvs - 28/03/2009 19:23
Avatar van jvs HTML beginner Je kan inderdaad met class selectors of id selectors werken. Als antwoord op je andere vragen zou ik zeggen: zoek eens wat op over xHTML en CSS ik denk dat hieromtrent zeker genoeg te vinden is op deze site en op andere... Google is your friend!  En verder veel oefenen en uitproberen dan geraak je er wel! Succes
Offline rolandt - 28/03/2009 22:25 (laatste wijziging 28/03/2009 22:26)
Avatar van rolandt Nieuw lid Wilde je zo iets?

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  4. <link rel="shortcut icoN" href="http://users.telenet.be/locky/images/andi_europe.ico">
  5. <title>The Big Blue (Bart)</title>
  6. <link href="The%20Big%20Blue%20%28Bart%29_bestanden/default.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9.  
  10. <div id="mainbox">
  11. <div id="header"><img src="The%20Big%20Blue%20%28Bart%29_bestanden/header.jpg"></div>
  12. <div id="navbar_right">
  13. <ul>
  14. <li> duikshop </li>
  15. <li> winkel </li>
  16. <li> promo's </li>
  17. <li> nieuws </li>
  18. </ul>
  19. <ul>
  20. <li> Rebreather </li>
  21. <li> rEvo </li>
  22. <li> nieuws </li>
  23. <li> opleidingen </li>
  24. </ul>
  25. </div><!-- einde navbar_right -->
  26. <div id="tekstbox">
  27. <p>hier komt tekst te staan</p>
  28. </div><!-- einde tekstbox -->
  29. </div> <!-- einde mainbox -->
  30. </body>
  31. </html>


CSS
  1. body {
  2. background:#000;
  3. color:#333;
  4. font-weight:400;
  5. font-size:62.5%;
  6. line-height:1.5em;
  7. letter-spacing:0.1em;
  8. text-align:center;
  9. font-family:"Calibri", Verdana, Arial, sans-serif;
  10. }
  11.  
  12. div#mainbox {
  13. width:750px;
  14. }
  15.  
  16. div#header {
  17. width:750px;
  18. height:150px;}
  19.  
  20. div#navbar_right {
  21. background-color:#FFFFFF;
  22. text-align:left;
  23. width:125px;
  24. height:500px;
  25. float:right;
  26. }
  27.  
  28. div#tekstbox {
  29. background-color:#666666;
  30. font-size:1.8em;
  31. width:625px;
  32. height:500px;
  33. float:left;
  34. }


Grt,
Roland
Offline verhaba - 29/03/2009 14:45
Avatar van verhaba Lid Hey Roland
Bedankt voor je hulp. Ik had ondertussen al wat meer gegoogled en een mogelijke oplossing gevonden.
Bedankt voor suggestie.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.196s