28172 sujets

CSS et mise en forme, CSS3

Menu responsive en carré

Bonjour à tous

Actuellement bloquée sur un menu responsive j'aurai besoin d'un petit coup de pouce.
J'ai un menu horizontale composé de 4 <li>.
Je souhaiterai que pour la version mobile mes <li> se recompose en carré. 2 en haut et deux en dessous . Sans espaces entre les deux lignes bien sur . Que ça fasse un carré quoi Smiley lol

Quelqu'un peut me donner un coup de pouce ? Voici mon code pour le menu

                                   <ul id="navigation">
							<li > <a href="#"> All works  </a> </li>
							<li> <a href="#">Creative </a>  </li>
							<li> <a href="#"> Corporate </a></li>
							<li> <a href="#">Portfolio</a> </li>
			           </ul>




#navigation
{
    display: flex;
    justify-content:center;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 50px
    margin-bottom: 100px;
 

}


#navigation li
{
    display: inline-block;
    position: relative;

  }


#navigation a
{
    display:block;
   padding: 0 20px;
    padding: 20px;
}
Salut

pour ça faut enlever le display flex de ton <ul> et mettre 
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
Administrateur
JENCAL a écrit :
Salut

pour ça faut enlever le display flex de ton &lt;ul&gt; et mettre 
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Bonne idée !

Deux mini-remarques toutefois :
- il est préférable de placer les propriétés finalisées après les préfixes (ainsi les navigateurs qui supportent les deux versions vont privilégier les versions non préfixées)
- le préfixe -moz- ne semble plus utile depuis bioen longtemps : https://caniuse.com/#feat=multicolumn
ça ne fonctionne malheureusement toujours pas ... Smiley ohwell
Et je voudrais qu'il se présente comme ça uniquement en version smarthphone
Sujet clos
Aller à