Problème affichage IE Résolu/Fermé

Question

Bonjour,

Voila j'ai un petit problème. 
Je suis donc entrain de me faire un site en xhtml et css (qui est loin d'être fini mais bon), tous le codage et design a été entièrement fait par mes soins mais voila le problème pour se lien :

http://wjdesign.free.fr/portfolio.html

Jusque la tout va bien tout est en ordre etc mais le HIC c'est sur IE, tout le bas est complétement sans dessus dessous ... 

Donc j'appel a l'aide car malheureusement il y a toujours des gens sous IE --'  lol 

Merci a vous.

Alexxis38 · Answer

Oula oui !
J'en sais rien, désoler
Pas mal ton site

notobe · Answer

Corrige les erreurs :
http://validator.w3.org/...

De plus : br n'est pas faire des marges, c'est juste un saut de ligne. Il faut utiliser la propriété margin pour faire des marges.
L'utilisation massive de span est ... curieuse (pour des placement d'éléments, c'est plutôt des div car span est de type inline et non block)

Et c'est bien gentil de faire des sites pour les grands écran, mais en 1024*768... on n'en voit que les 2/3 :\

notobe · Answer

Oui, ce serait plus correct. Sauf pour le pied de page, où là, il vaudrait mieux les garder mais les inclure dans le

notobe · Answer

J'ai vu ;)

Je n'ai pas le temps là, mais je regarderai ton code de plus près.

notobe · Answer

Bien, me revoilou.

Donc, pour ton pied de page, stratégie grand changement.
Les positionnements absolus sont toujours difficiles à gérer, et positionner une image avant un texte alors que dans le code elle se trouve après, c'est vraiment donner le bâton pour se faire battre.

Donc, voici une proposition :

<div id="footer">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="Images/CSS.png" width="80" height="54" alt="css" /></a> Copyright © 2009 W&J Design - Design & Contenu by <a href="mailto:biiippp.biiiiip@free.fr">WiJi</a>
</p>
</div>

La barre.png peut être déclarée en image de fond dans les CSS.
Nouvelle CSS pour le pied de page :

#footer 
{
 margin:auto;
 padding:0;
 text-align: center;
 color: #676767;
 background:url(Images/barre.png) no-repeat;
 width:864px;
}

#footer p {
 line-height:54px;
 font-size: 80%;
 vertical-align:middle;
}

#footer p a 
{ 
color: #676767;
text-decoration: none;
   }

#footer p a:hover
{ 
 color: #ffffff
}
#footer p img {
 float:left;
 margin-left:50px;
}
img {
 border:0
}

le img {border:0} te permets de virer tous les border=no que tu as dans tes déclarations d'images et qui posent problème.
Tel qu'est fait le code, il va se mettre au milieu de la page, c'est à dire au milieu des 850px que tu as déclaré pour ton body...
Sauf que cette valeur est aberrante puisque ton pied de page en fait déjà 864px à cause de la largeur de ton image de barre, et que tu positionnes les autres images de ton contenu largement au delà et qu'elles s'étalent sur environ 1120px de large (300+300+300+220).

Donc y'a encore des "petits" trucs à revoir ;)

notobe · Answer

Je vois bien la correction du code html... mais pas vraiment celui de la feuille de style.
Tu n'aurais pas oublié de la transférer par hasard ? ;)

Alors les span des images, disons que tout cela pourrait aussi être dans la CSS.
Mais bon quand il n'y aura plus que ça.
Le problème encore du positionnement absolu, c'est que tes images ne vont pas se placer correctement selon les résolutions. 
Dans le cas actuel en 1024 on ne voit pas tout, mais si tu mets moins de 300px, c'est en 1280px que ça va faire bizarre car tout sera "tassé" sur le bord gauche.

Il vaudrait mieux passer par des positionnement flottants.
Le principe :
Tu englobes tes 3 images dans un cadre (un div) de 900px auquel tu attribues un margin:auto pour qu'il se centre.
Tu mets tes 3 images dedans, en les faisant flotter les unes par rapport aux autres pour récupérer la même présentation que maintenant et en jouant avec des margin-top pour avoir le décalage en hauteur.

Et dans ce cas, ton footer, en rajoutant un clear:both et en lui définissant un margin-top, tu pourras le placer à la distance que tu veux de tes images.

notobe · Answer

Je vois que tu sembles y être arrivé ;)

Mais il y a encore des erreurs.
Enlève tous les border=no, et il manque une fermeture de tag à l'image CSS de ton pied de page.

notobe · Answer

Pas de quoi :)
N'oublie pas de marquer le sujet en résolu.

Bonne continuation.

Problème affichage IE

8 réponses

Discussions similaires