Mise en page menu

Version imprimable

1 pièce(s) jointe(s)

Mise en page menu

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 :

Pièce jointe 170467

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:

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

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

Code:

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 ;)

1 pièce(s) jointe(s)

Je viens de faire ça vite fait sous linux avec vim:
Pièce jointe 170472

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

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

Code:

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.

01/03/2015, 23h30
rico83600

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 !
02/03/2015, 09h02
vinou33
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:

1 2 padding: 8px 0 0 0;
par ces deux lignes (mets les deux, on va s'assurer que ça passe)
Code:

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:

1 2 max-width:100px;
02/03/2015, 19h12
NoSmoking

Citation:

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.