login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Sticky Footer

Offline Inge437 - 03/01/2010 19:53
Avatar van Inge437Nieuw lid Beste mensen,
Ik ben een beginnende CSS'er. Nu moet ik voor school een portfolio maken en had ik het idee van een 'Sticky Footer'.
Maar ik krijg dit echt niet voor elkaar, ook niet met de codes die ik op internet heb gevonden.

Het is nu in zekere zin 'gelukt' alleen staat hij nu zo ver onderaan dat je moet scrollen om hem te zien, terwijl maar 1 zin op de website staat.

Zoals je op de volgende foto kunt zien, moet je dus scrollen voor de footer, terwijl dat niet nodig is:
http://img109.i...een1hq.png

Als je scrollt zie je dit:
http://img683.i...reen2n.png

Het is dus de bedoeling dat hij in het midden van de pagina komt en dat hij onderin beeld komt, als het beeld 100% is. Dus niet zoals nu, dat hij te ver naar onderen staat waardoor je moet scrollen!

Iemand die me kan helpen?

12 antwoorden

Gesponsorde links
Offline WebSmurf - 03/01/2010 20:50
Avatar van WebSmurf Nieuw lid Als we weten welke code je gebruikt misschien wel...
Offline Inge437 - 03/01/2010 20:55 (laatste wijziging 03/01/2010 22:52)
Avatar van Inge437 Nieuw lid
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="difjesstijl.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. <!--
  9. li {
  10. 	display: inline;
  11. 	list-style-type: none;
  12. 	margin-right: 10px;
  13. 	margin-left: 10px;
  14. 	background-color: #FFF;
  15. 	color: #FFF;
  16. }
  17. #container hr {
  18. 	background-color: #3F0;
  19. 	color: #0F0;
  20. }
  21. a {
  22. 	color: #06F;
  23. }
  24. #footer {
  25. 	background-position: center;
  26. 	margin-right: auto;
  27. 	margin-left: auto;
  28. 	width: 80%;
  29. }
  30. #navigatie {
  31. 	text-align: right;
  32. 	background-color: #FFF;
  33. 	color: #000;
  34. 	margin-right: 100px;
  35. }
  36. #logo {
  37. 	text-align: left;
  38. 	width: 200px;
  39. 	font-family: Verdana, Geneva, sans-serif;
  40. 	font-size: 14px;
  41. 	margin-left: 100px;
  42. 	float: left;
  43. }
  44. a:link {
  45. 	text-decoration: none;
  46. }
  47. a:visited {
  48. 	text-decoration: none;
  49. 	color: #06F;
  50. }
  51. a:hover {
  52. 	text-decoration: none;
  53. 	color: #3F0;
  54. }
  55. a:active {
  56. 	text-decoration: none;
  57. 	color: #0F0;
  58. }
  59. -->
  61. </head>
  62.  
  64. <div id="container">
  65. <div id="logo">*Logo* Mijn naam hier</div>
  66. <div id="navigatie">
  67.     <ul>
  68.       <li><a href="#">Home</a></li>
  69.       <li><a href="#">Opdrachten</a></li>
  70.       <li><a href="#">Links</a></li>
  71.       <li><a href="file:///C|/Users/Inge/Documents/Mijn Site/contact.html">Contact</a></li>
  72.       <br />
  73.       <div id="menu">Ondermenu</div>
  74.     </ul>
  75.   </div>
  76. <hr align="center" width="800" />
  77. <br />
  78.   <div id="hoofdpaneel">
  79.     <p> Hier globale informatie waar de website voor dient.</p>
  80.   </div>
  81. <div id="push"></div>
  82. </div>
  83. </div>
  84. <div id="footer">
  85.   <p><img src="portfolio2.png" alt="" width="794" height="106" align="middle"/></p>
  86. </div>
  87. </body>
  88. </html>


-----

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2. 	background-color: #FFF;
  3. 	width: 80%;
  4. 	margin-right: auto;
  5. 	margin-left: auto;
  6. 	margin-top: 20px;
  7. 	border-top-color: #CCC;
  8. 	border-right-color: #CCC;
  9. 	border-bottom-color: #CCC;
  10. 	border-left-color: #CCC;
  11. 	min-height: 100%;
  12. 	position: relative;
  13.  
  14. }
  15. #hoofdpaneel {
  16. 	margin-right: 100px;
  17. 	margin-left: 100px;
  18. 	color: #000;
  19. 	text-align: left;
  20. 	margin-bottom: 30px;
  21. 	border-top-style: none;
  22. 	border-right-style: none;
  23. 	border-bottom-style: none;
  24. 	border-left-style: none;
  25. 	border-top-color: #3F0;
  26. 	border-right-color: #3F0;
  27. 	border-bottom-color: #3F0;
  28. 	border-left-color: #3F0;
  29. 	padding-bottom: 106px;
  30. }
  31. body {
  32. 	background-color: #FFF;
  33. 	font-family: Verdana, Geneva, sans-serif;
  34. 	font-size: 14px;
  35. 	color: #000;
  36. 	text-align: left;
  37. 	height: 100%;
  38. }
  39. html {
  40. 	height: 100%
  41. }
  42. #push {
  43. 	height: 106px
  44. }
  45. #footer {
  46. 	position: relative;
  47. 	clear: both;
  48.     height: 106px;
  49.  
  50. }
  51. #menu {
  52. 	font-family: Verdana, Geneva, sans-serif;
  53. 	font-size: 14px;
  54. }
Offline ArieMedia - 03/01/2010 23:13
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 waarom zet je de afbeelding niet gewoon als achtergrondafbeelding? 
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background-image:  url('portfolio.png');
  2. background-position: center;
Offline WebSmurf - 04/01/2010 02:34
Avatar van WebSmurf Nieuw lid padding-bottom: 106px; in #hoofdpaneel kan weg.

#push {
height: 106px
}

en

<div id="push"></div>

kunnen weg denk dat je dan al een heel eind komt...
Offline Martijn - 04/01/2010 11:36 (laatste wijziging 04/01/2010 11:36)
Avatar van Martijn Crew PHP De opmerking van Arie is juist Alleen kan t een stapje korter:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: #aabbcc url('img/plaatje.jpg') no-repeat center fixed;

kan zijn dat ie m spaced op 'fixed'

De kleur moet voor het plaatje, anders werkt het niet. Verder een no-repeat om te zorgen dat het er maar 1x staat.

Center zou ook 'middle' kunnen zijn om te krijgen wat je wilt, moet je maar even mee spelen
Offline Inge437 - 04/01/2010 13:17 (laatste wijziging 04/01/2010 14:16)
Avatar van Inge437 Nieuw lid Hoe krijg ik het nu nog voor elkaar dat hij helemaal aan de onderkant van de pagina komt, dus zonder te scrollen? En ik wil ook geen scrollbalk. 
Offline WebSmurf - 04/01/2010 15:08 (laatste wijziging 04/01/2010 15:09)
Avatar van WebSmurf Nieuw lid #footer {
position:fixed;
bottom: 0px;
right: 0px;
height: ???px;
width: ???px;
}
Offline ArieMedia - 04/01/2010 15:11
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
WebSmurf schreef:
#footer {
position:fixed;
bottom: 0px;
height: ???px;
width: ???px;
}
Niet bepaald nee.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: #aabbcc url('img/plaatje.jpg') no-repeat;
  2. background-position: bottom center;



background-info
Offline Martijn - 04/01/2010 19:26
Avatar van Martijn Crew PHP background: #aabbcc url('img/plaatje.jpg') no-repeat bottom center fixed;

in het kort weer 

@websmurf: bottom is geen geldig css dingen in oudere IE's 
Offline WebSmurf - 04/01/2010 21:37
Avatar van WebSmurf Nieuw lid okeey sorry hou niet zoon rekening met IE  veelste monopoly ( boycote die zooi gewoon geen enkelen website meer laten werken in IE is mijn mening  )
Offline Stijn - 04/01/2010 22:21
Avatar van Stijn PHP expert @WebSmurf: je weet dat je 70 procent van je doelgroep negeert?
Offline ArieMedia - 04/01/2010 22:22
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
Martijn schreef:
background: #aabbcc url('img/plaatje.jpg') no-repeat bottom center fixed;

in het kort weer 

@websmurf: bottom is geen geldig css dingen in oudere IE's 
in het kort is me nooit gelukt 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s