login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Probleempje met div (Opgelost)

Offline helderdje - 27/09/2008 13:24 (laatste wijziging 27/09/2008 23:48)
Avatar van helderdjeNieuw lid Hoi. Ik ben sinds kort begonnen met het zelf maken, Slicen & basen van layouts. Dit lukt aardig. Alleen heb ik nu een probleempje met 3 vakken naast elkaar. Ik wil dus een vak met 'info' links boven, Daaronder een 'menu' en daar onder een vakje met 'statisstieken' o.i.d. Daarnaast wil ik de header + het content. En daarnaast wil ik 3 vakjes met bv: laatste 5... of een poll enz.

Maar nu komt alles door elkaar heen te staan. En wat ik ook probeer. het lukt me niet!

De code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4.         <title>Site titel</title>
  5.  
  6.     <style type="text/css">
  7. html            {margin:0px;}
  8. body                 {background-color: #9ad7e9;}
  9. div#container        {width: 740px;}
  10. div#left        {float: left; width: 154px;}
  11. div#middle        {float: right; left: 432px;}
  12. div#rechts        {float: right; width: 154px;}
  13. div#inhoud        {overflow: hidden; }
  14. div.menuheader        {height: 11px; width: 154px; background: url('menuheader.png') center top no-repeat; font-size: 1%;}
  15. div.menucontent        {width: 154px; background: url('menubac.png') center top repeat-y;}
  16. div.menutekst        {padding-left: 8px; padding-right: 8px;}
  17. div.menufooter        {width: 154px; height: 11px; background: url('menufooter.png') center top no-repeat;}
  18. div.contentheader    {height: 11px; width: 432px; background: url('contentheader.png') center top no-repeat; font-size: 1%;}
  19. div.contentcontent    {width: 432px; background: url('contentbac.png') center top repeat-y;}
  20. div.contenttekst    {padding-left: 8px; padding-right: 8px;}
  21. div.contentfooter    {width: 432px; height: 11px; background: url('contentfooter.png') center top no-repeat; padding-bottom: 6px;}
  22.  
  23.  
  24.  
  26.  
  27. </head>
  28.  
  30. <div id="container">
  31.         <div id="left">
  32.  
  33.  
  34.  
  35.                         <div class="menuheader"></div>
  36.                         <div class="menucontent">
  37.                                 <div class="menutekst">
  38.  
  39. Links boven
  40.  
  41.                                 </div>
  42.                         </div>
  43.                         <div class="menufooter"></div>
  44.                 </div>
  45.  
  46.  
  47.  
  48.                         <div class="menuheader"></div>
  49.                         <div class="menucontent">
  50.                                 <div class="menutekst">
  51.  
  52. Links midden
  53.  
  54.                                 </div>
  55.                         </div>
  56.                         <div class="menufooter"></div>
  57.                 </div>
  58.  
  59.  
  60.  
  61.                         <div class="menuheader"></div>
  62.                         <div class="menucontent">
  63.                                 <div class="menutekst">
  64.  
  65. Links onder
  66.  
  67.                                 </div>
  68.                         </div>
  69.                         <div class="menufooter"></div>
  70.  
  71.  
  72.                 <div id="middle">
  73.                         <div class="contentheader"></div>
  74.                         <div class="contentcontent">
  75.                                 <div class="contenttekst">
  76.  
  77. Middenboven
  78.                         </div>
  79.                         </div>
  80.                         <div class="contentfooter"></div>
  81.  
  82.                                                 <div class="contentheader"></div>
  83.                         <div class="contentcontent">
  84.                                 <div class="contenttekst">
  85.  
  86. Midden midden
  87.                                 </div>
  88.                         </div>
  89.                         <div class="contentfooter"></div>
  90. <div class="contentheader"></div>
  91.                         <div class="contentcontent">
  92.                                 <div class="contenttekst">
  93.  
  94. Midden onder
  95.                         </div>
  96.                         </div>
  97.                         <div class="contentfooter"></div>
  98.                 </div>
  99.         <div id="right">
  100.  
  101.                         <div class="menuheader"></div>
  102.                         <div class="menucontent">
  103.                                 <div class="menutekst">
  104. Rechts boven
  105.  
  106.                                 </div>
  107.                         </div>
  108.                         <div class="menufooter"></div>
  109.  
  110.                         <div class="menuheader"></div>
  111.                         <div class="menucontent">
  112.                                 <div class="menutekst">
  113. Rechts midden
  114.  
  115.                                 </div>
  116.                         </div>
  117.                         <div class="menufooter"></div>
  118.  
  119.                         <div class="menuheader"></div>
  120.                         <div class="menucontent">
  121.                                 <div class="menutekst">
  122.  
  123. Rechts onder
  124.  
  125.                                 </div>
  126.                         </div>
  127.                         <div class="menufooter"></div>
  128.         </div>
  129.  
  130. </body>
  131. </html>


En hier kun je een voorbeeld vinden: http://www.habbohemel.nl/Gold_layout/index.php

(ik heb wat geprobeert waardoor het wat doorelkaar staat)

Ik heb hier op de site ook al naar de divjes-tutorial gekeken, Maar ik werd er niet wijzer op.

Nu is mijn vraag: Hoe los ik dit op?

Alvast bedankt!!!  
Helderdje

Ow, En het is handig om het even goed uit te leggen, Want ik ben hier net mee begonnen, Zodat ik het de volgende keer niet weer fout doe!

9 antwoorden

Gesponsorde links
Offline prienstra - 27/09/2008 13:48
Avatar van prienstra MySQL interesse kan je eens in elk vakje zetten waar hij moet komen i.p.v. het wordt tekst (bv. links boven / midden / rechts boven / rechts midden enz..)
Offline zointer - 27/09/2008 15:13
Avatar van zointer HTML gevorderde En los dit eerst op
Citaat:
line 80 column 21 - Fout: end tag for element "DIV" which is not open
line 81 column 7 - Fout: end tag for element "DIV" which is not open
line 187 column 13 - Fout: end tag for element "DIV" which is not open
line 189 column 5 - Fout: end tag for element "DIV" which is not open
Offline helderdje - 27/09/2008 18:49 (laatste wijziging 27/09/2008 18:56)
Avatar van helderdje Nieuw lid @ zointer

Tja, Dat komt doordat ik vanalles ertussenuit / in en veranderd heb. Effe oplossen ;)

@ prientstra

Das best slim, Dat ik daar zelf niet aan heb gedacht. w8 even

Zo, Kijk nu maar eens opnieuw 
Offline Kr4nKz1n - 27/09/2008 20:11
Avatar van Kr4nKz1n Onbekend Je hebt 4 divjes nodig.

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">

  2. 	<div id="left">

  3. 	...

  4. 	</div>

  5. 	<div id="middle">

  6. 	...

  7. 	</div>

  8. 	<div id="right">

  9. 	...

  10. 	</div>

  11. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#container
  2. {
  3. 	width: ...;
  4. }
  5. div#left
  6. {
  7. 	float: left;
  8. 	width: ...;
  9. }
  10. div#middle
  11. {
  12. 	float: left;
  13. 	width: ...;
  14. }
  15. div#right
  16. {
  17. 	float: left;
  18. 	width: ...;
  19. }


Daarin kan je van alles zetten.
Offline helderdje - 27/09/2008 23:37 (laatste wijziging 27/09/2008 23:50)
Avatar van helderdje Nieuw lid
Kr4nKz1n schreef:
Je hebt 4 divjes nodig.

[..code..]

[..code..]

Daarin kan je van alles zetten.


Heel erg bedankt!!

ffe uitproberen!!

Even voor de zekerheid:
Die code die jij plaats vervang ik alleen met die div#container enz.. en die html code gewoon met alle divjes?

Ik heb de code nu zo:
(zal hem ook even in de beginpost aanpassen)
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4.         <title>Site titel</title>
  5.  
  6.     <style type="text/css">
  7. html            {margin:0px;}
  8. body                 {background-color: #9ad7e9;}
  9. div#container        {width: 740px;}
  10. div#left        {float: left; width: 154px;}
  11. div#middle        {float: right; left: 432px;}
  12. div#rechts        {float: right; width: 154px;}
  13. div#inhoud        {overflow: hidden; }
  14. div.menuheader        {height: 11px; width: 154px; background: url('menuheader.png') center top no-repeat; font-size: 1%;}
  15. div.menucontent        {width: 154px; background: url('menubac.png') center top repeat-y;}
  16. div.menutekst        {padding-left: 8px; padding-right: 8px;}
  17. div.menufooter        {width: 154px; height: 11px; background: url('menufooter.png') center top no-repeat;}
  18. div.contentheader    {height: 11px; width: 432px; background: url('contentheader.png') center top no-repeat; font-size: 1%;}
  19. div.contentcontent    {width: 432px; background: url('contentbac.png') center top repeat-y;}
  20. div.contenttekst    {padding-left: 8px; padding-right: 8px;}
  21. div.contentfooter    {width: 432px; height: 11px; background: url('contentfooter.png') center top no-repeat; padding-bottom: 6px;}
  22.  
  23.  
  24.  
  25. </style>
  26.  
  27. </head>
  28.  
  29. <body>
  30. <div id="container">
  31.         <div id="left">
  32.  
  33.  
  34.  
  35.                         <div class="menuheader"></div>
  36.                         <div class="menucontent">
  37.                                 <div class="menutekst">
  38.  
  39. Links boven
  40.  
  41.                                 </div>
  42.                         </div>
  43.                         <div class="menufooter"></div>
  44.                 </div>
  45.  
  46.  
  47.  
  48.                         <div class="menuheader"></div>
  49.                         <div class="menucontent">
  50.                                 <div class="menutekst">
  51.  
  52. Links midden
  53.  
  54.                                 </div>
  55.                         </div>
  56.                         <div class="menufooter"></div>
  57.                 </div>
  58.  
  59.  
  60.  
  61.                         <div class="menuheader"></div>
  62.                         <div class="menucontent">
  63.                                 <div class="menutekst">
  64.  
  65. Links onder
  66.  
  67.                                 </div>
  68.                         </div>
  69.                         <div class="menufooter"></div>
  70.  
  71.  
  72.                 <div id="middle">
  73.                         <div class="contentheader"></div>
  74.                         <div class="contentcontent">
  75.                                 <div class="contenttekst">
  76.  
  77. Middenboven
  78.                         </div>
  79.                         </div>
  80.                         <div class="contentfooter"></div>
  81.  
  82.                                                 <div class="contentheader"></div>
  83.                         <div class="contentcontent">
  84.                                 <div class="contenttekst">
  85.  
  86. Midden midden
  87.                                 </div>
  88.                         </div>
  89.                         <div class="contentfooter"></div>
  90. <div class="contentheader"></div>
  91.                         <div class="contentcontent">
  92.                                 <div class="contenttekst">
  93.  
  94. Midden onder
  95.                         </div>
  96.                         </div>
  97.                         <div class="contentfooter"></div>
  98.                 </div>
  99.         <div id="right">
  100.  
  101.                         <div class="menuheader"></div>
  102.                         <div class="menucontent">
  103.                                 <div class="menutekst">
  104. Rechts boven
  105.  
  106.                                 </div>
  107.                         </div>
  108.                         <div class="menufooter"></div>
  109.  
  110.                         <div class="menuheader"></div>
  111.                         <div class="menucontent">
  112.                                 <div class="menutekst">
  113. Rechts midden
  114.  
  115.                                 </div>
  116.                         </div>
  117.                         <div class="menufooter"></div>
  118.  
  119.                         <div class="menuheader"></div>
  120.                         <div class="menucontent">
  121.                                 <div class="menutekst">
  122.  
  123. Rechts onder
  124.  
  125.                                 </div>
  126.                         </div>
  127.                         <div class="menufooter"></div>
  128.         </div>
  129.  
  130. </body>
  131. </html>


En de vakken gaan nogsteeds doorelkaar, :S

zobiezo gaan die 3 vakjes 'links' 2 onder elkaar (links boven en links onder) en dan gaat 1 vakje er weer naast (links midden)

 

Alvast bedankt!
Offline zointer - 28/09/2008 09:20 (laatste wijziging 28/09/2008 10:09)
Avatar van zointer HTML gevorderde ook al ben je bezig met de code, de fouten komen uit je opening post hier en dat zijn zomaar geen fouten dus eerst je code zelf debuggen.

lappen code plaatst je op plaatscode, script eerst eens netjes dan ga je heel wat zien in je code, je moet alles in je container plaatsen en dat doe je niet(omdat je niet netjes script zie je het niet), geef commentaar mee in je script zodat je weet wat waar is, overdreven wit ruimte tussen je code is nergens voor nodig zo maakt je zelf maar moeilijk, je sluit div left veel te vroeg af, bekijk dit eens en zal veel duidelijker zijn


edit: en probeer deze eens
Offline helderdje - 28/09/2008 11:59 (laatste wijziging 28/09/2008 12:07)
Avatar van helderdje Nieuw lid Hey!
Ja dat is al vele beter!

Bedankt voor je berichtje, Zal ik de volgende keer zeker doen ..

Maar hij werkt nog niet. ik heb zobiezo nog deze 4 toegevoegt:
html code - Bekijk de code zonder highlighting - Klap code in 
  1. div.menuheader{height: 11px; width: 154px; background: url('menuheader.png') center top no-repeat; font-size: 1%;}

  2. div.menucontent{width: 154px; background: url('menubac.png') center top repeat-y;}

  3. div.menutekst{padding-left: 8px; padding-right: 8px;}

  4. div.menufooter{width: 154px; height: 11px; background: url('menufooter.png') center top no-repeat;}


En dat werkt opzich wel een klein beetje beter, alleen komen de vakjes met de waarde 'right' alsnog 'left' onder de andere van 'left'

http://www.plaatscode.be/30823/

EDIT:
oke het is opgelost! ik moest even de 'width' van de container wat groter maken, En nu staan ze allemaal goed ;)

Bedankt iedereen!

En de volgende keer gaat alles nu wel goed denk ik 

Alsnog heel erg bedankt iedereen!
Offline zointer - 28/09/2008 12:20
Avatar van zointer HTML gevorderde in ie is dat steeds een probleem met width die berekent he namelijk anders
Offline helderdje - 28/09/2008 13:23
Avatar van helderdje Nieuw lid ik gebruik ie, Geen problemen..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s