login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Vraagje div

Offline jorisdoms - 13/04/2006 12:06 (laatste wijziging 13/04/2006 12:40)
Avatar van jorisdomsNieuw lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Castle Keeper</title>
  5. <style type="text/css">
  6. body {
  7. 	margin:  0px 0px 0px 0px;
  8. 	background-image: url(/Images/Background/Background.gif);
  9. 	background-position: center;
  10. 	background-color: #000000;
  11. 	background-repeat: repeat-y
  12. }
  13. #Banner
  14. { position; top:0px; width:720px; height:146px; background-image: url(/Images/Background/Banner.png) } 
  15. #Linkse Buffer
  16. { position:relative; left:0px; top:0px; width:auto; height:146px; background-image:url(/Images/Background/Spacer Image.gif); background-repeat:repeat-x } 
  17. #Rechtse Buffer
  18. { position:relative; right:0px; top:0px; width:auto; height:146px; background-image:url(/Images/Background/Spacer Image.gif); background-repeat:repeat-x } 
  19. </head>
  20. <body>
  21.  
  22. </body>
  23. </html>
  24. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  25.   <!--DWLayoutTable-->
  26.   <tr>
  27.     <td width="100%" height="146" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  28.   </tr>
  29.   <tr>
  30.     <td height="1854">&nbsp;</td>
  31. 	<div id="Banner"> </div> 
  32. 	<div id="Linkse Buffer"> </div> 
  33. 	<div id="Rechtse Buffer"> </div>
  34.   </tr>
  35. </table>


Hoe kan ik ervoor zorgen dat banner in het midden komt en steeds dezelfde grote houden en dar linkse en rechter buffer de pagina opvullen aan elke kant evenveel maar horizontaal hun hoogte blijven behouden

Citaat:
Rensjuh edit:
[..code..]tags gebruiken!!![/code]

5 antwoorden

Gesponsorde links
Offline triion - 13/04/2006 14:33
Avatar van triion HTML interesse
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Castle Keeper</title>
  5. <style type="text/css">
  6. body {
  7.   margin:  0px 0px 0px 0px;
  8.   background-image: url(/Images/Background/Background.gif);
  9.   background-position: center;
  10.   background-color: #000000;
  11.   background-repeat: repeat-y
  12. }
  13. #All{
  14. 	margin: auto;
  15. 	width: 1024px;
  16. }
  17. #Banner{ 
  18. 	float:left;
  19. 	top:0px; 
  20. 	width:720px; 
  21. 	height:146px; 
  22. 	margin: auto;
  23. 	background-color: #FF0;
  24. 	background-image: url(/Images/Background/Banner.png) 
  25. } 
  26. #BufferLeft{ 
  27. 	float: left;
  28. 	height:146px; 
  29. 	width: 152px;
  30. 	background-color: #F00;
  31. 	background-image:url(/Images/Background/Spacer Image.gif); 
  32. 	background-repeat:repeat-x;
  33. } 
  34. #BufferRight{
  35. 	float: left;
  36. 	width:auto; 
  37. 	width: 152px;
  38. 	height:146px; 
  39. 	background-color: #0F0;
  40. 	background-image:url(/Images/Background/Spacer Image.gif); 
  41. 	background-repeat:repeat-x;
  42. } 
  43. </style>
  44. </head>
  45. <body>
  46. <div id="All">
  47. 	<div id="BufferLeft"> Linkse Buffer</div> 
  48. 	<div id="Banner"> BANNER </div> 
  49. 	<div id="BufferRight"> Rechtse Buffer</div>
  50. </div>
  51. </body>
  52. </html>


Ik denk dat dit ongeveer is wat je zoekt... ik heb er nog een "All"-div rond gezet zodat het bij grotere resoluties mooi in het midden staat... Probleem is dat als je banner 720px breed moet zijn, je die buffers ook in pixels moet definieren om resolutie-onafhankelijk te zijn... Mijn voorbeeld hierboven is dan voor 1024pixels breed... wat problemen geeft op 800x600 bv...

Hoop dat dit je verder helpt...

PS. Gebruik liefst geen spatie in bestandsnamen en class-namen, dat geeft alleen maar problemen !

triion
Offline jorisdoms - 13/04/2006 16:10 (laatste wijziging 13/04/2006 16:52)
Avatar van jorisdoms Nieuw lid oke bedankt he, je hebt me goed geholpen, maar ik snap die float left niet goed, moet de rechterbuffer ni float right zijn?

Heb nu dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Castle Keeper</title>
  5. <style type="text/css">
  6. body {
  7.   margin:  0px 0px 0px 0px;
  8.   background-image: url(/Images/Background/Background.gif);
  9.   background-position: center;
  10.   background-repeat: repeat-y
  11. }
  12. #All {
  13.   margin: auto;
  14.   width: 720;
  15. }
  16. #Banner { 
  17.   float:left;
  18.   top:0px; 
  19.   width:720px; 
  20.   height:146px; 
  21.   margin:auto;
  22.   background-image: url(/Images/Background/Banner.png) 
  23.   background-repeat:no-repeat
  24. }
  25. #BufferLeft { 
  26.   float: left;
  27.   width:auto ;
  28.   height:146px; 
  29.   background-image:url(/Images/Background/Spacer Image.gif); 
  30.   background-repeat:repeat-x
  31. }
  32. #BufferRight {
  33.   float: right;
  34.   width:auto;
  35.   height:146px;
  36.   background-image:url(/Images/Background/Spacer Image.gif); 
  37.   background-repeat:repeat-x
  38. }
  39. </head>
  40. <body>
  41.   <div id="All"></div>
  42.   <div id="Banner"></div> 
  43.   <div id="BufferLeft"></div> 
  44.   <div id="BufferRight"></div>
  45. </body>
  46. </html>


Maar nu laat hij de divs niet zien
Offline Rens - 13/04/2006 16:53
Avatar van Rens Gouden medaille

Crew algemeen		 Je moet de <style ...> tag ook afsluiten hé...
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Castle Keeper</title>
  5. <style type="text/css">
  6. body {
  7.   margin:  0px 0px 0px 0px;
  8.   background-image: url(/Images/Background/Background.gif);
  9.   background-position: center;
  10.   background-repeat: repeat-y
  11. }
  12. #All {
  13.   margin: auto;
  14.   width: 720;
  15. }
  16. #Banner { 
  17.   float:left;
  18.   top:0px; 
  19.   width:720px; 
  20.   height:146px; 
  21.   margin:auto;
  22.   background-image: url(/Images/Background/Banner.png) 
  23.   background-repeat:no-repeat
  24. }
  25. #BufferLeft { 
  26.   float: left;
  27.   width:auto ;
  28.   height:146px; 
  29.   background-image:url(/Images/Background/Spacer Image.gif); 
  30.   background-repeat:repeat-x
  31. }
  32. #BufferRight {
  33.   float: right;
  34.   width:auto;
  35.   height:146px;
  36.   background-image:url(/Images/Background/Spacer Image.gif); 
  37.   background-repeat:repeat-x
  38. }
  39. </style>
  40. </head>
  41. <body>
  42.   <div id="All"></div>
  43.   <div id="Banner"></div> 
  44.   <div id="BufferLeft"></div> 
  45.   <div id="BufferRight"></div>
  46. </body>
  47. </html>
Offline jorisdoms - 13/04/2006 17:01
Avatar van jorisdoms Nieuw lid Juist ja domme fout, maar nu laat hij nog steeds niet de achtergrond van de div zien, maar er zijn wel divs aanwezig want ik heb ze eventje een kleur gegeven, hoe kan dit, kan het zijn dat de div All ze overlapt?
Offline triion - 13/04/2006 23:49
Avatar van triion HTML interesse als je meerdere divs op float left zet, dan worden ze in volgorde tegen elkaar "geplakt", de eerste komt helemaal links te staan, de tweede komt daar tegen de derde tegen de tweede enzoverder... als je de rechterbuffer op float right zet, dan ontstaat er een spatie tussen uw banner en de rechterbuffer...
De all-div moet wel de andere divs bevatten e, anders is het niet ALL e! en probeer om te testen ook zeker eens wat domme tekst toe te voegen aan de divs zoals ik heb gedaan, want lege divs die geen vaste grootte hebben worden niet getoont.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.4s