Paddings : pb XHTML Strict Vs Transitionnal

Question

DeMZed

22 Mar 2006 à 22:58

Salut !

Je profite de mon arrivée (j'espère durable) sur le forum pour vous poser une colle :

J'ai ce XHTML :

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
	<style type="text/css" media="screen">@import url("css/style.css");</style>
</head>
<body> 
	<div>
	<div id="header">
		<div><img src="img/header.png" alt="Bienvenue"/></div>
		<div id="topmenu">Accueil | Domaine 1 | Domaine 2 | Domaine 3 | Domaine 4</div>
	</div>
	<div id="bottom">
		<div id="menu">
			<div class="header">Bloc Action 1</div>
			<div class="content">
				Actions...
			</div>
		</div>
		<div id="content">
			<div class="titre">Titre du paragraphe</div>
			<div class="content">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
		</div>
	</div>
</body>
</html>

Avec ce CSS :

body {
	margin: 0 0 0 0;
	padding: 2px 0 0 2px;
}
#header {
	text-align: left;	
	width: 800px;
	background-color: red;
}

#topmenu {
	position: absolute;
	text-align: right;
	top: 180px;
	left: 292px;
	height: 22px;
	width: 500px;
	font-weight: bold;
	background-color: transparent;
	color: #990066;
}

#bottom {
	text-align: left;	
	width: 800px;	
	background-color: transparent;
}

#menu {
	float: left;
	width: 250px;
	height: 400px;
	background-color: #bfc8e7;
	color: inherit;
	padding-top: 10px;
}
#menu .header {
	margin-left: 5px;
	height: 35px;
	width: 240px;
	background-image: url(../img/menu_ico.png);
	background-repeat: no-repeat;
	text-indent: 40px;
	padding-top: 5px;
	font-family: cursive;
}
#menu .content {
	padding-left: 20px;
	padding-bottom: 20px;
}

#content {
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 25px;
	width: 100%;
	height: 100%;
	border: 1px;
	padding: 0 0 0 10px;
}
#content .titre {
	margin: 5px 0 5px 0;
	height: 35px;
	background-image: url(../img/content_ico.png);
	background-repeat: no-repeat;
	text-indent: 40px;
	padding-top: 5px;
	font-family: cursive;
}
#content .content {
	text-indent: 25px;
	margin: 15px 0 5px 0;
}

Q1 : Pourquoi FireFox me fait un espacement entre le bloc #header et le bloc #content, ce que ne me fait pas IE ? Smiley confus

Q2 : Pourquoi Firefox me met un padding sur #header (ce que ne me fait pas IE) si je passe switch de Transitionnal en Strict ?
Q3 : Pourquoi est-ce que Firefox me colle l'image de mon #bottom#content.titre complètement à gauche (en dessous du div #menu) ? Ca sent le bug ça ... Smiley eek

Voici un petit résumé en image...

Si vous pouviez m'éclairer, ça fait bien 3 heures que je susi dessus Smiley ohwell

Merci d'avance Smiley smile

Modifié par DeMZed (22 Mar 2006 - 23:00)

fvsch

23 Mar 2006 à 00:48

DeMZed a écrit :
Q1 : Pourquoi FireFox me fait un espacement entre le bloc #header et le bloc #content, ce que ne me fait pas IE ?

À vue de nez, ça sent le petit problème de fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Vérifie si le contenu de ton #header ou le contenu de ton flottant n'ont pas des marges qui se transmettraient au bloc conteneur. Cf le lien ci-dessus pour y comprendre quelque chose (et trouver des solutions).
La solution du padding à 1px est assez séduisante et adaptée à 80% des cas...

DeMZed a écrit :
Q2 : Pourquoi Firefox me met un padding sur #header (ce que ne me fait pas IE) si je passe switch de Transitionnal en Strict ?

Aucune idée.....

DeMZed a écrit :
Q3 : Pourquoi est-ce que Firefox me colle l'image de mon #bottom#content.titre complètement à gauche (en dessous du div #menu) ? Ca sent le bug ça ...

Alors là j'en suis sûr, ce n'est pas du tout un bug, c'est un comportement standard. Tu peux le vérifier avec Safari (me semble-t-il), Konqueror ou Opera. Si tu travailles sous Windows, je te conseille l'installation d'Opera pour tester tes pages. Le comportement d'Opera est très proche de celui de Firefox (respect des standards), mais en cas de doute ça permet de faire la distinction entre un comportement normal (cas le plus fréquent) et un buf spécifique à Firefox ou Opera (plus rare, mais ça arrive).

Bon, dans le cas présent il s'agit du comportement normal d'un flottant, qui flotte par dessus les blocs (les blocs se positionnent donc comme si le flottant n'était pas là du tout !) et ne repoussent que le texte ou les images en-ligne.
Cf la page suivante (c'est assez clair je pense) :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
Solution préconisée : le margin-left: 260px; pour ton titre.

DeMZed

23 Mar 2006 à 01:30

Et bien c'est ce qu'on appelle un bon retour de service Smiley cligne

mpop a écrit :

La solution du padding à 1px est assez séduisante et adaptée à 80% des cas...

Je suis content de ne pas être dans les 20% ! Le padding "empêche" effectivement la fusion. Merci !

mpop a écrit :

Bon, dans le cas présent il s'agit du comportement normal d'un flottant, qui flotte par dessus les blocs (les blocs se positionnent donc comme si le flottant n'était pas là du tout !) et ne repoussent que le texte ou les images en-ligne.

C'est étrange, je pensais que ce comportement n'était pas normal : le div class .titre est contenu dans un div #content, et je pensais donc que le (0,0) était celui du div contenant Smiley sweatdrop

En fait, IE fonctionne comme ça et pas Firefox.

En écrivant ce post, j'aurais cru qu'en mettant #content en float:right, l'image de fond du div .titre serait alignée différement, alors que qu'en la mettant pas en float, son (0,0) changerait... mais non... Il va falloir que je me fasse à l'idée que ce comportement est normal ou quelqu'un va te désavouer mpop ?

Par contre si tu mets margin-left: 260px; pour le titre, ça fonctionne sous FireFox, mais sous IE le titre "s'explose" contre la droite du #content puisque le (0,0) est ici le (0,0) du #content et non du body... donc la solution n'est pas universelle Smiley ohwell

A+
DeMZed
Hors sujet : Ce qui est rigolo aussi c'est que si tu rajoutes au style de #content .titre ceci :

position: relative

Il passe par dessus le #menu ...
Modifié par DeMZed (23 Mar 2006 - 01:32)

fvsch

23 Mar 2006 à 02:33

DeMZed a écrit :
Je suis content de ne pas être dans les 20% ! Le padding "empêche" effectivement la fusion. Merci !

Testé aussi (bien que rapidement, donc sans garantie) avec un padding de 0.1px... (il faut bien garder le zéro, sinon IE n'aime pas trop...). Même effet sans rajouter de pixel supplémentaire. Mais bon, pour un petit pixel...

DeMZed a écrit :
C'est étrange, je pensais que ce comportement n'était pas normal : le div class .titre est contenu dans un div #content, et je pensais donc que le (0,0) était celui du div contenant En fait, IE fonctionne comme ça et pas Firefox.

DeMZed a écrit :

#content {
	width: 100%;
	height: 100%;
}
#content .titre {
	...bla bla bla...
}

#content .content {
	...bla bla bla...
}

Remarques vite fait :
– tes sélecteurs #content .titre et #content .content pourraient peut-être être remplacés par des #content h2 et #content p... moins on rajoute de classes à tout va dans le CSS, mieux on se porte.
– je serais toi, je me méfierai de ce width: 100% (sauf si tu sais exactement ce que tu fais) et de ce height: 100% (qui est probablement inutile). Rappel : un élément de type bloc, comme par exemple une div, prendra automatiquement toute la largeur disponible, et toute la hauteur dont il a besoin pour caser son contenu.

DeMZed

23 Mar 2006 à 19:53

mpop a écrit :

Testé aussi (bien que rapidement, donc sans garantie) avec un padding de 0.1px... (il faut bien garder le zéro, sinon IE n'aime pas trop...). Même effet sans rajouter de pixel supplémentaire. Mais bon, pour un petit pixel...

Tu as raison : aux vue du risque mieux vaut garder 1px !

mpop a écrit :

Remarques vite fait :
[...]

Tu as bien raison.

J'ai appliqué tout ça, et j'ai trouvé mon bonheur (et supprimé le décalage du #content#titre en jouant sur les float, au passage).

In fine, ça donne ça (qui est valide CSS2 et XHTML Strict):


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Page d'accueil</title>
	<style type="text/css" media="screen">@import url("css/style2.css");</style>
</head>
<body> 
	<div id="header">
		<div id="topmenu">Accueil | Domaine 1 | Domaine 2 | Domaine 3 | Domaine 4</div>
	</div>
	<div id="bottom">
		<div id="menu">
			<div class="titre">Bloc Action 1</div>
			<div class="content">
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
			</div>
			<div class="titre">Bloc Action 2</div>
			<div class="content">
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
				<a href="#">Lien</a><br/>
			</div>
		</div>
		<div id="content">
			<h1>Titre du paragraphe</h1>
			<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
			<p>Contenu ici.... wha wha wha....</p>
		</div>
	</div>
</body>
</html>

et ça au CSS :


body {
	margin: 0 0 0 0;
	padding: 2px 0 0 2px;
	width:800px;
}

a {
	color: Navy;
	background-color: transparent;
}
a:hover {
	color: #8E8FFF;
	background-color: transparent;
}

#header {
	width: 800px;
	height: 200px;
	background-image: url(../img/style1/header.png);
	background-repeat: no-repeat;
	text-align: left;	
}

#topmenu {
	position: absolute;
	text-align: right;
	top: 180px;
	left: 292px;
	height: 22px;
	width: 500px;
	font-weight: bold;
	background-color: transparent;
	color: #336699;
}

#bottom {
	padding: 1px 1px 1px 1px;
	text-align: left;	
	width: 800px;	
	background-color: transparent;
}

#menu {
	float:left;
	width: 250px;
	height: 500px;
	padding-top: 10px;
	background-color: #bfc8e7;
	color: inherit;
}
#menu .titre {
	margin-left: 5px;
	padding-top: 5px;
	height: 35px;
	width: 240px;
	background-image: url(../img/style1/menu_ico.png);
	background-repeat: no-repeat;
	font-family: cursive;
	text-indent: 40px;
}
#menu .content {
	padding-left: 20px;
	padding-bottom: 20px;
}

#content {
	float:right;
	width: 540px;
	height: 510px;
	padding: 0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 25px;
	background-color: #ddddff;
	color: inherit;
}
#content h1 {
	margin: 10px 0 5px 0;
	height: 35px;
	background-image: url(../img/style1/content_ico.png);
	background-repeat: no-repeat;
	text-indent: 40px;
	padding-top: 5px;
	font-family: cursive;
	font-size: 18px;
}
#content p {
	text-indent: 25px;
	margin: 15px 0 5px 0;
}

Merci beaucoup de ton aide Smiley biggrin

DeMZed

23 Mar 2006 à 20:06

Petite cerise sur le gateau : le changement de CSS "à la volée"

Alternative Style: Working With Alternate Style Sheets
Modifié par DeMZed (23 Mar 2006 - 20:07)

Sujet clos

Sémantique web et HTML

Paddings : pb XHTML Strict Vs Transitionnal