positionnement lien dans une div "extensible"

**Ceddoc** · 22/04/2011, 14h38

Bonjour à tous, alors voila mon problème:

Je suis en train de faire un menu de type "accordéon", pour ce faire j'ai une div "menu" qui rassemble toutes mes divs qui seront les boutons du menu. Jusque là tout va bien.
Chacun de ses boutons est en fait constitué de trois divs, une pour le haut de l'image du bouton, une pour le bouton lorsqu'il est étendu et l'autre pour le bas du bouton. Tout va bien, marche bien, mon problème n'a pas de rapport avec le fait d'"étendre" la div donc j'ai volontairement ignoré cette partie dans mon exemple de code.

Donc le problème est de positionner mon lien dans la partie supérieure du menu. J'ai essayé avec un margin-top sur le lien, absolument sans effet, un padding-top sur le conteneur, qui marche et positionne bien mon mien mais repousse la partie du bas et sépare donc mon bouton en deux parties (très moche). Je ne vois plus trop quoi essayer et j'en appelle a vous.

Voilà mon code simplifié:

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
38
 
<!DOCTYPE html>
<html>
<head>
  <style>
	.menulinkdiv {
	width:205px;
	height:25px;
	background-image:url('../images/menubtntop2.jpg');
	background-repeat:no-repeat;
}
 
.menulinkdivbottom {
	background-image:url('../images/menubtnbottom2.jpg');
	width:205px;
	background-repeat:no-repeat;
	height:10px;
}
 
.menulinkdiv a:link, .menulinkdiv a:visited, .amenulinkdiv a:hover {
	color:#fff;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	margin-left:5px;
	margin-right:5px;
}
  </style>
</head>
<body>
	<div id="menu">
		<div id="menutop">&nbsp;</div>
		<div class="menulinkdiv"><a href="#">mon lien 1</a></div>
		<div class="menulinkdivbottom">&nbsp;</div>
	</div>
 
</body>
</html>

et des images pour vous faciliter le test

http://img705.imageshack.us/img705/6250/menubtntop2.jpg
http://img577.imageshack.us/img577/3...btnbottom2.jpg

Voilà, j'attends vos questions/réponses

**NoSmoking** · 22/04/2011, 21h08

Bonsoir,

Donc le problème est de positionner mon lien dans la partie supérieure du menu.

pas tout bien saisie, le positionnement doit-il être en haut de la DIV contenante ou de la DIV id="menutop"...????

??? position:absolute sur la DIV contenante ???

**Ceddoc** · 26/04/2011, 08h46

Non le lien doit être centré verticalement dans la div, on peut ignorer la

Code :

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

<div id="menutop">&nbsp;</div>

Elle n'apporte rien au problème.

**Ceddoc** · 27/04/2011, 12h41

En fait je veut que le lien ai l'air centré dans la div menulinkdiv

**Bisûnûrs** · 27/04/2011, 13h29

1. Les marges ne fonctionnent pas sur des éléments inline.
2. Si tu renseignes un padding-top, tu dois en diminuer d'autant la hauteur. En effet, le padding s'ajoute au height hauteur dans le calcul de la hauteur totale de ton élément.

padding-top : 10px + height : 25px = hauteur 35px

**Ceddoc** · 27/04/2011, 13h40

Envoyé par Bisûnûrs

1. Les marges ne fonctionnent pas sur des éléments inline.
2. Si tu renseignes un padding-top, tu dois en diminuer d'autant la hauteur. En effet, le padding s'ajoute au height hauteur dans le calcul de la hauteur totale de ton élément.

padding-top : 10px + height : 25px = hauteur 35px

Parfait c'était exactement l'explication qu'il me manquait, tout est rentré dans l'ordre.

**NoSmoking** · 27/04/2011, 18h32

Envoyé par Ceddoc

En fait je veut que le lien ai l'air centré dans la div menulinkdiv

tu peux également utiliser la propriété line-height

Code css :

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

1
2
3
4
5
6
7
.menulinkdiv {
  line-height : 25px;
  width:205px;
/*  height:25px;/**/
  background-image:url('../images/menubtntop2.jpg');
  background-repeat:no-repeat;
}

**Ceddoc** · 27/04/2011, 18h41

Envoyé par NoSmoking

tu peux également utiliser la propriété line-height

Code css :

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

1
2
3
4
5
6
7
.menulinkdiv {
  line-height : 25px;
  width:205px;
/*  height:25px;/**/
  background-image:url('../images/menubtntop2.jpg');
  background-repeat:no-repeat;
}

Soit je l'ai mal utilisé soit ça ne fonctionne pas avec padding-top

**NoSmoking** · 27/04/2011, 18h58

Envoyé par Ceddoc

Soit je l'ai mal utilisé soit ça ne fonctionne pas avec padding-top

je ne saisi pas trop ce qui ne fonctionne pas...

**Ceddoc** · 28/04/2011, 08h46

J'avais comprit que line height éviterait de jouer avec la hauteur et le padding, mais si c'est juste pour remplacer le height oui ça marche en effet, il y a un intérêt/avantage à utiliser line-height plutôt que height tout seul?

**NoSmoking** · 28/04/2011, 15h27

Envoyé par Ceddoc

J'avais comprit que line height éviterait de jouer avec la hauteur et le padding, mais si c'est juste pour remplacer le height oui ça marche en effet, il y a un intérêt/avantage à utiliser line-height plutôt que height tout seul?

line-height centre verticalement

**Ceddoc** · 28/04/2011, 15h30

Ah alors je connaissais pas et je n'ai pas vu de différence mais comme je n'attendais pas cet effet là je l'ai probablement mal utilisé, je testerais à l'occasion.

Merci de ton aide

positionnement lien dans une div "extensible"

Positionnement en CSS

Discussions similaires

Partager

Partager