login  Naam:   Wachtwoord: 
Registreer je!
 Forum

bekende probleem: 3 divjes naast elkaar

Offline jeroenoa - 11/04/2006 20:03 (laatste wijziging 11/04/2006 20:56)
Avatar van jeroenoaOnbekend EDIT: Ik heb hem weer veranderd. Nu staat alleen de webpoll en links nog onder de header.

index.html
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. 	<title>lol</title>
  7. 	<meta http-equiv="Content-Language" content="nl" />
  8.  
  9. 	<meta http-equiv="imagetoolbar" content="no" />
  10. 	<meta name="MSSmartTagsPreventParsing" content="true" />
  11.  
  12. 	<meta name="description" content="lol" />
  13. 	<meta name="keywords" content="lol" />
  14.  
  15. 	<meta name="author" content="lol" />
  16.  
  17. 	<style type="text/css" media="all">@import "style.css";</style>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <br /><br />
  23.  
  24. <div id="header">
  25.  
  26.  
  27. 	<!-- linker kollom -->
  28.  
  29. 	<div id="linkervlak"></div>
  30.  
  31.  
  32. 	<!-- rechter kollom -->
  33.  
  34. 	<div id="rechtervlak"></div>
  35.  
  36.  
  37. 	<!-- midden kollom -->
  38.  
  39. 	<div id="beginpagina"></div>
  40.  
  41. 	<div id="nieuwsarchef"></div>
  42.  
  43. 	<div id="profielen"></div>
  44.  
  45. 	<div id="gastenboek"></div>
  46.  
  47. 	<div id="fotoarchief"></div>
  48.  
  49. 	<div id="webpoll"></div>
  50.  
  51. 	<div id="links"></div>
  52.  
  53.  
  54. </div>
  55.  
  56. </body>
  57. </html>


style.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	text-align: center;
  5. }
  6. #header {
  7. 	width: 800px;
  8. 	height: 221px;
  9. }
  10. #linkervlak {
  11. 	float: left;
  12. 	width: 5px;
  13. 	height: 221px;
  14. 	background-image: url(images/header_01.gif);
  15. }
  16. #beginpagina {
  17. 	float: left;
  18. 	width: 193px;	
  19. 	height: 34px;
  20. 	background-image: url(images/header_02.gif);
  21. }
  22. #rechtervlak {
  23. 	float: right;
  24. 	width: 602px;
  25. 	height: 221px;
  26. 	background-image: url(images/header_03.gif);
  27. }
  28. #nieuwsarchef {
  29. 	float: left;
  30. 	width: 193px;
  31. 	height: 32px;
  32. 	background-image: url(images/header_04.gif);
  33. }
  34. #profielen {
  35. 	float: left;
  36. 	width: 193px;
  37. 	height: 30px;
  38. 	background-image: url(images/header_05.gif);
  39. }
  40. #gastenboek {
  41. 	float: left;
  42. 	width: 193px;
  43. 	height: 30px;
  44. 	background-image: url(images/header_06.gif);
  45. }
  46. #fotoarchief {
  47. 	float: left;
  48. 	width: 193px;
  49. 	height: 31px;
  50. 	background-image: url(images/header_07.gif);
  51. }
  52. #webpoll {
  53. 	float: left;
  54. 	width: 193px;
  55. 	height: 28px;
  56. 	background-image: url(images/header_08.gif);
  57. }
  58. #links {
  59. 	float: left;
  60. 	width: 193px;
  61. 	height: 36px;
  62. 	background-image: url(images/header_09.gif);
  63. }


Citaat:
Haytjes note:
kan je ook het probleem omschrijven

4 antwoorden

Gesponsorde links
Offline BramBo - 11/04/2006 20:57
Avatar van BramBo JS gevorderde Probeer de container eens meer 'lucht' te geven, dus maakt hem iets wijder en iers hoger. Ook padding/margin definieëren.

Verder lijkt het me wijs om de code chronologisch op te bouwen.
Offline jeroenoa - 11/04/2006 21:04
Avatar van jeroenoa Onbekend ik heb hem veranderd om dat het toch een klikbaar menu is. Maar als ik de code chronologisch op wil bouwen staat het helemáál verkeerd.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. 	<title>lol</title>
  7. 	<meta http-equiv="Content-Language" content="nl" />
  8.  
  9. 	<meta http-equiv="imagetoolbar" content="no" />
  10. 	<meta name="MSSmartTagsPreventParsing" content="true" />
  11.  
  12. 	<meta name="description" content="lol" />
  13. 	<meta name="keywords" content="lol" />
  14.  
  15. 	<meta name="author" content="lol" />
  16.  
  17. 	<style type="text/css" media="all">@import "style.css";</style>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <br />
  23.  
  24. <div id="header">
  25.  
  26.  
  27. 	<!-- linker kollom -->
  28.  
  29. 	<div id="linkervlak"></div>
  30.  
  31.  
  32. 	<!-- rechter kollom -->
  33.  
  34. 	<div id="rechtervlak"></div>
  35.  
  36.  
  37. 	<!-- midden kollom -->
  38.  
  39. 	<div id="beginpagina"><a href="index.php"><img src="images/header_02.gif" width="193" heigth="34" alt="Beginpagina" /></a></div>
  40.  
  41. 	<div id="nieuwsarchef"><a href="nieuwsarchief.php"><img src="images/header_04.gif" width="193" heigth="32" alt="Nieuwsarchief" /></a></div>
  42.  
  43. 	<div id="profielen"><a href="profielen.php"><img src="images/header_05.gif" width="193" heigth="30" alt="Profielen" /></a></div>
  44.  
  45. 	<div id="gastenboek"><a href="gastenboek.php"><img src="images/header_06.gif" width="193" heigth="30" alt="Gastenboek" /></a></div>
  46.  
  47. 	<div id="fotoarchief"><a href="fotoarchief.php"><img src="images/header_07.gif" width="193" heigth="31" alt="Fotoarchief" /></a></div>
  48.  
  49. 	<div id="webpoll"><a href="webpoll.php"><img src="images/header_08.gif" width="193" heigth="28" alt="Webpoll" /></a></div>
  50.  
  51. 	<div id="links"><a href="links.php"><img src="images/header_09.gif" width="193" heigth="36" alt="Links" /></a></div>
  52.  
  53. </div>
  54.  
  55.  
  56. </body>
  57. </html>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	text-align: center;
  5. }
  6. img {
  7. 	border: 0px;
  8. }
  9. #header {
  10. 	width: 800px;
  11. 	height: 221px;
  12. }
  13. #linkervlak {
  14. 	float: left;
  15. 	width: 5px;
  16. 	height: 221px;
  17. 	background-image: url(images/header_01.gif);
  18. }
  19. #beginpagina {
  20. 	float: left;
  21. 	width: 193px;	
  22. 	height: 34px;
  23. }
  24. #rechtervlak {
  25. 	float: right;
  26. 	width: 602px;
  27. 	height: 221px;
  28. 	background-image: url(images/header_03.gif);
  29. }
  30. #nieuwsarchef {
  31. 	float: left;
  32. 	width: 193px;
  33. 	height: 32px;
  34. }
  35. #profielen {
  36. 	float: left;
  37. 	width: 193px;
  38. 	height: 30px;
  39. }
  40. #gastenboek {
  41. 	float: left;
  42. 	width: 193px;
  43. 	height: 30px;
  44. }
  45. #fotoarchief {
  46. 	float: left;
  47. 	width: 193px;
  48. 	height: 31px;
  49. }
  50. #webpoll {
  51. 	float: left;
  52. 	width: 193px;
  53. 	height: 28px;
  54. }
  55. #links {
  56. 	float: left;	
  57. 	width: 193px;
  58. 	height: 36px;
  59.  
  60. }


Nu staat allen links onder de header.
Offline BramBo - 11/04/2006 21:14
Avatar van BramBo JS gevorderde Nee zo heb ik het niet bedoelt, ik bedoel Link-Midden-Rechts.

Wanneer je #header eens width: 900px; en height : 400px; geeft wordt het dan beter weer gegeven. Dit kan er natuurlijk wel tot leiden dat sommige elementen rechts komen te staan.
Ook kan je voor je midden een container maken die de hoogte en breedte bevat die het in totaal moet hebben.
Wat ik meestal bij dit soort probleempjes doe is een nieuwe bestandje aanmaken en gewoon met kleurvakken werken.

dus :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header">
  2.  <div id="links></div>
  3.  <div id='midden'>  </div>
  4.  <div id="rechts"> </div>
  5. </div>

en deze divs zo opmaken dat je simpele kleur divs krijgt die goed in de de header geplaats staan, dan verder uitbouwen vanaf dat punt
Offline jeroenoa - 11/04/2006 21:39 (laatste wijziging 12/04/2006 10:24)
Avatar van jeroenoa Onbekend Nee wat jij bedoelt maakt niet uit dat heb ik al geprobeed. Ik heb de breedte even aangepast en dat wilde wel lukken. Nu staat alles goed alleen is hij te breed. Ik heb de breedte van 800px naar 806px veranderd.

index.html
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. 	<title>lol</title>
  7. 	<meta http-equiv="Content-Language" content="nl" />
  8.  
  9. 	<meta http-equiv="imagetoolbar" content="no" />
  10. 	<meta name="MSSmartTagsPreventParsing" content="true" />
  11.  
  12. 	<meta name="description" content="lol" />
  13. 	<meta name="keywords" content="lol" />
  14.  
  15. 	<meta name="author" content="lol" />
  16.  
  17. 	<style type="text/css" media="all">@import "style.css";</style>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <br />
  23.  
  24. <div id="header">
  25.  
  26.  
  27. 	<!-- linker kollom -->
  28.  
  29. 	<div id="linkervlak"></div>
  30.  
  31.  
  32. 	<!-- rechter kollom -->
  33.  
  34. 	<div id="rechtervlak"></div>
  35.  
  36.  
  37. 	<!-- midden kollom -->
  38.  
  39. 	<div id="beginpagina"><a href="index.php"><img src="images/header_02.gif" width="193" heigth="34" alt="Beginpagina" /></a></div>
  40.  
  41. 	<div id="nieuwsarchef"><a href="nieuwsarchief.php"><img src="images/header_04.gif" width="193" heigth="32" alt="Nieuwsarchief" /></a></div>
  42.  
  43. 	<div id="profielen"><a href="profielen.php"><img src="images/header_05.gif" width="193" heigth="30" alt="Profielen" /></a></div>
  44.  
  45. 	<div id="gastenboek"><a href="gastenboek.php"><img src="images/header_06.gif" width="193" heigth="30" alt="Gastenboek" /></a></div>
  46.  
  47. 	<div id="fotoarchief"><a href="fotoarchief.php"><img src="images/header_07.gif" width="193" heigth="31" alt="Fotoarchief" /></a></div>
  48.  
  49. 	<div id="webpoll"><a href="webpoll.php"><img src="images/header_08.gif" width="193" heigth="28" alt="Webpoll" /></a></div>
  50.  
  51. 	<div id="links"><a href="links.php"><img src="images/header_09.gif" width="193" heigth="36" alt="Links" /></a></div>
  52.  
  53.  
  54. </div>
  55.  
  56.  
  57. </body>
  58. </html>


style.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	text-align: center;
  5. }
  6. img {
  7. 	border: 0px;
  8. }
  9. #header {
  10. 	width: 806px;
  11. 	height: 215px;
  12. }
  13. #linkervlak {
  14. 	float: left;
  15. 	width: 5px;
  16. 	height: 215px;
  17. 	background-image: url(images/header_01.gif);
  18. }
  19. #rechtervlak {
  20. 	float: right;
  21. 	width: 602px;
  22. 	height: 215px;
  23. 	background-image: url(images/header_03.gif);
  24. }
  25. #beginpagina {
  26. 	float: left;
  27. 	width: 193px;	
  28. 	height: 34px;
  29. }
  30. #nieuwsarchef {
  31. 	float: left;
  32. 	width: 193px;
  33. 	height: 32px;
  34. }
  35. #profielen {
  36. 	float: left;
  37. 	width: 193px;
  38. 	height: 30px;
  39. }
  40. #gastenboek {
  41. 	float: left;
  42. 	width: 193px;
  43. 	height: 30px;
  44. }
  45. #fotoarchief {
  46. 	float: left;
  47. 	width: 193px;
  48. 	height: 31px;
  49. }
  50. #webpoll {
  51. 	float: left;
  52. 	width: 193px;
  53. 	height: 28px;
  54. }
  55. #links {
  56. 	float: left;
  57. 	width: 193px;
  58. 	height: 36px;
  59. }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.37s