login  Naam:   Wachtwoord: 
Registreer je!
 Forum

frames- div's (Opgelost)

Offline lolll - 19/07/2009 11:58 (laatste wijziging 19/07/2009 12:00)
Avatar van lolllLid Ik heb eens een post gedaan over frames met cols en rows. Toen zij men dat je ook met div's een goede navigatie kan bouwen.
Alleen, Ik zou niet weten hoe...
"http://users.telenet.be/dcbr/test frame/gamesframetest4.html " deze pagina is een testje, van hoe mijn site er uit moet zien met frames.
Maar frames hebben een heleboel nadelen. Daarom zou ik graag weten of ik dezelfde pagina kan verkrijgen door met div's te werken.
Het mag ook verschillen, maar niet te veel.
Div's hebben te maken met css. En css lukt me wel een beetje, maar ik zou helemaal niet weten hoe ik met css een navigatie moet opbouwen...

Grt,Lolll

6 antwoorden

Gesponsorde links
Offline valles10 - 19/07/2009 13:43
Avatar van valles10 HTML interesse hmm,
ksnap je vraag niet?
Offline Martijn - 19/07/2009 14:04 (laatste wijziging 19/07/2009 14:06)
Avatar van Martijn Crew PHP je hebt nu 2 frames, die vervang je letterlijk door 2 divs 

Een div pagina stel je met deze stappen op:

Eerst maak je een container div. Alle andere div's en dingen zet je hier in. Dat is nodig om prettiger te werken met maten 
Dan zet je daarna een div erin, met daarin je banner.
En dan daarna maak je een div voor je main:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.     <div id="banner">
  3.         Banner
  4.     </div>
  5.     <div id="main">
  6.         Main
  7.     </div>
  8. </div>


Dan moet je ze aansturen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body{ width: 100%; heigth: 100%; text-align: center;}
  2. div#container{
  3.   width: 800px;
  4.   heigth: 800px;
  5.   border: 1px solid #FF0000;
  6.   position: relative;
  7.   margin: 0px auto;
  8.   text-align: left;
  9.   }
  10. div#banner{
  11.   width: 800px;
  12.   heigth: 150px;
  13.   position: absolute;
  14.   top: 0px;
  15.   left:0px;
  16.   border: 1px solid #00FF00;
  17.   }
  18. div#main{
  19.   width: 800px;
  20.   heigth: 650px;
  21.   position: absolute;
  22.   top: 150px;
  23.   left:0px;
  24.   border: 1px solid #0000FF;
  25.   }



Dit zal niet helemaal zijn wat jij wilt, maar het geeft je een begin 
Offline lolll - 19/07/2009 15:44 (laatste wijziging 19/07/2009 15:45)
Avatar van lolll Lid ok, maar kan je me een aantal dingen uitleggen ?
-position: absolute; -wat betekend dit ?-
-position: relative; -idem als hierboven-
-margen: 1px auto; -1px snap ik , maar wat is die auto ?-
-------------------------------------------------------------
En nog iets anders, Kan je in css naar afbeeldingen verwijzen ?
Zodat je bv. Bij de div#banner dit toevoegd:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#banner{
  2. width: 800px;
  3. heigth: 150px;
  4. position: absolute;
  5. top: 0px;
  6. left:0px;
  7. border: 1px solid #00FF00;
  8. image: url('image.gif');
  9. image: url('image2.gif');

,...
}

Lolll
Offline maigel - 19/07/2009 19:04
Avatar van maigel PHP beginner als die afbeelding als achtergrond moet dienen :
http://www.w3sc...-image.asp
Offline Martijn - 19/07/2009 19:22
Avatar van Martijn Crew PHP relative geeft een relatieve afstand ten opzichte van ... (bv je body, of een andere div)

absolute is een vaste afstand vanaf het eerste relative-item (in dit geval je container)

margin 0px auto zorgt dat ie in het midden komt

als je er een plaatje wilt, doe je background: url('link');
Dit kan er maar 1 zijn. Als je een plaatje in je div wilt, kan dit ook gewoon met je <img /> tag
Offline lolll - 20/07/2009 11:04 (laatste wijziging 20/07/2009 11:29)
Avatar van lolll Lid ok, ik ben er volop mee aan het experimenteren !

Ja !!
Ik heb ongeveer juist de zelfde pagina verkregen. Met deze code's :

html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>testdiv.html</title>
  4. <link href="div.css" rel="stylesheet" type="text/css">
  5. </head>
  6. <body>
  7. <div id="container">
  8.  
  9.    <div id="banner">
  10.       <p>test1</p>
  11.    </div>
  12.  
  13.    <div id="main">
  14.       <p>test2</p>
  15.    </div>
  16.  
  17.    <div id="home">
  18.       <p>test3</p>
  19.    </div>
  20.  
  21. </div>
  22. </body>
  23. </html>


css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. width: 1100px;
  2. border: 1px solid #FF0000;
  3. height: 800px;
  4. margin: 0px auto;
  5. text-align: left;
  6. background-color: #FF0;
  7. }
  8.  
  9. div#banner {
  10. position: absolute;
  11. width: 850px;
  12. height: 150px;
  13. top: 0px;
  14. left: 0px;
  15. border: 1px solid #00FF00;
  16. background: url('../navigatie.png') #FFF;
  17. }
  18.  
  19. div#main {
  20. position: absolute; top: 150px; left: 0px;
  21. width: 1100px;
  22. height: 650px;
  23. border: 1px solid #00F;
  24. background: #FFF;
  25. }
  26.  
  27. div#home {
  28. position: absolute;
  29. top: 0px; left: 850px;
  30. width: 250px;
  31. height: 150px;
  32. background: #FFF url('../navigatie2.png');
  33. border: 1px solid purple;
  34. }
  35.  
  36. p {
  37. color: #0000FF;
  38. }


Bedankt voor de reactie's !!!
Nu zijn die vervelende frames weg, en ziet mijn pagina er even goed tot zelfs beter uit !!!

Lolll
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.249s