[XHTML] Body niet paginavullend - Softwareontwikkeling

donderdag 29 juli 2004 00:43

Acties:

Analytics dude

Topicstarter

Ik heb de vogende code (versimpeld):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
  <head>
    <title>Bla</title>
  </head>
  <body>
    <h1>Bla</h1>
    <p>Nog meer bla</p>
  </body>
</html>

en de volgende header word meegestuurd:

PHP:

1	header("content-type: application/xhtml+xml; charset=utf-8");

En in de stylesheet staat:

Cascading Stylesheet:

body { 
  background-color: rgb(0, 0, 0);
  padding: 160px 200px 410px 260px;
  margin: 0px 0px 0px 0px;
  color: rgb(255, 255, 255); 
}

Nu is het zo dat de zwarte achtergrond precies stopt onder de tekst "Nog meer bla". Ik heb dat opgelost door de padding-bottom op 410px te zetten maar dat is niet netjes natuurlijk. Hoe kan ik dit oplossen? Ik had eerst de content dmv margins op de plek gezet maar dan krijg je om je content grote lege witte vlakken, dus nu de margins op 0 en met padding gewerkt zodat de achtergrondkleur beeldvullend is behalve aan de onderkant.

NB: dit werkt sowieso niet in IE6 omdat die deze mimetype niet ondersteund, het gaat me puur om Firefox.

donderdag 29 juli 2004 00:47

Acties:

crisp

Devver

Pixelated

je body wordt zo hoog als de inhoud natuurlijk (plus paddings), tenzij je 'm expliciet een (min-)height geeft

Intentionally left blank

donderdag 29 juli 2004 00:59

Acties:

JeromeB

woei

Het body element is als het ware de canvas en die hoeft niet per definitie even hoog te zijn als de viewport.

Zoals crisp al zegt kun je dit wel veranderen doormiddel van min-height of height, maar dan is het nog steeds niet erg duidelijk. Er bestaat nog steeds veel onenigheid omtrend de viewport en de canvas.

Hier nog een handige link:
http://www.quirksmode.org/viewport/experiments.html

PC load letter? What the fuck does that mean?

donderdag 29 juli 2004 08:10

Acties:

André

Analytics dude

Topicstarter

Dus met een min-height: 100% zou het moeten lukken denk je? En volgens dat stuk dat JeromeB geeft zou ik ook gewoon een background-color op de HTML kunnen zetten.

* André gaat vanavond proberen

donderdag 29 juli 2004 08:18

Acties:

Verwijderd

Ja, zo staat het ook precies in de specificatie:

quote: http://www.w3.org/TR/2004/CR-CSS21-20040225/colors.html#q2
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background of the canvas of HTML documents: if the value of the 'background' property for the HTML element is different from 'transparent' then use it, else use the value of the 'background' property for the BODY element. If the resulting value is 'transparent', the rendering is undefined. This does not apply to XHTML documents.

Zie ook: http://annevankesteren.nl/archives/2004/02/canvas

donderdag 29 juli 2004 08:21

Acties:

Verwijderd

O, en alleen 'min-height' toepassen op het BODY element zou niet gaan werken. Aangezien het HTML element ook geen vastgestelde hoogte heeft ('height:auto'). Dus dan zou het BODY element wel alle plek innemen binnen het HTML element, maar dat is nog steeds net zo hoog als eerst. (Dat geld ook voor HTML.)

donderdag 29 juli 2004 08:28

Acties:

André

Analytics dude

Topicstarter

Ik heb me ingelezen in beide stukken en vind het wel interessant hoe browsers omgaan met het html en body element. Ik weet nu iig hoe ik mijn probleem kan oplossen. En die min-height oplossing voldoet idd niet

donderdag 29 juli 2004 08:59

Acties:

zubauza

André schreef op 29 juli 2004 @ 00:43:
Cascading Stylesheet:
1
2
3
body { 
  margin: 0px 0px 0px 0px;
}

code:

1	margin: 0;

deviantART gallery

donderdag 29 juli 2004 09:01

Acties:

André

Analytics dude

Topicstarter

Ik vind de volledige schrijfwijze handiger, zo kan ik bijvoorbeeld margin-left heel simpel aanpassen

En ook al staat er 0, ik vind het beter/mooier om toch de eenheden er bij te zetten.

donderdag 29 juli 2004 09:02

Acties:

Verwijderd

Alleen mooier dan, want beter is het zeker niet. (Dit geld ook voor die 'rgb' functies.)

donderdag 29 juli 2004 09:04

Acties:

André

Analytics dude

Topicstarter

Verwijderd schreef op 29 juli 2004 @ 09:02:
Alleen mooier dan, want beter is het zeker niet. (Dit geld ook voor die 'rgb' functies.)

Het is niet beter, ook niet slechter

En ik schrijf bijna altijd de kleuren op deze manier omdat ik dat makkelijker vind lezen dan hex waarden.

donderdag 29 juli 2004 09:40

Acties:

JeromeB

woei

Verwijderd schreef op 29 juli 2004 @ 08:21:
O, en alleen 'min-height' toepassen op het BODY element zou niet gaan werken. Aangezien het HTML element ook geen vastgestelde hoogte heeft ('height:auto'). Dus dan zou het BODY element wel alle plek innemen binnen het HTML element, maar dat is nog steeds net zo hoog als eerst. (Dat geld ook voor HTML.)

Praktisch gezien zou het niet werken als we procenten als units gebruiken. Natuurlijk werkt het wel als we andere units gebruiken of als we html{height:100%;} ook defineren.

Theoretisch gezien zou het met procenten als units ook moeten werken. Als we er van uitgaan dat het html element gelijk is aan de viewport dan zou bij het defineren van alleen body{height:100%;} de body even hoog moeten zijn als de viewport.

Jammergenoeg is het niet exact duidelijk wat het html element nou precies is en welke overeenkomsten er zijn tussen de viewport en dit element. Ik vind het W3C ook niet erg duidelijk en het artikel van anne is ook niet erg duidelijk.

PC load letter? What the fuck does that mean?

donderdag 29 juli 2004 09:46

Acties:

Verwijderd

Viewport heeft er niet zoveel mee te maken. Wat in mijn post (geen artikel) stond is dat het HTML element niets anders is dan andere elementen. Als je 'html{height:100%}' gebruikt zit je in de problemen wanneer de inhoud langer is dan de viewport. 'html{min-height:100%}' zou uiteraard wel werken, maar je hebt het niet nodig.

Voor de het "kleuren" van de canvas (anders dan viewport) is een 'background' plaatsen op het HTML element al genoeg. 'background' is de enige property welke speciaal gedrag vertoond bij het HTML element. Elke andere property heeft dat niet. Waarschijnlijk wordt deze uitzondering in een latere CSS specificatie er ook uit gehaald (en uiteraard worden er dan andere mogelijkheden gegeven om de canvas te kleuren).

donderdag 29 juli 2004 17:08

Acties:

André

Analytics dude

Topicstarter

Oke, ik heb het geprobeerd en om je conclusie extra kracht bij te zetten: het werkt

Pagina: 1

Reageer