Sujet Précédent Sujet Suivant

Modifier un peu mon menus css

Résolu/Fermé
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 - 16 avril 2013 à 00:26
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 - 17 avril 2013 à 23:02
Bonsoir,

Je ne m'y connais pas trop en CSS mais le problème c'est que j'ai un code de plus de 50 lignes qui sert à faire un menus.
J'aime trop ce menus avec les couleurs et la façon dont il est fait mais je trouve qu'on pourrait un peu le modifier.

Tout d'abord, le voici en image :
https://www.cjoint.com/c/CDqaslg9STh

Afin de rendre son utilisation plus facile, j'aimerais si possible que le page 1, page 2, page 3 soit centré sous le "Screenshots".
La petite flèche serait donc au niveau du second "E" de "Screenshots" et ce qui apparaît en dessous lors du survol de la souris se trouve encore sous cette flèche et si possible, que les rectangles soient plus larges.

Ce que j'aimerais que ça donne :
https://www.cjoint.com/c/CDqay5s2fwB

J'ai fais ça vite fait avec Paint mais le design c'est ça.
Je suppose qu'il suffit de modifier quelques chiffres mais j'ai du mal à m'en sortir.

Merci beaucoup à ceux qui voudront bien se pencher sur le code.

Le voici : 

<html>
<head>
<style>
#menu{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 18px/29px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
</head>
<body>

<ul id="menu">
        <li><a href="#">Accueil</a></li>
        <li>
                <a href="#">Screenshots</a>
                <ul>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                </ul>
        </li>
		<li>
                <a href="#">Vidéos</a>
                <ul>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                </ul>
        </li>
        <li><a href="#">Inscription</a></li>
</ul>


</body>
</html>
A voir également:

3 réponses

Réponse 1 / 3
epitale Messages postés 3942 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
16 avril 2013 à 00:45
bonsoir cocodu67;
dans ton html ce que tu veux modifier correspond a #menu ul
donc dans le css la partie #menu ul{ ajoutes
margin-left:2Opx; ou 30 ou autre faut tâtonner pour adapter

mais esthétiquement peut etre il faut que la largeur grisé des sous menu soit égale a la largeur des item menu dans ce cas
#menu ul{ width:150px;
et pour décaler un peux le texte du bord
padding-left:5px;

enfin tatonnes, comprend comment fonctionne le css, ici dans la div qui a pour id "menu" les bloc de list ul (donc les sous menu) on atteint leur proriété avec #menu ul{ , pour les lignes dans les sous menu cela serai #menu ul li{
--
0
Réponse 2 / 3
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
16 avril 2013 à 00:58
Ah merci c'est ce que je souhaitais faire :)

Mais maintenant il y a un soucis car la largueur du mot SCREENSHOTS est supérieure à celle du mot VIDEOS du coup quand je met le curseur sur VIDEOS c'est tout moche alors que sur SCREENSHOTS c'est bien centré ... je suppose qu'on ne peut rien faire puisque le menus déroulant se fait selon le même modèle à chaque fois.
0
epitale Messages postés 3942 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
16 avril 2013 à 01:08
pour changer "le modele a chaque fois"
dans ton html
<a href="#">Screenshots</a>
<ul>
<li><a href="#">Page 1</a></li>
remplace <ul> par <ul id="ss_screenshot">
idem pour ul video id= ss_video
du coup dans ton css
#menu ul{
peux etre remplacé par avec #ss_screenshot{} et #ss_video
garde #menu ul{ pour les propriété commune a #ss_screenshot et #ss_video
0
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
16 avril 2013 à 01:12
Bon je vais dormir un peu, je ferais ceci demain et je posterais le code complet pour ceux que ça intéresse.

Juste encore une question même si je pense que tu vas dire "oui" :
Est ce qu'il est préférable de mettre le code CSS dans un autre fichier que le html ?

Bonne nuit :)
0
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
16 avril 2013 à 01:14
Il y a juste un truc que j'ai pas compris

#menu ul{
peux etre remplacé par avec #ss_screenshot{} et #ss_video
garde #menu ul{ pour les propriété commune a #ss_screenshot et #ss_video

Tu dis de remplacer et après tu dis de garder.

Oui j'ai du mal ... je vais dormir.
0
Réponse 3 / 3
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
17 avril 2013 à 23:02
Bonsoir,

En faite j'ai trouvé un problème, si je laisse #menu ul ce sont les paramètres indiqués dedans qui sont utilisés à chaque fois même si j'ai mis un id sur les ul et que j'utilise ces id.

Voici le code final : 

<html>
<head>
<style>
#menu{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 18px/29px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */



#ss_screenshots{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
	width:150px;
	margin-left:19px;	
}

#ss_videos{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
	width:100px;
	margin-left:10px;	
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
</head>
<body>

<ul id="menu">
        <li><a href="index.html">Accueil</a></li>
        <li>
                <a href="#">Screenshots</a>
                <ul id="ss_screenshots">
                        <li><a href="screenshots_page1.html"><center>Page 1</center></a></li>
                        <li><a href="screenshots_page2.html"><center>Page 2</center></a></li>
                        <li><a href="screenshots_page3.html"><center>Page 3</center></a></li>
                </ul>
        </li>
		<li>
                <a href="#">Vidéos</a>
                <ul id="ss_videos">
                        <li><a href="videos_page1"><center>Page 1</center></a></li>
                        <li><a href="videos_page2"><center>Page 2</center></a></li>
                        <li><a href="videos_page3"><center>Page 3</center></a></li>
                </ul>
        </li>
        <li><a href="inscription.html">Inscription</a></li>
</ul>


</body>
</html>


Bien sûr, je rajouterais certainement une ou deux catégories dans le menus mais c'est bon j'ai compris comment ça fonctionne :)

Merci de ton aide.
Bonne nuit
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses