28172 sujets

CSS et mise en forme, CSS3

[CSS] Marges indésirables

Bonjour,

J'ai un petit problèmes avec l'apparition de marges indésirables lorsque je diminue la longueur de ma fenêtre.
J'ai mis les blocs <ul> et <a> en couleur pour mieux voir.

J'ai mis des media queries pour que dès que la taille de la fenêtre fait moins de 1120px de largeur, mon menu <ul> prenne 100% de la largeur de <header> (au lieu de 1100px) et que la taille de la police des liens <a> passe en unité vw (pour que la taille du texte dépende de la taille du menu).

A noté que si je ne remplace pas par des valeurs en vw, il n'y a pas de marges au dessus, mais du coup le texte ne s'adapte pas à la taille du menu. Donc le problème doit venir de là, mais je ne le trouve pas. J'ai essayé d'utiliser vertical-align:bottom sur <a> pour enlever les marges indésirables, mais ça n'a pas d'effet. J'ai également essayé de passé <a> en position absolute avec top:0, left:0, width et height à 100% et <li> en position relative, mais ça ne marche pas non plus.

Lorsque la taille de la fenêtre est grande : http://nsa38.casimages.com/img/2017/01/02/170102064719328469.png

Lorsque la taille de la fenêtre est réduite : http://nsa37.casimages.com/img/2017/01/02/170102064742423878.png

Voici le code HTML :

<header id="header">
<ul>
     <li><a style="color:#25a0c2;" href=""><span></span>Lien 1</a></li><!--
  --><li><a href=""><span></span>Lien 2</a></li><!--
  --><li><a href=""><span></span>Lien 3</a></li><!--
  --><li><a href=""><span></span>Lien 4</a></li>					
</ul>	
</header>


Voici le code CSS : 

#header{
	width:100%;
	background-color:#303030;
	box-shadow:0 4px 6px -3px #000;}
					
#header ul {
        text-align:center;
	margin:auto; 
	background-color:green;}	
		
#header ul li{	
	width:20%; 
	text-align:center; 
	display:inline-block; 
	position:relative;}	
			
#header ul li a{
	padding:10%; 
	color:#fff; font-family: 'Josefin Sans', sans-serif; 
	 background-color:red; font-size:1em;
	display:inline-block;}
				
#header ul li a span{
	width:0%; height:35%; 
	position:absolute; left:50%;
	border-bottom:solid 2px #25a0c2;
	-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition: all .5s ease;}
					
#header ul li a:hover span,#header ul li a:focus span{
        width:40%; left:30%;}
				
@media screen and (max-width: 1119px){
	#header ul{width:100%;}
	#header ul li a{font-size:1.3vw;}
	#header ul li a span{border-bottom:solid .2vw #25a0c2;}
}

@media screen and (min-width: 1120px){
	#header ul{width:1100px;}
}



Merci d'avance pour votre aide Smiley cligne

Cdl,
Flox
Modifié par flox (02 Jan 2017 - 07:22)
Humm,

Je viens d'enlever "<!DOCTYPE html>" pour voir, et ça a supprimé les marges indésirables. Quelle conclusion dois-je en tirer ? Comment supprimer la marge tout en gardant ce "<!DOCTYPE html>" ?
Modifié par flox (02 Jan 2017 - 07:06)
Bonjour.

Vous devriez peut-être indiquer le système avec lequel vous faites ces essais. J'essaye votre code sur Mozilla Firefox 48 et je n'obtiens pas ce qui vous chagrine.

Smiley smile
Bonjour Zelena,

J'utilise Google Chrome, mais j'ai trouvé le problème : ça vient de "<!DOCTYPE html>"

Après, pourquoi ça créer cette marge quand je mets <!DOCTYPE html>, ça je n'ai pas encore trouvé.
Modifié par flox (02 Jan 2017 - 09:01)
flox a écrit :
Après, pourquoi ça créer cette marge quand je mets <!DOCTYPE html>, ça je n'ai pas encore trouvé.

Les navigateurs appliquent un style par défaut à une page en fonction du contexte xml/html déclaré. Si cette déclaration fait défaut ils interprètent selon ce qu'ils leur semble le plus approprié. Bien sûr le résultat final n'est sans doute pas celui attendu c'est donc pourquoi il ne faut jamais faire ce genre de chose.

C'est comme si l'on appliquait un code de la route à un pays sans savoir de quel pays il s'agit : le sens de circulation sera-t-il à droite ou à gauche ? C'est la roulette russe...
Bonjour,

Un vertical-align:top sur #header ul li a ça n'aiderait pas ?
(en remettant la font-size en em ou rem)
Modifié par Manhattan (02 Jan 2017 - 10:43)
Olivier C a écrit :

Les navigateurs appliquent un style par défaut à une page en fonction du contexte xml/html déclaré. Si cette déclaration fait défaut ils interprètent selon ce qu'ils leur semble le plus approprié. Bien sûr le résultat final n'est sans doute pas celui attendu c'est donc pourquoi il ne faut jamais faire ce genre de chose.

C'est comme si l'on appliquait un code de la route à un pays sans savoir de quel pays il s'agit : le sens de circulation sera-t-il à droite ou à gauche ? C'est la roulette russe...


Donc il faut que je retire le doctype HTML de mon code, si j'ai bien compris ?
Modifié par flox (02 Jan 2017 - 11:04)
Manhattan a écrit :
Bonjour,

Un vertical-align:top sur #header ul li a ça n'aiderait pas ?
(en remettant la font-size en em ou rem)


Bonjour,

Non j'avais déjà essayé. Si je remplace le font-size par des unités en em ou en rem ça fonctionne comme je l'ai dit sur le premier post, mais j'ai besoin d'utiliser des unités en vw, vu que la taille du header est responsive.
Humh... apparemment ce n'est pas un problème de styles par défaut car je finis quand même par avoir le problème... à condition de réduire considérablement la fenêtre... au point que le texte devienne illisible...

D'après ce que j'ai pu comprendre : le line-height de li est, à ce moment-là, trop petit pour centrer verticalement les a... ce qui est étrange parce que l'outil de développement m'indique le line-height devrait être de 20px... pourtant si je le force à 20px il est centré.

Bref, je ne sais pas, c'est curieux.

Smiley sweatdrop
flox a écrit :
Donc il faut que je retire le doctype HTML de mon code, si j'ai bien compris ?

Non justement, c'est l'inverse : j'expliquais qu'il faut toujours attribuer un doctype à un document.
Pour le problème en lui-même :
Zelena a écrit :
D'après ce que j'ai pu comprendre : le line-height de li est, à ce moment-là, trop petit pour centrer verticalement les a... ce qui est étrange parce que l'outil de développement m'indique le line-height devrait être de 20px... pourtant si je le force à 20px il est centré. Bref, je ne sais pas, c'est curieux.

Je n'ai pas le temps de me pencher sur cette question mais il ne faut jamais mettre une valeur à line-height, même si "ça marche". Il faut mettre seulement un nombre (entier ou décimal) :
.el {
    line-height: 1; /* Par exemple... */
}
Olivier C a écrit :
Pour le problème en lui-même :

Je n'ai pas le temps de me pencher sur cette question mais il ne faut jamais mettre une valeur à line-height, même si "ça marche". Il faut mettre seulement un nombre (entier ou décimal) :
.el {
    line-height: 1; /* Par exemple... */
}

Je ne serais pas aussi catégorique sur ce point d'après ce que j'ai pu lire à droite à gauche ou constater.
Une valeur sans unité est relative, alors qu'un line-height assorti d'un EM ou REM est précis et sera correctement pris en compte par les navigateurs récents.
Perso c'est dorénavant 1EM en font-size sur BODY et 1,4 REM sur le line-height.
Sujet clos
Aller à