Titre: Hack CSS (Uregent !!!)
Posté par: h4ck.n3t le le 30-09-2008 a 17:20:54
Bonjour à tous !
Voila, j'ai deux problème avec ce cher IE6... >:( >:( >:(
Je suis en train de créer (encore ;D ) un site web, et j'ai besoin de 2 hacks :
-le premier permettrait de corriger un float left appliqué à un menu (#menu), qui se positionne dessus le corps au lieu que ce soit à côté,
-le second, un hack trés connu mais que j'ai jamais réussis a faire fonctionner : le hack pour que IE6 lise les PNG transparente.
J'en ai trouvé en pagaille, mais je n'ai jamais réussi à l'adopter sur mon site...
A savoir : ce png est inclus en CSS via un background-image, et à une propriété repeat-x-y. Il mesure 1x1 px et est transparant (avec une petite opacité).
:o:o:o xD
Merci de m'expliquer pas à pas pour le second... |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: sbo le le 08-10-2008 a 18:14:58
Salut,
Concernant les PNG, je te conseille de ne pas les utiliser. Si c'est vraiment incontournable, il faut savoir que IE6 pose problème :
Il faut utiliser la propriété CSS réservée à IE :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
au lieu de la propriété standard "background"
Cette propriété agit comme une fonction de remplissage. Par conséquent elle "détruit" le conteur et son contenu.
-> Cette propriété ne se comporte pas comme un background normal (pas de repeat, scroll possible, etc...)
-> tu ne peux appliquer un PNG que dans un <span> ou <div>
Voila. Pour ma part je fais en sorte de ne jamais l'utiliser.
Pour le positionnement flottant, je n'ai pas vraiment compris ta question, probablement un problème lié aux interactions entre flux normal et élément flottant..?
@+ |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: h4ck.n3t le le 08-10-2008 a 18:20:41
Ôk, j'essayerais de ne pas les utiliser...
Pour ce qui est des float, un exemple vaut mieu qu'un discours :
http://h4ck.n3t.free.fr/XD-lire/ (http://h4ck.n3t.free.fr/XD-lire/) <== Ouvre ce lien avec IE et dis moi... |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: sbo le le 08-10-2008 a 18:37:15
Concernant le float, je vois pas le problème. Ta CSS est correcte :)
#menu {style.css (line 29)
background:#499028 none repeat scroll 0%;
color:#8C9095;
float:left;
height:auto;
margin:10px 20px 20px 0pt;
padding:10px 0pt 30px;
width:195px;
} |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: h4ck.n3t le le 08-10-2008 a 19:42:12
| C'est pour ça que je post... Je ne vois aucune erreures... ??? ??? ??? |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: sbo le le 09-10-2008 a 10:23:21
Salut,
Désolé, je n'avais pas vu le problème car cela fonctionne sur FF2. Le problème vient de
IE6. N'est ce pas ?
J'aurrais fait ainsi :
body {style.css (line 3)
background:#3A3A3A url(images/fond.png) repeat fixed 0%;
color:#379500;
font-family:bold,"Comic Sans MS",serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:auto;
line-height:normal;
margin:auto;
padding:0pt;
text-align:center;
}
=> pas de width dans le body
#body {
opacity:0.7;
width:780px;
}
#menu {
background:#499028 none repeat scroll 0%;
color:#8C9095;
float:left;
height:auto;
padding:10px 0pt 30px;
width:195px;
}
et
#corps {
background:#333333 none repeat scroll 0%;
height:auto;
padding:0pt 0pt 30px;
width:580px;
float:right;
}
Normalement cela devrais mieux marcher ainsi. Oublie pas de vérifier que la somme des largeurs de tes conteneurs right / left ne dépasse pas la largeur du conteneur parent (#body)
De façon général, les "margin" sont à éviter sur des éléments flottant. Préfère le
"padding"
Egalement, évite ce genre de chose :
<br clear="all"/>
Cela appartient à une autre époque :) |
Titre: Re:Hack CSS (Uregent !!!)
Posté par: h4ck.n3t le le 09-10-2008 a 22:30:16
| Ok ok merci pour tout, je teste et je post pour la réponse... |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|