[Résolu] Div qui s'affiche mal sur petit écran

Hello,

Comme dit dans le titre, ma div s'affiche mal sous 400-500px ...

Normalement


Sur petit écran


Le code concerné:

<div class="start">
<h4><a href="./menu.html">COMMENCER L'IDENTIFICATION</a></h4>
</div>

.start	{	
	margin: 0;
	margin-top: 120px; 
	margin-bottom: 120px;
	padding: 0;
	text-align: center;
}

.start h4{	
	text-align: center;
	display: inline;
	font-size: 120%; font-family: segoe print, verdana, sans-serif; 
	font-weight: bold; 
}

.start a {	
	background: #eef2e8 ;
	padding: 50px 10px 50px 10px;
	border: 1px solid #AFC415 ;
	text-align: center ;
	text-decoration: none ;
	transition-duration: 0.2s;
}

J'ai pas réussi de mon coté , mais vous êtes bien meilleur que moi
Modifié par vinula (11 May 2016 - 12:42)

Salut
Si tu utilise des px cela ne risque pas d'être responsive

Bonjour,

Il ne s'agit pas ici d'un problème dû aux pixels (tous tes éléments ont des largeurs fluides, et ton texte en en %).
Par contre, le souci vient du fait que ton titre est en inline, et les mots passent logiquement à la ligne lorsqu'ils n'ont plus de place.

Il faudrait connaître le résultat souhaité pour pouvoir t'aider. S'il faut que le texte rentre systématiquement dans une seule ligne quelle que soit la largeur de la fenêtre, il faudra utiliser les unités de polices "vw", mais tes contenus risquent rapidement d'être illisibles car trop petits.

Raphael a écrit :
Bonjour,

Il ne s'agit pas ici d'un problème dû aux pixels (tous tes éléments ont des largeurs fluides, et ton texte en en %).
Par contre, le souci vient du fait que ton titre est en inline, et les mots passent logiquement à la ligne lorsqu'ils n'ont plus de place.

Il faudrait connaître le résultat souhaité pour pouvoir t'aider. S'il faut que le texte rentre systématiquement dans une seule ligne quelle que soit la largeur de la fenêtre, il faudra utiliser les unités de polices "vw", mais tes contenus risquent rapidement d'être illisibles car trop petits.

Même question que Raphaël sur le but recherché exactement.
Pour conserver le titre sur une seule ligne, on peut aussi le rendre non sécable via l'attribut white-space (valeur nowrap).
Pour autant que ce soit ça la finalité...

En fait je souhaiterai que 'identification' passe à la ligne quand nécessaire

Raphael a écrit :

Il ne s'agit pas ici d'un problème dû aux pixels (tous tes éléments ont des largeurs fluides, et ton texte en en %).
Par contre, le souci vient du fait que ton titre est en inline,

mY bad j'avais pas vu!

Raphael a écrit :
Par contre, le souci vient du fait que ton titre est en inline

Oui effectivement, ça n'a rien à faire là ^^ J'avais fais des test et oublié de l'enlever
Mais même sans le problème reste le même

Bonjour !

Essayez plutôt le 'background-color' et le 'border' sur le h4...

(Mais pourquoi faire autant de contenants ?)

Bonjour,

(après avoir enlevé ce display: inline;) il faut en effet laisser le texte passer à la ligne librement sans avoir un padding énorme autour de lui ni une bordure autour de chaque ligne et du coup pas de fond non plus (le texte est dans un élément A, c'est de lui qu'il s'agit).
Ces 3 dernières propriétés sont à déplacer sur le parent du A donc le H4.
Cela donne : http://codepen.io/anon/pen/mPozbL?editors=0100

2 autres points :
- text-align est hérité (par les enfants d'un élément pour lequel il est défini) donc inutile de le déclarer 3 fois. Une fois sur le parent suffit.
- déclarer margin: 0; (donc margin-top -right -bottom et -left à 0) puis redéclarer -top et -bottom à 120px n'est pas utile et peut même être source d'erreur (on tente de modifier margin, ça n'a pas d'effet sur -top et -bottom qui sont écrasés plus bas ou bien on déplace margin:0 plus bas et ça écrase -top et -bottom ...)
margin: 120px 0; a le même effet

Bonjour,

Autre question :
Pourquoi un <a> dans un <h4> ?

Bonjour,

a écrit :
pourquoi faire autant de contenants ?

a écrit :
Pourquoi un <a> dans un <h4> ?

Parce que j'y connais pas grand chose

J'ai essayé ton code Felipe, mais ça ne donne pas le résultat souhaité.
Je souhaiterai garder le fonctionnement actuel (comme visible ici) mais avec le texte qui va à la ligne quand nécessaire

Merci beaucoup pour le temps que vous passez pour ça

as tu essayer de mettre ton lien en boite ?

avec un a {display:inline-block} ?

http://codepen.io/gc-nomade/pen/RadmGJ
Modifié par gcyrillus (12 May 2016 - 14:59)

Oui j'ai essayé. J'ai même refait le code à partir de 0 mais rien n'y fait

Je suis du même avis que Gcyrillus : pour encadrer un élément qui, à la base est 'inline', il faut le transformer en 'display : inline-block ' ou en 'display : block'... et mettre les arrière-plans, les bordures.. bref tout sur lui...

Dans le lien sur le site, il y a même un 'span' dans le 'a'... Mais pourquoi ?

La complexité est dans votre HTML, pas dans le CSS...

Pourtant cela devrait avoir l'effet voulu en modifiant le contexte de formatage:

j'ai grossi la font pour provoquer le passage à la ligne

++

Ben je sais pas pourquoi mais ça ne fonctionnait pas

Mais j'ai encore repris et maintenant ça marche

<div class="start">
<a href="./menu.html">Commencer l'identification</a>
</div>

.start	{	
	margin: 70px 0;
	text-align: center; 
}

.start a {	
	display: block;
	max-width: 350px;
	margin: auto;
	padding: 50px 10px;
	border: 1px solid #AFC415 ;
	text-decoration: none ;
	transition-duration: 0.2s;
	font-size: 120%; 
	font-family: segoe print, verdana, sans-serif; 
	font-weight: bold; 
	text-transform: uppercase; 
}

C'est bon comme ça ? ^^
Merci à vous tous