Partage

Étrange phénomène CSS

Sujet résolu
21 avril 2017 à 11:25:50

Bonjour,

Alors déjà excusez moi pour le titre assez peu précis, mais je vais vous expliquer mon problème.

j'ai une page dans laquelle je génère des images en AJAX, et il se trouve que le style des images va changer en fonction de si je met quelque chose où pas devant <!DOCTYPE html>

Je m'illustre : les images sont affichées comme ceci pour ce code : 

<meta name="description" content="Hebergeur d'images en ligne 100% gratuit. Vous pouvez partager vos images avec le monde entier">
<!DOCTYPE html>
<html lang="fr">
	<head>

et sont affichées comme ceci pour ce code : 

<!DOCTYPE html>
<html lang="fr">
	<head>

Pour le coup j'ai cherché sur google et des forums, mais je ne m'attendais pas à grand chose étant donné que je ne sais même pas d'où vient le problème, et je n'ai pas vraiment de mots clés pour faire une recherche, du coup je viens demander si vous ne sauriez pas m'aider, parce que si ce coup si je ne sait vraiment pas à quoi c'est dû. 

Merci d'avance

-
Edité par RichardDassaut 21 avril 2017 à 11:26:27

21 avril 2017 à 11:37:58

Les balises Meta doivent être dans l'entête des pages. Donc entre les balises head. ça réglera peut être le soucis non ?
21 avril 2017 à 11:42:31

En fait c'était simplement un exemple, mais le problème c'est que si je ne met rien devant ma balise <!DOCTYPE html>, les images vont se mettre n'importe comment, et c'est là que je ne vois pas d'où vient le soucis, et surtout pourquoi ça change en fonction de si on écrit quelque chose avant <!DOCTYPE html> où non...
21 avril 2017 à 11:49:23

Hello,

De manière générale on ne met jamais rien avant le doctype, mis à part du traitement décisionnel PHP (ou autre langage) sans code HTML qui une fois traité n'apparaît plus dans le code généré.

Le doctype déclare un type de document, consulter le site du W3C pour plus d'infos. Le fait de travailler du HTML avant la déclaration à sans doute une influence par rapport à la cohérence de la suite du document. De plus IE est très sensible avec cette pratique (Edge je ne sais pas)

-
Edité par Lucky13 21 avril 2017 à 11:50:11

21 avril 2017 à 11:54:18

Mais du coup, pourquoi est-ce que les images s'affichent correctement UNIQUEMENT si je mets quelque chose avant ce doctype ?

Parce que ce que je veux c'est que les images s'affichent, bah en étant alignées quoi, comme le premier exemple, parce que ce que j'ai sur ma page, c'est un CSS, et ensuite je génère les images en PHP grâce à un script AJAX, je ne sais pas si ça peut influer, mais c'est comme si une partie du CSS n'était plus exécutée ou prise en compte, et je dois dire que là, je bloque totalement. :(

21 avril 2017 à 11:56:56

Parce que si tu mets du code avant le doctype, ton document est invalide et est interprété en mode de rétrocompatibilité. En clair, c'est ta seconde image qui est ce que ton code est "actuellement".

Pour obtenir le second rendu, ajuste tes tailles d'images en css.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
21 avril 2017 à 11:57:07

Je ne vois pas l'intérêt de tout faire avant le doctype ? ajax ou non tout éléments HTML est dans le <body>

21 avril 2017 à 12:09:20

Oui oui bien sur, toutes les images sont dans le body et le CSS dans le head, mais c'est quand même influencé si je met quelque chose avant le doctype.

rhooManu merci pour ta réponse, mais j'ai justement déjà essayé d'ajuster le CSS, mais à vrai dire il se passe quelque chose d'assez bizarre, je peux changer la largeur de l'image (width), mais dès que j'essaie de toucher à la hauteur de l'image (height), rien ne change, 

Pour préciser, j'ai une div générale avec la classe recent_img, laquelle contient l'image et les informations, et voici mon code : 

.recent_img {
	width: calc(100% / 4);
	height: calc(100% / 2);
	margin-left: calc(100% / 16);
	margin-bottom: 150px;
	display: inline-block;
	position: relative;
	border: 3px solid dodgerblue;
	border-radius: 20px;
	background-color: white;
}

.recent_img img {
	margin-left: 6%;
	margin-top: 2%;
	height: calc(100% - 50px);
	width: 87%;
	border-radius: 15px;
}

.info_image {
	margin-top: 5px;
	margin-left: 10%;
	position: absolute;
}

.info_image a {
	text-decoration: none;
	color: dodgerblue;
	font-weight: bold;
}



Du coup, comme dit plus haut ça fonctionne avec mon code "invalide" avec des chose avant le doctype, mais dès que le document est "valide", c'est les images qui se mettent n'importe comment, du coup il y a peut être quelque chose qui m'échappe, mais je ne voit pas ce qui justifie que les images gardent leurs hauteur d'origine avec mon height dans le code CSS :euh:

-
Edité par RichardDassaut 21 avril 2017 à 12:10:12

21 avril 2017 à 15:32:26

Non, ça n'a rien de bizarre : la gestion de la hauteur en pourcentage ne fonctionne que si un parent a une hauteur définie.

Définis une hauteur en pixels, par exemple. Si tu veux une mise en forme plus avancée, il faudra te tourner vers flexbox.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
21 avril 2017 à 16:17:24

Alors oui effectivement c'était ça le problème, mais du coup j'ai utilisé : 

html, body {
     height: 100%;
}

Et ça fonctionne, merci à vous tous, sujet résolu :magicien:

Étrange phénomène CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown