28173 sujets

CSS et mise en forme, CSS3

Div flottants décallés sous IE

Pages :
Bonjour à tous !

Mon site s'affiche parfaitement sous Firefox.

Et voici les problèmes que je rencontre avec IE :
* les div flottants ne se rattachent pas au div central
* toutes les images sont au format png, j'ai donc utilisé le filtre pour ie, mais j'ai tout de même un problème avec l'image de fond du block où se trouve mes textes.

Voici le lien pour accéder au code : http://www.n8crew.com/v3/index.html
Modifié par ToxiZz (29 May 2007 - 14:32)
ToxiZz a écrit :

* toutes les images sont au format png, j'ai donc utilisé le filtre pour ie, mais j'ai tout de même un problème avec l'image de fond du block où se trouve mes textes.


J'ai su résoudre ce problème en spécifiant :
height:auto !important;
height:1%;


Par contre j'ai toujours le problème de décallage de mes div flottants sous IE !
Hello Smiley smile

ToxiZz a écrit :
Par contre j'ai toujours le problème de décallage de mes div flottants sous IE !

J'arrive pas à voir le problème, décalage de quoi par rapport à quoi ? Smiley ohwell

Sinon t'as une marge sur tous tes blocs avec IE6 (ça passe FF & IE7)... mais... ça serait pas ça ton problème de décalage en fait ? Smiley confused

upload/6853-t.png

Tu m'as tout l'air d'être confronté au bug 3px jog qui rajoute automatiquement 3px de marge sur les flottants Smiley smile
Modifié par BeliG (30 May 2007 - 11:26)
fait une deuxiéme de style pour IE
t'aura un truc du genre

            <link rel="stylesheet" type="text/css" href="ff.css" />
<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

FF.css c la feuille charger par defaut et ie.css c'est la ou tu modifie quelque propriété pour que ton site soit compatible avec les deux ^^
hakkou a écrit :
fait une deuxiéme de style pour IE


Merci du conseil mais c'est justement la le problème. Je n'ai pas de solution pour IE !

Même en spécifiant des marges négatives de 3px !
Modifié par ToxiZz (30 May 2007 - 11:44)
Alors,

Pour tes onglets :

L'onglet s'adapte à la taille du texte ou la longueur est fixée ?

Si onglet fluide : je te conseil d'utiliser un tableau à 3 colonnes, c'est vraiment la m**** de faire ça avec le positionnement absolu. Si t'as une dent contre les tableaux alors étudie ce topic (aligner 3 images côte à côte).

Si la longueur est fixée alors pas besoin de 3 images, une seule peut faire l'affaire Smiley cligne

Pour tes blocs de contenu et tes outils sur la droite :

HTML
<div class="bloc">

     <div class="haut">
     </div>

     <div class="milieu">
     </div>

     <div class="bas">
     </div>

</div>

[i]/* Plutôt que ta solution :

<div class="bloc">

     <div class="gauche">
     </div>

     <div class="milieu">
     </div>

     <div class="droite">
     </div>

</div> */[/i]


CSS

.bloc { 
margin:0;
padding:0; }

.haut {
background:url(...) no-repeat;
height:...px;
width:...px;

.milieu {
background:url(...) repeat-y;
width:...px; }

.bas { 
background:url(...) no-repeat;
height:...px;
width:...px; }


J'ai pas vraiment étudié ton code c'est juste une idée qui marche balancée comme ça, à toi de t'en inspirer Smiley cligne
Modifié par BeliG (30 May 2007 - 11:56)
* La taille de mes onglets est fixe mais les images ont été découpés en trois de façon a ne pas devoir refaire des images de tailles différentes au cas ou il y aurait un menu plus large qui viendrait s'ajouter.

* La méthode soumise, càd de découper mes blocks en trois parties : haut - milieu - bas, n'est pas bonne. La largeur du site n'est pas fixe ! Il faut donc bien que je découpe le haut et le bas de ces blocks en trois : coin gauche - fond - coin droit.

Il me semble que le plus facile est encore d'utiliser nos vieux tableaux html si je comprend bien !
ToxiZz a écrit :
Il me semble que le plus facile est encore d'utiliser nos vieux tableaux html si je comprend bien !
Avant ça, tu as étudié ce tuto ? Smiley cligne

ToxiZz a écrit :
La taille de mes onglets est fixe mais les images ont été découpés en trois de façon a ne pas devoir refaire des images de tailles différentes au cas ou il y aurait un menu plus large qui viendrait s'ajouter.
Alors utilise le positionnement absolu (3 images côte à côte) Smiley smile

Ca va le faire, bon courage Smiley lol
Modifié par BeliG (30 May 2007 - 12:02)
Dans ce tuto il utilise la même image de fond pour le fond haut, le fond centre et le fond bas.

Je ne peux pas procéder comme ca :

* 1) mes images sont des png transparentes or si je mets deux images l'une sur l'autre ma transparence est foutue.

* 2) mes images de fond haut, fond centre et fond bas sont différentes.
Modifié par ToxiZz (30 May 2007 - 12:05)
Bon une dernière idée avant d'approuver la solution par tableaux : un commentaire conditionnel pour IE <= 6 qui retire 3px (margin-right:-3px;) sur ta classe corner_left (et pareil pour corner_right) ? Smiley biggrin
mais d'où vienne ces 3px ? ( a le feignant que je suis bon faudrait que je regarde ce code quand même Smiley ravi ) c un bug connu? sinon il doit y avoir un margin ou un padding a mettre a zero.
BeliG a écrit :
Si onglet fluide : je te conseil d'utiliser un tableau à 3 colonnes, c'est vraiment la m**** de faire ça avec le positionnement absolu.

Deux blocs imbriqués, des images de fond, un peu de padding... et l'affaire est dans le sac.

ToxiZz a écrit :
1) mes images sont des png transparentes or si je mets deux images l'une sur l'autre ma transparence est foutue.

C'est sûr que la transparence PNG est indispensable pour un affichage sur fond uni. Smiley biggol
ToxiZz a écrit :
???

Le fond de ta page est de couleur unie (noir, couleur générée par une image de fond d'ailleurs plutôt que par background-color, ce qui est un peu idiot Smiley cligne ). Tes images de coin n'ont donc pas besoin de la transparence PNG-24, mais juste d'avoir un fond noir également.

Ceci dit, travailler avec des éléments imbriqués, des images de fond (transparentes ou opaques) et des padding permettra d'éviter que les images de fond ne se recouvrent.
Il a bien une image de fond a mon design.
C'est une texture orange et noir.
Ton écran est surement fort sombre !
ToxiZz a écrit :
Il a bien une image de fond a mon design.
C'est une texture orange et noir.

Effectivement, c'est bien une image de texture :
- fond noir ;
- quelques pixels de #1c0e03... Smiley sweatdrop

ToxiZz a écrit :
Ton écran est surement fort sombre !

Pas besoin d'un écran particulièrement sombre pour ne pas distinguer du #1c0e03 sur fond de #000000...
Modifié par Florent V. (30 May 2007 - 15:47)
Pages :
Sujet clos
Aller à