login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div automatisch laten uitrekken (Opgelost)

Offline chth - 08/10/2011 16:48
Avatar van chthLid hallo

ik heb momenteel onderstaande html code
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  5. <head>
  6.  <link rel="stylesheet" href="index.css" type="text/css" />
  7.  <title>
  8.  een basis webpagina
  9. </title>
  10. </head>
  11. <body>
  12.  
  13. <div id="sitecontent"> 
  14.  
  15. <div id="top">
  16.   Welkom op deze site.
  17.  </div>
  18.  
  19.  <div id="left">
  20.  <table>
  21.  <tr><td><a href="http://www.test333.net78.net" target="">Home</a></td></tr>
  22.  </table>
  23.  </div>
  24.  
  25.  <div id="content">
  26.  <?php
  27.   if(isset($_GET["page"])) {
  28.    if($_GET["page"] == klok) {
  29.     include($_GET["page"].".html");
  30.    }else{
  31.     include($_GET["page"].".php");
  32.  }
  33. }
  34.  ?>
  35.  </div>
  36. </div>
  37. </body>
  38. </html>


en volgende CSS-code
php code - Bekijk de code zonder highlighting - Klap code in 
  1. html	{
  2. 	/*height: 100%;*/
  3. 	margin: 0;
  4. 	padding: 0;
  5. 	}
  6.  
  7. body	{
  8. 		margin: 10px;
  9. 		padding: 0;
  10. 	/*	height: 100%;*/
  11. 		background: #2E2E2E/*#424242*/;
  12. 		}
  13.  
  14. div#sitecontent	{
  15. 				height: 635px;
  16. 				width: 1200px;
  17. 				border: 1px ridge #0066FF;
  18. 				margin: 0 auto 0 auto;
  19. 				padding: 3px;
  20. 				}
  21.  
  22. div#top	{
  23. 		border: 1px ridge #0066FF;
  24. 		height: 100px;
  25. 		width: 1182px;
  26. 		background: /*#424242*/ /*url(top.jpg)*/;	
  27. 		font-family: Verdana, Helvetica, sans-serif;
  28. 		font-size: 10;
  29. 		padding: 8px;
  30. 		color: #1C8D00;
  31. 		}
  32.  
  33. div#left	{
  34. 		padding: 5px;
  35. 		height: 502px;
  36. 		width: 150px;
  37. 		/*background: #A4A4A4;*/
  38. 		border: 1px ridge #0066FF;
  39. 		float: left;
  40. 		font-family: Verdana, Helvetica, sans-serif;
  41. 		font-size: 10pt;
  42. 		margin: 3px 0 0 0;
  43. 		color: #1C8D00;
  44. 		}
  45.  
  46. div#content	{
  47. 			/*background: #A4A4A4;*/
  48. 			border: 1px ridge #0066FF;
  49. 			height: 502px;
  50. 			width: 1023px;
  51. 			float: left;
  52. 			padding: 5px;
  53. 			font-family: Verdana, Helvetica, sans-serif;
  54. 			font-size: 10pt;
  55. 			margin: 3px 0 0 3px;
  56. 			color: #1C8D00;
  57. 			}
  58.  
  59. div#left	table tr td a{
  60. 				padding: 0 0 0 5px;
  61. 				/*text-decoration: none;*/
  62. 				color: #1C8D00;
  63. 				}
  64.  
  65. div#left table tr td a:hover	{
  66. 						/*text-decoration: none;*/
  67. 						color: #1C8D00;
  68. 						}
  69.  
  70. div#left table tr td a:visited	{
  71. 							/*text-decoration: none;*/
  72. 							color: #1C8D00;
  73. 							}
  74.  
  75. div#left table tr td a:active	{
  76. 						color: #1C8D00;
  77. 						}


zoals je dus kan zien zijn de hoogtes van de div's vastgelegde waarden.
nu zou ik graag hebben dat al er meer tekst in de div komt, dat die gewoon uitrekt naar onder samen met de andere div's

kan iemand mij helpen of moet ik op een totaal andere manier te werk gaan om zoiets voor elkaar te krijgen

alvast bedankt
chth

17 antwoorden

Gesponsorde links
Offline qubus - 08/10/2011 16:56
Avatar van qubus Lid Hallo,

Als je in je CSS --> height: auto; gebruikt, zal de div uitrekken tot hoogte van de grootste div die binnen de div staat waar je de height auto aan hebt gegeven. Echter als de div left minder hoog is als de content, zal deze niet tot onder uitrekken.

Trouwens is de manier om zomaar 'include($_GET["page"].".php");' te doen niet echt veilig.
Ik zou in ieder geval controleren of die pagina wel bestaat.

Bivoorbeeld:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. // Veiligheids check
  2. 			$paginatest = "(http:|ftp:|shttp: |https: |www.|.php|.cgi|.asp)i"; 
  3. 			if (preg_match($paginatest, $_GET['pagina'])) { $_GET['pagina'] = "main"; }
  4.  
  5. 			// Veiligheidscheck 2
  6. 			$pagina_inc = $_GET['pagina'] . ".php";
  7. 			if (!file_exists($pagina_inc)) { $_GET['pagina'] = "main"; }
  8.  
  9. 			include $_GET['pagina'] . ".php";


DIte verwijst bij een pagina die niet bestaat, of tekst bevat die je niet wilt, naar main.php Dit kun je uiteraard wijzigen naar je eigen pagina.

Succes!
Offline chth - 08/10/2011 17:00
Avatar van chth Lid ok, bedankt.

maar php is nog niet echt men sterkste kant.
ik ben er volop mee aan het oefenen
Offline Pieter - 08/10/2011 18:09
Avatar van Pieter Gouden medaille

SEO guru		 Wat je zoek chth, zijn Faux columns. Met height:auto groeien niet alle kolommen even hard mee.
Er bestaan duizend en 1 manieren om dit te doen, ga en leer. 
Offline chth - 08/10/2011 20:21
Avatar van chth Lid inderdaad, dit is een mogelijke oplossing.
maar bestaat er echt geen andere methode om dit te realiseren zonder de afbeeldingen als achtergrond?
Offline WouterJ - 08/10/2011 21:29
Avatar van WouterJ HTML gevorderde Je kan faux columns ook doen zonder afbeeldingen: http://waldio.110mb.com/css/fauxcolumn.html
Bedankt door: FrankieC
Offline FrankieC - 09/10/2011 05:54
Avatar van FrankieC Lid
Waldio schreef:
Je kan faux columns ook doen zonder afbeeldingen: http://waldio.110mb.com/css/fauxcolumn.html

Hij's cool!  
Offline chth - 09/10/2011 10:33
Avatar van chth Lid @ waldio: kan webpagina niet vinden, "wachttijd verstreken"

is dit normaal? 
Offline WouterJ - 09/10/2011 13:22
Avatar van WouterJ HTML gevorderde
chth schreef:
is dit normaal? 

Nee, maar het kan wel eens gebeuren. Van een gratis host moet je niet teveel verwachten natuurlijk  .

Als je het later nog eens probeert moet het waarschijnlijk wel lukken.
Offline FrankieC - 09/10/2011 14:00
Avatar van FrankieC Lid Waldio,

Kun jij me een PM of het liefst een e-mail sturen als je site/pagina verhuist? Ik heb ernaar gelinkt vanaf een tutorial.

Dank bij voorbaat.
Offline Pieter - 09/10/2011 14:32
Avatar van Pieter Gouden medaille

SEO guru		 Hier heb ik ook nog een overzichtje van alle mogelijke manieren. Elk heeft zijn voor en nadeel. Soms is het een extra afbeelding (faux columns methode), soms is het de compatibiliteit (printen, browsers,...), soms javascript,...

In dit lijstje kan je er vast eentje terugvinden die bij je doel aansluit.
Bedankt door: chth, WouterJ
Offline WouterJ - 09/10/2011 15:08
Avatar van WouterJ HTML gevorderde Je kan ook nog CSS3 gebruiken: http://net.tuts...-gradients/

@pieter, bedankt voor de goede link.
@frankie, zou ik doen. (in welke tutorial eigenlijk(?))
Offline chth - 09/10/2011 21:45
Avatar van chth Lid ik heb momenteel even onderstaande tutorial gevonden en geprobeerd, maar is dit ook mogelijk zonder dat je je hele scherm opvult?

tutorial: http://matthewj...s-no-hacks
Offline Pieter - 10/10/2011 08:31
Avatar van Pieter Gouden medaille

SEO guru		 Ja, steek er een wrapper divje rond met volgende css:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#wrapper{
  2. width:800px; /* hier je breedte */
  3. margin: 0 auto;
  4. }
Offline FrankieC - 10/10/2011 13:17
Avatar van FrankieC Lid @Pieter: mis ik iets, of zie ik Waldio's methode er niet bij staan in dat blog?

@Waldio: deze tutorial: Create a Fixed ...r with CSS. Niet dat jouw methode zo'n footer oplevert, maar voor mensen die eigenlijk op zoek zijn naar gelijk uitrekkende kolommen maar op mijn tut terecht komen behandel ik dat ook even.
Bedankt door: chth
Offline Pieter - 10/10/2011 13:27
Avatar van Pieter Gouden medaille

SEO guru		 De oplossing van Waldio werkt niet volledig: vanaf er meer inhoud in de sidebar staat dan in de content, loopt de content kolom niet verder.
Offline FrankieC - 10/10/2011 14:41
Avatar van FrankieC Lid Dat zal best zo zijn, maar de techniek van Waldio is wel veel eenvoudiger. En je weet meestal toch in welke kolom de meeste inhoud komt te staan? Als dat de rechter is in Waldio's voorbeeld draai je de boel gewoon om.

Ik vind zijn techniek veel beter dan verschillende andere technieken die in dat blog beschreven staan -- die doen het überhaupt niet in IE6 en 7.
Offline Pieter - 10/10/2011 15:19
Avatar van Pieter Gouden medaille

SEO guru		 Mee eens, maar het zoals gezegd in mijn tweede post, een ideale oplossing bestaat er niet. Die van Waldio is leuk, maar ook niet foutloos. Vandaar dat je moet kijken van site tot site wat er het meeste van toepassing is. Ik heb al heel wat sites gemaakt waar Waldio's oplossing ook niet kon gebruikt worden.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.208s