Mise en page menu

**rico83600** · 01/03/2015, 19h59

Bonjour,

voici une capture de mon menu. J'ai intentionnellement mis une bordure à droite de chaque élément de mon menu afin de repérer le problème :

Nom : capture menu.PNG
Affichages : 128
Taille : 17,7 Ko

Ce qui me gène, c'est qu'il y a parfois un écart entre la fin de mon texte et la bordure de droite, comme si il y avait des espaces..
Comme on peut le voir, ma bordure droite est collée à "Accueil", puis respect la marge que j'ai indiqué. Mais pour "Suivi de grossesse" et "Après la naissance", j'ai un énorme espace avant la bordure de droite.... S'il vous plait aidez moi...

Je fais mon site sur Weebly donc je n'ai pas accès à mon html, mais par contre pour le CSS c'est la cas alors je vous le met ici :

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
#navigation {
	position: relative;
	width: 869px; 
	height: 85px; /* 39 */
	z-index: 2;
	background: url(navigationbg4.png) no-repeat;
}
 
#navigation ul li {
	display: inline;
	float: left;
	font-size: 13px;
	margin: 0 0 0 15px; /* 15 */
	padding: 8px 0 0 0;
}
 
#navigation ul li a {
	display: inline-block;
	color: #d40058;
	border-right: 2px solid; 
        border-color: #696969;
        max-width : 115px;
        height: 30px;
}
 
#navigation ul li a:hover,
#navigation ul li#active a {
	color: #f763b0; /*ec7aaa pour une couleur identique à "sage femme"*/
	text-decoration : underline;
}

Ce que je souhaite donc, c'est que la bordure de droite soit toujours collé à la dernière lettre sinon je perd de la place et je ne peux plus mettre tout ce que je veux... et en plus c'est plus très beau car l'écart devient différent des autres... (par contre je ne veux pas que les différents cellules aient la même largeur absolue, je veux que ca s'adapte à la taille des mots !)

Merci d'avance

**NoSmoking** · 01/03/2015, 21h16

Bonjour,
si tu peux modifier ton texte dans ce cas force les sauts à la ligne avec un <br>

Code html :

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

1
2
3
4
5
6
7
8
<ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Suivi de<br>grossesse</a></li>
  <li><a href="#">Préparation à<br>la naissance</a></li>
  <li><a href="#">Après la<br>naissance</a></li>
  <li><a href="#">Rééducation</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Pour info Accueil et non Acceuil

**vinou33** · 01/03/2015, 21h18

Je viens de faire ça vite fait sous linux avec vim:

Nom : dev.jpg
Affichages : 133
Taille : 19,3 Ko

J'ai changé par contre pour table-cell au niveau du display.

Regardez le code, vous verrez ptet quelques modifications à apporter au votre ^^:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<html>
	<head>
	</head>
	<style>
		#navigation {
			width:800px; 
			padding-top:15px;
			padding-bottom:15px;
			margin:auto;
			background-color:black;
			text-align:center;
		}
 
		#navigation ul{
			margin:0px;
			vertical-align:middle;
			width:100%;
			padding-left: 0px;
 
		}
		#navigation ul li {
			margin-left:0px;
			display: table-cell;
			border-left:1px solid white;
			vertical-align:middle;
			padding:0px 15px 0px 15px;
		}
 
		#navigation ul li a {
			color:white;
			text-align:center;
		}
 
		#navigation ul li a:hover,
		#navigation ul li#active a {
			text-decoration : underline;
		}
	</style>
	<body>
		<br/>
		<div  id="navigation">
			<ul><li><a href="?">Accueil</a></li>
				<li><a href="?">Suivi de grossesse</a></li>
				<li><a href="?">Preparation de naissance</a></li>
				<li><a href="?">Apres la naissance</a></li>
				<li><a href="?">Suivi gynecologique</a></li>
				<li><a href="?">Reeducation</a></li>
				<li><a href="?">Contact</a></li>
			</ul>
		</div>
	</body>
</html>

Bonne soirée, en espérant que cela vous aide. Prenez la partie entre les balises style ^^.

MODIF: écoutez plutôt NoSmoking, il s'y connait mieux. Mais bon, mettre un écart à droite, ce serait ptet jouer sur le padding-right du li et par exemple mettre aussi 8px plutôt que zéro.

**rico83600** · 01/03/2015, 23h30

Merci pour vos réponses.
Cependant je n'ai pas accès au code HTML donc on peut oublier les <br> ...

Le site Weebly ne donne accès qu'aux feuilles de style CSS.

Vinou33, j'ai recopié ton code CSS, ça à l'air d'arranger les choses, mais cependant tout est sur une seule ligne.. (je pense que c'est à cause des <br> que je ne peux pas mettre).

Allez, montrez moi que le CSS à les moyens de me faire ca !

Merci d'avance pour votre aide !

**vinou33** · 02/03/2015, 09h02

Je pense que cela vient plutôt de la longueur de la div de navigation et du font-size à 13px.
Mais bon, il faudrait tester le décalage de droite en changeant au sein de ton css (celui de ton premier message) sur les li :

Code :

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

1
2
 
	padding: 8px 0 0 0;

par ces deux lignes (mets les deux, on va s'assurer que ça passe)

Code :

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

1
2
3
 
	padding: 8px 8px 0 0;
        padding-right:8px !important;

Après, si tu veux un retour à la ligne avec un font à 13 et du 869px, tu devrais tester toujours sur les li:

Code :

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

1
2
 
	max-width:100px;

**NoSmoking** · 02/03/2015, 19h12

Allez, montrez moi que le CSS à les moyens de me faire ca !

on ne peut pas te montrer ce que le CSS ne peut pas faire à ta place, j'ai du mal à comprendre pourquoi tu ne pourrais pas modifier le HTML.

Mise en page menu

CSS

Vue hybride

Discussions similaires

Partager

Partager