Je veux passer ma page du XHTML transitionnal en XHTML strict.
 
Par contre, le Validateur est très agressif envers moi !
 
td width, td heigth et autres balises utilisées habituellement ne sont pas autorisées... comment les contourner ? (en CSS, oui mais comment ?)

cf ton post dans graphisme

Lis la FAQ de gm_superstar
(liens utiles en haut à droite de la liste des topics)

Fais gaffe Sibelius, ton code foire sous Mozilla 1+ (les rollovers).
 
D'ailleurs, utilise le code JS que je t'avais donné jadis pour les rollovers, celui de dream est buggé (mauvais preload des images).

Gizmo > merci, je m'en suis sorti en effet
 
Hermes > J'ai Mozilla 1.0 et ça fonctionne très bien. Mes rollovers ne sont que du CSS pur (je n'utilise pas de code Dreamweaver)  

Sibelius :
 
regardes ça :
 

OK Hermes, tu as raison... je viens de tester également sous Mozilla.
 
Eh bien c'est super cool le XHTML strict : du coup mon site ne passe plus sous Moz... alors qu'il passait très bien avant  

en XHTML strict IE & Mozilla interprêtent le contenu comme s'il était valide et logique pour du XHTML strict, donc si le contenu ne l'est pas, c'est normal que ça ne passe pas bien

antp > que veux-tu dire par "contenu valide et logique" ?
En quoi ne l'est-il pas ?
 
Et en quoi cela interfère sur mon header qui est affiché n'importe comment sous Moz par ex ?

valide = validator.w3.org
logique = le fait que certains éléments soient des boîtes, d'autres soient inline, que certains aient des marges par défaut, etc.
 
Quand tu mets un en-tête "strict" les browsers ne traitent pas la page de la même manière que s'il y avait un en-tête "transitionnal" ou pas d'en-tête du tout.

 
Rien à voir avec le XHTML strict ton histoire. J'ai fait des trucs bcp plus complexe que ça en XHTML 1.1
 
Réfléchis bien, et tu trouveras toi-même ce qui ne va pas.

Ben désolé, sur ce coup-là je n'ai strictement aucune idée de départ : toutes mes cellules sont définies strictement avec des styles de largeur et de hauteur, tous les contenus aussi... et au final, ça me donne n'importe quoi sous Moz.
 
Je désespère. J'ai mis 2 heures hier a passer en Strict et maintenant la page n'est plus compatible Mozilla.... Quel est l'intérêt ?

Bon, j'ai mis 30 secondes à trouver une solution à ton blème :
 
Vers la ligne 190 :
 
 

 
Mais de toutes façons, il faut que tu reprennes tout à zero. Déjà, philosophiquement, tu n'y es pas du tout. Le XHTML 1.1 est prévu avant tout pour bien séparer contenu et contenant, donc en clair, il faut que tu crées des class et que tu mettes tout à part dans le head (ou mieux dans une feuille de style externe). Après, on y verra déjà plus clair comme cela.
 
Cela ne rime à rien de faire du XHTML strict si tu laisses tous ces styles au sein même du code

Hermes > Pour le moment, ça n'arrange pas grand-chose... mais je suppose qu'il faut que je définisse les autres cellules également.
 
Pour les styles inclus dans le code, je sais bien que ce n'est pas la bonne solution : j'ai fait ça à la barbare pour voir s'il était possible de rendre la page validable en strict.

 
Mais il est TOUJOURS possible de rendre une page en strict valisable SAUF si tu utilises des iframes.
 
Donc, ne te pose plus de question et refaits ta page entièrement en allant doucement (ça vaut la peine tu verras), et en validant étape par étape. Il y a des petites subtilités à comprendre, c'est normal. Déjà, fait un tableau de 100% de larges de 3 cellules avec une taille fixe pour les deux première et la valeur auto pour la dernière et vérifie que tout ce passe bien avec les 3 navs. C'est un exemple.
 
Tu verras que faire du strict, c'est vraiment pas sorcier, c'est même plus facile à la fin que le transitionnal, parce qu'il y a moins de balises et qu'on finit par y voir BEAUCOUP plus clair.
 
Un dernier détail, si tu travail avec dream, tu dois avoir un éditeur de CSS. N'hésite ps à t'en servir et à tester toutes les possibilités. C'est le seul truc intéressant dans dream comme dans Golive (d'ailleurs, je préfère de loin celui de Golive).

Je te remercie sincèrement, Hermes, de venir une fois de plus à mon secours.
 
Je veux mon XHTML strict sous Moz et je l'aurai !!!    
 
Donc tu as raison, je reprends à zéro.
 
Euh mon tableau, tu parles de 3 lignes ou 3 colonnes pour commencer ? Je prévois le header à part ? (ça commence bien, tu vas pas être aidé avec le Sib'   )
 
 
PS : mon mail est webmaster@zoomduweb.com , ce sera + simple, non?
A moins que tu veuilles utiliser ce sujet pour faire un éventuel tuto

Bon, ça commence mal, voici le code :

ça fonctionne partout, mais le Validateur me refuse déjà le "width"

<div style="width:200px; float:left"></div>
<div style="width:136px; float:left"></div>
<div style="margin-left:336px"></div>
 

Oui il faut le mettre dans des styles CSS (idem pour border).
 
Sinon il y a moyen de faire ça sans tableaux

 
complique pas tout toi !    Laisse le déjà tout comprendre aux tableaux et quand il maitrisera tous les aspects, alors il pourra passer aux divs.

Je ne suis pas contre la technique des box... je veux simplement que ça marche
 
Gizmo : je suppose que tu n'utilises pas les tableaux avec tes div ?

non, aucun tableau

Je ne vois pas en quoi le fait de comprendre les tableaux permet de comprendre les DIVs. S'il veut repartir de zéro autant qu'il en profite pour se mettre aux DIVs et les techniques de positionnement avec les CSS.

LOL, j'ai l'impression d'être un ptit animal ou un jouet    
 
Bon, on va commencer par les tableau, hein ?
 
je précises les tailles comme ça : td style="width... ???

Je sais que les tableaux, c'est pas "sémantiquement correct", mais pour mon menu central, je pense qu'il faudra y passer et que ça me facilitera la tâche... tapez pas svp  

 
NON !! bourdel !!    
 
Tu fais des class dans tes css  
 
genre :
 
.ta_class {
width...
}
 
et <td class="ta_classe"> dans le body.

Hermes > je t'avais dit que c'était pas gagné
 
Bon, puisque je reprend tout depuis le début et que j'ai les meilleurs spécialistes au monde sous la main, autant tout faire correctement et éviter les tableaux... tu n'y vois pas d'inconvénient, Hermes ?
 
Je commence donc ainsi :
 
CSS :  
.header {
width:auto;
}
.gauche {
width:200px;
float:left
}
.menu {
width:200px;
float:left
}
.droit {
width:auto;
margin-left:336px
}
 
par contre, mon code html n'a pas l'air d'être aussi simple que ça :
<div class="header"></div>
<div class="gauche"></div>
<div class="menu"></div>
<div class="droit"></div>
 
?

Tu n'as pas besoin de width: auto; Si width n'est pas spécifié la valeur est par défaut à auto;
 
Par contre j'ai du mal à voir ce que tu veux faire. le <div class="header"> sert à quoi ? Il devrait pas contenir les 3 autres plutôt ?
 
<div>
  <div class="gauche"></div>
  <div class="menu"></div>
  <div class="droit"></div>
</div>
 
(et a priori pas la peine de lui donner un nom de classe dans ce cas)
 
Sinon c'est une bonne chose aussi de donner un nom plus "parlant" aux noms de classes ou aux ID : "menu" c'est bien. Mais "gauche" et "droite" c'est un peu trop générique.

oups, petite faute pour la classe Menu, c'est width:136px;
 
J'ai donné des couleurs de background. Pour l'instant, les divs se chevauchent et la dernière n'est pas visible
 
GM > euh non, j'ai bien et bien un header qui doit s'afficher au-dessus des 3 autres calques --> www.alsacreations.com
 
PS : Ok pour le width:auto

Ah OK je vois mieux
 
Dans ce cas je ferais quelque chose comme ça :
 
<div id="header">...</div>
<div id="formulaire>...</div>
<hr id="sep1" /> (pour la barre jaune)
<div>
  <div class="gauche"></div>
  <div class="menu"></div>
  <div class="droit"></div>  
</div>
<hr id="sep2" /> (pour la barre verte)
 
Par défaut les DIV se mettent les uns sur les autres sauf quand ils sont flottants ou positionnés absolument.

Pourquoi tu mélanges des id et des class ? (j'ai mis des class partout )
 
Tu as bien compris ce que je voulais
 
Par contre, ça passe pas trop à l'affichage encore : http://www.alsacreations.com/indextest.htm
 
Voici où en est mon css :
.header {
height: 56px;
background-color: blue;
}
.formulaire {
height: 20px;
background-color: black;
}
.gauche {
width:200px;
float:left;
background-color: green;
}
.menu {
width:136px;
float:left;
background-color: red;
}
.droit {
margin-left:336px;
background-color: yellow;
}
.sep1 {
background-color: #FFCC00;
}
background-color: #999999;
}

pour les HR, c'est color qu'il faut utiliser
 
Sinon, pour le reste, c'est bien rendu, vu que tu n'as rien dans tes div, ils ont une hauteur nulle

il manque le nom pour le sep2

Bon, j'ai tout placé à l'aide de "top:... px" et ça à l'air de fonctionner.
 
Par contre, je ne sais pas comment placer ma classe "sep2" puisque la hauteur de la page de contenu est variable
 
Gizmo > ok pour les height... mais quoi mettre pour les divs de contenu à hauteur variable ?...> rien je suppose

Parce que c'est l'habitude que j'ai
 
Un "id" doit être unique dans un document, donc c'est bien pour identifier un élément unique comme un header, ou le bloc principal de ton document.
En revanche une classe est plutôt utilisée pour regrouper des propriété de style communes et on s'attend donc à l'utiliser sur plusieurs éléments.
 
Enfin bon c'est pas très grave

Commence déjà par bien fermer tous les guillemets et écrire le DOCTYPE correctement

Top, left, right et bottom s'utilisent plutôt pour le positionnement absolu (position: absolute; ) Tu n'en as pas besoin ici.

gni ? sep2 c'est bien la barre verte ? Sa hauteur est connue. Quel est le rapport avec la hauteur de la page

Oui.

Ben justement, je ne vois pas le pb dans le doctype :
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">

"Top, left, right et bottom" > je ne dois rien mettre alors ? Si je les vire, ça ne ressemble plus à rien
 
"sep2" > oui, la hauteur est connue, mais je parle du placement : comment le placer ? par rapport à quoi ?
Toutes les autres DIVS sont placées par rapport au haut de page, mais pas celle-là
 
Autre chose : dans les div "sep", il y'a une grosse marge en haut et en bas... même avec des margin à zéro ça ne change rien

 
il est (il me semble) impossible de donner le même look à un HR sur les trois browsers (IE/Gecko/Opera)

Je les ai viré et ça n'a rien changé...

Quand je vais sur http://www.alsacreations.com avec IE 6 la barre verte en bas est à la suite du reste. Dans le code elle doit donc être le dernier élément.
 
Je répète les DIV et autres HR se placent par défaut les uns en dessous autres dans l'ordre qu'ils sont dans ton code. Donc pas besoin de top et de left

Mouais effectivement, quoiqu'on fasse il reste un espace d'au minimum 1 pixel. Il faudra que je vois d'où ça vient.
 
Passe par un DIV