Menu vertical.

Menu vertical. - HTML/CSS - Programmation

Marsh Posté le 21-06-2005 à 16:35:02    

bonjour
 
 je viens de crée un menu vertical:
 
 http://img28.echo.cx/img28/4228/sanstitre1jpg0qj.jpg
 
 Et je voulais que quand on met le curseur sur un lien, il met le fond en noir et
 l'ecriture en blanc, voila mon code :
 
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  5. .menu  {
  6. height:30;
  7. width:150;
  8. background-color : gray ;
  9. border: 2 solid #black;
  10.        }
  12. .menu a {
  13. width:100%;
  14. border: 2 solid #black;
  15. text-decoration: none;
  16. color: black;
  17.         }
  19. .menu a:hover  {
  20. background-color: black;
  21. color: #ffffff;
  22.                }
  25. </style>
  27. </head>
  28. <body>
  30. <ul class="menu">
  31. <li><a href="#">1er</a></li>
  32. <li><a href="#">2eme</a></li>
  33. <li><a href="#">3eme</a></li>
  34. <li><a href="#">4eme</a></li>
  35. <li><a href="#">5eme</a></li>
  36. <li><a href="#">6eme</a></li>
  37. <li><a href="#">7eme</a></li>
  38. <li><a href="#">8eme</a></li>
  39. <li><a href="#">9eme</a></li>
  40. <li><a href="#">10eme</a></li>
  41. </ul>
  47. </body>
  48. </html>


 
 le problème, c'est que quand je vais sur un lien :
 
 http://img28.echo.cx/img28/5092/sanstitre25bn.jpg
 
 La bordure du lien se met elle aussi en blanc.
 
 
 J'ai fait un effort pour toi Masklinn, pour l'hortographe et la présentation,
 j'espere que c'est clair pour vous
 pouvez vous m'aidez ????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 16:35:02   

Reply

Marsh Posté le 21-06-2005 à 16:43:08    

border: 2 solid #black;


A mon avis, le #black ne risque pas de fonctionner. Et pis c'est 2 quoi ? Pieds ? Voitures ? Oranges ? :D

border: 2px solid black;

Reply

Marsh Posté le 21-06-2005 à 16:43:23    

Pareil pour les autres unités, il faut toujours préciser ce que c'est...

Reply

Marsh Posté le 21-06-2005 à 16:48:14    

+1 pour FlorentG
 
et +1 pour notre ti Rintintin (ouais j'en fais exprès lol) au moins tu essaye de te mettre aux normes

Reply

Marsh Posté le 21-06-2005 à 17:31:02    

FlorentG a écrit :

border: 2 solid #black;


A mon avis, le #black ne risque pas de fonctionner. Et pis c'est 2 quoi ? Pieds ? Voitures ? Oranges ? :D

border: 2px solid black;



 
hooooooooooooooo merci FlorentG !! sa marche trop tranquille, merci beaucoup
 
a oui, j'ai une autre question:
 
comment faire ceci en CSS:
 
http://img257.echo.cx/img257/4647/sanstitre1copie9dp.jpg
 
 comment faut il resoner pour crée un site de cette façon ??????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 17:33:00    

de 2 manières
 
tu as ton block menu et tu lui met un float:left
et tu as un bloc Contenu normalement ca passe.

Reply

Marsh Posté le 21-06-2005 à 17:38:13    

oula j'ai pas très bien compris tu peus mieu t'espliqué stp
on vas dire que mon menu s'apelle "menu" et mon resumer de  
site s'apelle "resumer" comment faut il que je fasse ????
dit la maniere la mieu !!
 
merci d'avance


Message édité par robinpintrin le 21-06-2005 à 17:38:27

---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 17:55:18    

robinpintrin a écrit :

oula j'ai pas très bien compris tu peus mieu t'espliqué stp
on vas dire que mon menu s'apelle "menu" et mon resumer de  
site s'apelle "resumer" comment faut il que je fasse ????
dit la maniere la mieu !!
 
merci d'avance


Méthode 1:
tu mets un "float: left" sur "menu"
 
Méthode 2:
tu utilises "position: absolute" sur "menu" pour le placer sur la page et le sortir du flux, puis tu ajoutes une marge gauche à "résumé", légèrement plus grande que la taille du menu + le positionnement de celui-ci par rapport à la gauche de ton écran


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-06-2005 à 19:25:59    

ok ok merci j'ai bien compris se que tu as dit, jtm bien, tu es bien précis dans tes reponses, mais au faite, tu es un moderateur ou tu skouate tout le temps se forum ???
 
et une postion relative c'est quoi exactement ???


Message édité par robinpintrin le 21-06-2005 à 19:26:53

---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 19:27:22    

c'est un squatteur qui dont le niveau en XHTML/CSS/JS n'est pas négligable. En gros lis tous ses messages ils seront très instructifs.
 
c'est aussi valable pour FlorentG


Message édité par gatsusat le 21-06-2005 à 19:31:40
Reply

Marsh Posté le 21-06-2005 à 19:27:22   

Reply

Marsh Posté le 21-06-2005 à 19:30:36    

ok ok merci


---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 19:54:24    

mais comment on fait pour postionner un bloc en position
absolu à :200px de la gauche
            0  px du haut
 
???????????


Message édité par robinpintrin le 21-06-2005 à 20:02:50

---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 20:08:55    

pouet {
  position: absolute;
  top: 0;
  left: 200px;
}

Reply

Marsh Posté le 21-06-2005 à 20:51:34    

Je pense que la lecture des sites CSS Débutant, OpenWeb et AlsaCréations pourrait t'être utiles, parce que le positionnement et le flux font partie des bases des CSS.
 
Et non je ne suis pas modo ('sont tous des fachos [:mmmfff])
 
Pompage.net est également un très bon site, et ils font actuellement une suite d'articles  sur les CSS
 
Après tout ça, tu peux aller visiter ma sig, elle contient mes favoris de dev web.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-06-2005 à 21:29:09    

ps dans ton lien créez vos sites web, la source est ecrite en quoi ?????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 21-06-2005 à 21:31:39    

c'est juste l'export des bookmark de netscape ou firefox
 
mais ca reste du HTML orienté sauce netscape pour pouvoir faire l'import de ces bookmarks ailleurs

Reply

Marsh Posté le 21-06-2005 à 21:43:21    

robinpintrin a écrit :

ps dans ton lien créez vos sites web, la source est ecrite en quoi ?????


C'est du HTML violement modifié (du SGML quoi), c'est l'export des favoris de Firefox sans la moindre retouche [:petrus75]
 
Donc c'est super crade, mais ça m'emmerde de le nettoyer [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-06-2005 à 21:49:51    

ok lol je demande sa car la page a l'air vachement lourde !!
 
lol


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 00:38:21    

Précision :

Citation :

<!DOCTYPE NETSCAPE-Bookmark-file-1>


C'est très spécial ;)

Reply

Marsh Posté le 22-06-2005 à 10:54:54    

j'ai une autre question, en avançant dans mon site, je voulais crée un menu hrizontale voici mon code :  [:itm]  
 

Code :
  1. .menudroit  {
  2. width: 790px;
  3. height:40px;
  4. background-color: gray;
  5. border: 2px solid black;
  6. margin-top: 10px;
  7.             }
  9. .menudroit a {
  10. width: 10.6%;
  11. height: 99.9%;
  12. color: black;
  13. border: 2px solid black;
  14. text-align: center;
  15. margin-left: 0px;
  16. padding-top: 3px;
  17.              }
  19. .menudroit a:hover {
  20. background-color: black;
  21. color: pink;
  22. border: 2px solid black;
  23.                     }


 
Voici ce que cela me donne (sans compter les autres menu et les images du site)
 
http://img57.echo.cx/img57/1104/sanstitre1copie2ld.jpg
 
Il y a des espaces entre les différants lien ??? comment faire pour les enlever ?
Ex: entre les lien 3 et 4 il y a un espace qui ne fait pas parti du lien


Message édité par robinpintrin le 22-06-2005 à 11:40:29

---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 12:38:37    

hum t sur de ne pas nous donner le mauvais code, je lis menudroit donc je me pose des questions :S

Reply

Marsh Posté le 22-06-2005 à 13:03:31    

mais j'ai mis menu droit car il y avait deja "menu"( celui qui est vertical) mais esseye, sur ton bloc note !! tu verra !! sa fait comme moi !!!!  
 
Mon code HTML est celui la :
 

Code :
  1. <div class="menudroit">
  2. <a href="#">1er</a>
  3. <a href="#">3eme</a>
  4. <a href="#">4me</a>
  5. <a href="#">5eme</a>
  6. <a href="#">6eme</a>
  7. <a href="#">7eme</a>
  8. <a href="#">8me</a>
  9. <a href="#">9eme</a>
  10. <a href="#">10eme</a>
  11. </div>[


 
 
esqu'il est bien de crée un site en HTML avec que des boc en position absolu !!!!(en le metan centré avec des espaces sur les coté pour qu'il n'y est pas de jeu de barres de scroll ?????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 13:13:26    

normalment le div n'a pas de padding, tu fous les margin à 0 pour le A et un width 100%
ainsi que un border-collapse: collapse

Reply

Marsh Posté le 22-06-2005 à 13:14:07    

Et au passage, c'est pas une div qu'il faut utiliser, mais une liste :o

Reply

Marsh Posté le 22-06-2005 à 13:16:46    

+1 FlorentG, je ne lui dit pas, laissons le pour le moment déjà reussir son PB, ensuite il pourra passer à une liste

Reply

Marsh Posté le 22-06-2005 à 13:18:38    

pk, pourtant c'est un menu horizontalen, et quan je met   "ul" "li" "li" "li" "li" "li" "/ul", sa foire tout il met mes lien sur plusieur ligne(le nombre de li)


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 13:25:49    

il faut que tu mette float dans LI, tu aura ainsi une liste horizontale
 

Code :
  1. ul,li { float:left;
  2. list-style-type: none;
  3. margin: 0 1;
  4. padding: 0;}


Message édité par Badze le 22-06-2005 à 13:26:36
Reply

Marsh Posté le 22-06-2005 à 13:26:30    

le mieux c'est de fermer les LI
 
<ul>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
<ul>
 
c'est comme ça que doivent être les menus, aussi bien horizontaux que verticaux.
 
ensutie tu peux t'inspirer de http://css.maxdesign.com.au/listamatic/
pour trouver une liste à ton gout et la remanier pour ton site

Reply

Marsh Posté le 22-06-2005 à 13:28:41    

http://css.alsacreations.com/xmedi [...] zontal.htm
 
fais le tour de different CSS, tu comprendra a fur et a mesure, je tire encore dure mais avec le temps et la pratique ça devrai arriver :p

Reply

Marsh Posté le 22-06-2005 à 19:01:21    

ok mais j'ai une question :
ça sert a quoi les balises <dl><dt><dd> ???????  pourquoi ça se peu que quand on met :
<ul>
 <li>...
 <li>...
 <li>...
 <li>...
</ul>
 
il affiche les liste sur une ligne et non a la ligne ??


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 19:02:44    

a oui dsl c'est bon j'ai trouver, on met un float: left !! merci ! quand meme
mais par contre pour <dl><dt><dd> je sais pas a quoi ça sert


Message édité par robinpintrin le 22-06-2005 à 19:03:24

---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 19:15:02    

j'ai mis float:left; et voici mon code :
 
 

Code :
  1. PARTIE CSS:
  3. .menudroit  {
  4. width: 790px;
  5. height:40px;
  6. background-color: gray;
  7. border: 2px solid black;
  8. margin-top: 10px;
  10. .menudroit  a {
  11. width: 10%;
  12. height: 99.9%;
  13. color: black;
  14. border: 2px solid black;
  15. text-align: center;
  16. foat: left;
  17. padding-top: 3px;
  18.              }
  19. .menudroit li  {
  20. float: left;
  21.               }
  23. .menudroit li a:hover {
  24. background-color: black;
  25. color: pink;
  26. border: 2px solid black;
  27. foat: left;
  28.                    }
  30. PARTIE HTML :
  32. <ul class="menudroit">
  33. <li><a href="#">1er</a></li>
  34. <li><a href="#">3eme</a></li>
  35. <li><a href="#">4me</a></li>
  36. <li><a href="#">5eme</a></li>
  37. <li><a href="#">6eme</a></li>
  38. <li><a href="#">7eme</a></li>
  39. <li><a href="#">8me</a></li>
  40. <li><a href="#">9eme</a></li>
  41. <li><a href="#">10eme</a></li>
  42. </ul>


 
et voila se que je vois :
 
http://img241.echo.cx/img241/6642/sanstitre1copie4sw.jpg
 
c'est completement bizard !!!! comment cela de fait ????


Message édité par robinpintrin le 22-06-2005 à 19:15:41

---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 19:18:51    

foat:left, ca existe pas.
 
float oui ^^'


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 22-06-2005 à 19:36:25    

oui merci mais ça change rien !!!!! toujours la meme presentation !!


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 20:42:37    

Y'a display: block; qui est aussi utile

Reply

Marsh Posté le 22-06-2005 à 20:44:42    

Eventuellement ca marchera mieux avec oui ;)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 22-06-2005 à 20:45:51    

robinpintrin a écrit :

a oui dsl c'est bon j'ai trouver, on met un float: left !! merci ! quand meme
mais par contre pour <dl><dt><dd> je sais pas a quoi ça sert


Read The Fucking Manual ?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-06-2005 à 21:02:16    

pareil !!!  sa change pas
 
PS sa sert a quoi de mettre display bloc ??


---------------
mon site perso aller visiter
Reply

Marsh Posté le 22-06-2005 à 21:05:32    

robinpintrin a écrit :

pareil !!!  sa change pas
 
PS sa sert a quoi de mettre display bloc ??


Read The Fucking Documentation?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-06-2005 à 21:05:38    

Bon... Va lire la documentation sur les CSS, t'en a bien besoin :(

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed