Help : site web et CSS

servane · Message par **servane** » lun. 15 févr. 10 10:38

Salut à tous.
Bon, j'ai pas mal cherché sur des forums et sites informatique, et je n'arrive pas à faire ce que je veux... Si par hasard quelqu'un pouvait m'aider (sinon je ferai autrement, avec du javascript ou mon copain le fera en silverlight)

voici mon code (c'est moche côté couleurs mais c'est pour arriver à voir ce que je fais

)

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.css-faciles.com/exemple-menu-deroulant2.htm -->
<HTML><HEAD><TITLE>Menu déroulant en CSS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
#menu {padding:0;margin:0;background-color:#00CED1;font-family: "Comic sans ms";white-space:nowrap;list-style-type:none;}

#menu li {display:inline;}
#menu li a {padding:0.2em 1em;color:#ff0000;text-decoration:none;}

/* couleur differente au survol de la souris pour les sous menu et les "basiques"*/ 
#menu li:hover {background: #7FFF00;}
#menu li.sousmenu:hover {background: #006400;}

#menu ul li {position:relative; list-style: none;}
#menu ul ul {position: absolute; top: -1px; left: 150px; display:none;white-space:nowrap;}

#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}
</STYLE> 

<BODY>
<div id="menu">
   <ul class="niveau1">
      <li><a href="/index.php" title="Accueil">Accueil</a></li>
      <li class="sousmenu"><a href="/photos/default.php" title="Photos">Photos</a>
         <ul class="niveau2">
            <li><a href="/photos/photo1.php" title="Photo 1">photo 1</a></li>
            <li><a href="/photos/photo2.php" title="Photo 2">Photo 2</a></li>
         </ul>
      </li>
      <li><a href="/videos/default.php" title="Vidéos">Vidéos</a></li>
      <li><a href="/livre_or/default.php" title="Livre d'or">Livre d'or</a></li>
   </ul>
</div>
</BODY></HTML>

mon but est d'afficher sur une même ligne les menus
"Accueil", "Photos", "Vidéos", "Livre d'or"
et quand je survole "Photos" j'aimerai que les sous-menus "photo 1" et "photo 2" soient affichés en colonne en dessous de "Photos".
Or là ça se met en ligne et par dessus le reste du texte et je ne peux même pas cliquer dessus car ça disparait le temps que le curseur y arrive!!!

j'ai fait tout plein d'essais avec display dans les CSS, en le mettant à différents endroits et avec différents attributs, mais j'arrive jamais à faire ce que je veux!!!

une autre question, est il possible avec les CSS que le lien actif reste d'une autre couleur (couleur de texte ou de fond) ? (c'est à dire que lorsque je clique sur vidéo, le texte devienne bleu par exemple et reste en bleu tant qu'on est sur la page vidéo ?

merci d'avance à ceux qui pourront me donner un coup de main!

R.Mike · Message par **R.Mike** » mar. 16 févr. 10 17:12

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.css-faciles.com/exemple-menu-deroulant2.htm -->
<HTML><HEAD><TITLE>Menu déroulant en CSS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}



</STYLE>
<script type="text/javascript">
<!--
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

-->
</script>

</HEAD>
<BODY>
<ul id="menu">

        <li>
                <a href="#">accueil</a>
        </li>
        
        <li>
                <a href="#">Photos</a>
                <ul>
                        <li><a href="#">Photos 1</a></li>
                        <li><a href="#">Photos 2</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Vidéos</a>
                <ul>
                        <li>
                                <a href="#">Vidéos A</a>
                                <ul>
                                        <li><a href="#">vidéos 1</a></li>
                                        <li><a href="#">vidéos 2</a></li>
                                </ul>

                        </li>
                        <li>
                                <a href="#">Vidéos B</a>
                        </li>
                </ul>
        </li>
        
        <li>
                <a href="#">livre d'or</a>
        </li>
        
</ul>

</BODY></HTML>

A tester

A partir de ce tutoriel

joeley · Message par **joeley** » mar. 16 févr. 10 18:54

Pourquoi ils ne parlent pas Français les ordinateurs...

R.Mike · Message par **R.Mike** » mar. 16 févr. 10 19:03

Non ils parlent anglais ... c'est pourtant clair ....

joeley · Message par **joeley** » mar. 16 févr. 10 19:10

A que oui!... Très clair...

R.Mike · Message par **R.Mike** » mar. 16 févr. 10 19:18

Si tu fais pas d'effort aussi ...

J'ai appris tout ces langages tout seul * ... du HTML au PHP mysql en passant par l'action script ... c'est un peu rebutant les premières heutres mais après c'est "presque" limpide.

* et je suis dessinateur de formation donc rien a voir avec l'info ...

joeley · Message par **joeley** » mar. 16 févr. 10 19:51

Avec mon CAP de dessinateur en construction mécanique, ça m'aide pas non plus...

servane · Message par **servane** » mer. 17 févr. 10 10:24

merci, je vais essayer.

entre temps j'ai enfin réussi à trouver d'autres exemples sur le web mais c'est pas évident d'adapter car dès que tu changes quelque chose ça fout tout en l'air!!!

R.Mike · Message par **R.Mike** » mer. 17 févr. 10 10:27

meuhhh non

servane · Message par **servane** » mer. 17 févr. 10 10:45

c'est marrant j'étais aussi tombée sur ce menu

je vais l'adapter à mon site maintenant!!!

merci

Jonpol · Message par **Jonpol** » mer. 17 févr. 10 11:11

R.Mike a écrit :J'ai appris tout ces langages tout seul .... les premières heutres mais après c'est "presque" limpide

'tout cas, ça laisse des séquelles

Servane, vous faites un site ?

R.Mike · Message par **R.Mike** » mer. 17 févr. 10 11:12

Jonpol a écrit :'tout cas, ça laisse des séquelles

c'est sur que c'est pas ton apprentissage de l'amenagement qui risque de te laisser des séquelles

Jonpol · Message par **Jonpol** » mer. 17 févr. 10 11:16

Avec vous c'est le non-aménagement qui m'en laisse

Est-il possible de ne pas dévier du sujet initial du post ?

R.Mike · Message par **R.Mike** » mer. 17 févr. 10 11:17

J'ai répondu et proposé une solution ... je suis d'abord venu sur ce sujet apporter une réponse constructive ... contrairement à certains ...

joeley · Message par **joeley** » mer. 17 févr. 10 12:04

Oui!?... On m'appelle?...