28220 sujets

CSS et mise en forme, CSS3

[Résolu] Suppression de hacks

Modérateur
Bonjour, Smiley smile

Soit le code suivant:

<!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> <title>Mise en page</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-15" />
<style type="text/css">
<!--

* { margin: 0; padding: 0; }
body { background: #000; }
p { margin: 10px; color: #DB8; }

#title, .menu, .box, #bottom { background: #555; border: 2px outset #DB8; }
#navig, #main, .box, #bottom { float: left; }
#title, .subtitle, #bottom { text-align: center; color: #DFA; }

#global { position: relative; left: 50%; margin-top: 5px; margin-left: -400px; width: 800px; }
#title { width: 796px; height: 76px; line-height: 76px; }
#bottom { margin: 5px 0 0 5px; width: 591px; height: 66px; line-height: 66px; }
.menu { margin: 5px 0; width: 196px; height: 296px; }
.box { margin: 5px 0 0 5px; width: 291px; height: 258px; }
.subtitle { background: #888; height: 29px; border-bottom: 1px solid #000; line-height: 29px; }

*html #main { margin-left: -5px; } /* F.ck IE */

//-->
</style></head> <body><div id="global">

<div id="title"><h1>Titre</h1>
</div>

<div id="navig">
   <div class="menu"><div class="subtitle"><h2>Menu 1</h2></div>
   <p>blabla...</p>
   </div>
   <div class="menu"><div class="subtitle"><h2>Menu 2</h2></div>
   <p>blabla...</p>
   </div>
</div>

<div id="main">
   <div class="box"><div class="subtitle"><h2>Box 1</h2></div>
   <p>blabla...</p>
   </div>
   <div class="box"><div class="subtitle"><h2>Box 2</h2></div>
   <p>blabla...</p>
   </div>
   <div class="box"><div class="subtitle"><h2>Box 3</h2></div>
   <p>blabla...</p>
   </div>
   <div class="box"><div class="subtitle"><h2>Box 4</h2></div>
   <p>blabla...</p>
   </div>
   <div id="bottom"><h2>Pied de page</h2></div>
</div>

</div></body> </html>


Je souhaiterais réussir à supprimer totalement les hacks de mon code css...
Ceux-ci étant bien souvent dûs aux tailles de boîtes différentes sous IE, y'a-t-il une manière de procéder particulière pour les éviter? Et comment dois-je modifier mon code?

Merci. Smiley cligne
Modifié par koala64 (06 Jun 2005 - 10:24)
Salut,

Le seul hack que je vois dans ton code est la dernière ligne
*html #main ...

qui devrait d'ailleurs s'écrire
* html #main ...

non ? (l'espace entre * et html)

Pour éviter la présence de hacks, tu peux mettre les codes en question dans une feuille de style à part, que tu nommes ie.css par exemple, et que tu mets dans un commentaire d'inclusion conditionnel, afin que seul ie voie ce code.
Modérateur
Oui... pour l'espace tu as raison, c'est bien ce que j'avais vu mais je n'étais pas sûr qu'il soit indispensable et comme çà marche sans... Smiley ravi

Bref, lorsque tu me parles de commentaire d'inclusion conditionnel, je ne saisis pas très bien comment celà se goupille... Peux-tu m'éclairer ou me donner un petit exemple?

Merci. Smiley biggrin
Modifié par koala64 (06 Jun 2005 - 09:58)
<div class="subtitle"><h2>Box 1</h2></div>

Gasp...
Un <h2> est déjà un sous titre, as-tu vraiment besoin d'utiliser une classe pour le styler ? Ce ne serait pas plus simple de styler l'élément H2 lui-même ? Et même si tu as besoin d'utiliser une classe car tu voudras plusieurs h2 dans ta page, pourquoi ne pas mettre la classe sur l'élément h2 lui-même ?

edit : commentaires conditionnels :
http://www.dithered.com/css_filters/html_only/conditional_comments_ie.html

Ils sont de la forme :
<!--[if IE]>
   <p>Tous les navigateurs à l'exception de IE considèrent que ce code est un commentaire.</p>
<![endif]-->

Tu peux par exemple metre le lien vers ta CSS dans un commentaire comme celui-ci.
Modifié par Birdman (06 Jun 2005 - 10:04)
Modérateur
Birdman a écrit :
<div class="subtitle"><h2>Box 1</h2></div>

Gasp...
Un <h2> est déjà un sous titre, as-tu vraiment besoin d'utiliser une classe pour le styler ? Ce ne serait pas plus simple de styler l'élément H2 lui-même ? Et même si tu as besoin d'utiliser une classe car tu voudras plusieurs h2 dans ta page, pourquoi ne pas mettre la classe sur l'élément h2 lui-même ?


Salut,

La classe est là pour la boîte uniquement et mon titre h2 reprend les styles de l'élément parent, ici "subtitle"... L'avantage, dans mon cas, est que je peux utiliser les deux de manière totalement indépendante. Le titre h2 reste entièrement paramétrable... Cà me semble plus souple...

Merci pour les commentaires... Smiley cligne
Sujet clos
Aller à