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

OTP · 6 Octobre 2014

Bonsoir,

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

Le menu :

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

Schwarzer Stern · 6 Octobre 2014

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

]

Axiso · 6 Octobre 2014

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

Axiso · 6 Octobre 2014

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

OTP · 6 Octobre 2014

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 !

Axiso · 6 Octobre 2014

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.

OTP · 6 Octobre 2014

Re: Elargir un menu en CSS à 100% du contenant

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

Merci encore.

Axiso · 6 Octobre 2014

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

Schwarzer Stern · 6 Octobre 2014

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é" ?)

baud74 · 7 Octobre 2014

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.

OTP · 7 Octobre 2014

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

HawkEye · 7 Octobre 2014

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;
}

lambi521 · 7 Octobre 2014

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;
    }

OTP · 7 Octobre 2014

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.

Axiso · 7 Octobre 2014

Re: Elargir un menu en CSS à 100% du contenant

C'est pas crédible, il pleut chez toi en ce moment.

OTP · 7 Octobre 2014

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:

OTP · 7 Octobre 2014

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...

lambi521 · 7 Octobre 2014

Re: Elargir un menu en CSS à 100% du contenant

Ben alors apprends le chinois ^^

co7645 · 29 Décembre 2014

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

OTP · 1 Janvier 2015

Re: Elargir un menu en CSS à 100% du contenant

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

Michaël

OTP · 5 Janvier 2015

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.