28173 sujets

CSS et mise en forme, CSS3

Image qui ne s'agrandie pas avec Firefox

Bonjour,
j'ai semblerai un problème d'incompatibilité IE/firefox

voyez par vous même le résultat avec les 2 navigateurs :la page

le code est le suivant css:
<style type="text/css">
body {
background-image: url(images/fond_parquet6.jpg);
color: white;
font-style: verdana, sans-serif;
font-size: 90%;
}
#conteneur {
position: absolute;
width: 900px;
left: 50%;
margin-left: -450px;
}

#header {
height: 200px;
background-image: url(images/banniere.gif);
}

#gauche {
position: absolute;
left:3px;
width: 145px;
height: 430px;
background-image: url(images/menu4.gif);
}

#centre_haut{
background-image:url(images/centre_haut.gif);
margin-left: 150px;
width:751px;
height:25px;
right:10;
}

#centre_bas{
background-image:url(images/centre_bas.gif);
margin-left:150px;
width:751px;
height:24px;
}

#centre_milieu{
background-image:url(images/centre_milieu.gif);
width:751px;
height:378px;
margin-left: 150px;
right:10;
padding:25px;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:25px;
}

.menugauche li {
margin-bottom: 8px; <!-- espacement entre les rubriques -->
}

.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

.menugauche a:hover {
text-decoration: none;
background-image:url(images/ballon_puce.gif);
background-repeat:no-repeat;
background-position:1% 50%;
padding-left:15px;
color:white;
}

#pied {
height: 30px;
background-color: none;
margin-top:5px;
}

</style>


le code du body :
<body>

<div id=conteneur>
<div id="header"></div>


<div id="gauche">

<ul class="menugauche">
<li><a href="">Comité</a></li>
<li><a href="">Equipes</a></li>
<li><a href="">Championnats</a></li>
<li><a href="">Infos basket</a></li>
<li><a href="">Détente</a></li>
<li><a href="">Liens</a></li>
</ul>

</div>

<div id="centre_haut"></div>



<div id="centre_milieu">

partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />


</div>

<div id="centre_bas"></div>


<div id="pied"></div> <!-- pied de page invisible c'est pour l'esthétique -->


</div>
</body>


je ne sais pas de ou sa peut venir, j'ai essayé en ne précisant pas de hauteur dans centre_milieu.
Et quand je met un fond uni (sans image) sa fonctionne
aidez moi svp...
merci d'avance
Et bien l'intéret c pour faire plus beau...
Mais je ne sais pas qu'on peut faire la même chose en css
Si tu peux m'expliquer ce serai sympa...
dondecadent a écrit :
Et bien l'intéret c pour faire plus beau...
Mais je ne sais pas qu'on peut faire la même chose en css
Si tu peux m'expliquer ce serai sympa...



bonsoir,
il te suffit simplement de prendre une partie sur toute la largeur de ton image, d'une hauteur de quelques pixels, ex 4 pixels de l'enregistrer en gif. tu obtient ainsi une image sur la largeur de ta page et d'une hauteur de 4 pixels. nommé centre_fond.gif
ensuite dans div milieu_centre

en background tu peux mettre :

background: url(images/centre_fond.gif) left top repeat-y;


left top : c'est pour positionner ton image dans ton div
repeat-y : c'est pour repeter ton image selon l'axe y donc selon la verticale.

a+
je met 
[code]background: url(images/centre_fond.gif) left top repeat-y;
directement dans la balise <div> ?
ou dans [/code]
#centre_milieu{
width:751px;
height:378px;
margin-left: 150px;
right:10;
padding:25px;
}[code]
sa fonctionne sous IE, mais sous Firefox, y a toujours un problème, le centre s'agrandi bien, mais il est complétement a gauche...

voici le nouveau code :
#centre_milieu{
           background: url(images/centre_fond.gif) left top repeat-y;
           width:751px;
           <!--height:378px;-->
           margin-left:150px;
           right:10px;
           padding:25px;
           }
Salut

pour que la hauteur suivent sous FF et IE


#centre_milieu{
           min-height:300px;
           _height:300px;
}


Pour l'image Angelik a raison il faut le mettre en CSS


#centre_milieu {
background: url(images/centre_fond.gif) left top repeat-y;
.....
.....
.....
}


A+
Merci gege,
Avec ta méthode,sa fonctionne tjs bien sous IE, mais sous Firefox, c'est presque ça, sauf que l'image se duplique un peu à droite (mais elle s'agrandie, c déja ça...)

Et avec la méthode d'angelik,elle s'agrandie bien aussi, elle ne se duplique pas, mais elle est complétement à gauche...

Comment résoudre ça ?
Corrige ton site en ligne

Si j'applique la correction au CSS, ici c'est OK

A+
Modifié par gege71 (05 May 2006 - 23:17)
Autre erreur les styles se mettent dans le header
(ou dans un ficher CSS externe)

A+
Modifié par gege71 (05 May 2006 - 23:22)
rien a voir avec ta question, mais : 
background-color: none;

n'existe pas.



c'est plutot avec image :
background-image: none;


pour mettre transparent c'est :

background-color: transparent;



a+

ps sauf erreur de ma part...
Modifié par Angelik (05 May 2006 - 23:26)
oui sa fonctionne, merci pour tout
Mais tu va dire que je chipotte, mais avec Firefox, il y a un petit décalage, sur le bord a droite, par rapport a l'image "centre_haut", alors qu'avec IE pas...
Comment sa ce fait ??
comment régler ce petit décalage ??
regarde ton image (largeur 755px) pour un div de 751px Smiley biggrin

PS : tu peux encore reduire sa hauteur 1 px suffit


A+
Sujet clos
Aller à