Partage

Navbar avec flexbox

Sujet résolu
11 octobre 2017 à 18:25:17

Salut,

Pour le lycée, j'ai fait un petit site web qui me sera utile durant tout les TP qu'on va faire en html, css, JS, mais j'essaye de faire un truc propre, et malheureusement, je galère un peu. J'aimerais un code propre, et donc éviter de galérer avec des float, des text-align, etc pour faire ma navbar, j'ai vu qu'il était plus simple d'utiliser flexbox, j'ai donc utilisé ça pour ma navbar, ce qui a plutôt bien fonctionné... 

Le problème, c'est que j'ai voulu rajouter le bloc avec un petit slogan, flexbox fait son boulôt, il utilise tout l'espace disponible avec ce nouveau block, le soucis, c'est que j'aimerais pouvoir le mettre juste à côté du logo (qui correspond au smiley) histoire que ça fasse "slogan". Et je ne sais pas comment faire en utilisant flexbox, surtout car ca me permet de faire du responsive en fonction de différente taille d'écran, ce qui n'est pas possible avec des floats, etc...

Je ne suis pas sûr d'avoir réélement bien compris comment utiliser flexbox avec cette histoire de de conteneur et d'enfants, car je ne vois pas comment modifier "l'enfant" seul, je suis obligé de tout modifier en même temps, enfin bref, j'ai du mal...

J'aurais vraiment besoin de votre aide, il faut que j'arrive à faire un truc propre pour ce jeudi !

Merci !

Aufaite, voici le code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Thermomètre</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
            <nav id="container_navbar">
        
                <img src="images/logo.png" id="child_logo"/>
                
                <p id="child_slogan">Deewens & co<br />
                Une entreprise familiale</p>
				
                <ul id="child_menu">
                    <li><a href="index.html">Accueil</a></li>
					<li><a href="#">Thermomètre</a></li>
					<li><a href="#">Convertisseur</a></li>
				
                </ul>
			</nav>
	</body>
</html>
*{
	margin: 0;
}

body {
    display: flex;
}


/* Style de base du menu */

#container_navbar {
    width: 100%;
	background: #333;
    display: flex;
    justify-content: space-around;
}

#child_logo {
    width: 50px;
    height: 50px;
}

#child_slogan {
    text-align: center;
    font-family: cursive;
    color: yellow;
    font-style;
    background: url(images/fond2.jpg);
    border-radius: 25px;
    border: solid 2px red;
    width: 31%;
    
}

#child_menu {
	list-style-type: none;
	padding: 0;
    display: inline-flex;
}

#child_menu a {
	text-decoration: none;
	color: #fff;
    display: block;
	padding: 16px;
    background-color: cornflowerblue;
   
}

#child_menu a:hover {
	background-color: #444;
}




-
Edité par LordHawk 11 octobre 2017 à 18:26:40

12 octobre 2017 à 8:46:44

Bonjour,

Premièrement si tu veux juste utiliser flexbox pour ta navigation, le display:flex devrait être sur la nav et non pas sur tout le body.

Ensuite ce sont les enfants du container en display flex qui sont affectés donc ton image et ton slogan doivent être rassemblés dans un même enfant. 

Ensuite, si tu veux un code réellement propre, le * {margin:0; } est une abomination... Plus de détails ici : https://www.emmanuelbeziat.com/blog/les-resets-css-a-la-poubelle/

7 novembre 2017 à 23:09:12

Bonjour,

Merci pour la réponse (et désolé pour ma réponse un mois plus tard, j'avais au final laisser comme ça, et je ne suis plus revenu ici, oublie ^^) !

Je crois que tu m'as fait comprendre le principe du "parent", "enfant", merci bien !

Ah, et pour mon abomination, tu m'as sauvé avec ton lien, ca m'évitera de refaire cette erreur, thanks !

Navbar avec flexbox

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown