[XHTML strict] width / height / align / color ?

width / height / align / color ? [XHTML strict] - HTML/CSS - Programmation

Marsh Posté le 28-04-2003 à 00:51:05    

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 ?)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 00:51:05   

Reply

Marsh Posté le 28-04-2003 à 08:36:33    

cf ton post dans graphisme ;)

Reply

Marsh Posté le 28-04-2003 à 09:26:39    

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


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 28-04-2003 à 09:29:49    

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).

Reply

Marsh Posté le 28-04-2003 à 10:59:42    

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)  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 12:00:26    

Sibelius :
 
regardes ça :
 
http://tousleschats.free.fr/hermes/sibelius.png

Reply

Marsh Posté le 28-04-2003 à 12:05:22    

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  :fou:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 12:06:30    

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


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 28-04-2003 à 12:13:02    

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 ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 12:15:31    

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.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 28-04-2003 à 12:15:31   

Reply

Marsh Posté le 28-04-2003 à 12:16:12    

SIBELIUS a écrit :

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  :fou:  


 
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. ;)

Reply

Marsh Posté le 28-04-2003 à 12:22:10    

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 ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 12:24:42    

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

Citation :

<TD  
    style="BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(design/fonddroit.jpg); BACKGROUND-REPEAT: repeat-y" width="auto">
      <P class=contenu><IMG style="WIDTH: 185px; HEIGHT: 38px" alt=""  
      src="Alsacreations, création de sites web, référencement et webdesign_fichiers/titre1.gif"></P>
      <P class=contenu>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
      Morbi leo massa, consectetuer at, dapibus ac, tempor id, mi. Praesent  
      eleifend turpis ut pede. Ut sed velit. Etiam quis dolor non justo  
      condimentum fringilla. Nullam magna nulla, sollicitudin eget, ultricies  
      ac, dictum quis, quam. Maecenas a quam. Integer aliquet tellus vitae  
      magna. Pellentesque habitant morbi tristique senectus et netus et  
      malesuada fames ac turpis egestas. Mauris hendrerit blandit nisl. Nunc  
      enim ligula</P>


 
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 ;)

Reply

Marsh Posté le 28-04-2003 à 12:39:22    

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.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 12:55:08    

SIBELIUS a écrit :

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).


Message édité par Hermes le Messager le 28-04-2003 à 12:56:40
Reply

Marsh Posté le 28-04-2003 à 13:05:03    

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 !!!  :D  
 
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'  :pt1cable: )
 
 
PS : mon mail est webmaster@zoomduweb.com , ce sera + simple, non?
A moins que tu veuilles utiliser ce sujet pour faire un éventuel tuto ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:17:25    

Bon, ça commence mal, voici le code :

Code :
  1. <table width="100%" border="1" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td width="200"> </td>
  4.     <td width="136"> </td>
  5.     <td width="auto"> </td>
  6.   </tr>
  7. </table>


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


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:24:19    

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

Reply

Marsh Posté le 28-04-2003 à 13:25:21    

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


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 13:27:32    

gm_superstar a écrit :

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


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

Reply

Marsh Posté le 28-04-2003 à 13:28:13    

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 ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:29:41    

non, aucun tableau

Reply

Marsh Posté le 28-04-2003 à 13:29:44    

Hermes le Messager a écrit :

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


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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 13:30:43    

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... ???


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:33:05    

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  :(


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:36:33    

SIBELIUS a écrit :

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... ???


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

Reply

Marsh Posté le 28-04-2003 à 13:45:13    

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>
 
?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 13:51:24    

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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 13:52:45    

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


Message édité par sibelius le 28-04-2003 à 13:56:24

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 14:00:35    

Ah OK je vois mieux :D
 
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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 14:09:13    

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;
}


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 14:25:41    

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

Reply

Marsh Posté le 28-04-2003 à 14:26:23    

il manque le nom pour le sep2

Reply

Marsh Posté le 28-04-2003 à 14:31:20    

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


Message édité par sibelius le 28-04-2003 à 14:32:42

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 14:31:41    

SIBELIUS a écrit :

Pourquoi tu mélanges des id et des class ? (j'ai mis des class partout ;))


Parce que c'est l'habitude que j'ai :D
 
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 ;)

SIBELIUS a écrit :

Tu as bien compris ce que je voulais ;)
 
Par contre, ça passe pas trop à l'affichage encore : http://www.alsacreations.com/indextest.htm


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


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 14:34:53    

SIBELIUS a écrit :

Bon, j'ai tout placé à l'aide de "top:... px" et ça à l'air de fonctionner.


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

SIBELIUS a écrit :

Par contre, je ne sais pas comment placer ma classe "sep2" puisque la hauteur de la page de contenu est variable


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

SIBELIUS a écrit :

Gizmo > ok pour les height... mais quoi mettre pour les divs de contenu à hauteur variable ?...> rien je suppose


Oui.


Message édité par gm_superstar le 28-04-2003 à 14:35:28

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2003 à 14:39:01    

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">


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 14:41:07    

"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 :(


Message édité par sibelius le 28-04-2003 à 14:45:38

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 28-04-2003 à 14:55:58    

gizmo a écrit :

pour les HR, c'est color qu'il faut utiliser


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


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 28-04-2003 à 15:08:40    

SIBELIUS a écrit :

"Top, left, right et bottom" > je ne dois rien mettre alors ? Si je les vire, ça ne ressemble plus à rien


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

SIBELIUS a écrit :

"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à


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

SIBELIUS a écrit :

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 :(


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 :whistle:


Message édité par gm_superstar le 28-04-2003 à 15:13:12

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed