Je travaille donc sur une barre de navigation qui devrait être alignée horizontalement, mais ce ne sera pas le cas. Si j'essaye d'utiliser

display: inline-block;

Puis

float: left;

La barre de navigation entre en collision avec le reste de mes divisions

Voici mon code: http://jsfiddle.net/0p287vmb/

0
Pepijn Bruinaars 20 nov. 2018 à 11:10

4 réponses

Meilleure réponse

Essaye ça:

nav
a {
    font-family: Impact;
    font-size: 15px;
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0px;
    padding: 0px;
}

nav
a:hover {
    background-color: white;
    display: inline-block;
}

J'ai supprimé les virgules car avec des virgules, cela se traduit par nav & a. Dans votre cas, le supprimer résout le problème et il a également écrasé la largeur de la navigation, c'est pourquoi il ne semble pas prendre toute la largeur.

0
Jerico Lawrence Roque 20 nov. 2018 à 08:22

Votre sélecteur était faux. Vous avez écrit nav, a, ce qui signifierait appliquer ces styles aux éléments nav et a. En fait, vous aviez besoin de nav a ce qui signifie d'appliquer uniquement ces styles aux éléments a qui sont des enfants d'éléments nav.

nav a {
  font-family: Impact;
  font-size: 15px;
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0px;
  padding: 0px;
  float: left;
}
0
Sam Walpole 20 nov. 2018 à 08:21

Vous devez supprimer la largeur de la balise de navigation.

* {
   font-family: Verdana;
   font-size: 14px;
   margin: 0;
}

p {
   padding 20px;
}

#wrapper {
   width: 900px;
   background-color: #ff3333;
   margin: auto;
}

header {
   background-color: #00c9fd;
   width: 900px;
}

nav {
   background-color: #cccccc;
   width: 900px;
}

a {
   font-family: Impact;
   font-size: 15px;
   color: black;
   text-decoration: none;
   text-align: center;
   line-height: 50px;
   margin: 0px;
   padding: 5px 10px;
   float: left;
}

nav,
a:hover {
   background-color: white;
   display: inline-block;
}

#bigimage {
   width: 900px;
}

#bigimage,
p {
   color: #00c9fd;
   background-color: #ffffff;
   font-size: 12px;
}

main {
   width: 900px;
}

article {
   background-color: #cccccc;
   width: 900px;
}

#contact {
   background-color: #cccccc;
   width: 900px;
}

footer {
   background-color: #00c9fd;
   width: 900px;
}

header,
h1 {
   padding: 20px 0px 5px 0px;
   color: rgb(255, 255, 255);
   font-size: 30px;
   font-family: Impact;
   text-weight: normal;
}
<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="style_new.css">
</head>

<body>
   <div id="wrapper">
      <header>
	    <h1>SUPERCOMPUTERS</h1>
      </header>
	  <nav>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Home</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Meer informatie</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Tijdlijn</a>
	  </nav>
		<div id="bigimage">
			<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
			<p>
				<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
				at, dignissim faucibus eros.
			</p>
		</div>
		<main>
			<article>hoi1</article>
			<article>hoi2</article>
			<article>hoi3</article>
		</main>
		<div id="contact">hoi4</div>
		<footer>hoi5</footer>
   </div>
</body>

</html>
0
Ismail Rubad 20 nov. 2018 à 08:32

C'est parce que vous remplacez la largeur de la barre de navigation dans

nav,
a {
    ...
    width: 200px;
    ...
}

Et le bloc d'affichage ici:

nav,
a:hover {
    background-color: white;
    display: inline-block;
}

Déplacez simplement le style de la barre de navigation après nav, a: hover ..., et supprimez nav du même endroit, car vous survolez également la couleur d'arrière-plan de la navigation.

En outre, sur la dernière ligne, il devrait être fait-poids pas texte-poids.

   * {
	font-family: Verdana;
	font-size: 14px;
	margin: 0;
}

p {
	padding 20px;
}

#wrapper {
	width: 900px;
	background-color: #ff3333;
	margin: auto;
}

header {
	background-color: #00c9fd;
	width: 900px;
}



nav,
a {
	font-family: Impact;
	font-size: 15px;
	color: black;
	text-decoration: none;
	display: inline-block;
	width: 200px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	margin: 0px;
	padding: 0px;
	float: left;
}

a:hover {
	background-color: white;
	display: inline-block;
}

nav {
	background-color: #cccccc;
	width: 900px;
}


#bigimage {
	width: 900px;
}

#bigimage,
p {
	color: #00c9fd;
	background-color: #ffffff;
	font-size: 12px;
}

main {
	width: 900px;
}

article {
	background-color: #cccccc;
	width: 900px;
}

#contact {
	background-color: #cccccc;
	width: 900px;
}

footer {
	background-color: #00c9fd;
	width: 900px;
}

header,
h1 {
	padding: 20px 0px 5px 0px;
	color: rgb(255, 255, 255);
	font-size: 30px;
	font-family: Impact;
	text-weight: normal;
}
	<div id="wrapper">
		<header>
			<h1>SUPERCOMPUTERS</h1>
		</header>
		<nav>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Home</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Meer informatie</a>
			<a href="http://www.pbruinaars.ictlaurens.nl/opdrachtje/new.html">Tijdlijn</a>
		</nav>
		<div id="bigimage">
			<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
			<p>
				<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
				at, dignissim faucibus eros.
			</p>
		</div>
		<main>
			<article>hoi1</article>
			<article>hoi2</article>
			<article>hoi3</article>
		</main>
		<div id="contact">hoi4</div>
		<footer>hoi5</footer>
	</div>
0
Iulius 20 nov. 2018 à 08:20