Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Xhtml/Css] problèmes

(mais je ne sais pas d'ou ca vient)

cdel06
29 janvier 2006 à 17:53:07

Salut
je viens de terminer le codage d'un design mais quelques problèmes subsitent et je n'arrive pas à determiner ni d'où ils viennent ni comment les corriger; je compte sur vous.
le site en question

Citation : Problèmes

sous ie
- "la barre de fin du design" s'affiche en bien trop grosse alors qu'elle ne devrait faire qu'un px de hauteur (celle-ci, le bloc "bas")

sous ff
- le bloc "site" passe par dessus (ou par dessous) les blocs "ajouts" et "actualites"
- il n'a pas la même largeur que sous ie.



Citation : Xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
</head>

<body>


<!-- En-tête -->
<div id="header"> </div>
<div id="menu_h"> </div>
<!-- Fin de l'en-tête -->

<div id="conteneur">
<!-- Menu -->
<div id="menu">
<div id="menu_top"> </div>
</div>
<!-- Fin du menu -->

<!-- Contenu -->
<div id="contenu">
<div id="news"></div>
<div id="ajouts"> <img src="images/ajouts.gif" alt="ajouts.gif, 1 kB" title="ajouts" height="14" width="231"></img> </div>
<div id="actualites"> <img src="images/actualites.gif" alt="actualites.gif, 0 kB" title="actualites" height="14" width="161"></img> </div>
<div id="site"> <img src="images/site.gif" alt="site.gif, 0 kB" title="site" height="8" width="610"></img> </div>
</div>
<!-- Fin du contenu -->
<div id="bas"> </div>


</div>


</body>
</html>


Citation : Css

html, body
{
width: 791px;
background-color: #e0e4e0;
margin: auto;
}


/* En-tête */
#header
{
width: 791px;
height: 158px;
background-image: url("images/header.gif");
margin-top: 5px;
}

#menu_h
{
width: 791px;
height: 43px;
background-image: url("images/menu_h.gif");
margin-top: 5px;
}
/* Fin de l'en-tête */

#conteneur
{
width:788px;
margin-top: 5px;
background-image: url("images/conteneur.gif");
}

/* Menu */
#menu
{
width: 158px;
float: left;
}

#menu_top
{
width: 156px;
height: 58px;
background-image: url("images/menu_top.gif");
margin-left: 1px;

}
/* Fin du menu */

#contenu
{
width: 624px;
border-top: 1px black solid;
float: right;
padding-top: 5px;
}

#news
{
width: 187px;
height: 22px;
background-image: url("images/news.gif");
margin: auto;
}

#ajouts
{
width: 300px;
background: none;
margin-top: 5px;
border: 1px black solid;
float: left;
margin-left: 3px;
margin-bottom: 5px;
}

#actualites
{
width: 300px;
background: none;
margin-top: 5px;
border: 1px black solid;
float: right;
margin-right: 3px;
margin-bottom: 5px;
}

#site
{
width: 610px;
background: none;
margin-top: 5px;
border: 1px black solid;
float: none;
margin: auto;
}

#bas
{
clear: both;
width: 788px;
height: 1px;
background-image: url("images/bas.gif");
margin-top: 5px;
}



Je vous remercie beaucoup d'avance
(j'avoue n'y rien comprendre o_O )
  • Partager sur Facebook
  • Partager sur Twitter
zeunyton
29 janvier 2006 à 23:05:50

Bon pour ton probléme sous IE il te suffit simplement de rajouter cette ligne dans ton css en plus des autres :
#bas{
background-repeat:no-repeat;}

pour se qui est de ton probléme sous FF je pense que ta DIV conteneur dois reprendre l'ensemble de tes divs maintenant a toi de tester cela @+

Ha oui j'allais oublié tu dois mettre ton code html dans le code html prévu appeler BBCode est ton css dans le Css BBcode.
  • Partager sur Facebook
  • Partager sur Twitter
jp949
30 janvier 2006 à 7:06:50

#site
{
width: 610px;
background: none;
margin-top: 5px;
border: 1px black solid;
clear:both; /*mets ca a la place de float:none */
margin: auto;
}
  • Partager sur Facebook
  • Partager sur Twitter
cdel06
30 janvier 2006 à 17:06:22

merci pour vos réponses, grace à vous certains problèmes ont été résolus ou en partie résolus.
Il reste encore qqs problèmes, donc si vous avez des idées pour comment les réparer, n'hésitez pas.

Citation : Problèmes

sous ie

dorénavant la barre de fin (bloc "fin") s'affiche bien avec un seul px de largeur mais la taille du bloc est tout de même trop large.

sous ff et ie

les images ajouts.gif et actualites.gif ne sont pas centrées.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon Site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
   </head>

   <body>

       
           <!-- En-tête -->
        <div id="header">       </div>
  <div id="menu_h"> </div>
           <!-- Fin de l'en-tête -->
          
<div id="conteneur">
           <!-- Menu -->
        <div id="menu">
      <div id="menu_top"> </div>
  </div>
    <!-- Fin du menu -->
     
    <!-- Contenu -->
  <div id="contenu">
    <div id="news"></div>
    <div id="ajouts"> <img src="images/ajouts.gif" alt="ajouts.gif, 1 kB" title="ajouts" height="14" width="231"></img> </div>
    <div id="actualites"> <img src="images/actualites.gif" alt="actualites.gif, 0 kB" title="actualites" height="14" width="161"></img> </div>
    <div id="site"> <img src="images/site.gif" alt="site.gif, 0 kB" title="site" height="8" width="610"></img> </div>
  </div>
    <!-- Fin du contenu -->
  <div id="bas"> </div>
  <div id="fin"> </div>
 

</div>   
               

  </body>
</html>



html, body
{
   width: 791px;
   background-color: #e0e4e0;
        margin: auto;
}

       
        /* En-tête */
#header
{
        width: 791px;
        height: 158px;
        background-image: url("images/header.gif");
        margin-top: 5px;
}

#menu_h
{
        width: 791px;
        height: 43px;
        background-image: url("images/menu_h.gif");
        margin-top: 5px;
}
        /* Fin de l'en-tête */
       
#conteneur
{
   width:788px;
        margin-top: 5px;
        background-image: url("images/conteneur.gif");
}

        /* Menu */
#menu
{
        width: 158px;
        float: left;
}

#menu_top
{
        width: 156px;
        height: 58px;
        background-image: url("images/menu_top.gif");
        margin-left: 1px;
       
}
        /* Fin du menu */
       
#contenu
{
        width: 624px;
        border-top: 1px black solid;
        float: right;
        padding-top: 5px;
}

#news
{
        width: 187px;
        height: 22px;
        background-image: url("images/news.gif");
        margin: auto;   
}

#ajouts
{
        width: 300px;
        background: none;
        margin-top: 5px;
        border: 1px black solid;
        float: left;
        margin-left: 3px;
        margin-bottom: 5px;
}

#actualites
{
        width: 300px;
        background: none;
        margin-top: 5px;
        border: 1px black solid;
        float: right;
        margin-right: 3px;
        margin-bottom: 5px;
}

#site
{
        width: 610px;
        background: none;
        margin-top: 5px;
        border: 1px black solid;
        clear: both;
        margin: auto;
}

#bas
{
        clear: both;
}

#fin
{
        width: 788px;
        height: 1px;
        background-image: url("images/bas.gif");
        background-repeat: no-repeat;
        margin-top: 5px;
}


merci beaucoup d'avance pour les réponses à venir
et encore merci pour vos réponses précédentes !

Ps: J'ai oublié de réindiquer le site
  • Partager sur Facebook
  • Partager sur Twitter
aimak
30 janvier 2006 à 17:08:52

Titre non-explicite :) .

++
aimak
  • Partager sur Facebook
  • Partager sur Twitter