28172 sujets

CSS et mise en forme, CSS3

Attribut height sur un élément %block

bonjour,
je suis en train de positionner les différents blocks de mon 1er site avec du CSS après avoir lu le tutoriel "initiation au positionnement" sur ce site
je suis confronté à un souci

j'ai donc mis en html les blocks que je souhaite positionner de façon classique comme suit:
header
nav -------- section
footer

j'ai coloré ces balises pour bien voir les block avec l'attribut background-color

j'ai enlevé du flux le block <nav> avec l'attribut css positive:absolute

j'ai décalé le block section vers la gauche avec l'attribut margin-left: ...px

ça c'est parfait je retrouve la logique du tutoriel

je veux maintenant donner la hauteur définitive à mes blocks car la page n'est pas remplie en hauteur et le block footer est sous le block nav (logique car mon block nav contient une liste assez longue)

j'ai donc pensé à utiliser l'attribut height en indiquant des pourcentage et vérifier que la somme des pourcentages pour chaque block dans le flux est de 100% mais quand j'ajoute l'attribut height:20% dans le block header par exemple rien ne se passe ???

merci
j'y arrive en mettant l'attribut
padding-top: ... %;

mais ça me semble être une "mauvaise pratique"

je ne vois vraiment pas pourquoi l'attribut height ne répond pas alors que l'attribut width répond pour un élément block
Je pense que ce que tu cherches, ce sont les tableaux de mise en page, que Raphaël a très bien détaillé dans les slides de son atelier à Paris Web :
http://www.goetter.fr/conf/2011-parisweb/

Si tu n'y parviens pas avec cette technique, dépose ton code sur jsfiddle ou dabblet et nous pourrons te dépanner en direct.
mathier a écrit :

je veux maintenant donner la hauteur définitive à mes blocks car la page n'est pas remplie en hauteur et le block footer est sous le block nav (logique car mon block nav contient une liste assez longue)

j'ai donc pensé à utiliser l'attribut height en indiquant des pourcentage et vérifier que la somme des pourcentages pour chaque block dans le flux est de 100% mais quand j'ajoute l'attribut height:20% dans le block header par exemple rien ne se passe ???
i


Salut,

Juste un truc, ce dont tu parles ce sont des propriétés et des sélecteurs et non des attributs.
Essaie plutôt un :
 display:block;
bonjour,
j'ai donc essayé ce que vous m'avez dit:
#header {
  background-color:blue;
  [b]display; block;
  height:200px;[/b]
}

#nav{
	background-color: red;
	position:absolute;
}

#section{
	background-color: yellow;
	margin-left:200px;
}

#footer{
	background-color: green;
	[b]display;block;
	height:100px;[/b]

}

li{
	background-color:grey;
}


en utilisant un display: block je réussis bien à augmenter la hauteur du block "header" et "footer" grâce à la propriété height
par contre pas question d'écrire height:20% ça ne passe pas il faut des pixels
je ne comprends pas non plus pourquoi le display:block fonctionne . Si j'ai saisi cela permet de faire de "header" ou "footer" un block mais ça en est déjà un non?

merci
Re.
j'ai oublié de préciser aussi que le block "nav" se superposait avec le block "footer"
j'en suis à me demander si la 1ère étape de création de site est de positionner tous ses blocks avant même de placer du texte , des images etc ...
merci
voilà mon code css final.
tous les blocks sont en place. Est ce un point de départ valable?
la balise conteneur contient toute la page , elle fut mise dans la balise body
J'attends vos critiques 

html {
	font-size: 100%; /* pour éviter certains bugs sur IE décalage texte */
}

#conteneur 
{
width:750px;/* la largeur de la page est fixée pour une résolution d'écran min */
margin:auto;/* l'ensemble de la page est centré automatiquement*/
}

#header {
  background-color:blue;
  display; block;
  height:200px;
	
 
}

#nav{
	background-color: red;
	position:absolute;
}

#section{
	background-color: yellow;
	margin-left:200px;
	display; block;
	height:400px;
}

#footer{
	background-color: green;
	display;block;
	height:100px;

}

li{
	background-color:grey;
}


merci
mathier a écrit :

en utilisant un display: block je réussis bien à augmenter la hauteur du block
[...] Si j'ai saisi cela permet de faire de &quot;header&quot; ou &quot;footer&quot; un block mais ça en est déjà un non?


display[#red];[/#] block;
Attention aux coquilles.

De ce que j'ai compris les éléments de type block sont dimensionnables (width, height, etc) et occupent toute la largeur de leur parent (conteneur) contrairement aux éléments en ligne. Ce que je n'avais pas compris est qu'il s'agissait de div chez toi (je croyais que c'était de l'HTML5 avec header, nav et compagnie) et je croyais que tu faisais tes tests sur un navigateur qui ne les reconnaissait pas du coup (genre IE8). Mais effectivement les div sont en display:block par défaut donc tu peux modifier la taille directement.


Quant à

a écrit :
header:20%;
mais 20% de quoi?
Modifié par jmlapam (03 Mar 2012 - 01:36)
Sujet clos
Aller à