login  Naam:   Wachtwoord: 
Registreer je!
 Forum

lay-out (Opgelost)

Offline san - 24/07/2009 19:24
Avatar van sanHTML interesse Ik heb een layout met blauwe achtergrond met daarop een container met een groene layout waarin de tekst en de foto's zitten. Deze container zit op de pagina rechtsonder. Helemaal bovenaan de titel op de blauwe achtergrond en links het menu op de blauwe achtergrond. Nu werkt het allemaal goed. Het enige is dat de menuknoppen op sommige beeldschermen een klein stukje verborgen zitten onder de groene achtergrond. Krijg het niet voor elkaar om dit meer naar links te plaatsen. Wie weet hoe ik dit op kan lossen?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. background-color: #33CCFF;
  3. height: 100%;
  4. width: 100%;
  5. }
  6.  
  7. .container { 
  8. position: absolute; 
  9. width:86%; 
  10. height:85%; 
  11. right: 0px;
  12. bottom: 0px;
  13. background-color: #66FF33;
  14. } 
  15.  
  16. #menu {
  17. list-style: none;
  18. border: 0px;
  19. float: left;
  20. margin-top: 3%;
  21. margin-left: -50px;
  22. }
  23.  
  24. #menu li {
  25.   list-style-type:none;
  26. }
  27.  
  28. #tekst {
  29. position: absolute;
  30. top: 22%;
  31. left: 165px;
  32. font-size: 17px;
  33. font-style: normal;
  34. font-family: arial, verdana;
  35. color: #000000;
  36. }
  37.  
  38. </style>

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <body> 
  2.  
  3. <div style="text-align: center">
  4. <img src="titel1.png" height="80" width="800" alt="">     
  5. </div> 
  6.  
  7.  <table><tr><td> 
  8.           <div class="container"> 
  9.  
  10.  <div id="tekst">
  11.  tekst
  12.  </div>     
  13.  
  14. <div style="margin-left: 165px; margin-top: 250px; border: solid 2px black; height: 199px; width: 300px; float: left;">
  15. <img src="image/foto1.jpg" height="199" width="300" alt="">     
  16. </div>       
  17.  
  18. <div style="margin-left: 9%; margin-top: 250px; border: solid 2px black; height: 199px; width: 300px;float: left;">
  19. <img src="image/foto2.jpg" height="199" width="300" alt="">    
  20. </div>
  21.  
  22.  </div>  
  23.  </td></tr></table>  
  24.  
  25. <div id="menu">
  26. <ul>
  27. <li><a href="#"><img src="menu/menu1.png" border="0" height="100" width="200" alt=""></a></li>
  28. <li><a href="#"><img src="menu/menu2.png" border="0" height="100" width="200" alt=""></a></li>
  29. <li><a href="#"><img src="menu/menu3.png" border="0" height="100" width="200" alt=""></a></li>
  30. <li><a href="#"><img src="menu/menu4.png" border="0" height="100" width="200" alt=""></a></li>
  31. </ul>
  32. </div>

7 antwoorden

Gesponsorde links
Offline Martijn - 24/07/2009 19:45
Avatar van Martijn Crew PHP heb je een voorbeeldje? En een table zetten om een div verslaan een beetje het doel van een div 
Offline san - 24/07/2009 20:00 (laatste wijziging 24/07/2009 21:23)
Avatar van san HTML interesse Heb in de code het table gedeelte weggehaald. Maar dan veranderd er verder niets. Heb helaas zo even geen voorbeeldje. Staat nog niet online. Het probleem is dat als het menu in de ene computer goed gepositioneerd is zoals bedoeld staat hij in een ander teveel onder de container gepositioneerd. Als je de margin-left meer naar links uitzet is hij in de eerst genoemde computer weer te veel naar links en in de tweede wel goed. Hoe kan ik het oplossen dat het menu in alle computers de juiste positie krijgt???

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <body> 
  2.  
  3. <div style="text-align: center">
  4. <img src="titel1.png" height="80" width="800" alt="">     
  5. </div> 
  6.  
  7.  
  8.           <div class="container"> 
  9.  
  10.  <div id="tekst">
  11.  tekst
  12.  </div>     
  13.  
  14. <div style="margin-left: 165px; margin-top: 250px; border: solid 2px black; height: 199px; width: 300px; float: left;">
  15. <img src="image/foto1.jpg" height="199" width="300" alt="">     
  16. </div>       
  17.  
  18. <div style="margin-left: 9%; margin-top: 250px; border: solid 2px black; height: 199px; width: 300px;float: left;">
  19. <img src="image/foto2.jpg" height="199" width="300" alt="">    
  20. </div>
  21.  
  22.  </div>  
  23.  
  24.  
  25. <div id="menu">
  26. <ul>
  27. <li><a href="#"><img src="menu/menu1.png" border="0" height="100" width="200" alt=""></a></li>
  28. <li><a href="#"><img src="menu/menu2.png" border="0" height="100" width="200" alt=""></a></li>
  29. <li><a href="#"><img src="menu/menu3.png" border="0" height="100" width="200" alt=""></a></li>
  30. <li><a href="#"><img src="menu/menu4.png" border="0" height="100" width="200" alt=""></a></li>
  31. </ul>
  32. </div>
Offline meerweten - 25/07/2009 10:37 (laatste wijziging 25/07/2009 11:49)
Avatar van meerweten Lid beste san

ikdenk dat ik je probleem wel kan oplossen
je moet werken met verschillende de <div> tag's
ik heb je code helemaal verwijdert en zelf een gemaakt

ik wil niet dat je de css en html code zomaar overneemt zonder naar de commentaar die ik bij de css file heb geschreven te lezen en toe te passen

hier is een voorbeeld van hoe ik mijn eigen site indeel mijnsite

zo maak ik altijd mijn sites makkelijke menu's mogelijk met foto's zoals jouw site

hier is dan de link van jouw site gelieve de css en html te downloaden(kopiëren via broncode of zoals het bij Firefox noemt pagina bron)
klik hier

laat snel iets weten wat je erover vind
ik hoop dat je hiermee geholpen bent

TIP: het gebruik van een html en css editor maakt het allemaal gemakkelijker ik raad je aan om dreamweaver cs4 of dreamweaver 8 te gebruiken mail me voor meer info

meerweten
Offline snxs - 25/07/2009 11:58 (laatste wijziging 25/07/2009 12:03)
Avatar van snxs Nieuw lid http://guidobouman.com/
http://beta.guidobouman.com/
http://sites.guidobouman.com/artae/
http://sites.guidobouman.com/fontized/
http://sites.guidobouman.com/retro/

Retro is vrij oud, dus mijn script stijl is door de tijd heen wel veranderd. Maar alles zou een perfect voorbeeld moeten zijn van XHTML1.0 & CSS2.1. Iedere pagina is gevalideerd met W3c.

Werk je misschien met position absolute? Dat wil nog wel eens moeilijk doet in verschillende browsers. Er zijn een hele hoop verschillen tussen alle browsers. Daarom zijn er webstandaarden. Als je je CSS zou kunnen plaatsen zouden we je wat makkelijker kunnen helpen.

Of als je het gewoon even online zet.

EDIT:
Hoewel de tip van meerweten niet slecht is zou ik Dreamweaver niet aanraden. Gebruik een lichtere editor zoals Notepad++. Deze is gratis, en naar mijn idee beter dan Dreamweaver. Grote applicaties hebben vaak de neiging om een hele hoop extra en onnodige code toe te voegen. (En geloof me, die live preview is minder handig dan je zou denken, waarom niet testen in wat de eind gebruiker ook heeft, een browser?)
Offline meerweten - 25/07/2009 12:58
Avatar van meerweten Lid
snxs schreef:
EDIT:
Hoewel de tip van meerweten niet slecht is zou ik Dreamweaver niet aanraden. Gebruik een lichtere editor zoals Notepad++. Deze is gratis, en naar mijn idee beter dan Dreamweaver. Grote applicaties hebben vaak de neiging om een hele hoop extra en onnodige code toe te voegen. (En geloof me, die live preview is minder handig dan je zou denken, waarom niet testen in wat de eind gebruiker ook heeft, een browser?)


ik heb het program eens gedownload en eens snel bekeken
voor zij die nog nooit met een editor zoals dreamweaver hebben gewerkt of voor zij die er niet voor willen betalen is dit een goede oplossing
alhoewel ik toch nog dreamweaver prefereer omdat dit een voorbeeld geeft zonder dat ik mij browser moet openen wat ik zeer handig vind en wat ook handig kan zijn voor zij die niet kunnen werken met html code
Offline san - 25/07/2009 18:12 (laatste wijziging 25/07/2009 20:38)
Avatar van san HTML interesse Ik heb de proefversie van dreamweaver gedownload. Eens kijken hoe dat bevalt.
Meerweten: ik heb je lay-out overgenomen en naar eigen wens helemaal aangepast. Echt super van je. Bedankt.
Maar nu heb ik nog een probleem wat ik niet voor elkaar krijg. Als ik foto's wil plaatsen in de container onder de tekst, komen zij niet op die positie maar onder de footer. Wie weet wat er dan fout is aan de navolgende code. Heb alle volgordes al geprobeerd.?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. background-color: #33CCFF;
  3. height: 100%;
  4. width: 100%;
  5. }
  6.  
  7. .main {
  8. 	background-color: #33CCFF;
  9. 	width:100%;
  10. 	height:100%;
  11. }
  12.  
  13. .titel{
  14. 	background-color:#33CCFF;	
  15. 	font-size:18px;
  16. 	font-family:Arial, Helvetica, sans-serif;
  17. 	text-align:center;
  18. }
  19.  
  20. .sidebar{ 
  21. 	background-color:#33CCFF;
  22. 	float:left;
  23. }
  24.  
  25. .content{
  26. 	margin-left:20px;
  27. 	background-color:#66FF33;
  28. }
  29.  
  30. #tekst {
  31. margin-left: 20px;
  32. font-size: 17px;
  33. font-style: normal;
  34. font-family: arial, verdana;
  35. color: #000000;
  36. }
  37.  
  38. .footer{
  39. 	background-color:#FFFFFF;
  40. 	font-size: 13px;	
  41. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <div class="main">
  4.  
  5. <div class="titel"><img src="titel1.png" height="80" width="800" alt="">     
  6. </div>
  7.  
  8. <div class="sidebar">
  9. <br><a href="#"><img src="menu/menu1.png" border="0" height="100" width="200" alt=""></a>
  10. <br><a href="#"><img src="menu/menu2.png" border="0" height="100" width="200" alt=""></a>
  11. <br><a href="#"><img src="menu/menu3.png" border="0" height="100" width="200" alt=""></a>
  12. <br><a href="#"><img src="menu/menu4.png" border="0" height="100" width="200" alt=""></a>
  13. </div>
  14.  
  15. <div class="content">
  16.  
  17.   <div id="tekst">
  18.  Tekst.<br>
  19.  Tekst.
  20.  </div>     
  21.  
  22. <div style="margin-left: 5px; margin-top: 50px; border: solid 2px black; height: 192px; width: 300px; float: left;">
  23. <img src="image/foto3.jpg" height="192" width="300" alt="">     
  24. </div>       
  25.  
  26. <div style="margin-left: 9px; margin-top: 51px; border: solid 2px black; height: 191px; width: 300px; float: left;">
  27. <img src="image/foto2.jpg" height="191" width="300" alt="">    
  28. </div>
  29.  
  30.  
  31.  
  32. <div class="footer">
  33. Hier komt de footer.</div>
  34.  
  35. </div>
  36.  </div>
  37.  
  38. </body>
Offline meerweten - 25/07/2009 22:01 (laatste wijziging 25/07/2009 22:16)
Avatar van meerweten Lid iuk heb je probleem kunnen oplossen

pik mijn html code en mijn cs code maar van de volgende links
http://users.te...estje.html
http://users.telenet.be/ruw/testvoorjou/testje.css

bij elke img tag gelieve het volgende te doen

bv;
<img src="locatie foto" class="plaat">

ik heb in de css code een nieuwe class aangemaakt genaamt plaat die je kan gebruiken voor je foto's
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.222s