Border Separation

Bonjour,

Dans mon CSS consacré aux petits écrans, j'aimerais faire en sorte que les lignes des bordures ne se touchent pas. Voici mon site (à mettre en résolution écran téléphone pour voir mon problème) : http://pazapasrecords.fr/test.html

Voici mon code CSS :

 ul {
  font-family: SH Pinscher;
	font-size: 3em;
   color: Yellow;
  list-style-type: none;
  position : fixed;
  margin: 0;
  padding: 20px;
  line-height : 50px;
  overflow: hidden;
 
}


li a {
  display: block;
   margin-top : 50px;
  color: Yellow;
  text-align: center;
 padding: 10% 0;
  text-decoration: none;
   Border-style : double;
}

Je pensais que margin-top devait suffire pour faire en sorte que les <li> ne se touchent pas. Ce qui est bizarre c'est que ce code fonctionne très bien quand je teste dans code pen. J'ai essayé beaucoup de paramètres border différents et je trouve rien .

Voici pour mon code html :

 <ul id="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="ohasar-triptyque.html">Triptyque n°1</a></li>
  <li><a href="#about">About Us</a></li>
</ul>
          

Bon dimanche à vous !
Modifié par gcyrillus (26 Apr 2020 - 13:29)

Bonjour blondine,

Dans ton premier link supprime le 2eme href

  <link rel="stylesheet" href="styletest.css" href="javascript.js" />
      <link rel="stylesheet" media="screen and (max-width: 1000px)" href="petitesresolutions1.css" />

Ensuite dans tes css tu as des doubles fermetures, ce qui peux pauser des problèmes.
Par exemple mais il y en a d'autre :

#nav a {
	display: block;
	margin: 0 30px;
}

 } /*En trop */
  body {
    background : url('image/poster.png');
    background-size: cover;
    }
  }/*En trop */

a { 	

ensuite "margin-top" de "li a" est écrasé par le "margin : 0 30px" de "#nav a"
fait : "#nav li a"
C'est un problème de poinds des sélecteurs
Modifié par aliasdmc (26 Apr 2020 - 12:59)

Merci beaucoup ! Ca fonctionne.
Je vais essayer de cleaner mon code css.

Par contre, je n'ai pas compris la premiere partie,
Si je supprime le deux href, ma page ne se référencera plus au fichier js, non ? Je comprends pas ce qui ne va pas ?

Bonjour blondine,
Pour charger un javascript externe il faut utiliser la balise <script>