28173 sujets

CSS et mise en forme, CSS3

Hauteur d'un bloc et centrage des liens d'un menu

Salut tout le monde,
deux problèmes se posent à moi quant à la découpe d'une nouvelle interface web.

Le premier :
j'ai définie la hauteur max de mon bloc "header" à 75px.
Lorsque je rajoute un titre (<h1>) dans mon bloc, voilà que ce dernier augmente de 20 pixels :o


<div id="header">
	<h1>
		<a href="">IXSUNS</a>
	</h1>
</div>




#header {
background-image: url(../gfx/bg_header.gif);
height: 75px;
}
#header h1 a {
display: block;
width: 187px;
height: 44px;
background-image: url(../gfx/logo.gif);
background-repeat: no-repeat;
text-indent: -9999px;
width: 770px;
margin: 20px auto 0 auto;
text-align: center;
padding: 0;
}


Au début on pourrait penser que c'est du au margin-top de 20px mais non puisqu'il n'ajoute que 5px de plus à la hauteur totale.

Deuxième problème :
j'ai un menu sous cette forme :


<ul id="menu">
	<li>
		<a href="" title="Home" id="lien1">
			<span>What's New</span>
		</a>
	</li>
	<li>
		<a href="" title="Product" id="lien2">
			<span>Product</span>
		</a>
	</li>
</ul>




#menu a {
display: block;
float: left;
padding: 10px 20px 0 0;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #363636;
height: 40px;
border-top: 1px solid #fff;
}


Le menu prend donc toute la largeur de l'écran mais j'aimerai que les liens se trouvent dans un bloc de 780px de largeur, et le bloc doit-être centré par rapport à la page.
Donc en fait je me demande s'il ne vaut mieux pas créer un bloc qui servira de background au menu et qui lui fera toute la largeur de la page et y superposer mon menu faisant 780px de largeur de façon à pouvoir le centrer ?

Merci d'avance.
koskoz a écrit :
Au début on pourrait penser que c'est du au margin-top de 20px mais non puisqu'il n'ajoute que 5px de plus à la hauteur totale.

Le margin-top de 20px s'applique à #header h1 a. Tu n'as pas spécifié les marges du h1 lui-même, qui doivent donc avoir les valeurs par défaut.

koskoz a écrit :
Donc en fait je me demande s'il ne vaut mieux pas créer un bloc qui servira de background au menu et qui lui fera toute la largeur de la page et y superposer mon menu faisant 780px de largeur de façon à pouvoir le centrer ?

C'est effectivement une solution.
Florent V. a écrit :

Le margin-top de 20px s'applique à #header h1 a. Tu n'as pas spécifié les marges du h1 lui-même, qui doivent donc avoir les valeurs par défaut.


Tiens, c'est intéressant à savoir ça.
Je ne pensais pas du tout qu'en nommant un bloc de la sorte les attribus spécifiés ne s'appliquaient pas "totalement".

Tu n'aurais pas de la doc là-dessus stp ?
koskoz a écrit :
Je ne pensais pas du tout qu'en nommant un bloc de la sorte les attribus spécifiés ne s'appliquaient pas "totalement".

Heu... ben c'est pas si étrange que ça... Smiley sweatdrop

Tu appliques des propriétés CSS à un élément a. Au nom de quoi ces propriétés devraient-elles s'appliquer aussi au h1 parent de cet élément a ? Il n'y a aucune raison.

Imagines que tu aies un div conteneur global, enfant de body. Si tu passes des propriétés CSS à ce div global, tu ne t'attends pas à ce qu'elles s'appliquent également à body, si ?

koskoz a écrit :
Tu n'aurais pas de la doc là-dessus stp ?

Les spécifications CSS ? Le fonctionnement des sélecteurs CSS ? La notion de cascade ?
http://www.w3.org/TR/CSS21/ (en anglais)
http://openweb.eu.org/articles/initiation_css/
http://openweb.eu.org/articles/cascade_css/
Sujet clos
Aller à