[Résolu] Navbar avec flexbox par LordHawk - page 1

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

LordHawk

11 octobre 2017 à 18:25:17

Mewen_bzh

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/

Je ne réponds pas aux messages privés.

7 novembre 2017 à 23:09:12

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

Navbar avec flexbox

Supprimer

Modérer

Signaler le message aux modérateurs