28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je me suis lancé récemment dans la conception d'un blog 100% fait maison et sans tableau.
Je me suis donc orienté vers la méthode CSS... Or, je rencontre actuellement un très léger problème d'affichage sous Internet Explorer (voir ici) au niveau du footer.

Le fichier CSS est disponible .

Je compte élargir le blog à 650px pour info Smiley cligne Ou bien carrément le modifier pour qu'il soit fluide.

Merci de m'aider à résoudre ce problème d'affichage.
Modifié par Tool (01 Jun 2006 - 15:52)
Salut Tool,

Pour arriver à tes fins, je te conseillerai -comme nous le propose la Faq- de :

- Positionner ton conteneur principal,
- Puis accoler ton footer au bas de ce dernier.

Ton code devrait ressembler à quelque chose comme ça :
#blog {
position: relative;
}

#footer {
position: absolute;
bottom: 0;
}

Voilà...
Pour le reste, je ne saurais trop te conseiller d'aller faire un tours sur les tutoriaux et la FAQ qui sont toujours d'excellents conseils ! Smiley ravi
Je connais, j'ai déjà essayé.
Problème en faisant ça c'est ok sous IE mais pas sous Firefox...
Salut Tool,

Si tu veux mon avis, tu ferais mieux de faire ton site pour qu'il passe sous FF (qui est respectueux des standards) que sous IE.
En effet, ce dernier interprête "à sa manière" un certain nombre de propriétés CSS, ce qui fausse particulièrement les rendus d'un certain nombre de sites qui sont justement construit d'après son rendu personnel et artypique -il faut bien l'avouer -!

C'est pourquoi, il est fortement conseillé de le faire d'après le rendu de FF (qui sera le même que Netscape et Opéra -à peu de choses près) et ensuite de corriger les problèmes spécifiques à IE que l'inverse...
Smiley cligne
Cygnus merci pour tes conseils mais c'est ce que je m'efforce de faire Smiley biggrin En local je fais tout sous FF et je corrige un max de choses sous IE pour le rendre le plus compatible possible...
Je sais pas s'il existe une solution à mon problème : ça m'arrangerais Smiley confus
Personne ne peut me conseiller ? Ce n'est donc pas possible de rendre ce projet compatible IE - FF ?
Il y a deja un gros probleme avant le footer tu as un scroll horizontal de 300px c'est voulu?
Non ce n'est pas voulu et je ne l'avais d'ailleurs pas remarqué...
Pourtant le blog est en théorie bien centré en utilisant

a écrit :
#blog { margin-left:auto; margin-right:auto; width:576px; text-align:left; }
Ttout est corrigé en local (et valide sous IE Smiley ravi ). Merci pour votre aide j'ai fini par m'en sortir Smiley lol
Je pense que certains de tes problèmes proviennent déjà de ta structure ...
<div id="blog">
<div id="header"><img src="design/header.gif"></div>
<div id="sousHeader"><img src="design/sousHeader.gif"></div>
<div id="conteneur">
<div id="menuFond">
<div id="menu">
<div id="menuTexte"><a href="index.php">Accueil</a></div>
</div>
</div>

Rien que dans les 3 premières lignes tu as 7 div... Smiley sweatdrop
Ca fait un peu beaucoup tu ne crois pas ? Smiley confus
Surtout si les deux premières ne te servent qu'à insérer une image décorative !
Dans ce cas-là, on conseille plutôt de passer celle-ci en background et de l'attacher via la feuille de style -voir la FAQ à ce propos. Ca te permettra déjà d'alléger ta structure et probablement de régler un certain nombre de problèmes.

De plus, en survolant ton code, je suis tombée sur :
<div id="contenu"><p id="titresContenu">Présentation</p></div>
<br />
<div id="contenu"><p id="titresContenu">Derniers billets</p><img src="design/spacer.gif"></div>

Un id étant un identifiant unique dan la page, tu comprendras aisément que cette syntaxe est fausse et qu'elle doit être source d'un certain nombre de problèmes d'interprétation ! Je te conseillerais de lire ce billet qui t'expliqueras quand utiliser un id et quand utiliser une class.
La première chose étant tout simplement de commencer par corriger ces erreurs. Smiley murf
Bon courage... Smiley ravi
Modifié par Cygnus (01 Jun 2006 - 16:12)