login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Footer altijd onderaan??

Offline Janus - 03/08/2005 16:11
Avatar van JanusNieuw lid Hoi allemaal,

Goed, ik heb hier al eerder een vraag over gesteld maar dat bracht voor mij niet de oplossing.

Ik wil het volgende.

HEADER
SUBHEADER
Verschillende LAYERS onder, boven en naast elkaar
FOOTER

De gehele pagina is te scrollen.

Nu wil ik dat de footer altijd onderaan staat, helemaal onderaan. Als ik bij de LAYERS er een kopje bij zet wil ik dat de footer automatisch daarop aangepast wordt.

Op dit moment moet ik bij een aanpassing in de LAYERS waardoor de height verander ook iets aanpassen bij de Footer om te zorgen dat het allemaal netjes blijft. Dat moet anders kunnen toch?

Alvast bedankt,

Janus

21 antwoorden

Gesponsorde links
Offline infinity - 03/08/2005 19:02
Avatar van infinity Gouden medaille

Grafische gevorderde		 layers is html? bestaat dat? of heb je het nu over photoshop
Offline Janus - 04/08/2005 00:11
Avatar van Janus Nieuw lid Ok ik bedeol DIV's maar zei layers omdat dat in een tutorial zo genoemd word...

http://www.site...amp;id=211
Offline cracker - 04/08/2005 00:49
Avatar van cracker Onbekend Gebruik je dan geen tabellen ?
header vaste hoogte, footer vaste hoogte, midden variabele hoogte.
Offline Janus - 04/08/2005 12:33
Avatar van Janus Nieuw lid Ik heb altijd tabellen gebruikt!

Maar je kan de gehele layout van je pagina natuurlijk ook doen dmv DIV's. Dat moet toch mogelijk zijn?

Dit lukt mij dan ook wel. Het enige wat mij niet lukt is er voor te zorgen dat de footer altijd de footer blijft en dus bij het veranderen van de variabele hoogte in het midden ook mee veranderd. Op dit moment is het bij mij zo dat de variable layer in het midden op een gegeven moment onder of over (afhankelijk van de instellingen) de footer loopt.
Offline Ontani - 04/08/2005 12:52
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 <div class="header"></div>
<div class="content">
</div>
<div class="footer"></div>

is toch easy ge zorgt da het alledrie blocks zijn zodat ie ze automatisch onder elkaar zet, voor de rest loopt het gewoon mee met de content die der in #content zit
Offline wapiwapi - 04/08/2005 14:45
Avatar van wapiwapi HTML beginner goed dat je div's gebruikt, tabellen is verleden tijd.

mss kan je een testlink geven, om er wat wijzer uit te worden en om te kijken welke code je tot nu toe al hebt.

Op het eerste zicht lijkt het dat je geen container gebruikt (een algemene, allesomvattende div), maar het is nogal moeilijk om zonder je code te zien, een deftig antwoord te geven 
Offline lasdesigner - 04/08/2005 15:15
Avatar van lasdesigner PHP beginner Ik ben nu ook bezig met div website.. Ik maak ze al een paar maanden zo , is veel makkelijker aanpasbaar. Je hoeft - als je andere kleuren wilt of dergelijke - alleen de CSS maar aan 't passen!
Offline nemesiskoen - 04/08/2005 15:46
Avatar van nemesiskoen Gouden medaille

PHP expert		 ik werk met tables, en als ik goesting heb om van kleur te veranderen dan snuffel ik ook even in mijn css bestand... hoe zou je dat anders doen?
Offline lasdesigner - 04/08/2005 15:47
Avatar van lasdesigner PHP beginner Haha, ja dat is waar;)
Het kan ook met de tabellen.

Maar Div is wel dé toekomst..
Offline nemesiskoen - 04/08/2005 15:58 (laatste wijziging 04/08/2005 15:58)
Avatar van nemesiskoen Gouden medaille

PHP expert		 ...
ik weet niet wat jij met div's kunt wat ik niet met tabellen kan qua layout ('k heb het hier niet over spel in DHTML ofzo)

de toekomst... dat is DIV zeker niet:)
de toekomst is XSLT en XML
of neen, dat is het heden!
Offline lasdesigner - 04/08/2005 16:04
Avatar van lasdesigner PHP beginner Div -> neemt de plaats in van tabellen, en xml van database;)
Offline Janus - 04/08/2005 18:58
Avatar van Janus Nieuw lid Ok. Ik heb dus het volgende:

<div class="header"></div>
<div class="subheader"></div>

<div class="content">

<div class="subcontent 1"></div>
<div class="subcontent 2"></div>
<div class="subcontent 3"></div>
<div class="subcontent 4"></div>

</div>

<div class="footer"></div>

Maar dan komt mijn footer boven aan te staan. Heeft dit misschien te maken met de instelling absolute of relative. hij staat nu op relative om dat ik dacht dat hij dan onder de #content zou blijven.

Ieder ieder geval bedankt voor de hulp.
Offline nathanael - 04/08/2005 22:02
Avatar van nathanael Gouden medaille

HTML gevorderde		 zie eens:

http://www.site...&id=90

dat zal je een hoop opweg helpen 
Offline Janus - 05/08/2005 00:36
Avatar van Janus Nieuw lid Dat had ik al gelezen voor ik mijn vraag ging stellen.

De volgende link is mijn site. De footer moet altijd onderaan blijven staan . Nu doe hij dat dus niet.

http://www.obsdezonnebloem.nl/Test/

Hier volgt de code. Wie kan mij helpen

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .top {
  2. 	background-image: url(../Vormgeving/Top.jpg);
  3. 	background-position: top, center;
  4. 	background-color: #F6F6B2;
  5. 	background-repeat: no-repeat;
  6. 	left: 0px;
  7. 	top: 0px;
  8. 	margin: 0px;
  9. 	padding: 0px;
  10. 	position: absolute;
  11. 	width: 783px;
  12. 	height: 102px;
  13. 	}
  14.  
  15. 	.menu-H {
  16. 	background-color: #F6F6B2;
  17. 	background: url(../Vormgeving/Menu-H.jpg);
  18. 	background-repeat: no-repeat;
  19. 	background-position: top, center;
  20. 	left: 0px;
  21. 	top: 102px;
  22. 	margin: 0px;
  23. 	padding-left: 160px;
  24. 	padding-top: 3px;
  25. 	position: absolute;
  26. 	height: 64px;
  27. 	width: 783px;
  28. 	}
  29.  
  30. 	.content {
  31. 	left: 0px;
  32. 	top: 180 px;
  33. 	margin: 0px;
  34. 	padding: 0px;
  35. 	position: relative;
  36. 	}
  37.  
  38.  
  39. 	.menu-V {
  40. 	margin-left: 5px;
  41. 	background-color: #F6F6B2;
  42. 	font-style: normal;
  43. 	font-weight: normal;
  44. 	color: #000000;
  45. 	font-size: x-small;
  46.    position: absolute;
  47. 	}
  48.  
  49. 	.main{
  50. 	color: #000000;
  51. 	font-size: x-small;
  52. 	background-color: #E9E987;
  53. 	text-align: left;
  54. 	font-style: normal;
  55. 	font-weight: normal;
  56. 	border: 1px;
  57. 	border-style: solid;
  58. 	position: absolute;
  59. 	left: 160px;
  60. 	top: 0px;
  61. 	height: 100;
  62. 	width: 615px;
  63. 	padding: 5px;
  64. 	}
  65.  
  66.    .nieuws{
  67. 	color: #ffffff;
  68. 	font-size: x-small;
  69. 	background-color: #ff0000;
  70. 	text-align: left;
  71. 	border-style: solid;
  72. 	border-width: 1px;
  73. 	border-color: Black;
  74. 	font-style: normal;
  75. 	font-weight: normal;
  76. 	position: absolute;
  77. 	left: 160px;
  78. 	top: 218px;
  79. 	height: 100px;
  80. 	width: 230px;
  81. 	padding: 5px;
  82.  
  83. 	}
  84.  
  85. 	.foto1 {
  86. 	background-color: #F6F6B2;
  87. 	background: url(../Images/Foto1.jpg);
  88. 	background-repeat: no-repeat;
  89. 	background-position: top, center;
  90. 	border: 1px;
  91. 	border-style: solid;
  92. 	position: absolute;
  93. 	left: 398px;
  94. 	top: 218px;
  95. 	height: 253px;
  96. 	width: 377px;
  97. 	}
  98.  
  99. 	.emailworks{
  100. 	color: #000000;
  101. 	font-size: x-small;
  102. 	background-color: #FFFFFF;
  103. 	text-align: left;
  104. 	border-style: solid;
  105. 	border-width: 1px;
  106. 	border-color: Black;
  107. 	font-style: normal;
  108. 	font-weight: normal;
  109. 	position: absolute;
  110. 	left: 160px;
  111. 	top: 318px;
  112. 	height: 100px;
  113. 	width: 230px;
  114. 	padding: 5px;
  115. 	}
  116.  
  117. 	 .links{
  118. 	color: #000000;
  119. 	font-size: x-small;
  120. 	background-color: #05FD06;
  121. 	text-align: left;
  122. 	border-style: solid;
  123. 	border-width: 1px;
  124. 	border-color: Black;
  125. 	font-style: normal;
  126. 	font-weight: normal;
  127. 	position: absolute;
  128. 	width: 150;
  129. 	height: 300;
  130. 	left: 0px;
  131. 	top: 300px;
  132. 	}
  133.  
  134. 	.pestprotocol{
  135. 	color: #000000;
  136. 	font-size: x-small;
  137. 	background-color: #8BC1F6;
  138. 	text-align: left;
  139. 	border-style: solid;
  140. 	border-width: 1px;
  141. 	border-color: Black;
  142. 	font-style: normal;
  143. 	font-weight: normal;
  144. 	position: absolute;
  145. 	left: 160px;
  146. 	top: 518px;
  147. 	height: 100px;
  148. 	width: 230px;
  149. 	padding: 5px;
  150. 	}
  151.  
  152. 	.email{
  153. 	margin-left: 5px;
  154. 	color: #000000;
  155. 	font-size: x-small;
  156. 	background-color: #8BC1F6;
  157. 	text-align: left;
  158. 	border-style: solid;
  159. 	border-width: 1px;
  160. 	border-color: Black;
  161. 	font-style: normal;
  162. 	font-weight: normal;
  163. 	position: absolute;
  164. 	width: 150;
  165. 	height: 300;
  166. 	left: 0px;
  167. 	top: 300px;
  168. 	}
  169.  
  170.  
  171.    .bodem {
  172. 	background-color: #F6F6B2;
  173. 	background: url(../Vormgeving/Bodem.jpg);
  174. 	background-repeat: no-repeat;
  175. 	background-position: top, center;
  176. 	position: absolute;
  177. 	clear: both;
  178. 	left: 0px;
  179. 	bottom: 0px;
  180. 	height: 113px;
  181. 	width: 783px;
  182. 	}
  183.  
  184. </HEAD>
  185.  
  186. <link rel="stylesheet" href="Include/Main.css" type="text/css">
  187.  
  188. <BODY>
  189.  
  190.     <div class="top">
  191.     </div>
  192.  
  193.     <div class="menu-H">
  194.  
  195. 	<b><a href="Links.htm" target="main" class="link2">Links</a></b> | 
  196.   	<b><a href="Foto.htm" target="main" class="link2">Foto's</a></b> | 
  197.   	<b><a href="Schoolafspraken.htm" target="main" class="link2">Schoolafspraken</a></b> | 
  198.   	<b><a href="Groepen.htm" target="main" class="link2">De groepen</a></b> 
  199.     </div>
  200.  
  201.     </div>
  202.  
  203.  
  204.     <div class="content">
  205.  
  206.     <div class="menu-V">
  207.    	<a href="#" class="menulink"> Hoofdpagina </a>
  208. 	<br>
  209.    	<a href="#" class="menulink">Nieuwsbrief </a>
  210. 	<br>
  211.    	<a href="#" class="menulink">Jaarkalender </a>
  212. 	<br>
  213.    	<a href="#" class="menulink">Schoolgegevens </a>
  214. 	<br>
  215. 	<a href="#" class="menulink">Schoolgids </a>
  216. 	<br>
  217. 	<a href="#" class="menulink">Personeel </a>	
  218. 	<br>
  219. 	<a href="#" class="menulink">Onze school </a>
  220. 	<p>
  221. 	<a href="#" class="menulink">E-mail </a>
  222.    </div>
  223.  
  224.     <div class="main">
  225.     	Welkom op OBS De Zonnebloem! 
  226. 	<p>
  227. 	Onze school is een openbare school in de dorpskern van de badplaats Rockanje waar alle 			kinderen in beginsel welkom zijn. Wij bieden onze leerlingen een prettige en leerzame tijd. Goede prestaties in een veilig klimaat zijn voor ons belangrijk. We hebben hoge verwachtingen van kinderen. 
  228. 	Het team werkt graag samen met de ouders van onze leerlingen. 
  229. 	Wij zien u graag bij ons op school komen voor informatie, om een kijkje te nemen in de leslokalen of om uw kind bij ons op school in te schrijven. 
  230. 	<p>
  231. 	Tot ziens bij de openbare basisschool De Zonnebloem, 
  232. 	<p>
  233. 	Kees van Wel, directeur. 
  234.    </div>
  235.  
  236.     <div class="nieuws">
  237.     <center> <b>Nieuws</b> </center>
  238.     <hr>
  239.     16-08-05 > <b><a href="#" class="link2">Juf Mia jarig!</a></b>  
  240.     <br>
  241.     18-08-05 > <b><a href="#" class="link2">Eerste schooldag</a></b> 
  242.     <br>
  243.     25-08-05 > <b><a href="#" class="link2">Nieuwsbrief</a></b>   
  244.     </div>
  245.  
  246.     <div class="foto1">
  247.    </div>
  248.  
  249.     <div class="email">
  250.     <b>Stuur een <br> e-mail naar...</b> 
  251.     <hr>
  252.     <a href="#" class="linkA">C.J.P. van Wel</a>  
  253.  
  254.     <a href="#" class="linkB">P.A. Stins</a>  
  255.  
  256.     <a href="#" class="linkA">A. Dijkman-Boschloo</a>   
  257.  
  258.     <a href="#" class="linkB">A.M.A. Blok-Erwig</a>  
  259.  
  260.     <a href="#" class="linkA">C.J. Jansen</a>  
  261.  
  262.     <a href="#" class="linkB">J. Phernambucq</a>  
  263.  
  264.     <a href="#" class="linkA">N. Schrammeijer</a>  
  265.  
  266.     <a href="#" class="linkB">W. Valk-Kweekel</a>  
  267.  
  268.     <a href="#" class="linkA">S. van Kuijk</a>  
  269.  
  270.     <a href="#" class="linkB">J. van der Vooren</a>
  271.  
  272.     <a href="#" class="linkA">L. Grinwis</a>  
  273.  
  274.     <a href="#" class="linkB">I. Bodewitz</a>  
  275.    </div>
  276.  
  277.     <div class="emailworks">
  278.     <center> <b>emailworks</b> </center>
  279.     <hr>
  280.     Om toegang te krijgen tot emailworks kunt u op de onderstaande link klikken.
  281.     <P>
  282.     <a href="#" class="link">www.emailworks.nl </a> 
  283.     </div>
  284.  
  285.     <div class="links">
  286.     <center> <b>Links</b> </center>
  287.     <hr>
  288.     Ben je uitgekeken op deze website of zoek je iets op Internet?
  289.     Kijk dan eens op één van deze websites! 
  290.     <P>
  291.     <a href="#" class="link">Meer websites... </a> 
  292.    </div>
  293.  
  294.     <div class="pestprotocol">
  295.     <center> <b>Pestprotocol</b> </center>
  296.     <hr>
  297.     De Zonnebloem heeft een onderwijsprotocol tegen pesten opgesteld. 
  298.     Hierin wordt verklaard dat men door middel van samenwerking pesten zoveel mogelijk wil 
  299.     tegen gaan.
  300.  
  301.     <P>
  302.     <a href="#" class="link">Onderwijsprotocol </a> 
  303.     </div>
  304.  
  305.     </div>
  306.  
  307.  
  308.     <div class="bodem">
  309.     </div>
Offline lasdesigner - 05/08/2005 10:02
Avatar van lasdesigner PHP beginner wil je a.u.b voortan de css style extern zetten? wordt het een stukd uidelijker 

doe eens bij je footer:

top: 100%
Offline Janus - 05/08/2005 11:41
Avatar van Janus Nieuw lid Hmm ok sorry! 

Maar 100% werkt ieder geval niet. Als ik 100% doe staat hij wel al lager maar hij staat niet helemaal onderaan als laatste DIV. Om de één of andere reden staat hij nog steeds over de #content heen. Ik kan hem wel lager krijgen als ik bijvoorbeeld 200% doe. maar dat zou weer betekenen dat ik hem bij het toevoegen van info weer aan moet passen en ik wil dat hij dat auto doet.

Worden jullie al moe van mij?

pff...:(
Offline wapiwapi - 05/08/2005 13:46
Avatar van wapiwapi HTML beginner in Mozilla doet ie het in elk geval goed. In IE loopt het fout.

En ik weet niet direct een oplossing 
Offline Ontani - 05/08/2005 13:48 (laatste wijziging 05/08/2005 13:53)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 het probleem ligt gewoon dat je veelste veel absolute positionering gebruikt. probeer zo weinig mogelijk te gebruiken dan komt da automatisch inorde

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #dataBody {
  2. margin: 0px;
  3. padding: 0px;
  4. position: relative;
  5. height: 1%;
  6. }
  7. #footer{
  8. position: absolute;
  9. left: 0px;
  10. bottom: 0px;
  11. }
  12. #content {
  13. margin: 0px;
  14. padding: 0px;
  15. position: relative;
  16. }
  17. #main {
  18. margin: 0px;
  19. padding: 0px;
  20. position: relative;
  21. width: 100%;
  22. }
  23.  
  24. <div id="main">
  25. <div id="databody">
  26. <div id="content"></div>
  27. <div id="footer"></div>
  28. </div>
  29. </div>


gebruik dat al eens voor van te starten, deze footer zal altijd onderaan de content zitten
Offline Janus - 05/08/2005 16:00
Avatar van Janus Nieuw lid Ontani, ieder geval bedankt maar als ik jou code pak en ik geef ze een kleurtje een ik zet er een stukje tekst in dan gebeurd er het volgende.

http://www.obsdezonnebloem.nl/Test/Ontani/

Bij mij staat de Footer op dezelfde hoogte als de content???

Verder heb ik geprobeerd om bij mijn code zo veel mogelijk positioning weg te halen maar dan krijg ik de de div's in mijn container (#content) allemaal onder elkaar te staan dus dat werkt ook niet.

Iemand nog een ander oplossing? Hoe kan zoiets simpels zo moelijk zijn. Er moeten toch vele mensen zijn die hetzelfde asl mij willen of doen???

Iedereen tot zo ver bedankt!!:?:
Offline Ontani - 05/08/2005 16:38
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Janus vul uw content eens met wat text
Offline Janus - 05/08/2005 17:01
Avatar van Janus Nieuw lid Had ik al gedaan. Maar voor de duidelijkheid zal ik het wat uitgebreider doen.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.281s