HTML 5 footer / content

pasmaskas · 2 nov 2011

Hallo helpmij leden,

Ik ben wat aan het spelen met html5 nu heb ik 2 vragen.

Hoe zorg in er voor dat de footer onder de content blijft staan als de pagina langer word en niet over de content heen gaat?

En hoe zorg in er voor dat de content dive mee reken als er meer content in komt?

Dus de content div moet lager worden als er meer content in komt en de footer moet daar onder blijven plakken.

Ik heb al voor elkaar gekregen dat hijonder aan de pagina blijft hangen de footer

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
	background-color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	position: relative;
	width: 900px;
	height: 100%;  
	margin: 0 auto;
	padding: 0;  
}
#header {
	width: 900px;
	height: 200px;
	position: absolute;
	background-color: #999;
	top: 0px;
}
#sidebar {
	position:absolute;
	width: 200px;
	height: 500px;
	background-color: #999;
	top: 200px;
	
}
#content {
	position: absolute;
	width: 676px;
	height: 476px;
	background-color: #999;
	top: 200px;
	left: 200px;
	padding: 12px 12px 12px 12px;
}
#footer {
	position: absolute;
	background-color: #999;  
	bottom: 0; 
	height: 22px;  
	width: 900px;
	text-align: center;
	padding-top: 8px;
}	
</style>
</head>
	<body>    
		<div id="header">header</div>
		<div id="sidebar">menu</div>
		<div id="content">content</div>
		<div id="footer">footer</div>
	</body>
</html>

gr pascal

That Guy · 2 nov 2011

Eh, okay. Waarom precies heb je het over HTML5 zonder dat je in je code HTML 5-tags gebruikt?

Over je CSS vraag (want dat is het eigenlijk): geen position:absolute gebruiken. Deze maakt het makkelijk om 'fixed' websites te maken, maar is een ramp als je wilt dat dingen mee-schalen. Zie bijvoorbeeld zoiets:

HTML:

<!doctype html>

<html lang='en'>


   <head>

      <meta charset='utf-8' />

      <title>test!</title>

      <style>

         div
         {
            margin: 25px auto;
            width: 800px;
            border: 1px solid #f0f;
         }

         section
         {
            border: 1px solid #06f;
         }

         footer
         {
            border: 1px solid #f60;
         }

      </style>

   </head>

  <body>

     <div>

         <section>

           <p>text!</p>
           <p>text!</p>
           <p>text!</p>
           <p>text!</p>
           <p>text!</p>

         </section>

         <footer>

            footer-spul hier!

         </footer>

      </div>

   </body>

</html>

Block-elementen (zoals divs en sections) rekken automatisch mee. De breedte van deze elementen staat standaard op 100%, daarom heeft in het voorbeeld mijn div een breedte van 800 mee gekregen.

Ohja, en het is handig als je volgende keer je code tussen HTML tags zet ipv. een quote

pasmaskas · 3 nov 2011

Beste that gay dreamweaver zij dat het HTML5 was dus dacht dat die dan ook alleen zulke code zou gebruiken. Maar goed ik heb nu dat de footer altijs onder de content blijft dat is goed zo ziet mijn code er uit:

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<style type="text/css">
body,html {
	background-color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	position: relative;
	width: 900px;
	height: 100%;  
	margin: 0 auto;
	padding: 0;  
}

div {
    margin: 25px auto;
    width: 900px;
}

header {
	height: 150px;
	border: none;
	background: #999;
}

section {
	background: #666;
	border: none;
}

footer {
    height: 25px;
	background: #999;
	border: none;
}
	
</style>
</head>
	<body>  
    	<div>  
		<header>header</header>
	         <section>
 
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
 
             </section>
		  <footer>footer</footer>
        </div>
	</body>
</html>

Nu wil ik links een menu heb je daar ook regels voor? <menu></menu> ofzo en hoe plaats ik die in de pagina? En ze sluitne niet op elkaar aan alleen als ik de border css van jou gebruik maar wil dat de border gewoon 0 hoe doe ik dat?

gr pascal

pasmaskas · 3 nov 2011

Ik heb dat van de border al sort van opgelost

klopt dit ene beetje? ik heb de padding op 12 gezet zodatie hem vult met de kleur

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<style type="text/css">
body,html {
	background: #000;
	font: 12px/22px Helvetica, Arial, sans-serif;  
	color: #FFF;
	width: 987px; 
	margin: 0 auto;
}

div {
	margin: 25px auto;
    width: 987px;
}

header {
	height: 150px;
	background: #999;
	padding: 12px 12px 12px 12px;
}

section {
	background: #666;
	padding: 12px 12px 12px 12px;
}

footer {
    height: 25px;
	background: #999;
	padding: 12px 12px 12px 12px;
}
	
</style>
</head>
	<body>  
    	<div>  
		<header>header</header>
	         <section>
 
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>
 
             </section>
		  <footer>footer</footer>
        </div>
	</body>
</html>

grumbkow · 7 nov 2011

Wat hij bedoeld is dat HTML 5 nieuwe elementen heeft om je pagina op te maken.
Door je doctype is het wel een HTML5 bestand, maar je kan het net zo goed xhtml maken omadt je alleen div's etc gebruikt.

HTML 5 heeft onder andere de volgende elementen.
<header></header>
<footer></footer>
<nav></nav>

csshunter · 7 nov 2011

Uit de topic-start nr. #1:

Ik heb al voor elkaar gekregen dat hij onder aan de pagina blijft hangen, de footer.

Hoe zorg ik er voor dat de footer onder de content blijft staan als de pagina langer word en niet over de content heen gaat?

Uit reactie nr. #2:

Over je CSS vraag (want dat is het eigenlijk): geen position:absolute gebruiken.

@That Guy: hoe kan je anders dan met een absolute positie zorgen dat een footer een echte footer is, d.w.z. bij een korte pagina op de onderrand van het scherm bivakkeert?

Verder bekruipt me nogal het gevoel: "I have been here before!".
Niet hier, maar daar, in het topic van 1 oktober j.l. - Met demo's!

Wat ook al een beetje erg een herhaling was van de uitgebreide antwoorden hier, van 16 t/m 19 september j.l. ("vraag opgelost").

Mijn korte/middellange geheugen is nog in orde , geloof ik.

Met vriendelijke groet,
CSShunter
__________
PS: Het is niet altijd zo, dat een absolute positie onwrikbaar vastgekleefd zit aan de randen van het scherm. Als het omvattende element een relatieve positie heeft, dan komt bv. een met {bottom: 0;} absoluut gepositioneerd element daarbinnen niet op de vloer van het beeldscherm, maar blijft "relatief absoluut" (of "absoluut relatief", daar wil ik af zijn), en komt aan de onderrand van het omvattende element te staan.
En mocht het omvattende element uitrekken, dan zweeft de relatief absolute bottom-div gezellig mee op de onderrand van het element.
Het "relatief" van de container heeft hier dus betrekking op de relatie met zijn children, niet alleen met zijn parent.
Vrij complexe materie, temeer omdat IE méér {position:relative}'s nodig heeft dan eigenlijk zou moeten.
Daar is de relativiteitstheorie nog niets bij.

Zie bv. deze. En dan hebben we het nog niet over de verhouding tussen "display", "position" en "float" (deze), of de vergelijking tussen "normal flow", "floats" en "relatieve/absolute positionering" (deze).
Als schaapjes tellen om in slaap te komen niet helpt, kan je altijd een paar van dit soort hoofdstukken uit de css-specificatie doornemen: daar moet je erg wakker voor zijn!

pasmaskas · 8 nov 2011

Beste CSShunter ik weet dat het een soort herhaling is maar ik heb gewoon een footer fatisch

.

Nee grapje ik was gewoon wat aan het oefenen met HTML5 en nu ook css3 ik hang altijd bij de footer ik vind dat gewoon een ellendig gedeelte.

Ik heb nu dit (hoop dat het ene beetje goed is)

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<style type="text/css">
body,html {
	background: #CCC;
	/* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-gradient(linear, left top, right top, from(#
	), to(#FFF)); 
	/* Safari 5.1, Chrome 10+ */ 
	background: -webkit-linear-gradient(top, #CCC, #FFF); 
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(top, #CCC, #FFF); 
	/* IE 10 */ 
	background: -ms-linear-gradient(top, #CCC, #FFF); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(top, #CCC, #FFF);
	font: 12px/12px Helvetica, Arial, sans-serif;  
	color: #000;
	width: 100%;
	height: 100%; 
	margin: 0 auto;
}
div {
	background :#FFF;
	margin: 40px auto;
    width: 987px;
	box-shadow:  3px 3px 10px #777;
	border-radius: 12px 12px 12px 12px;
}
header {
	height: 100px;
	text-align: right;
	padding: 12px 24px 12px 12px;
	border-radius: 12px 12px 0px 0px;
}
section {
	padding: 24px 24px 24px 24px;
}
footer {
    height: 25px;
	text-align: center;
	padding: 12px 12px 5px 12px;
	border-radius: 0px 0px 12px 12px;
}
/* Navigatiemenu */
nav	{
	height: 16px;
	margin-right: -15px;
	margin-left: -15px;
	vertical-align: text-top;
	font: bold 16px/16px Helvetica, Arial, sans-serif;
	background: #CCC;
	/* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-gradient(linear, left top, right top, from(#FFF), to(#CCC)); 
	/* Safari 5.1, Chrome 10+ */ 
	background: -webkit-linear-gradient(top, #FFF, #CCC); 
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(top, #FFF, #CCC); 
	/* IE 10 */ 
	background: -ms-linear-gradient(top, #FFF, #CCC); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(top, #FFF, #CCC);
	padding: 12px 32px 12px 32px;
	border-radius: 14px 12px 12px 12px;
	box-shadow:  3px 3px 10px #777;
	word-spacing: 32px;
}
a {
	font-size: 16px;
	color: #000;
	text-shadow: 1px 1px 2px #777;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
/* Headers */
h1 {
	font-size: 36px;
	color: #FFF;
	text-shadow: 1px 1px 2px #777;
}
h2 {
	font-size: 24px;
	color: #000;
}
h3 {
	font-size: 18px;
	color: #000;
}
h4 {
	font-size: 14px;
	color: #000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>  
<div>  
	<header><h1>header html 5</h1></header>
		<nav>
        <a href="#">Menu</a>
        <a href="#">Menu</a>
        <a href="#">Menu</a>
        <a href="#">Menu</a>
        </nav>
	        <section>
 			text!
            <p>text!</p>
            <p>text!</p>
            <p>text!</p>            
            <p>text!</p>
            <p>text!</p>            
            <p>text!</p>
            <p>text!</p>            
            <p>text!</p>
            <p>text!</p>
            text!
 			</section>
	<footer>De html 5 website</footer>
</div>
</body>
</html>

ik heb geprobeert zo veel mogelijk css3 en html5 code te gebruiken en zo blijft de footer onder de content. het is wel leuk om te zien dat je heel veel kan met css3 dat je voorheen met photoshop deed.

p.s CSSHunter ik ga binnen kort starten met de website maken waar jij mij bij geholpen het met de footer hier ga ik cms made simple achter plaatsen

. voor mij een hele uitdaging maar het moet lukken.

gr pascal

That Guy · 8 nov 2011

@That Guy: hoe kan je anders dan met een absolute positie zorgen dat een footer een echte footer is, d.w.z. bij een korte pagina op de onderrand van het scherm bivakkeert?

Well, is dat niet netjes op te lossen door iets van een min-height ofzo? Ik nam trouwens aan dat met dit

Hoe zorg in er voor dat de footer onder de content blijft staan als de pagina langer word en niet over de content heen gaat?

bedoeld werd dat de footer netjes onder de content bleef staan, hoe lang de pagina ook is. Dus eigenlijk wat de normale 'flow' van een document is (wat dus werd 'verpest' met de position: absolute); ik dacht dat dat de vraag was.

:thumb:

csshunter · 8 nov 2011

Ja, de vraag kon je een beetje twee kanten mee op.

footer zonder absolute positie: is dat niet netjes op te lossen door iets van een min-height ofzo?

Het begon bij mij ook al een beetje te kietelen om dat nog eens te be-experimenteren.

Tegelijkertijd gingen in een hoekje van mijn hoofd wat alarmvlaggen te zwaaien: "niet met min-width of min-height werken, want dan haal je je toestanden op de hals om IE het te laten doen." - Maar dat geldt voor IE lte 6, en die laten we vallen, toch?

Dan kan het!
Je moet er een extra container voor aanmaken, en een keer extra de footer-hoogte elders herhalen, maar dan kan het ook zonder een absolute positionering.

Met AP: gecentreerde-footer-A.htm
Met min-height: footer-via-minHeight-1.htm

Css is toch net een sprookjestuin: weer een keuzemogelijkheid erbij!

Met vriendelijke groet,
CSShunter

HTML 5 footer / content

pasmaskas

Gebruiker

That Guy

Meubilair

pasmaskas

Gebruiker

pasmaskas

Gebruiker

grumbkow

Gebruiker

csshunter

Meubilair

pasmaskas

Gebruiker

That Guy

Meubilair

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy