28173 sujets

CSS et mise en forme, CSS3

Probleme d'espace à droite d'une liste horinzontale

bonjour,

je finis un feuille css concernant une barre de menu horizontale, et ca va tres bien par rapport à mes debuts sauf que pour que tous les elements de la liste apparaissent bien en ligne horizontale sans passer à la ligne, je dois declarer + que la valeur reelle pour la "width" et j'ai un espace vide à droite de ma liste qui ne sert à rien et que je ne sais pas supprimer.

http://www.versuscreations.be/test

je vous copie le code ci dessous, merci de m'aider si vous le pouvez!!

Smiley cligne 
#subheaderlinks ul {
	position: relative;
	height: 26px;
	list-style-type: none; 
   	padding: 0px;
	width: 675px;
	background-color: #123123;
  	white-space : nowrap;
	top: 18px;
 	}

#subheaderlinks ul li { 
	display: inline;
	float: left; 
	line-height: 26px; 
 	}

#subheaderlinks ul li a {
	font: normal 9pt Arial; color: #ffffff; text-decoration: none;
	letter-spacing: 2px;
	padding: 6px 19px 5px 18px;
	margin: 0;
	background-color: #787878;
	}

#subheaderlinks ul li a:hover {
	background-color:#F29200;
	color: #ffffff;
 	}

body#accueil a#accueil, body#news a#news, body#produits a#produits, body#catalogue a#catalogue, body#acces a#acces, body#contact a#contact, body#webshop a#webshop {
   	background-color: #F29200;
   	font-weight:normal;
   	}

.inner {
	border-left: 2px solid #FFFFFF;
	}
As tu compté correctement tes marges et padding ?

Chez moi (FF1.5 Linux) tous les liens ne sont pas sur la même ligne, le dernier est passé à la ligne.
toute ta page est alignée a gauche avec un espace vide a droite,
ce n'est pas que le menu
Modifié par jp94 (15 Apr 2006 - 12:08)
ben oui en fait je voulais avoir environ 20 px de "blanc" de part et d'autre de ma page, pour que le texte, la photo etc ne colle pas au bord, et à cause de cette liste horizontal, ca rate completement,
soit le dernier lien passe à la ligne, soit j'ai un espace noir à droite du dernier lien que je n'arrive pas a supprimer
pour mes margins et padding, c'est un peu pour cela que je poste, je suis paumé...
merci de regarder, je continue a chercher en ce moment un post similaire..mais nada! Smiley decu
je n'aime pas les position:absolute et relative surtout quand elles sont inutiles.
Ici ta page peut-etre realisée tout dans le flux excepte le menu avec un float:right et tu t'ennuies a coder des left , des top etc....
refais la dans le flux normal tu t'en sortiras mieux
ok donc tu veux dire que je dois retirer tous mes attributs position:relative, et ca ne va rien changer??

mais pour le bloc foncé à droite des liens, que faire? pas moyen de le supprimer?

merci pour ton aide
Ok,

Comme vous pouvez le voir sur le lien ci-dessous, maintenant les liens occupent bien la totalité de l'espace mais chose bizarre, j'ai du appliquer une margin-right: -4px à subheaderlinks ul pour faire disparaitre l'espace genant et je suis obligé de travailler avec une plus grand width (ici 678 au lieu de 666 comme j'avais prevu mon design)

questions : est ce la seule solution? ais-je ce probleme car je travaille avec des padding sur mes balise a et que je rajoute alors de l'espace de part et d'autre de mes textes?

devrais je affecter une width bien precise a chaque lien alors??

l'espce automatique qui se place apres une liste horizontale semble etre un probleme recurrent pas souvent resolu, merci bcp de reflechir a cela et de m'eclairer...(en plus sur firefox il continue a etre visible)

LE LIEN


#subheaderlinks ul {
\*position: relative;
height: 26px;
list-style-type: none; 
  padding-right: -5px;
background-color: #123123;
  white-space : nowrap;
margin-top: 2px;
margin-right: -4px;
width: 678px;
 }

#subheaderlinks ul li { 
display: inline;
float: left; 
line-height: 26px; 
 }

#subheaderlinks ul li a {
font: normal 9pt Arial; color: #ffffff; text-decoration: none;
letter-spacing: 2px;
padding: 6px 18px 5px 20px;
margin-right: 0px;
background-color: #787878;
}
Sujet clos
Aller à