2017-08-30 1 views
-1

Je serai rapide. Je sais que le code n'est pas débogué, je n'ai qu'une heure dedans, et j'ai déjà un bug et je ne sais pas comment le réparer, j'ai fait un nav comme il est montré dans le code. J'utilise text-decoration:none; pour cacher le soulignement mais quelques points noirs sont montrés, je ne sais pas si c'est de la décoration de texte ou quoi.Pourquoi les points noirs dans mon nav? (HTML/CSS)

Voici le code HTML:

<!doctype html> 

<html> 

<head> 
<link rel="stylesheet" type="text/css"  href="style.css"> 
<title>stdd</title> 
</head> 

<body> 

<h2>FRASE PAGINA WEB</h2> 
<h1>TITULO PAGINA WEB</h1> 

<nav> 
<ul> 
<li><a href="#">Inicio</a></li> 
<li><a href="#">Albumes</a></li> 
<li><a href="#">Centerfolder</a><li> 
</ul> 
</nav> 

<div id="leftbox"> 
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article> 
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article> 
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article> 
</div> 

<aside> 
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

<div id="rightbox"> 
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article> 
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article> 
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article> 

<footer> 
</footer> 

</body> 
</html> 

Et le CSS:

*{padding:0; margin:0; text-decoration:none;} 

body{background:#cb8015;} 

h1{color:yellow; text-align:center; font-size:50px;} 

h2{color:yellow; text-align:center; margin-top:6px;  font-size:40px;} 

article img{width:100%; border-top:solid white 3px;  border-bottom:solid white 3px;} 

#leftbox{width:39%; float:left;} 
#leftbox p{text-align:right; margin-right:10%; margin- left:10%; margin-bottom:10px; font-size:23px;} 

aside{background:black; width:22%; float:left;} 
aside p{color:white; padding:10px; font-size:30px;} 

#rightbox{width:39%; float:left;} 
#rightbox p{text-align:left; margin-right:10%;  margin-left:10%; margin-bottom:10px; font-size:23px;} 


nav{overflow:hidden; border-top:solid orange 3px;} 
nav ul li{float:left;} 
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;} 
nav ul li a:hover{background:black;} 

Certaines choses comme le correctif amateur <br> ou les mauvaises couleurs ne sont que temporaires pour voir comment ça se passe.

+0

Remerciez tout le monde pour les réponses – lekordicosadiluy

Répondre

1

Bydefault ul tag prendre des balles dans les éléments de liste. Vous pouvez supprimer cela en utilisant nav ul {list-style: none;}. Consultez ci-dessous l'extrait mis à jour ..

*{padding:0; margin:0; text-decoration:none;} 
 

 
body{background:#cb8015;} 
 

 
h1{color:yellow; text-align:center; font-size:50px;} 
 

 
h2{color:yellow; text-align:center; margin-top:6px;  font-size:40px;} 
 

 
article img{width:100%; border-top:solid white 3px;  border-bottom:solid white 3px;} 
 

 
#leftbox{width:39%; float:left;} 
 
#leftbox p{text-align:right; margin-right:10%; margin- left:10%; margin-bottom:10px; font-size:23px;} 
 

 
aside{background:black; width:22%; float:left;} 
 
aside p{color:white; padding:10px; font-size:30px;} 
 

 
#rightbox{width:39%; float:left;} 
 
#rightbox p{text-align:left; margin-right:10%;  margin-left:10%; margin-bottom:10px; font-size:23px;} 
 

 

 
nav{overflow:hidden; border-top:solid orange 3px;} 
 
nav ul {list-style: none;} 
 
nav ul li{float:left;} 
 
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;} 
 
nav ul li a:hover{background:black;}
<h2>FRASE PAGINA WEB</h2> 
 
<h1>TITULO PAGINA WEB</h1> 
 

 
<nav> 
 
<ul> 
 
<li><a href="#">Inicio</a></li> 
 
<li><a href="#">Albumes</a></li> 
 
<li><a href="#">Centerfolder</a><li> 
 
</ul> 
 
</nav> 
 

 
<div id="leftbox"> 
 
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article> 
 
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article> 
 
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article> 
 
</div> 
 

 
<aside> 
 
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
<div id="rightbox"> 
 
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article> 
 
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article> 
 
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article> 
 

 
<footer> 
 
</footer>

0

Vérifiez que, nav ul li{float:left; list-style-type: none;}

*{padding:0; margin:0; text-decoration:none;} 
 

 
body{background:#cb8015;} 
 

 
h1{color:yellow; text-align:center; font-size:50px;} 
 

 
h2{color:yellow; text-align:center; margin-top:6px;  font-size:40px;} 
 

 
article img{width:100%; border-top:solid white 3px;  border-bottom:solid white 3px;} 
 

 
#leftbox{width:39%; float:left;} 
 
#leftbox p{text-align:right; margin-right:10%; margin- left:10%; margin-bottom:10px; font-size:23px;} 
 

 
aside{background:black; width:22%; float:left;} 
 
aside p{color:white; padding:10px; font-size:30px;} 
 

 
#rightbox{width:39%; float:left;} 
 
#rightbox p{text-align:left; margin-right:10%;  margin-left:10%; margin-bottom:10px; font-size:23px;} 
 

 

 
nav{overflow:hidden; border-top:solid orange 3px;} 
 
nav ul li{float:left; list-style-type: none;} 
 
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;} 
 
nav ul li a:hover{background:black;}
<h2>FRASE PAGINA WEB</h2> 
 
<h1>TITULO PAGINA WEB</h1> 
 

 
<nav> 
 
<ul> 
 
<li><a href="#">Inicio</a></li> 
 
<li><a href="#">Albumes</a></li> 
 
<li><a href="#">Centerfolder</a><li> 
 
</ul> 
 
</nav> 
 

 
<div id="leftbox"> 
 
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article> 
 
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article> 
 
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article> 
 
</div> 
 

 
<aside> 
 
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
<div id="rightbox"> 
 
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article> 
 
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article> 
 
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article> 
 

 
<footer> 
 
</footer>

+0

Lol Soo rapide. Merci! – lekordicosadiluy

0

Just Add 'list-style: none' Propriété css:

*{padding:0; margin:0; text-decoration:none;} 
 

 
body{background:#cb8015;} 
 

 
h1{color:yellow; text-align:center; font-size:50px;} 
 

 
h2{color:yellow; text-align:center; margin-top:6px;  font-size:40px;} 
 

 
article img{width:100%; border-top:solid white 3px;  border-bottom:solid white 3px;} 
 

 
#leftbox{width:39%; float:left;} 
 
#leftbox p{text-align:right; margin-right:10%; margin- left:10%; margin-bottom:10px; font-size:23px;} 
 

 
aside{background:black; width:22%; float:left;} 
 
aside p{color:white; padding:10px; font-size:30px;} 
 
ul li{ 
 
    list-style:none; 
 
} 
 
#rightbox{width:39%; float:left;} 
 
#rightbox p{text-align:left; margin-right:10%;  margin-left:10%; margin-bottom:10px; font-size:23px;} 
 

 

 
nav{overflow:hidden; border-top:solid orange 3px;} 
 
nav ul li{float:left;} 
 
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;} 
 
nav ul li a:hover{background:black;}
<body> 
 

 
<h2>FRASE PAGINA WEB</h2> 
 
<h1>TITULO PAGINA WEB</h1> 
 

 
<nav> 
 
<ul> 
 
<li><a href="#">Inicio</a></li> 
 
<li><a href="#">Albumes</a></li> 
 
<li><a href="#">Centerfolder</a><li> 
 
</ul> 
 
</nav> 
 

 
<div id="leftbox"> 
 
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article> 
 
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article> 
 
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article> 
 
</div> 
 

 
<aside> 
 
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
<div id="rightbox"> 
 
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article> 
 
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article> 
 
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article>

0

Essayez d'ajouter cette css:

nav ul { 
    list-style-type: none; 
}