28220 sujets

CSS et mise en forme, CSS3

Bonjour, voila j'explique mon probleme:

Je tente de faire un petit menu en css mais le probleme c'est que le texte n'est pas centré verticalement, voici un screenshot: ici je souhaiterais descendre le bienvenue de quelques pixels

j'ai essayer du padding mai cela créer des espaces entre chaque éléments du menu et le margin-top me decale l'image de bg comme sur ce screen

Voici mon css:
	#debut_menu {
	  margin-left: 10px;
		display: block;
		width:153px;
		height:35px;
		color: #9E0B0E; 
  	text-align:center;
  	text-decoration:  underline;
  	font-weight: bold;
		background: url("images/menu_haut.gif");
}

	#section {
	  margin-left: 10px;
	  display: block;
		width:153px;
		height:22px;
		color: #9E0B0E; 
  	text-align:center;
  	text-decoration: none;
		background: url("images/menu_titre.gif");
}
	#rubriques a {
	  margin-left: 10px;
		display: block;
		width: 153px;
		height: 22px;
		background: url("images/menu_rollover.gif");
		text-decoration: none;
    font: italic 0.8em Georgia, "Times New Roman", Times, serif;
    text-align: left;
    text-indent: 32px;
    color: #0986BB;
}

Voici mon html:
<div id="debut_menu">
Bienvenue
</div>   
<div id="section">
Section 1
</div>                      
<div id="rubriques">
	<a href="">Rubrique 1</a>
	<a href="">Rubrique 2</a>
	<a href="">Rubrique 3</a>
	<a href="">Rubrique 4</a>
</div>  


quelqu'un pourrais t'il m'eclaircir svp ?
Modifié par wikee (11 Nov 2005 - 02:43)
Salut.
tu peux essayer avec un padding-height a condition de diminuer le height du div #debut_menu d'autant de px que ce que tu mets de padding
Administrateur
Hello et bienvenue ici,

Pourquoi as-tu scindé ton menu en plusieurs blocs séparés ? Smiley sweatdrop
Ça ne va pas te faciliter les choses.

Pour ma part, j'aurais utilisé un bloc global (un seul div) contenant une seule et simple liste* (soit une liste non ordonnée (ul), soit une liste de définition (dl)) afin d'avoir une seule structure globale plutôt que des morceaux.
Ça t'évitera aussi de devoir jouer avec le placement de chacun des morceaux.

Tu as un exemple ici, et voici le tutoriel associé.

PS : de plus, les termes comme "Bienvenue" ou "section 1", qui sont soit des titres (<h*>) soit des paragraphes (<p>) ne devraient pas être structurés par une balise neutre comme <div> afin de leur donner du sens.

PS2 : pour le centrage vertical, ou toute autre question préquemment posée, n'oublie pas de consulter la FAQ.

Bonne chance Smiley smile

------
* une liste puisqu'il s'agit bien d'une liste de liens Smiley cligne
Modifié par Raphael (11 Nov 2005 - 09:59)