doctype werkt niet.

  • Onderwerp starter Onderwerp starter baws
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
B

baws

Terugkerende gebruiker
Lid geworden
9 apr 2010
Berichten
1.258
hallo.

op mijn home pagina werkt mijn achtergrond kleur wel als ik geen doctype invul.
als ik echter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
gebruik werkt dit niet meer.
mijn code.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SB! -Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<div id="Pagina">

<div id="Header">
</br></br> Home     Contact    Videos
Header 
</div>
<div id ="Menu">
Test
</div>

<div id="Inhoud">
<p>Inhoud INHOUD inhoud</p></br>
new
</br>
new
</br>
new
</br>
new
</br>
new
</br>
new
</br>
new
</br>
new
</br>
new
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
new
</div>

<div id="Footer">
<style type="text/css">
  a:link {text-decoration:none; color:black;}      /* onaangeklikte links */
 a:visited {text-decoration:none; color:black;}  /* geklikte link */
 a:hover {text-decoration:none; color:black;  font-size:14pt;}  /* muis over link */
 a:active text-decoration:none; font-weight:bold; color:Green;}  /* klik op link */ 
 </style>
Footer
</br>
<a href="....." target="_blank">sb</a></p>
</div>

<div id="News">
<b><p>Nieuws!</p></b>

Dit is een tespagina, deze pagina is gemaakt om te testen of alles werkt. 
</div>
</div>
</body>
</html>

css
Code: 
html,body { margin:0px; padding:0px }
 
 #pagina
 {
 background-color:#000000;
 height:100%;
 width:100%;
 color:black;
 font:menu;
 margin:0;
 padding:0;
 }
 #Menu
 {
 background-color: #FDFDFD
 top: 10%;
 height: 5%;
 }
 #Header
 {
 top:0%;
 background-color:#FFDD22;
 height:15%;
 width:65%;
 margin-left:15%;
 padding-left:5%;
 -moz-border-radius-topright 25px;
 -moz-border-radius-topleft: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
 }
 
 #Inhoud
 { 
 position:fixed;
 top:15%;
 overflow:auto;
 background-color:brown;
 height:71%;
 width:65%;
 margin-left:15%;
 padding-left:5%;
 padding-top:3%;
 }
 
 #News
 {
 position:fixed;
 overflow:auto;
 top:25%;
 width:6%;
 border-color:White;
 border-style:solid;
 height: 57%;
 margin-left:87%;
 padding-left:1%;
 padding-right:1%;
 background-color:Yellow; 
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
 }
 
  #Footer
 {
 position:fixed;
 top:95%;
 background-color:#FFDD22;
 height:5%;
 width:65%;
 margin-left:15%;
 padding-left:5%;
-moz-border-radius-topright: 10%;
-moz-border-radius-topleft: 10%;
border-top-right-radius: 10%;
border-top-left-radius: 10%;
 }
 
Laatst bewerkt:
html,body { margin:0px; padding:0px; background-color:#000000;}
en haal het dan bij die #pagina weg.
 
Hoi baws,
Het Doctype Strict werkt uitstekend: te goed zelfs in jouw geval. :P

In de html staat:
Code: 
...
<div id="[B][COLOR="red"]P[/COLOR][/B]agina">
...
In de css staat:
Code: 
#[B][COLOR="red"]p[/COLOR][/B]agina {
   ...
   }
Jammer, zegt html-strict, dan kan ik de styles voor de <div id="Pagina"> niet vinden. :rolleyes:
  • Traceerbaar als je met Firebug de styles van de #Pagina wilt bekijken: die zijn er niet.
  • Tip: altijd alle ID-namen met kleine letters = nooit fouten.
Met vriendelijke groet,
CSShuinter
_____
PS: Ook de html-validator er even op na slaan, dan kunnen meteen die </br>'s in <br />'s veranderd worden, en zijn de meeste van de 45 html-errors verdwenen als lucht uit een doorgeprikte ballon.

PS-2: O ja, het Doctype ook volledig maken volgens de voorschriften, en de meta-charset erbij zetten:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <title>Mijn Mooie Titel</title>
   ... enz.
 
Laatst bewerkt:
Bedankt hij is nu als volgt
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <style type="text/css">
  a:link {text-decoration:none; color:black;}      /* onaangeklikte links */
 a:visited {text-decoration:none; color:black;}  /* geklikte link */
 a:hover {text-decoration:none; color:black;  font-size:14pt;}  /* muis over link */
 a:active text-decoration:none; font-weight:bold; color:Green;}  /* klik op link */ 
 </style>

<title>SB! -Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<div id="pagina">

<div id="header">
<br /><br/> Home     Contact    Videos
Header 
</div>

<div id="inhoud">
<p>Inhoud INHOUD inhoud</p><br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/>
new
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
new
</div>

<div id="footer">

Footer
<br/>
<p><a href="http://www.svenboogaart.nl" TARGET="_BLANK">Sven van den Boogaart</a></p>
</div>

<div id="news">
<b>Nieuws!</b>

Dit is een tespagina, deze pagina is gemaakt om te testen of alles werkt. 
</div>
</div>
</body>
</html>

css
Code: 
html,body { margin:0px; padding:0px }
 
 #pagina
 {
 background-color:#000000;
 height:100%;
 width:100%;
 color:black;
 font:menu;
 margin:0;
 padding:0;
 }
 
 #header
 {
 top:0%;
 background-color:#FFDD22;
 height:15%;
 width:65%;
 margin-left:15%;
 padding-left:5%;

 -moz-border-radius-topright 25px;
-moz-border-radius-topleft: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 25px; 
 }

 
 #inhoud
 { 
 position:fixed;
 top:15%;
 overflow:auto;
 background-color:brown;
 height:71%;
 width:65%;
 margin-left:15%;
 padding-left:5%;
 padding-top:3%;

 }
 
 #news
 {
 position:fixed;
 overflow:auto;
 top:25%;
 width:6%;
 border-color:White;
 border-style:solid;
 height: 57%;
 margin-left:87%;
 padding-left:1%;
 padding-right:1%;
 background-color:Yellow; 
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
 }
 
  #footer
 {
 position:fixed;
 top:95%;
 background-color:#FFDD22;
 height:5%;
 width:65%;
 margin-left:15%;
 padding-left:5%;
-moz-border-radius-topright: 10%;
-moz-border-radius-topleft: 10%;
border-top-right-radius: 10%;
border-top-left-radius: 10%;
 }

de header is echter niet 15 % maar veel kleiner als ik hem test, en veranderd in grote als ik in en uit zoom. volgens mij is het dus niet in %e
 
Yes, het klopt dat de #header niet op 15% van de schermhoogte komt.
Hij komt nu op alleen maar de 3 regels hoogte die er in zitten: <br /><br /> en de regel met Home, Contact, enz.
En daarom, varieert de hoogte ook bij inzoomen: dan worden de regels hoger.

Percentages in hoogte werken altijd ten opzichte van het element waar het in zit.
  • De #header met 15% hoogte zit in de #pagina.
  • De #pagina met 100% hoogte zit in de <body>.
  • Maar de <body> heeft geen hoogte, dus de #pagina weet niet waarvan hij 100% moet nemen, en doet niets aan hoogte.
  • Als de #pagina geen hoogte heeft (behalve van de elementen die er in zitten), dan heeft ook de 15% hoogte van de #header geen effect.
  • De <body> moet dus een hoogte krijgen, van 100% neem ik aan.
  • Maar als de <body> een hoogte van 100% krijgt, moet de <body> weten waarvan die 100% genomen moeten worden: van het element daarboven, de <html>.
  • En ... de <html> heeft geen hoogte opgegeven gekregen, dus de body weet niet waarvan de 100% genomen moet worden (en wat onder de body hangt, ... enz.).
  • Dus ook de <html> moet een hoogte van 100% krijgen.
  • Nu zijn we bovenaan, de <html> is het hoogste element, de root, van de pagina.
  • Bij relatieve hoogtes moet dus het hele trappetje tot en met de <html> gevuld zijn.
    Ontbreekt er ergens een hoogte, dan gaat het feestje niet door.
Samengevat:
Code: 
html, body { margin:0px; padding:0px; height:100% }
Nu heeft de #pagina zijn hoogte, en wat er in zit ook.
En omdat de #pagina nu 100% hoog is, komt opeens ook de zwarte background van de #pagina tevoorschijn. :)

Met vriendelijke groet,
CSShunter
_____
NB: Voor de breedte ligt het anders. Van een block-element (zoals een <div) is de breedte altijd vanzelf 100% van het element waar het in zit (tenzij anders opgegeven), en de breedte van de <body> is altijd automatisch 100% van de beschikbare schermbreedte (tenzij anders opgegeven).

PS: Bij een window/scherm-hoogte van < ca. 820px (d.w.z. ook op een resolutie van 1024*768px) valt de onderste tekstregel van de #footer weg.
 
Laatst bewerkt:
Super, hartelijk bedankt voor de goed uitleg, nu weet ik niet alleen wat ik fout deed maar ook waarom Top !

PS: Bij een window/scherm-hoogte van < ca. 820px (d.w.z. ook op een resolutie van 1024*768px) valt de onderste tekstregel van de #footer weg.
waarom is dit dan? is het een bepaald percentage dat je niet ziet?
 
Footerperikelen

Ja, je hebt de #footer op 5% schermhoogte gezet, en op een {top: 95%} om 'm onderaan te krijgen.
Zodra de inhoud van de #footer hoger is dan die 5% (vanwege minder window-/schermhoogte, of door inzoomen op alleen de lettergrootte), past het er niet meer op.

Maar het is altijd link om een pagina precies verticaal beeldvullend te willen hebben. Dan gaat het misschien goed op de resolutie waarop de pagina gemaakt is, maar voor je het weet lukt iets niet in de hoogte als de bezoeker een andere instelling heeft.

Om een #footer altijd onderaan te krijgen, zonder een inwendige scrollbar *) voor de #content, zijn er andere trucjes.
Met vriendelijke groet,
CSShunter
_________
*) Inwendige scrollbars (voor bv. een #content-div) vind ik ondingen: want je ziet altijd maar een heel beperkt deel van de paginahoogte (als header en footer gefixeerd zijn, blijft er maar weinig hoogte over), de bezoeker moet met zijn/haar muis naar een andere plek dan de gewone rechter-scrollbar, en bij een lage resolutie zie je nauwelijks inhoud (zodat je het overzicht over de pagina kwijtraakt).
 
Laatst bewerkt:
ik snap het niet helemaal.
mij was bekend als de position fixed is dat er geen scrollbar onder da aangegeven grote kan zitten.
en als iets in %e is dacht ik dat het niet uit maakt hoeveel je scrolde.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan