28172 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner deux listes à puces ? (Débutant)

Bonjour bonjour.

Comme vous avez pus le lire dans le titre je suis nouveau et coincé. Je cherche simplement à aligner deux listes à puces dans une barre de navigation. J'ai beau essayé en bricolant, rien n'y fait.
La solution est surement toute bête, mais pour le coup je n'ai rien trouvé qui pourrait correspondre.

upload/62396-image.png 

<nav>			
	<ul class="navul">
  		<li><a href="index.html" class="nava nav_active"><img src="images/icones/home_icon.png" alt="acceuil">Acceuil</a></li>
  		<li><a href="#" class="nava"><img src="images/icones/globe_icon.png" alt="actualité">News</a></li>
  		<li><a href="#" class="nava"><img src="images/icones/service_icon.png" alt="équipe">l'équipe</a></li>
  		<li><a href="#" class="nava"><img src="images/icones/contact_icon.png" alt="contact">Contact</a></li>
  	</ul>

  	<ul class="social_ul">	
  		<li><a href="#" class="social_nava"><img src="images/icones/facebook_icon.png" alt="icone facebook"></a></li>
  	</ul>
</nav>


.navul {
    list-style-type: none;
    background-color: #333333;
    overflow: hidden;
    padding: 0;
    display: flex;
    border-bottom: 5px solid #009080;
}

.nava {
    font-size: 1.3em;
    color: #299999;
    text-decoration: none;
    color: white;
    display: block;
    padding: 19px;
    text-transform: uppercase;
    font-family: 'Comic sans MS', Arial, Serif;
    font-size: 0.9em;
}
.social_ul {
    list-style-type: none;
    margin: 0;
    right: 0px;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
}

.social_nava {
    list-style-type: none;
    background-color: #333333;
    padding: 19px;


Voilà à quoi ça ressemble.
Si pouvait m'expliquer, se serait très gentil.

Merci de m'avoir lus.
Modifié par Ashara (11 Jul 2016 - 21:47)
Modérateur
Tu peut imbriquer les flex.

Pour nav, cela serait (en plus) :nav{display:flex;justify-content:space-between;} en y deplaçant aussi les couleurs de fond et la bordure.
Bonsoir et avant tout merci.

Ca ne ressemblait pas à grand chose au début à cause de quelques bétises mais ça prendre forme.

Tout à l'air bon sauf un tout petit détail c'est la petite barre qui reste sous le logo facebook.
J'ai essayé d'utiliser des margin et padding mais ça interverti juste l'espace de coté.

upload/62396-help.png

Au niveau du CSS : 


nav {
    display: flex;
    justify-content: space-between;
    background-color: #333333;
    border-bottom: 5px solid #009080;
}

.navul {
    list-style-type: none;
    background-color: #333333;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
}

.nava {
    font-size: 0.9em;
    color: #299999;
    text-decoration: none;
    color: white;
    display: block;
    padding: 19px;
    text-transform: uppercase;
    font-family: 'Comic sans MS', Arial, Serif;
}

.social_nava {
    list-style-type: none;
    background-color: #333333;
    padding: 19px;
    display: block;
}

.nav_icons {
    width: 20px;
    height: 20px;
    margin: 0 10px 5px 5px;
    vertical-align: -4px;
    opacity: 0.5;
}

.nav_active {
    background-color: #009080;
}

.social_icons {
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.social_ul {
    list-style-type: none;
    margin: 0;
    right: 0;
    display: flex;
    margin-bottom: -10px;
}


Une idée ? Smiley smile


EDIT : J'ai fin finalement finis par trouvé il suffisait d'ajuster la taille avec "height".
Modifié par Ashara (12 Jul 2016 - 08:26)
Sujet clos
Aller à