28173 sujets

CSS et mise en forme, CSS3

Bug de Float avec IE.

Bonjour tout le monde Smiley cligne ,
voila je viens exposer un probleme concernant l'interpretation de mon CSS avec IE, en effet j'ai fait un site et j'aimerais savoir qu'est-ce qui bugue dans mon code Smiley decu (C'est vraiment dommage que IE interprete pas comme FireFox ...)

Voici mon site :

http://s148035913.onlinehome.fr/FF.jpg
(FireFox tout va bien.)

http://s148035913.onlinehome.fr/IE.jpg
(Internet Explorer tout va mal enfin j'exagere mais je crois que le bug est visible ....)

Voici le code de ma page XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Eternal RO</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design habituel" href="eRosite.css" />
   </head>
   <body>
   <div id="banniere">
   <MAP NAME=map>
   <AREA SHAPE=rect COORDS="680,40,762,57" HREF="shoutbox.php" ALT="Shoutbox">
   <AREA SHAPE=rect COORDS="576,40,671,57" HREF="partenariat.php" ALT="Partenariats et Liens">
   <AREA SHAPE=rect COORDS="432,40,568,60" HREF="telechargement.php" ALT="Telechargements">
   <AREA SHAPE=rect COORDS="696,20,737,35" HREF="staff.php" ALT="Equipe de eRo">
   <AREA SHAPE=rect COORDS="622,19,686,36" HREF="serveur.php" ALT="Le serveur">
   <AREA SHAPE=rect COORDS="530,19,613,38" HREF="ragnarok.php" ALT="Ragnarok Oo">
   <AREA SHAPE=rect COORDS="457,17,522,37" HREF="site.php" ALT="Accueil">
   <AREA SHAPE=default HREF="site.php">
</MAP>
 <IMG USEMAP="#map" SRC="images/banniere.jpg" WIDTH=789 HEIGHT=67 ALIGN=bottom border=0>
   </div>
   
   <div id="image">
   <div id="status">
      <?php
   include("status/index.php");
   ?>
   </div>
   </div>

   
   <div id="serveurstatut">

   </div>
         <div id="droite">
   </div>
   <div id="corps">
   <p>
   Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />
      Le site de Eternal Is GODLIKE !!!<br />

   </p>
   </div>

   <div id="pub">
   
   </div>
   
   <div id="copyright">
   </div>
   </body>
   </html>


Le CSS :
body
{
width: 789px;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
background-color: rgb(58,58,58);
}

#banniere
{
width: 789px;
height: 67px;
margin: 0px;
}

#image
{
margin: 0px;
width: 789px;
height: 207px;
background-image: url("images/image.jpg");
}
#status
{
padding-top: 5px;
padding-left: 25px;
}
#serveurstatut
{
float: left;
width: 789px;
height: 61px;
background-image: url("images/statut.jpg");
}
#droite
{
   float: right;
   width: 258px;
   height: 269px;
   background-image: url("images/droite.jpg");
   }
#corps
{
min-height: 300px;
width: 789px;
background-image: url("images/corps.jpg");
}
#corps p
{
margin: 0px;
padding-left: 50px;
}
#pub
{
}

#copyright
{
width: 789px;
height: 59px;
background-image: url("images/copyright.jpg");
}


Voila en esperant que vous saurez m'aider =).

Merci beaucoup d'avance Smiley biggrin .
Bonjour,

A première vue, tu pourrais essayer de réduire la largeur de #corps afin qu'il puisse "tenir" à côté de #droite.

Mais, attention ta façon de procéder pour #droite (image en feuille de style) n'est pas du tout accessible. Ton image de droite n'est pas purement décorative mais correspondant à des liens.

Je t'invite à lire ceci :

241-balise-img-ou-feuille-de-style
En ce qui concerne l'image de droite ne t'inquiete pas je le sais =).

Je modifierais cette image plus tard ^_^ (Je sais comment je vais faire)

Après modifications : la taille de #corps est exactement egale a la difference de la largeur de #body et la largeur de #droite donc ca devrais marcher mais ca ne fonctionne pas il me le met toujours en dessous Smiley decu ...

Je pense avoir trouvé une solution mais il va falloir que je change la structure du site Smiley cligne en esperant que ca va fonctionner sinon continuer a me proposer des solutions au cas ou ca peut aider ...
Modifié par V-LINK (14 May 2006 - 12:45)
a écrit :
Après modifications : la taille de #corps est exactement egale a la difference de la largeur de #body et la largeur de #droite


Essaye de la diminuer davantage, il faut tenir compte des marges du bloc (ou les mettre à zéro.

Et de mettre #corps en float : left
Modifié par herve (14 May 2006 - 13:06)
Salut,

Petit HS et coup de gueule personnel : tes deux images pèsent autour de 400 ko chacunes. Ça fait un peu lourd sur un forum...
Quelques solutions pour ne pas incommoder ceux ayant des connexions plus lentes :

* utiliser le service du site qui permet de créer des miniatures associées à un lien pointant sur l'image -> "Joindre une image"

* utiliser le service d'imageshask qui permet de faire la même chose : http://imageshack.us

* se faire soit même une miniature et la faire pointer sur l'image :[ url=adresse-de-la-miniature][ img]adresse-de-l'image[/ img][/ url] (sauf erreur)

* utiliser un lien textuel pointant sur l'image

* dernière alternative compresser ton image : ça ne sert à rien d'avoir une image non compressée ici : rubrique CSS, on ne parle pas de design, mais de codage...

Fin du petit HS.
Modifié par Smiley neko (14 May 2006 - 14:11)
Salut

Essai ca



#corps
{
margin-right: 270px;
min-height: 300px;
background-image: url("images/corps.jpg");
}


A+
Désolé Neko je le referais plus Smiley langue .

Enfin bon moi j'ai horreur d'avoir un lien qui pointe vers une image sur un forum je prefere la voir directement. Fin bon la prochaine fois j'te ferais plaisir Smiley cligne .

Lol le bugue laid : Maintenant ca marche sous IE, mais plus sous Firefox Smiley sweatdrop ... bon vais encore essayer de travailler le code pour que ca marche =)
Modifié par V-LINK (14 May 2006 - 20:52)
Sujet clos
Aller à