28221 sujets

CSS et mise en forme, CSS3

Faire d'un script horizontale un script vertical

bonjour je suis tous nouveau sur se site et je suis debutant et j'ai deja un probleme : j'ai vu un script en css qui permettait de faire un menu horizontale mais j'aimerai mettre ce menu en verticale . comment faire ? voila le code :

a écrit :
body {font: 14px Verdana, Arial, sans-serif;}


ul {
list-style-type: none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */

}
li { float: left;} /* on aligne les listes sur la gauche */

.menu a {
margin: 0 2px;
width: 100px; /* on définit la taille du bouton de menu */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray ;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}
Bonjour hitman et bienvenue sur le forum Alsacréations Smiley lol

Perso, je n'aime pas beaucoup voir associés « script » et « CSS ». Généralement, on parle d'une « feuille de style en cascade » ou d'une « feuille de style » ou encore de « déclarations CSS » et même de « code CSS ». Pour moi, un script c'est autre chose. Parce que dans les faits, le CSS est plus un langage de présentation qu'un langage d'automatisation de tâches.

Pour ta question, je t'invite à consulter les Tutoriels disponibles ici et en particulier la Galerie de menus. Tu y trouveras sans doute ton profit. Smiley cligne
j'ai compris que pour faire un menu horizontale il faut utiliser float ( j'espere que c'est sa ) mais pour le mettre en vertical quelle est le mot ?
Administrateur
hitman a écrit :
j'ai compris que pour faire un menu horizontale il faut utiliser float ( j'espere que c'est sa ) mais pour le mettre en vertical quelle est le mot ?

Ne rien utiliser, comme tu peux le voir dans l'exemple donné sur le tutoriel Smiley smile
Modifié par Raphael (22 May 2005 - 09:38)

<ul class="menu">
<br><a href="http://hitman95.free.fr/forum/">Forum</a></br>
<br><a href="...">Menu 2</a></br>
<br><a href="...">Menu 3</a></br>
<br><a href="...">Menu 4</a></br>
</ul>

beurk ! Smiley biggol
Administrateur
Pourquoi tu n'as pas laissé les items de liste (<li>) ???

Cela aurait réglé ton problème puisque les <li>, balises bloc, s'affichent par défaut les unes sous les autres.

De plus, maintenant tu te retrouves avec une liste (<ul>) sans élément de liste (<li>), ce n'est pas autorisé !
Modifié par Raphael (22 May 2005 - 10:39)
bon regarder :
voila mon style css :
a écrit :
ul {
list-style-type: none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */

}
li {} /* on aligne les listes sur la gauche */

.menu a {
margin: 0 2px;
width: 100px; /* on définit la taille du bouton de menu */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray ;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}



et voila mon menu.php

a écrit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" title="style" href="http://hitman95.free.fr/style.css" type="text/css">
</head>

<body>
<ul class="menu">
<li><a href="http://hitman95.free.fr/forum/">Forum</a></li>
<li><a href="...">Menu 2</a></li>
<li><a href="...">Menu 3</a></li>
<li><a href="...">Menu 4</a></li>
</ul>
</body>
</html>


et regardez ce que sa donne : http://hitman95.free.fr/index.php

donc faut faire quoi ? Smiley fache
Salut,

ceci fonctionne, apparemment. Si j'ai écrit une bêtise, on me corrigera.

ul {
list-style-type: none; 
 width: 100%;/* précision pour Opera */
}

li {margin:5px;
}

.menu {
margin: 0 2px;
width: 100px; /* on définit la taille du bouton de menu */
height: 20px;
text-align: center;
}

.menu a {
color: #000;
background: #fff;
text-decoration: none;
}

.menu a:hover {
background: #ccc;
border: 1px solid black ;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}
CCC raphael m'a dit de ne rien mettre et ma dit de regarder ce que donnais le menu en vertical mais comme je suis débutant en css il aurai ete plus judicieux de réécrire tout le css car je ne comprend toujours pas ce qu'il veut dire !
Administrateur
Raphael a écrit :

Ne rien utiliser, comme tu peux le voir dans l'exemple donné sur le tutoriel Smiley smile

Dans cet exemple, tu as exactement le code HTML et CSS que tu cherches ! Que veux-tu de plus exactement ?

hitman a écrit :
il aurai ete plus judicieux de réécrire tout le css

1- c'est exactement ce que j'ai fait : je t'ai donné un lien vers le menu vertical, y'a plus qu'à lire le code source
2- c'est exactement ce que Bouquins vient de faire : il te donne tout le CSS
3- Non, les membres du forum ne sont pas là pour te livrer tes codes sur un plateau.
Le but est que tu apprennes aussi un minimum de choses et à le faire toi-même par la suite.
Cependant, cela nécessite que tu apprennes les bases des CSS, mais tu n'as pas l'air motivé pour cela Smiley ohwell

Rappel des Règles :
Règle du forum a écrit :
16- Ceci est une communauté d'entraide, pas de travail à votre place
Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Modifié par Raphael (23 May 2005 - 10:46)
Sujet clos
Aller à