Graph-Design • Ptit souci de codage en CSS : Support général

Ptit souci de codage en CSS

27 messages • Page 1 sur 3 • 1, 2, 3

Graphiste

Messages: 796

Age: 40 ans

Inscription: 27/03/2010
Localisation: par ici ou par là
Logiciels: Ps, Ai, Id

Posté: Lun 21 Juin 2010 11:41

Coucou !

J'ai un souci de codage sur le CSS de mon portfolio au niveau de la navigation :suspect:

Voilà les copies d'écran puis le code concernant la navig ensuite :

Si je rajoute la propriété float:right; à #navigation ul li a , le menu s'inverse :roo:

J'ai essayé avec les margin et les padding mais rien à faire.

Le code css :

Code: Tout sélectionner: #navigation { height:37px; margin-top: 10px; background-image:url(img/nav.jpg); background-repeat:repeat-x; } #navigation ul li { list-style:none; display:inline; } #navigation ul li a { padding-left:20px; text-decoration: none; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; }

J'ai enlevé la propriété float du CSS.

Le bout de code html au cas où :

Code: Tout sélectionner: <div id="navigation"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">A propos</a></li> <li><a href="#">Contact</a></li> </ul> </div>

Merchi pour votre aide :hi:

Dernière édition par Zoé le Lun 21 Juin 2010 15:41, édité 1 fois.

salstick Profil salstick Site Internet salstick Animateur Messages: 655 Age: 43 ans Inscription: 11/03/2010 Localisation: région parisienne,Bientôt Aveyronnais ... Message Perso: Vagabond du Net	Posté: Lun 21 Juin 2010 15:07 Dernière édition par salstick le Lun 21 Juin 2010 15:36, édité 1 fois.
Haut

Zoé Profil Zoé Site Internet Zoé Graphiste Messages: 796 Age: 40 ans Inscription: 27/03/2010 Localisation: par ici ou par là Logiciels: Ps, Ai, Id	Posté: Lun 21 Juin 2010 15:35 Oups ! Merci salstick (quand je dis que j'ai des gènes de blonde ) J'ai corrigé le code du coup^^ Dernière édition par Zoé le Lun 21 Juin 2010 15:39, édité 1 fois.
Haut

salstick Profil salstick Site Internet salstick Animateur Messages: 655 Age: 43 ans Inscription: 11/03/2010 Localisation: région parisienne,Bientôt Aveyronnais ... Message Perso: Vagabond du Net	Posté: Lun 21 Juin 2010 15:38 ata désolé j'ai dit une counerie avec le display le width met le souk c'est pas ca :s
Haut

Graphiste

Messages: 796

Age: 40 ans

Inscription: 27/03/2010
Localisation: par ici ou par là
Logiciels: Ps, Ai, Id

Posté: Lun 21 Juin 2010 16:10

du coup, j'ai enlevé le width

Edit : ayé je crois tenir quelque chose sauf que j'ai tous les liens les uns sur les autres :s

Code CSS :

Code: Tout sélectionner: #navigation { height:37px; margin-top: 10px; background-image:url(img/nav.jpg); background-repeat:repeat-x; } #navigation ul li { list-style:none; display:inline; } #navigation ul li a { position:absolute; right:400px; padding-right:20px; text-decoration: none; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; }

Ce qui donne en image :

salstick Profil salstick Site Internet salstick Animateur Messages: 655 Age: 43 ans Inscription: 11/03/2010 Localisation: région parisienne,Bientôt Aveyronnais ... Message Perso: Vagabond du Net	Posté: Lun 21 Juin 2010 17:10 comme ca il est a droite Code: Tout sélectionner `#navigation { height:37px; margin-top: 10px; background-image:url(img/nav.jpg); background-repeat:repeat-x; } #navigation ul li { list-style:none; margin: 10px; float: right; display:inline; }`
Haut

Zoé Profil Zoé Site Internet Zoé Graphiste Messages: 796 Age: 40 ans Inscription: 27/03/2010 Localisation: par ici ou par là Logiciels: Ps, Ai, Id	Posté: Lun 21 Juin 2010 17:16 Ça marche pas, il est à l'envers et je peux pas le placer où je veux le mettre :s
Haut

Animateur

Messages: 655

Age: 43 ans

Inscription: 11/03/2010
Localisation: région parisienne,Bientôt Aveyronnais ...
Message Perso: Vagabond du Net

Posté: Lun 21 Juin 2010 17:20

Code: Tout sélectionner: #navigation { height:37px; margin-top: 10px; background-image:url(img/nav.jpg); background-repeat:repeat-x; } #navigation ul li { list-style:none; margin: 10px; float: right; margin-right:60px; display:inline; }

et le html "inverser"

Code: Tout sélectionner: <body><div id="navigation"> <ul> <li><a href="#">Contact</a></li> <li><a href="#">A propos</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Accueil</a></li> </ul> </div>

pataapé lool :xpdr:

Zoé Profil Zoé Site Internet Zoé Graphiste Messages: 796 Age: 40 ans Inscription: 27/03/2010 Localisation: par ici ou par là Logiciels: Ps, Ai, Id	Posté: Lun 21 Juin 2010 17:22 vi ça marche mais je veux le menu aligné à droite là où j'ai mis la flèche sur la première copie d'écran. Et impossible Je sais suis pénible
Haut

salstick Profil salstick Site Internet salstick Animateur Messages: 655 Age: 43 ans Inscription: 11/03/2010 Localisation: région parisienne,Bientôt Aveyronnais ... Message Perso: Vagabond du Net	Posté: Lun 21 Juin 2010 17:29 bééé la je sèche a mon avis c'est le display qui nous met dedans mais je vois pas pk micka pourras surement nous éclairer désolé de ne pas pouvoir t'aider mieux
Haut