28234 sujets

CSS et mise en forme, CSS3

[resolu enfin]Hauteur 100 % impossible encore + DocType

Pages :
Bonjour à tous,


Voici ce que je cherche à faire

Je ne parviens pas à appliquer une hauteur de 100% à mon conteneur "page" sous FF et Opéra

Le contenu déborde du fond vert du conteneur.

Voilà, j'espère que mon problème est clairement exposé.
Merci pour votre aide.
Modifié par Vero (20 Apr 2005 - 09:44)
Un classique ! Smiley lol 

#page {
	[#blue][b]height: auto !important;[/b][/#]
	height: 100%;
	min-height:100%;
	width: 90%;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #336600;
	margin: 0 auto;
}
Et bien, je cherche surtout à mettre mon fond à 100% !
Smiley smile

Je vais étudier vos propositions ... je reviens.
@Stephan :

Merci Merci Merci !
Ca marche !

Mais le commentaire "important!" (si j'ai bien compris le jour où j'ai lu cela quelque part) sert à rendre la propriété prioritaire par rapport à la feuille de style utilisateur ?

C'est une astuce pour corriger un bug ou bien y a t-il une raison logique ?

Merci pour ce complément d'explication.

@Raphael

Je n'ai pas de problème pour cela avec IE, je ne cherche pas à exploiter min-height particulièrement.

Dans cette page de test (qui fonctionne sous IE) je me suis contentée de mettre le pb en évidence sour Gecko.

Ton article blog sur la hauteur à 100% donne une solution qui ne marche pas sur FF ni Opera, avec ou sans prologue xml.
Smiley decu

Toutefois, sans le prologue XML (tu te souviens ?) il y a un mieux, puisque le body prends 100% ce qui n'était pas le cas avec le prologue xml ...

Avec le prlogue xml, mon footer n'était pas en bas. Là, il l'est sans position absolute ...

Enfin, je me permets de te dire cela pour faire avancer le shimilimilblick ...
ce n'est pas un reproche !

Smiley smile
Administrateur
Vero a écrit :

Ton article blog sur la hauteur à 100% donne une solution qui ne marche pas sur FF ni Opera, avec ou sans prologue xml.

Ça m'étonne quand-même.

Je viens de tester les 4 possibilités suivantes :
* Pas de prologue XML + <html> et <body> à height: 100% + Positionnement (relatif ou absolu) du bloc
* Pas de prologue XML + <html> et <body> à height: 100% + pas de positionnement du bloc
* Prologue XML + <html> et <body> à height: 100% + Positionnement (relatif ou absolu) du bloc
* Prologue XML + <html> et <body> à height: 100% + pas de positionnement du bloc

Avec la structure suivante :
<!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" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contenu{
width:20em;
height:100%;
background-color: yellow;
}
-->
</style>
</head>
<body>
<div id="contenu">test</div>
</body>
</html>

Et ça fonctionne à chaque fois sur IE5+, FF et Opera Smiley biggol
Modifié par Raphael (18 Apr 2005 - 16:45)
En complément :
Dix trucs CSS que vous ne connaissez peut-être pas a écrit :

Normalement, en CSS, la dernière règle spécifiée a préséance sur les autres. Par contre, si vous utilisez !important après une règle, c'est cette dernière qui a préséance, peu importe ce qui apparaît après. Cette règle est vraie pour tous les navigateurs, sauf pour IE.

http://w3qc.org/docs/dix_trucs_css.html
Merci Stephan pour ce lien, il va sûrement m'éclairer sur des tas de choses.

@Raphael

Tu sais, avant de poster, je cherche. Mais je peux m'embrouiller aussi, je ne dis pas le contraire.

Je vais refaire des tests avec méthode ...maintenant que j'ai ma petite page de tests !

Smiley langue

Smiley cligne
Administrateur
Vero a écrit :
@Raphael
Tu sais, avant de poster, je cherche.

C'est bien ce qui m'inquiète : si nous avons deux comportements différents avec le même code sur des navigateurs identiques... j'avoue que je n'y comprendrai plus rien Smiley ohwell
Et je me doute bien que toi non plus tu n'affirmes rien sans avoir testé auparavant, donc je suis d'autant plus coi.
Oui, mais tu sais, lorsque tu testes en essayant de monter une page avec plein d'autres trucs dedans, tu peux te mélanger les pinceaux.

Tu hésites à démonter toute ta page !

De plus, mes pages sont générées par Dotclear : beaucoup de choses et d'interactions pour une débutante !

Donc, maintenant, j'ai "mon petit laboratoire" de test !
Surtout pratique pour mon propre apprentissage et pour pouvoir vous demander un peu d'aide de temps en temps lorsque je ne trouve pas toute seule !

Je vais reprendre, à tête reposée, tous les cas des figures par rapport à cette hauteur de page. Cela sera un excellent exercice.

Si un truc cloche, je te fais signe.
Bonjour,
<hs class="peut-être">
Peut-être une page web n'est-elle tout bonnement pas destinée à se comporter comme une maquette d'imprimerie ? Avec une feuille de style nous pouvons spécifier le media de sortie (all, screen, print...), est-il utile de considérer un écran qui ne nous appartiens pas comme une chose que nous pouvons manipuler à loisir et figer avec des dimensions ? Smiley cligne
Le web est-il un média paginé ? Smiley biggrin Pourquoi ne pas laisser nos contenus s'épandre comme bon leur semble sans les confiner dans un cadre contraignant ?
Voilà pour ce que je pense en général des height 100%, prologue xml présent ou non Smiley lol
</hs>
Je suis d'accord avec toi et j'essaie de ne pas fixer de dimensions, je préfère les mises en page fluides.

Pour ma part, j'essaie d'éviter tout ce qui est trop compliqué, je fuis les hacks et autres astuces.

Mais sans tomber dans le piège de la maquette d'imprimerie, on peut mettre un fond de page et harmoniser les proportions : les propriétés du CSS nous y engagent, non ?

Reste à les comprendre et à en faire bonne usage, je suis peut-être sur une mauvaise piste.

Je découvre toutes ces notions depuis peu, j'essaie de faire le tri dans tous ce que je lis : ce n'est pas facile !

Concernant le prologue xml, il m'a été "imposé" sans que j'y fasse attention.

En lisant l'avis de personnes bien plus qualifiées que moi, il semble important de faire attention à son en-tête et ce fonction de ce qu'on cherche à faire.

Ce prologue est inutile dans le cas d'XHTML en UTF8 (si j'ai bien compris) et semblerait poser quelques soucis dans certains cas : j'ai réussi à le faire disparaître mais avant,, j'ai cherché à comprendre ce que je faisais !

Et ca non plus, ce n'est pas facile !

Je ne fais que suivre vos conseils ...

Smiley smile
Modifié par Vero (18 Apr 2005 - 23:44)
Vero a écrit :

Ce prologue est inutile dans le cas d'XHTML en UTF8 (si j'ai bien compris)

Précisions :
Le prologue est inutile en XHTML traité en tant que text/html, mais obligatoire en XHTML traité en tant que application/xhtml+xml si (et seulement si) l'encodage n'est pas UTF-8 ou UTF-16.
Excuse moi Stephan, mais tu m'as déjà parlé de tout cela dans le sujet précédent, cependant, je n'avais pas tout digérer ...


<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


Le traitement dont tu me parles est-il indiqué dans cette dernière balise.
Auquel cas, dans cet exemple, nous sommes en xhtml traités en tant que text/html ...

Donc iso ou utf8, le prologue xml, dans ce cas, n'est pas obligatoire ...
Avec cette déclaration, je peux utiliser le jeu de caractère de mon choix sans prologue xml.

Vue que nos pages web (enfin, les miennes!) sont écrites en html et non en xml, cela suffit amplement.

Est-ce que j'ai compris ? pas tout, mais un peu ?

Smiley sweatdrop

Mais alors, dans ce cas, quid du mode de rendu ?

J'essaie de comprendre ce fil :

http://forum.alsacreations.com/topic.php?fid=2&tid=2715&s=d%E9claration
Modifié par Vero (19 Apr 2005 - 02:25)
Le prologue est inutile en XHTML traité en tant que text/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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]text/html[/b][/#]; charset=[#orange][b]ISO-8859-1[/b][/#]" />

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]text/html[/b][/#]; charset=[#violet][b]UTF-8[/b][/#]" />

mais obligatoire en XHTML traité en tant que application/xhtml+xml

<?xml version="1.0" encoding="[#orange][b]ISO-8859-1[/b][/#]"?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]application/xhtml+xml[/b][/#]; charset=[#orange][b]ISO-8859-1[/b][/#]" />

<?xml version="1.0" encoding="[#orange][b]ISO-8859-1[/b][/#]"?>
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]application/xhtml+xml[/b][/#]; charset=[#orange][b]ISO-8859-1[/b][/#]" />

si (et seulement si) l'encodage n'est pas UTF-8 ou UTF-16.

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]application/xhtml+xml[/b][/#]; charset=[#violet][b]UTF-8[/b][/#]" />

<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="[#blue][b]application/xhtml+xml[/b][/#]; charset=[#violet][b]UTF-8[/b][/#]" />

Vero a écrit :

Mais alors, dans ce cas, quid du mode de rendu ?

Une fois que l'on a choisi le Doctype adapté à nos besoins, il faut faire avec... Smiley biggol
Modifié par Stephan (19 Apr 2005 - 03:52)
Je précise ma question concernant "le doctype switching", pour choisir le doctype dont j'ai besoin, il faut que je sache comment réagit le navigateur en fonction ...

Si le document est traité en text/html, les navigateurs basculent en mode quick ?

Y a t-il une ressource (en français) qui résume un peu tout ca ?
Vero a écrit :

Je précise ma question concernant "le doctype switching", pour choisir le doctype dont j'ai besoin, il faut que je sache comment réagit le navigateur en fonction ...

Non. Ce n'est pas comme ça qu'on choisi un Doctype.
Vero a écrit :

Si le document est traité en text/html, les navigateurs basculent en mode quick ?

Encore non. C'est la présence du prologue qui fait basculer en mode quirk.
Vero a écrit :

Y a t-il une ressource (en français) qui résume un peu tout ca ?

Je trouve que tu te casses le bicycle pour rien. text/html => pas de prologue.
Désolé, je dois me sauver Smiley cligne

@+

Stephan Smiley lol
Stephan a écrit :

C'est la présence du prologue qui fait basculer en mode quirk.


C'est l'information qui me manquait !

Stephan a écrit :

Je trouve que tu te casses le bicycle pour rien. text/html => pas de prologue.


Cela a le privilège d'être franc même si c'est un peu rude.
Smiley confused

Merci pour ton aide et désolée d'avoir casser ton bicycle.

Smiley cligne
@Vero, je crois que Stephan à été bref par manque de temps (cf sa dernière ligne), pas de brutalité à mon avis Smiley cligne
Pages :
Sujet clos
Aller à