Discussion :

[edertef]

Bonjour,

Je suis débutant dans le css et là je dois avouer que je bloque méchamment !
Je sais que le titre n'est pas très parlant mais je vais faire de mon mieux pour expliquer mon problème.



Pour commencer, je souhaite obtenir ceci :

( C'est un screen de mon template réalisé avec photoshop )


Donc, je me suis bravement lancé dans la découpe puis le codage en CSS.
Avec un texte normal j'obtiens ça :



Comme vous pouvez le voir, il n'y a aucun problème et avec quelques lignes dans mon css , j'arrive à centrer le texte sans le moindre soucis.

MAIS, en suivant les conseils d'un tuto, je souhaiterais mettre mes liens du menu sous forme d'une liste mise horizontalement. Le problème, c'est que, à peine ma liste pointe le bout de ses puces que mon image est décalé vers le bas !



Voici mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px
}
#top{
	height:152px;
	background:url(theme/IMAGE-BLEUE.png) no-repeat top center;
	font-size:45px;
	text-align:center;
	/* marge au dessus - aucune incidence sur le bas*/
	margin:10px 0 0 0;
	/*  si valeur plus petit, ça me coupe le bas de mon image bleue*/
	line-height:152px;
	padding:0;
}
 
#conteneur{
	width:783px;
	margin:0 auto;
} 
#menu{
	background:url(theme/IMAGE-VERTE.png) no-repeat center;
	height:68px;
	/* ça me décale que le texte ( normal en même temps ...)*/
	line-height:68px;
	}
 
#menu ul li{
/* on enlève les ptites puces*/
list-style:none;
/* ça ne s'empile plus mais s'aligne horizontalement*/
float:left;
 
/* je met des margin:0 et des padding:0 à toutes les sauces pour tester mais ça change rien...*/
margin:0px;
padding:0px;
}

Je pense que c'est vraiment tout bête mais ça fait quelques heures que je suis dessus et je commence à devenir fou !

J'espère qu'une âme charitable aura la solution à ce problème, sur ce, je vous remercie d'avance !

Edit : Je suis sous Firefox ( 3.0.4 ). Et apparement , sous IE7 je n'ai pas ce décalage ... la honte

[c_s_s]

Bonjour,

Il reste peut-être des marges sur le UL

Essaie en mettant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu ul {
	padding: 0;
	margin: 0;
}

[edertef]

Holalala, j'étais persuadé d'avoir essayé ça pourtant ...

Hé bin, c'était vraiment tout simple Oo, je te remercie !

Yeah, passons à la suite