Passage d'un design html -> xhtml / css

Hey !

Vala, j'ai un petit prob avec un design. Le design a d'abord était codé en html, puis récemment j'ai décidé de le passer aux normes W3C en xhtml 1.0 strict et CSS mais il se trouve que je n'arrive pas à avoir le même résultat.

Je m'explique, la version html est ici, comme vous pouvez le voir, tout est droit, centré et j'utilise la méthode ancestrale des spacer^^.

La version xhtml / css est là et comme vous le voyez, il y'a une première ligne droite sans soucie et une deuxième ligne qui ne va pas pareil, alors j'ai usé de tous les alignements que je connaissait pour chacun de ces tableaux et je les ai mis a 0px mais rien à faire. J'ai remarqué aussi que mes images ne se "collées" pas, pour ma première ligne, entre l'header et "image_02.gif" il y'a l'image que j'ai mis en background . Le css se trouve ici.

Je bloque depuis un bon moment dessus, et je ne fais que débuter en xhtml et css donc si quelqu'un passait par là et avait une idée, je crois que je lui ferais de gros bizou partout^^.

Bonjour, et bienvenue à toi sur ce forum,

Comme c'est ton premier post sur le forum je t'invite à passer lire les Règles du forum ainsi que ce post pour bien vérifier que tu as suivi la bonne démarche :
Méthodologie à lire

D'ailleurs, ton problème est une question de design et de mise en page (CSS) et n'a rien à voir avec le salon sur la structure (HTML/XHTML). Je déplace dans le bon salon.

Si le coeur t'en dit tu peux aussi passer au bar du forum pour les présentations.

Madness Guigui a écrit :
Le design a d'abord était codé en html, puis récemment j'ai décidé de le passer aux normes W3C en xhtml 1.0 strict et CSS

Note : avant de se heurter à quelques confusions, il ne faut pas oublier que HTML reste une norme aussi et que ce n'est pas parce que tu veux faire un design en CSS que tu dois structurer en XHTML. C'est tout à fait indépendant.

Oops, désolé pour le thread dans le mauvais salon.

Pour ce qui est des confusions, moi je n'en est aucunes, c'est juste que je veux développer en xhtml^^.

Madness Guigui a écrit :
Pour ce qui est des confusions, moi je n'en est aucunes, c'est juste que je veux développer en xhtml^^.

Bien, dans ce cas il n'y a effectivement aucun rapport avec les CSS.

Les seules différences fondamentales entre HTML et XHTML sont de l'ordre de la rigueur :

* Toute balise ouvrante doit être fermée
* Balises et propriétés en minuscules
* Valeurs entre double quotes (guillemets)
* Chaque propriété doit avoir une valeur (pas de propriété vide)
* Les balises doivent être correctement imbriquées

Du coup, je ne comprends plus vraiment ta question puisque selon toi ce n'est pas une question de mise en page (CSS) mais de structure (HTML/XHTML)

Passer de HTML à XHTML n'a aucune incidence sur le design.
Par contre, passer de tableaux à du full CSS en a beaucoup.

J'ai bien l'impression que pour toi XHTML = CSS

Donc peux-tu être plus précis ?

À noter que dans le CSS les lignes de commentaires devraient être fermées.

[#red]/*  ------------------------------------------
/*  Corps Principal
/*  ------------------------------------------
*/[/#]

[#blue]/*  ------------------------------------------ */
/*  Corps Principal */
/*  ------------------------------------------
*/[/#]

Raphael a écrit :

* Valeurs entre double quotes (guillemets) => simple quote valide xhtml 1 strict je crois bien
* Chaque propriété doit avoir une valeur (pas de propriété vide) => je crois que cols="", alt="", rows="", ... passent la validation... mais pas sûr à 100%, enfin si tel est le cas, ça souligne les limitations de la validation

Finalement, je comprend pas la question de départ moi

Yep, je me suis embrouillé là. Je pense plutôt à un design full css .

Pour les commentaires, j'arrange ça de suite.

Merci.

Si tu souhaites passer à la mise en page Full CSS, il te faut à mon avis bien connaitre auparavant le code xhtml utilisé, ensuite une fois les bases bien acquises, le passage à la mise en page CSS se fera bien plus facilement.

Pour ce qui est de la mise en page, les tutoriels d'alsa devraient pouvoir t'aider.

ElMou a écrit :
=> je crois que cols="", alt="", rows="", ... passent la validation... mais pas sûr à 100%, enfin si tel est le cas, ça souligne les limitations de la validation

Je n'étais pas assez clair : une valeur nulle ("") est une valeur.

Par contre, on ne peut plus écrire : <input type="checkbox" checked />. (propriété sans valeur)
Mais : <input type="checkbox" checked="checked">

http://www.vulgarisation-informatique.com/passer-xhtml.php

Ahh wala je suis d'accord alors !
Mais par contre, ça serait interessant que le validateur ne valide pas ceci

attribut=""

Enfin, je ne pense pas qu'un attribut sans valeur ait une quelconque raison d'exister... enfin je m'écarte là

L'attribut alt="" est d'une grande utilité même avec une valeur nulle...

@Stephan => c'est ironique là ou quoi ?

ElMoustiko a écrit :
@Stephan => c'est ironique là ou quoi ?

Non ce n'est pas ironique.
Il me semble (à confirmer) que si la valeur de Alt est nulle (""), alors l'image ne sera pas prise en compte par les navigateurs textes qui "comprendront" qu'il s'agit d'une image sans intérêt.

@ElMoustiko

bah non !

Si l'attribut est obligatoire, il faut le mettre mais si l'image a un titre descriptif, je ne vois pas l'intérêt d'être redondant, à moins que je ne fasse fausse route...

<div class="diapo">
 <h5>Arrivée à Mirabel</h5>
 <img src="images/mirabel.jpg" width="400" height="300" alt="" />
 <p>Photo : Stephan Johnson</p>
</div>

Modifié le 02 Jan 2005 - 16:00

Woula, je trouve tout celà un peu douteux...

Raphael a écrit :

Il me semble (à confirmer) que si la valeur de Alt est nulle (""), alors l'image ne sera pas prise en compte par les navigateurs textes qui "comprendront" qu'il s'agit d'une image sans intérêt.

Je confirme.

À titre d'exemple, cette page nous montre des images inutiles :
http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.uqtr.ca%2F

Oui mais des images inutiles n'ont rien à faire dans une page web, enfin, dans la partie HTML, si c'est inutile, j'entend par là, décorative, donc direction CSS et donc alt="" en xhtml strict ne devrait pas être utilisé.

Me trompe-je ?

On peux vouloir que les images apparaissent tout de même sur un navigateur graphique avec CSS désactivé sans pour autant nuire aux navigateurs textuels...

Anyway, pas d'ironie dans mon propos !

J'entend par inutiles => inutiles en mode texte.

<edit>
Je viens d'ouvrir un sujet à ce propos :
http://forum.alsacreations.com/topic.php?fid=6&tid=1163
</edit>
Modifié le 02 Jan 2005 - 16:19

Pour mon problème, personne n'aurait la solution ?

Je pense que ça peut venir du fait que j'ai un background et des images par dessus.