28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis en train de me faire un site Web avec des sources de Template Gratuites.

Voici à quoi doit ressembler le site (sous Firefox ça s'affiche normalement dans un PREMIER TEMPS) :
==> AFFICHAGE NORMAL - FIREFOX

Et voilà ce que cela donne sur IE :
==> AFFICHAGE ERREUR DECALAGE - IE
Il y a un décalage avec le fond du body qui passe sur le fond de mon Conteneur.

De plus lorsque je modifie la première colonne "..:: Bienvenue sur le site de Matthieu", ça baisse la troisième colonne "My PlayList - Semaine :" Voici ce que cela donne lorsque je fais un essai de rajout de texte :
==> AFFICHAGE DECALAGE APRES RAJOUT DE TEXTE - FIREFOX

Voici la page HTML et la page CSS :
==> Page HTML
==> Page CSS

Merci pour votre aide,
.Matthieu
Modifié par GarsDuCalvados (10 May 2008 - 13:24)
Bonjour,

div#colThree a un padding-left de 520px. C'est une erreur. Il ne faut pas de padding du tout (sauf peut-être le padding-top: 40px qui n'est pas gênant).

On peut éventuellement ne faire flotter ni div#colTwo ni div#colThree, et se contenter de leur donner un margin-left de la largeur de div#colOne. Mais ne pas combiner margin-left (ou padding-left) et float: right, c'est l'un ou l'autre.
Je te remercie j'ai fais ce que tu m'as dis puis rajouté des Postion absolute et repositionné le tout par rapport au conteneur et c'est niquel Merci à toi Smiley cligne

.Matthieu
GarsDuCalvados a écrit :
j'ai fais ce que tu m'as dis

Bien.

GarsDuCalvados a écrit :
puis rajouté des Postion absolute et repositionné le tout par rapport au conteneur

Argh.

Ça, c'est une mauvaise idée. Attention aux utilisations non appropriées ou «dangereuses» du positionnement absolu. Le principal danger est de se retrouver avec des contenus qui se superposent, ce qui n'est jamais très classe et peut empêcher d'accéder à certains contenus ou certaines fonctionnalités.

Gare aussi aux hauteurs fixes (par exemple, tu as un div#content {height: 500px;}, qui posent à peu près le même problème.

Je te laisse tester ce que ça donne avec un contenu plus long que prévu, ou en agrandissant la taille du texte (Ctrl +).
Modifié par Florent V. (10 May 2008 - 16:36)