28220 sujets

CSS et mise en forme, CSS3

Problème de mise en Page XHTML

D'abord bonjour a tous je viens de m'inscrire !!

J'ai un problème de mise en page avec XHTML assez sympathique. Dans ma page j'ai un tableau 2X2. Avec deux images en haut et deux images en bas. Ces quatres images accollées forment un grande image...

Je pense qu'utiliser un tableau pour faire ce genre d'operation est plus approprié que des div. Pourquoi ne pas mettre une grande image à la place? en fait un case contient un script de rollover et il est plus malin de n'avoir a recharger qu'une partie de l'image.

En HTML 4.0 je fais mon tableau 2x2 avec un cellpadding=0 et un cellspacing=0 : ca passe j'ai une jolie image. Maintenant je me mets en XHTML (vous savez avec en haut du document <!DOCTYPE... pour etre sur de verfier les normes.

Et la la seconde ligne se detache j'ai une ligne blanche toute moche entre mes deux lignes de tableau alors je me suis dis je bidouille un peu :

- line-height :100% pour les deux
- bottom :0px en haut et top/0px en bas avec toutes les nuances margin:0px;padding:0px

Cela reduit l'espace qui etait de 3 ou quatre pixel en 1 seul pixel. Mais impossible de collées simplement ces maudites lignes.

Voila Any idea sinon je peux mettre le code pas de souci mais je suis pas sur que ce soit utile.

Celphys.
Modérateur
Salut,

S'il n'y a pas de relation entre tes colonnes et tes lignes, alors le tableau n'est pas approprié... Il vaut mieux passer par une liste et placer tes éléments avec float et clear... Smiley smile

<edit> Tiens, d'ailleurs, puisque je viens de passer par là, je te conseille la lecture de cet article.
Modifié par koala64 (05 Aug 2005 - 00:22)
Bonjour et bienvenue.
Je suppose que tes quatres quarts d'image une fois rassemblés forment une image de taille connue ? Que tu aies besoin de la massicoter pour une histoire d'effet rollover ne t'oblige pas à utiliser un tableau qui te met sous le joug des différentes interprétations des nombreux navigateurs.
Une div mesurant les deux largeurs et les deux hauteurs pour accueillir ton puzzle me semble meilleure. Tu n'auras pas de problème d'espacement entre tes jonctions.
La première image disposée dans cette div "puzzle" serait en float: left la troisième en clear: both & float: left.
Bonjour,

En complément à la réponse d'Aureance, si le rendu voulu est effectivement qu'une seule image au final, ta page ne sera pas forcément plus rapide que si tu ne la découpe pas : 4 images = 4 appels au serveur web. De plus, le code nécessaire à l'affichage découpé est très certainement plus important qu'un simple div...

Du coup, dans certain cas (poid de l'image, vitesse de connection...) et pour pas dire tous, il est plus intéressant de conserver l'image complète.

Tu trouveras certainement ton bonheur ci-dessous :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript
Sujet clos
Aller à