18008 sujets

Questions générales et questions de débutants

[Résolu] Div qui bouge à cause d'un <h> ou d'un <p>

Bonjour, je rencontre un souci que je ne comprends pas pourtant ça n'a pas l'air bien compliqué mais après moult tentatives je n'y arrive toujours pas.

Une bonne âme pour m'aider ? Smiley lol

Voici mon code sans mes balises h2 et p : 

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="kimo.css">
</head>
<body>
<div id='global'>
	<h1>Kimo's Cars</h1>
	<div class='articles'><!--
		--><div class='description'>
		</div><!--
		--><div class='image'>
		</div>
	</div>
</div>
</body>
</html>


* {
	margin: 0px;
	padding: 0px;
}

#global {
	margin: auto;
	width: 1000px;
	height: auto;
} 

h1 {
	text-align: center;
	color: blue;
}

.articles {
	width: 100%;
	height: 200px;
	margin-top: 2px;
	border: 1px solid black;
}

.description {
	width: 75%;
	height: 100%;
	display: inline-block;
	background-color: grey;
}

h2 {
	text-align: center;
	color: blue;	
}

.image {
	width: 25%;
	height: 100%;
	display: inline-block;
	background-color: blue;
}


upload/53808-cars1.png


Le problème survient lorsque je rajoute une balise h2 ou p ou les 2 dans ma div description.
Celle-ci est complètement décalée :s.

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="kimo.css">
</head>
<body>
<div id='global'>
	<h1>Kimo's Cars</h1>
	<div class='articles'><!--
		--><div class='description'>
		<h2>Voiture version litre annee</h2>
		</div><!--
		--><div class='image'>
		</div>
	</div>
</div>
</body>
</html>


upload/53808-cars2.png

Merci d'avance pour votre aide Smiley smile
Bonjour Alexidinho,

Le rendu obtenu est probablement dû aux marges externes définies par défaut par le navigateur sur les éléments <p> et <hn>. Passe les à zéro et "positionne" les à l'aide de marges interne et tout rentrera certainement dans l'ordre Smiley smile

Par ailleurs, la suppression des espaces et tabulations à l'aide de commentaires HTML me semble dans ton cas inutiles : tu peux a priorisupprimer ces commentaires.
Pardon pour mon précédent commentaire, j'étais à côté de la plaque car je n'ai pas bien lu ton code CSS Smiley confused Smiley confused

La bordure que tu ajoute à tes éléments s'ajoute à leur largeur réelle. C'est cela qui doit te décaler tes conteneurs…
La bordure est celle de ma div "articles" qui contient mes 2 autres div

Div global
---Div articles
------Div description
------Div image

J'ai essayé sans et le résultat est le même Smiley ohwell

D'ailleurs la bordure est la quand je n'ai pas encore inséré mon <h2> et le résultat est bon.

As tu essayer mon code de ton coté ? peut être est-ce mon navigateur qui bug?


ps:
Les commentaires servent à éliminer l'espacement entre mes div description et image dû à inline-block. Sinon ma div image fait un retour à la ligne car pas assez de place.
Modifié par Alexidinho (09 Apr 2014 - 21:18)
Mea culpa x2 Smiley confused
En effet, je viens d'essayer tout ça dans mon navigateur, et malgré mes précédents messages, il n'y a aucune erreur de mon côté (Chrome/Mac OS) quand je reproduis ton code : http://jsfiddle.net/audrasjb/4LxF2/

Sur quel navigateur trouve-tu ce bug ?
Modifié par audrasjb (09 Apr 2014 - 21:21)
Sur mozilla, peut-être que je devrais le réinstaller ?

J'ai aussi essayé sur IE c'est pareil.

Par contre de mon coté ton lien me donne le meme résultat ?

Ca pourrait venir de mon pc ?
Modifié par Alexidinho (09 Apr 2014 - 21:33)
Hello,

Pas les moyens techniques de chercher d'où cela vient, mais j'ai le même rendu merdique sur la tablette de la pomme.
Bien vu c'était simplement ça comme quoi fallait pas chercher bien loin Smiley rolleyes Merci beaucoup à vous tous Smiley cligne

ps: Est-ce normal que ces balises aient cet effet là sur une <div> ?
Sujet clos
Aller à