18041 sujets

Questions générales et questions de débutants

Dtd récalcitrante

Bonjour,

J'ai lu très récemment le livre "CSS 2 Pratique du design web", et j'en profite pour essayer de mettre en application tout ça.
Pour cela, je me fait un petit site perso avec mon cv, etc... en sachant qu'il n'y a aucune urgence pour ça.

Dans ce qui me semble respecter les standards, je partage ma page en 3 parties :
- Une entête, définit par un <div id="entete"> qui sera en haut de la page.
- un contenu, définit par <div id="contenu">, qui bien entendu contiendra le gros du texte.
- Une petite bande sur le côté, qui me servira uniquement pour dessiner une bande verticale fine. Celle-ci est également définie par un div : <div id="cote">

Dans ma feuille css, j'ai donc :


body
{
	background-color	:	yellow;
	margin				:	0;
	padding				:	0;
}
#entete
{
	background-color	:	red;
	padding				:	0;
	height				:	90px;
}
#cote
{
	background-color	:	blue;
	height				:	100%;
	width				:	5px;
	float				:	left;
}
#contenu
{
	margin				:	0;
	padding				:	0;
}

Rien de particulier me semble-t'il.
Par contre, impossible de faire afficher ma petite bande #cote en la définissant à 100 %.
Si je met du px, cela fonctionne, mais bon...

Par contre, en tâtonnant, je me suis aperçu que si j'ôtais la DTD, cela fonctionnait.
(dtd : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
)

J'imagine donc qu'il y a quelque chose qui ne suit pas les spécifications, mais quoi ?

Une idée ?

Merci d'avance.

PS : Les couleurs, je sais... mais c'est juste en essayant de trouver ce qui clochait; le site ne sera pas avec celles-ci.
Modifié par ramold (24 Feb 2011 - 19:50)
Le sujet du height 100% est redondant ici... Une recherche t'aurait sans doute permis de trouver une réponse.

En tous les cas, un height 100% appliqué à un élément comme ça en float, ça ne marche simplement pas. Il faut trouver d'autres solutions.

Une recherche te permettra de trouver beaucoup plus d'information, mais voici un premier tuto:
blocs de même hauteur
Bonjour,

Il serait plus simple et plus efficace d'oubloer ta div cote et de définir une bordure pour ton div de contenu.
Vaxilart a écrit :
Le sujet du height 100% est redondant ici...


En quoi ?

Vaxilart a écrit :
Une recherche t'aurait sans doute permis de trouver une réponse.

En tous les cas, un height 100% appliqué à un élément comme ça en float, ça ne marche simplement pas. Il faut trouver d'autres solutions.


Ben si, justement, ça fonctionne sans DTD mais ça coinçait avec.

Mais j'ai réussi à le faire fonctionner en suivant ton lien.
Comme dans l'exemple, j'ai rajouté : height : 100% dans body, et immédiatement, mon height : 100% dans mon div id="cote" a été pris en compte.

Mais pour moi, le problème est le même :

- Pourquoi cela ne fonctionnait-il pas ? Je n'en sais rien.
- Pourquoi cela fonctionne-t'il maintenant ? Je ne comprends pas mieux.
Et ça m'amène même une autre question :
Définir un body à 100% en hauteur, j'ai du mal à concevoir le truc. Comment le corps du document pourrait-il être plus petit que la fenêtre ?

Il y a vraiment des choses et des logiques qui m'échappent dans les css.

En tous cas, merci.
Laurie-Anne a écrit :
Bonjour,

Il serait plus simple et plus efficace d'oubloer ta div cote et de définir une bordure pour ton div de contenu.

Non, car en vérité, je n'avais pas tout dit.

En haut à gauche, j'ai mis en image de fond du body, une photo toute petite, agrémentée d'un graphisme qui descend un peu, avec un dégradé de couleur.
Si je mets une bordure à gauche de la couleur de fin de dégradé, elle va chevaucher mon graphisme en étant sans dégradé, donc se voir.
Je pourrais à la limite, la mettre qu'à partir de la fin de mon graphisme, mais ça fait couper a page en je ne sais combien de morceaux.

Mais bon, comme dit plus haut, j'ai trouvé une solution... que je ne comprends pas.

Mais une image valant mieux qu'un dessin, voici la page en question. Je précise que c'est une version de travail, très loin d'être terminée.

S'ajoutera bientôt un menu horizontal dans l'entête, etc...
Merci
Modifié par ramold (24 Feb 2011 - 23:32)
Sujet clos
Aller à