1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

[résolu] Elargir un menu en CSS à 100% du contenant

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par OTP, 6 Octobre 2014.

  1. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Bonsoir,

    Je me prends la tête sur un menu auquel je ne parviens pas à donner l'allure que je voudrais.

    Le menu : [​IMG]

    On le trouve là : -http://www.thewindpower.net/

    Il s'écrit ainsi :

    Code:
    <div class="menu">
    	<ul>
    		<li><a href="<? echo $path; ?>/index_fr.php" >&nbsp;&nbsp;Accueil&nbsp;&nbsp;</a></li>
    		<li><a href="<? echo $path; ?>/index_country_fr.php" id="current">Pays</a>
    			<ul>
    				<li><a href="<? echo $path; ?>/country_list_fr.php">Liste</a></li>
    				<li><a href="<? echo $path; ?>/country_worldmap_fr.php">Carte mondiale</a></li>
    				<li><a href="<? echo $path; ?>/country_africa_fr.php">Afrique</a></li>
    				<li><a href="<? echo $path; ?>/country_america_fr.php">Amérique</a></li>
    				<li><a href="<? echo $path; ?>/country_asia_fr.php">Asie</a></li>
    				<li><a href="<? echo $path; ?>/country_europe_fr.php">Europe</a></li>
    				<li><a href="<? echo $path; ?>/country_oceania_fr.php">Océanie</a></li>
    		   </ul>
    		</li>
    		<li><a href="<? echo $path; ?>/index_windfarms_fr.php" id="current">Parcs</a>
    			<ul>
    				<li><a href="<? echo $path; ?>/windfarms_list_fr.php">Liste</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_offshore_fr.php">Offshore</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_africa_fr.php">Afrique</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_america_fr.php">Amérique</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_asia_fr.php">Asie</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_europe_fr.php">Europe</a></li>
    				<li><a href="<? echo $path; ?>/windfarms_oceania_fr.php">Océanie</a></li>
    		   </ul>
    		</li>
                    ...
    Et son CSS est :

    Code:
    .menu{
    	border:none;
    	border:0px;
    	margin:0px;
    	padding:0px;
    	font: 67.5% Arial, Helvetica, serif;
    	font-size:17px;
    	font-weight:bold;
    	}
    .menu ul{
    	background:#145595;
    	height:30px;
    	list-style:none;
    	margin:0;
    	padding:0;
    	}
    .menu li{
    	float:left;
    	padding:0px;
    	}
    .menu li a{
    	background:#145595 url("http://www.thewindpower.net/images/site/seperator.gif") bottom right no-repeat;
    	color:#FFFFFF;
    	display:block;
    	font-weight:normal;
    	line-height:30px;
    	margin:0px;
    	padding:0px 25px;
    	text-align:center;
    	text-decoration:none;
    	}
    .menu li a:hover, .menu ul li:hover a{
    	background: #2580a2 url("http://www.thewindpower.net/images/site/seperator.gif") bottom right no-repeat;
    	color:#FFFFFF;
    	text-decoration:none;
    	}
    .menu li ul{
    	background:#2580a2;
    	display:none;
    	height:auto;
    	padding:0px;
    	margin:0px;
    	border:0px;
    	position:absolute;
    	width:225px;
    	/*top:1em;
    	/*left:0;*/
    	}
    .menu li:hover ul{
    	display:block;
    	}
    .menu li li {
    	background:url('http://www.thewindpower.net/images/site/sub_sep.gif') top left no-repeat;
    	display:block;
    	float:none;
    	margin:0px;
    	padding:0px;
    	width:225px;
    	}
    .menu li:hover li a{
    	background:none;
    	}
    .menu li ul a{
    	display:block;
    	height:28px;
    	font-size:12px;
    	font-style:normal;
    	margin:0px;
    	padding:0px 10px 0px 15px;
    	text-align:left;
    	}
    .menu li ul a:hover, .menu li ul li:hover a{
    	background:#B6B9BC url('http://www.thewindpower.net/images/site/sub_sep.gif') top left no-repeat;
    	border:0px;
    	color:#000000;
    	text-decoration:none;
    	}
    .menu p{
    	clear:left;
    	}	
    C'est de la récup, je ne sais pas coder ce genre de chose.

    Je voudrais que les 8 items soient un peu plus larges pour qu'il n'y ait pas ce dernier rectangle bleu et vide à la fin.
    Je touche à tout mais ça ne fait que du n'importe quoi.

    Si quelqu'un peut me dire où changer ce #%@$ de code...

    Merci d'avance,

    Michaël
     
  2. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    1
    Re: Elargir un menu en CSS à 100% du contenant

    Salut,
    une petite tentative rapidement, si tu n'as à chaque fois que 8 items ?
    Code:
    .menu li a{
       background:#145595 url("http://www.thewindpower.net/images/site/seperator.gif") bottom right no-repeat;
       color:#FFFFFF;
       display:block;
       font-weight:normal;
       line-height:30px;
       margin:0px;
       padding:0px 25px;
       text-align:center;
       text-decoration:none;
    width: 12.5%;
       }
    
    ?

    [edit : ah non, ça bugue…]

    [edit 2 : ah bah j'étais pas loin :p ]
     
  3. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 209
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Le plus simple est d'ajouter un width: 12.5% (1/8ème) sur .menu li. Et tu réduis un peu la taille de la police pour que "Wind farms" rentre dans le trou :)
     
  4. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 209
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Whaa, cette cohésion, cette belle synergie entre nous deux et au même moment ! Faut qu'on se marie :)
     
  5. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Ca marche mais je vais devoir en effet réduire la police.
    Vous voyez un moyen pour faire sans réduite ?
    Merci en tout cas et joyeuses noces !
     
  6. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 209
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Ou alors tu ne mets pas 12.5% mais 12%, puis tu ajoutes une classe "plusgros" sur le li de "Wind farms" et tu lui affectes les % restants.
    Ou alors tu supprimes le padding: 0 25px; de .menu .li a et tu récupères de la place.
     
  7. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Ok, je te remercie.
    Je regarde ça demain à tête reposée.

    Merci encore.
     
  8. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 209
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Ah non attends ! Tu ne vas pas aller dormir tout de suite : j'ai vu que les éoliennes à côté de chez moi ont des photos toutes moches sur ton site !! Avec des nuages et de la boue alors que c'est la plus belle région du monde.
    Je t'en envoie d'autres et j'attends la mise en ligne. Fallait pas montrer ton site :p
     
  9. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    1
    Re: Elargir un menu en CSS à 100% du contenant

    Je vote aussi pour le padding ! Quel talent, mon Axiso d'amour synergétique !



    (ro mais nan j'suis un mec facile mais comment dire non à un "WRInaute passionné" ?)
     
  10. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    vu que le site ne s'adapte pas à la largeur de l'écran mais a une taille fixe, une solution est de mettre le width en pixels plutôt qu'en % et d'en mettre un différent pour le plus large.
     
  11. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Je n'ai pas toujours le même nombre de case pour chacune des 4 langues) et surtout un mot peut être long en Allemand et court en Espagnol.
    Je dois donc faire un CSS par langue, pas de souci, je sais faire.
    Mais je ne sais pas donner un width différent, par exemple 12% à la case 1, 13%, à la case 2...
    Pouvez-vous me donner un exemple pour une case ?

    @Axiso : merci pour les photos. Je te réponds directement plus tard par mail.

    Michaël
     
  12. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 933
    J'aime reçus:
    4
    Re: Elargir un menu en CSS à 100% du contenant

    Un seul CSS, peu importe la langue, le nombre d'éléments, et leur longueur...

    Code:
    <ul class="wrapper">
        <li class="first">One</li>
        <li class="other">Two</li>
        <li class="other">Three</li>
        <li class="other">Four</li>
        <li class="other">Five</li>
    </ul>
    Code:
    ul.wrapper {
        width: 600px;
        display:table;
        background: #145595;
        color: #fff;
    }
    ul.wrapper li {
        text-align: center;
        padding: 3px 0 3px 0;
    }
    li.first {
        display: table-cell;
    }
    li.other {
        border-left: 1px solid #fff;
        display: table-cell;
    }
     
  13. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Ou encore plus simple :

    Code:
        <ul class="wrapper">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>
    Code:
        ul.wrapper {
            width: 600px;
            display:table;
            background: #145595;
            color: #fff;
        }
        ul.wrapper li {
            text-align: center;
            padding: 3px 0 3px 0;
            border-left: 1px solid #fff;
            display: table-cell;
        }
    
        ul.wrapper li:first-child {
            border-left: none;
        }
    
     
  14. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Merci Messieurs.
    Là je vais faire mes deux heures de VTT quotidiennes et je m'y remets ensuite ! ;)
    Je vous tiens au courant.
     
  15. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 209
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    C'est pas crédible, il pleut chez toi en ce moment.
     
  16. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Me revoilà.
    Juste quelques gouttes.
    Il en faut plus pour m'empêcher de sortir ! :mrgreen:
     
  17. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Le verdict est terrible mais je dois l'accepter.
    Je suis meilleur sur un vélo qu'à faire du CSS.
    J'arrive à n'importe quoi avec vos solutions ; je ne dois pas les mettre en oeuvre correctement.
    C'est du Chinois pour moi...
     
  18. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Ben alors apprends le chinois ^^
     
  19. co7645
    co7645 WRInaute impliqué
    Inscrit:
    18 Février 2006
    Messages:
    874
    J'aime reçus:
    0
    Re: Elargir un menu en CSS à 100% du contenant

    Comme dit précédemment :

    Ligne 131 de ta feuille de style : tu ajoutes "width:12.5%";
    Ligne 135 : tu supprimes "padding:0 25px;

    Et cela fonctionne pour la version en anglais.

    Ensuite, tu crées des class pour tes autres versions et tu modifies en fonction le "pourcentage"
    En allemand, cela donne : 14.2864% (pas parfait mais mieux)

    Edit : accord niveau CE1
     
  20. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Merci et bonne année !
    Je vais tester ça.

    Michaël
     
  21. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 712
    J'aime reçus:
    2
    Re: Elargir un menu en CSS à 100% du contenant

    Merci, ça marche.
    Mais comme je vais modifier les menus, je ne l'applique pas de suite.
    Merci encore.
     
Chargement...
Similar Threads - [résolu] Elargir menu Forum Date
Problème images en https (forum phpbb) [résolu] Développement d'un site Web ou d'une appli mobile 18 Novembre 2017
[Résolu] Redirection 301 FR vers EN sur Prestashop uniquement sur outils Google ? Problèmes de référencement spécifiques à vos sites 11 Septembre 2017
[résolu] Passage à HTTPS, comment tester une page ? Développement d'un site Web ou d'une appli mobile 7 Septembre 2017
[Résolu] squat nom de domaine - que faire ? Débuter en référencement 16 Mai 2017
[Résolu] Redirection d'une famille d'URL URL Rewriting et .htaccess 9 Mars 2017
[Résolu] Diaporama et SEO Débuter en référencement 17 Janvier 2017
[résolu]Redirection monsite.fr/index.html sur monsite.fr et seo URL Rewriting et .htaccess 16 Janvier 2017
[resolu]Publicité facebook lié au compte instagram Facebook 12 Décembre 2016
[résolu] Récupérer des valeurs issues de javascript pour les mettre en base MySQL Développement d'un site Web ou d'une appli mobile 18 Juillet 2016
[résolu] Faire une redirection sauf pour mon adresse IP URL Rewriting et .htaccess 15 Juin 2016
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice