login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Hoogte Div

Offline webrik - 23/04/2006 14:51
Avatar van webrikHTML interesse Als ik met
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>div{height: 100%}</style>
een div de hoogte 100% wil geven (voor achtergrond) werkt dit alleen in IE, niet in FF (ook
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div height="100%"></div>
werkt niet, wat is er aan de hand?

11 antwoorden

Gesponsorde links
Offline SilVeX - 23/04/2006 14:55
Avatar van SilVeX HTML beginner Ik had hetzelfde probleem tijdje terug maar als je het exacte aantal pixels invult dan doet hij het wel
Offline Lemon - 23/04/2006 14:57
Avatar van Lemon PHP expert
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position:relative;height:100%;background-color:#0099CC;">
  2. test
  3. </div>


Dit werkt wel.
Offline haytjes - 23/04/2006 14:57
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 Dit komt omdat de container (dus waarin de div) staat niet 100% is. Nu staat dit waarschijnlijk alleen tussen de <body> en <html>-tags, ie geeft een dat automatisch 100%, maar in Firefox moet je dat nog zelf doen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>body,html {height:100%;}</style>
Offline webrik - 23/04/2006 15:02 (laatste wijziging 23/04/2006 15:03)
Avatar van webrik HTML interesse werkt allebij niet

@silvex dat gaat niet (moet achtergrond zijn, weet hoogte niet)
Offline haytjes - 23/04/2006 15:31
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 staat die div in nog iets:

dus staat ie miss:
<body>
<span>
<div>

dan moet die span ook 100% hebben
Offline webrik - 23/04/2006 16:33 (laatste wijziging 23/04/2006 16:35)
Avatar van webrik HTML interesse ja nu is het wel goed (was een center)
maar nu krijg ik dat hij automatisch er een stukje onder plakt (de pagina wordt te lang, hij is halfvol, maar toch scrollt hij verder naar beneden!)
[edit]
staat in de body op overflow auto (en html ook), maar werkt niet
Offline haytjes - 23/04/2006 16:37
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 kan je nu een keer geven wat je precies hebt. (Als het te lang is, post het in pastebin.be)
Offline webrik - 23/04/2006 16:53
Avatar van webrik HTML interesse 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.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>Fading Blue</title>
  7. <link href="FadingBlue.css" rel="stylesheet" type="text/css" />
  8. </head>
  9.  
  10. <body>
  11. <center>
  12. <div class="content"><!--Begin Content-->
  13. 	<h1>Overzicht</h1>
  14. 	<h2>Formulier</h2>
  15. <form action="View.html">
  16. Textfield <input type="text" /><br />
  17. Radio <input type="radio" name="tst" />&nbsp;<input type="radio" name="tst" /><br />
  18. Checkbox<input type="checkbox" /><br />
  19. Button<input type="button" value="tst"/><br />
  20. Select<select>
  21. <option>Bla</option>
  22. <option>Bla</option>
  23. <option>Bla</option>
  24. <option>Bla</option>
  25. <option>Bla</option>
  26. </select>
  27.  
  28. </form>
  29.  
  30. </div><!--Eind Content-->
  31. </center>
  32. </body>
  33. </html>


css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body,html {
  2. 	font-family: "Trebuchet MS", Tahoma, Courier;
  3. 	font-variant: small-caps;
  4. 	color: aqua;
  5. 	text-align: center;
  6. 	height: 100%;
  7. 	margin: 0px;
  8. 	overflow: auto;
  9. }
  10.  
  11. div.content {
  12. 	text-align: left;
  13. 	background-image: url(Background.png);
  14. 	background-repeat: repeat-y;
  15. 	width: 800px;
  16. 	height: 100%;
  17. 	position: relative;
  18. }
  19.  
  20. input {
  21. 	background-image: url(20Heigth_BlueWhiteBlue.png);
  22. 	color: navy;
  23. 	font-weight: Bold;
  24.  
  25. }
  26.  
  27. select {
  28. 	background-color: #6495ED;
  29. 	color: navy;
  30. 	font-weight: Bold;
  31. }
  32.  
  33. h1{
  34. 	text-align: center;
  35. 	color: Lime;
  36. 	font-size: xx-large;
  37. 	font-style: italic;
  38. 	text-decoration: underline;
  39. }
  40. h2{
  41. 	color: Red;
  42. 	font-size: x-large;
  43. 	font-weight: bold;
  44.  
  45. }
  46.  
  47. center{
  48. 	height: 100%;
  49. 	margin: 0px;
  50. }
Offline haytjes - 23/04/2006 17:16
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 'k weet niet hoe het komt, maar als je:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.content {
  2.   text-align: left;
  3.   background-image: url(Background.png);
  4.   background-repeat: repeat-y;
  5.   width: 800px;
  6.   height: 99%;
  7.   position: relative;
  8.   border:white 1px solid;
  9. }

dus die height op 99% en de border op 1px werkt ie wel. 'k snap ni hoe het komt, dusja
Offline webrik - 23/04/2006 17:29
Avatar van webrik HTML interesse Ja dat klopt Dank je wel!
Offline haytjes - 23/04/2006 17:30
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 'k sluit hem nu, als je nog een vraag hebt, pm mij maar, 'k zal de topic dan weer openen
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.21s