DIV et navbar

5 août 2017 à 14:38:31

Bonjour, bonsoir !

J'ai fait une div pour ma navbar et j'ai mis un séparateur mais la div dépasse, comment la rétrécir pour ne pas qu'elle dépasse le hr ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>

<nav>
 	<div class="container">
  	<ul>
  		<li><a href="">1</a></li>
  		<li><a href="">2</a></li>
  		<li><a href="">3</a></li>
  	</ul>
  	<hr width="100%">
	</div>
</nav>

<p>okaofkoakofa</p>
<p>okaofkoakofa</p>



</body>
</html>

Le CSS

body {
	background-color: #292929;
	
}

nav {
	width: 100%;
	margin-bottom: 65px;
}

.container {
	background-color: #404040;
	position: fixed; 
	z-index: 999;
	top: 0px;
	left: 0px;
	width: 100%;
}

nav ul {
	text-align: right;
	padding: 0px;
}

nav li {
	display:inline-block;
}

nav a {
	font-size: 1em;
	padding: 5px;
}

ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: white;
}

p {
	color: white;
}

Merci !

Noob de l'Internet, Apprenti codeur, je vagabonde dans ce monde virtuel..

MordosSmith

5 août 2017 à 14:56:15

slt !

essaye avec ce code si c'est le résultat que tu veux :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
<title></title>
</head>
<style type="text/css">
	body {
    background-color: #292929;
     
}
 
nav {
    width: 100%;
    margin-bottom: 65px;
}
 
.container {
    background-color: #404040;
    position: fixed;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: center;
    top: 0px;
    left: 0px;
    width: 100%;
}
.paragraphes p{
	display: inline-block;
}
nav ul {
    text-align: right;
    padding: 0px;
}
 
nav li {
    display:inline-block;
}
 
nav a {
    font-size: 1em;
    padding: 5px;
}
 
ul {
    list-style-type: none;
}
 
a {
    text-decoration: none;
    color: white;
}
 
p {
    color: white;
}
</style>
<body>
 
<nav>
    <div class="container">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
    </ul>
    <div class="paragraphes">
    	<p>okaofkoakofa</p>
		<p>okaofkoakofa</p>
    </div>
    </div>
    <hr width="100%">

</nav>
 
 
 
 
</body>
</html>

cordialement

PastaFurtive

5 août 2017 à 15:10:31

Yo, alors pas exactement, les balises p c'était juste un exemple pour en dessous voir si ma navbar descendait bien en même temps, actuellement ça donne ça avec mon code :

Et ce que je voudrais c'est que le gris de la navbar ne dépasse pas, que ça ressemble à ça :

Le séparateur blanc est la limite de la navbar en faite (Je précise, j'ai modifié sur photoshop vu que je n'arrive pas à le faire en le codant x) Pour bien voir la différence n'hésitez pas à ouvrir l'image dans un nouvel onglet

-
Edité par PastaFurtive 5 août 2017 à 15:11:47

Noob de l'Internet, Apprenti codeur, je vagabonde dans ce monde virtuel..

AbcAbc6

5 août 2017 à 15:55:04

Bonjour pour ce genre de problème inspecter le code avec l'inspecteur, (clique droit puis inspecter) dans cet outil sélectionne la balise <hr> et regarde les Styles qu'a cet élément. Que constates tu?

PS : évite au possible le width 100% sur un block au mieux cela ne fait rien au pire cela crée un débordement. Lire https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

-
Edité par AbcAbc6 5 août 2017 à 16:02:19

PastaFurtive

5 août 2017 à 16:08:55

AbcAbc6 a écrit:

Bonjour pour ce genre de problème inspecter le code avec l'inspecteur, (clique droit puis inspecter) dans cet outil sélectionne la balise <hr> et regarde les Styles qu'a cet élément.

PS : évite au possible le width 100% sur un block au mieux cela ne fait rien au pire cela crée un débordement. Lire https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

Merci pour le conseil ! J'en avais déjà entendu parler, j'ai enlever le width sur ma balise hr, mais le résultat reste le même.. :euh:

J'inspecte la balise j'ai ça :

hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}

Pour toi cela viendrait de la balise hr ? J'ai l'impression que ça vient de la navbar/div En tout cas quand je rajoute mon hr la div s'agrandit un peu vers le bas et rajoute au passage le gris que je ne veux pas...

Noob de l'Internet, Apprenti codeur, je vagabonde dans ce monde virtuel..

MordosSmith

5 août 2017 à 16:20:22

pourquoi n'utilise-tu pas ce code?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<style type="text/css">
     body {
    background-color: #292929;

}

nav {
    width: 100%;
    margin-bottom: 65px;
}

.container {
    background-color: #404040;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 2px solid white;
}

nav ul {
    text-align: right;
    padding: 0px;
}

nav li {
    display:inline-block;
}

nav a {
    font-size: 1em;
    padding: 5px;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: white;
}

p {
    color: white;
}

</style>
<nav>
    <div class="container">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
    </ul>
    </div>
</nav>

<p>okaofkoakofa</p>
<p>okaofkoakofa</p>

</body>
</html>

tu enlève le hr et tu met un petit border-bottom: 2px (solid/groove...etc) taCouleur (white) .

PastaFurtive

5 août 2017 à 16:27:57

MordosSmith a écrit:

pourquoi n'utilise-tu pas ce code?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<style type="text/css">
     body {
    background-color: #292929;

}

nav {
    width: 100%;
    margin-bottom: 65px;
}

.container {
    background-color: #404040;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 2px solid white;
}

nav ul {
    text-align: right;
    padding: 0px;
}

nav li {
    display:inline-block;
}

nav a {
    font-size: 1em;
    padding: 5px;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: white;
}

p {
    color: white;
}

</style>
<nav>
    <div class="container">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
    </ul>
    </div>
</nav>

<p>okaofkoakofa</p>
<p>okaofkoakofa</p>

</body>
</html>

tu enlève le hr et tu met un petit border-bottom: 2px (solid/groove...etc) taCouleur (white) .

Parce que je suis bête :lol:

Je me rappel pas de tout en cs, j'avais fait border: 1px :euh:

Merci !

Noob de l'Internet, Apprenti codeur, je vagabonde dans ce monde virtuel..

AbcAbc6

5 août 2017 à 16:56:45

Tout dépend de ce que tu souhaites comme séparateur, si c'est un séparateur visuel effectivement c'est en CSS que cela ce passe.

Si tu souhaites un séparateur pour séparer du contenu c'est la balise sémantique <hr> qu'il faut utiliser; cette dernière possède des styles par défaut (comme Hn, p, ul, ol, figure .....) . Les marges par défaut de la balises <hr> sont : margin: 0.5em auto;

Un reset des marges sur cet élément et le rendu visuel est comme tu le souhaites (en respectant la sémantique le cas échéant).

PastaFurtive

6 août 2017 à 17:45:59

C'est noté ! Merci

Noob de l'Internet, Apprenti codeur, je vagabonde dans ce monde virtuel..

DIV et navbar

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

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

DIV et navbar

DIV et navbar

Supprimer

Modérer

Signaler le message aux modérateurs