positionnement lien dans une div "extensible" [Résolu]

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,

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

26/04/2011, 08h46	#3
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	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"> </div> Elle n'apporte rien au problème.
	00

27/04/2011, 12h41	#4
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	En fait je veut que le lien ai l'air centré dans la div menulinkdiv
	00

28/04/2011, 08h46	#10
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	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?
	00

28/04/2011, 15h30	#12
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	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
	00

27/04/2011, 13h29	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email