5568 sujets

Sémantique web et HTML

Espacement entre bloc de trop

Bonsoir,

Je travaille actuellement sur la refonte d'un CMS avec un ami (qui s'occupe du passage à PHP5 orienté objet + optimisations).
De mon côté je me charge de reprendre tout mon code XHTML1.1 Strict et CSS2.0.

Depuis toujours j'ai un soucis débile dès le départ, je le contournais jusque là mais aujourd'hui j'aimerai essayer de le résolver une bonne fois pour toute histoire d'être propre (et grand donc).
C'est au niveau du placement des blocs, tout simplement ... sous IE6 (le reste c'est bon et j'ai besoin du support de IE6 malgré ses faibles taux d'utilisation au niveau européen, le tout en évitant le plus possible les hacks)


Voici l'architecture que j'aimerais adopter et son affichage sous IE6.0.
Visualisation sous IE6


<div class="align_header">
	<div class="header"></div>
</div>

<div class="align_content">
	<div class="column_left"></div>
	<div class="column_right"></div>
	<div class="content"></div>
    
	<div style="clear: both"></div>
</div>

<div class="align_footer">
	<div class="footer"></div>
</div>




.align_header,
.align_pre_content,
.align_content,
.align_post_content,
.align_footer {
	width: 998px;
	margin: auto;
	text-align: left;
}

.header {
	width: 100%;
	height: 150px;
	background: red;
}

.column_left {
	width: 200px;
	float: left;
	background: yellow;
	height: 150px;
}

.column_right {
	width: 200px;
	float: right;
	background: blue;
	height: 150px;
}

.content {
	background: pink;
	height: 300px;
	margin: 0 200px 0 200px;
}

.footer {
	widht: 100%;
	height: 50px;
	background: red;
}



Et maintenant mon contournement et l'affichage correspondant (et souhaité avec le code du dessus)
Visualisation sous IE6




<div class="align_header">
	<div class="header"></div>
</div>

<div class="align_content">
	<div class="column_left"></div>
	<div class="content"></div>
	<div class="column_right"></div>
    
	<div style="clear: both"></div>
</div>

<div class="align_footer">
	<div class="footer"></div>
</div>




.align_header,
.align_pre_content,
.align_content,
.align_post_content,
.align_footer {
	width: 998px;
	margin: auto;
	text-align: left;
}

.header {
	width: 100%;
	height: 150px;
	background: red;
}
.column_left {
	width: 200px;
	float: left;
	background: yellow;
	height: 150px;
}

.column_right {
	width: 200px;
	float: right;
	background: blue;
	height: 150px;
}

.content {
	background: pink;
	height: 300px;
	margin: 0 200px 0 200px;
}

.footer {
	width: 100%;
	height: 50px;
	background: red;
}



Voilà, merci pour l'âme charitable qui pourra me donner une piste et me débloquer ...
Bonne fin de soirée à tous Smiley cligne
Modifié par Corven73 (26 Jul 2009 - 01:13)
Salut,

tout d'abord 2 petites remarques :
* par rapport au doctype xhtml1.1 (qui ne doit être servi qu'en tant qu'application/xhtml+xml) lire cet article.
* puisque tes conteneurs sont uniques autant utiliser id plutôt que class.

Pour ta question :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#global { 
    width: 998px; 
    margin: auto; 
} 
 
#header { 
    height: 150px; 
    background: red; 
} 
 
#column_left { 
    width: 200px; 
    float: left; 
    background: yellow; 
    height: 150px;
} 
 
#column_right { 
    width: 200px; 
    float: right; 
    background: blue; 
    height: 150px;
} 
 
#content { 
    background: pink; 
    height: 300px; 
	overflow: hidden;

} 
 
#footer {
	clear: both; 
    height: 50px; 
    background: red; 
} 
</style>
<!--[if lte IE 6]>
<style type="text/css">
	#column_left {
		margin-right: -3px;
	}
	#column_right {
		margin-left: -3px;
	}		
</style>
<![endif]-->
</head>
<body>
<div id="global">
	<div id="header"></div> 
	<div id="column_left"></div> 
	<div id="column_right"></div> 
	<div id="content"></div> 
	<div id="footer"></div> 
</div>
</body>
</html>

A lire : Un design fluide avec trois «colonnes».
Modifié par Heyoan (26 Jul 2009 - 02:13)
Bonjour,

J'ai donc suivi tes liens et au final il y a eu beaucoup de lecture hier ...
J'y vois donc un peu plus clair au sujet des commentaires conditionnels, des classes combinées et sur la notion de hasLayout.

Par contre je bute encore un peu sur la déclaration.
J'ai bien lu l'article que tu proposes.
Je n'arrive pas à me décider entre XHTML1.0 STRICT en text/html, XHTML1.0 STRICT en application/xhtml+xml ou XHTML1.1 en application/xhtml+xml.
Si je ne choisis pas un des deux types en application/xhtml+xml, ça sous entend que je m'engage à ne pas utiliser le langage xml à l'avenir ?

Dans le cas où je sois amené à l'utiliser, vaut-il mieux prendre du 1.0STRICT ou du 1.1 ?

J'ai lu que ce type MIME posait problème avec IE mais que des hacks existaient notamment le suivant :
http://www.echoofeden.com/digest/mit/2007/03/06/ie-xhtml-bug/
Existe-il des liens à ce sujet en français ?
Est ce que vous pouvez m'en dire un peu plus quant à l'utilisation de ce hack (précautions à prendre ...) ou d'un autre similaire meilleur s'il existe.

Voilà, merci par avance et bon journée à tous Smiley cligne
Salut,

Tout d'abord, petite remise à jour : servir du XHTML 1.1 en text/html est aujourd'hui valide. Ce n'était pas le cas à l'origine, mais vu que les navigateurs traînent les pieds, la norme s'est une fois de plus adaptée (et ceci une semaine après l'article de Florent...).

a écrit :
Je n'arrive pas à me décider entre XHTML1.0 STRICT en text/html, XHTML1.0 STRICT en application/xhtml+xml ou XHTML1.1 en application/xhtml+xml.
Si je ne choisis pas un des deux types en application/xhtml+xml, ça sous entend que je m'engage à ne pas utiliser le langage xml à l'avenir ?
Ton code ne fera probablement aucune utilisation des avantages du (vrai) XHTML (principalement l'extension vers d'autres espaces de noms comme MathML, SVG, XForms, etc.). Au final, il y a fort à parier que tu feras simplement du HTML en minuscules avec des slashs à la fin des <img> Smiley cligne . Donc, autant rester en text/html. Quant au doctype, il importe peu.

a écrit :
Dans le cas où je sois amené à l'utiliser, vaut-il mieux prendre du 1.0STRICT ou du 1.1 ?
Quasiment aucune différence dans la pratique.


Pour plus d'info, une excellente FAQ XHTML vs HTML.
Modifié par marcv (27 Jul 2009 - 12:05)
Merci, je potasse tout ça ce soir et j'essaye de m'informer sur MathML, SVG, XForms, etc histoire de voir si le collègue (qui s'occupe de tout ce qui est dynamique) les juge utiles à l'avenir. Smiley cligne
Corven73 a écrit :
Je n'arrive pas à me décider entre XHTML1.0 STRICT en text/html, XHTML1.0 STRICT en application/xhtml+xml ou XHTML1.1 en application/xhtml+xml.

Fais du HTML 4.01 Transitional (obligatoirement en text/html). Smiley smile C'est très bien.

(Ceci n'est pas un troll.)

Sinon le XHTML 1.0 Transitional en text/html, c'est bien aussi. (En fait c'est pareil, juste un peu plus verbeux si on veut respecter à la lettre les directives de compatibilité HTML/XML.)
Modifié par Florent V. (27 Jul 2009 - 15:23)
Sujet clos
Aller à