Effet d'habillage comme en pao ? IE affiche mieux que Firefox.

Bonsoir les gens,

Dans mon éternelle quête du bonheur css j'ai trouvé un truc qui me déstabilise encore une fois dans cet univers impitoyable des css

Billou : bien.

Firefoxou : pas bien.

<style type="text/css">
* {margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
#bloc1 {
background-color: #000066;
height: 80px;
width: 100px;
float: left;
margin-right: 20px;
color: #FFFFFF;
}
#bloc2 {
	background-color: #FF0000;
	margin-bottom: 10px;
	height: 20px;
}
</style>

<div id="bloc1">Oh yeah!</div><div id="bloc2">I</div><div id="bloc2">like</div><div id="bloc2">to</div><div id="bloc2">be</div><div id="bloc2">in</div><div id="bloc2">my css</div>

Et j'ai essayé bien entendu avec des balises p en place des divs. J'ai utilisé des divs tout simplement parce qu'elles sont sensées accueillir un contenu en ligne et en bloc. J'ai donc juste simplifié le code pour plus de lisibilité.

Bon je crois que je vais arrêter firefox et les css et me remettre aux tables (plaisanterie, on va trouver une solution hein ?)
Modifié par globy (15 Nov 2005 - 20:46)

Salut,

J'aurais tendance à te dire qu'il s'agit d'un problème de padding.
Tu n'as défini que les margin or les navigateurs ont chacun leurs propres valeurs par défaut.

Es-tu allé faire un tour à la FAQ ?
Un article est consacré au problème des différences d'interprétation .ici

J'espère que ça résoudra ton pb

Ben les paddings de mes blocs rouges et bleus sont à 0 (voir initialisation dans *) pour que les contenus de ces divs aillent jusqu'à leurs bords. Et c'est pourquoi les blocs bleus ont exactement la même dimension sur IE et FF, enfin si j'ai bien suivi la FAQ, ncp.
Si je mets un margin-left à mes blocs rouges ils vont tous décaler vers la droite. Or je veux pas un effet colonne mais un effet d'habillage comme en pao

Par contre je ne m'explique pas pourquoi IE tient compte de mon margin sur le bloc bleu et pas FF.
Modifié par globy (15 Nov 2005 - 20:45)

Salut,

Une remarque avant tout : tu devrais recentrer un peu ta quête parce que partir comme avec le même id à répétition ce n'est pas bien. Utilise des classes c'est fait pour ça.

La propriété float est assez délicate à utiliser donc ce n'est pas la peine de partir dans un quasi troll comme tu le fais au premier souci.

Sinon voici les éléments de solution.

1. Enlève le margin-right de #bloc1

2. Créé deux classes. Une pour les trois éléments qui se placeront à droite de bloc1 et une pour les autres.

3. tu mets les même propriétés que tu as déjà à chacune de ces classes et tu rajoutes à .bloc2_droite :

margin-left:120px;

et une dernière remarque pour finir, n'utilise pas des div mais des span que tu styleras en display:block; c'est plus cohérent avec le contenu.
Modifié par clb56 (15 Nov 2005 - 20:48)

Merci de cette piste. Mais le bloc bleu n'est pas défini en hauteur ni largeur normalement : il y a un script qui est sensé placer par exemple des images et du texte et varier en hauteur suivant les pages. Il se formatte donc tout seul suivant les images (toutes de la même largeur selon les pages). Donc je sais pas à l'avance combien de div rouge sur la droite seraient en pseudo indentation : toi tu m'en proposes arbitairement 3, c'est un cas précis. Mais dans les autres cas ?

Donc c'est pourquoi je parlais d'habillage pao : le texte coule autour d'un bloc. Là je voudrais que mes divs rouges habillent mon bloc bleu.

Je pensais pas en demander de trop aux css

Merci pour tes autres conseils.

j'aurais une solution mais qui est loin d'être élégante, et qui ne conviendra pas dans tous les cas...
Mais bon, ça peut être une piste

<style type="text/css">

* {margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }

#bloc1 {
background-color: #ffffff;
float: left;
height: 80px;
width: 120px;
}
#bloc1 p{
background-color: #000066;
color: #FFFFFF;
height:100%;
width:100px;
}
#bloc2 {
	background-color: #FF0000;
	margin-bottom: 10px;
	height: 20px;
}
</style>


<div id="bloc1"><p>Oh yeah!</p></div><div id="bloc2">I</div><div id="bloc2">like</div><div id="bloc2">to</div><div id="bloc2">be</div><div id="bloc2">in</div><div id="bloc2">my css</div>

Modifié par yyoupla (15 Nov 2005 - 22:02)

Bravo. C'est quasiment ça. IE prend bien le truc. FF moins : tant que n'accueille pas le bloc1 des éléments dynamiques : paragraphes, images, menu, etc (rajouter des "Oh yeah!" manuellement )

Je garde le code sous le coude. Je vais chercher encore, ça me tient à coeur ce tour de force

Merci encore à tous et bonne soirée.

//edit : j'avais pas vu le fond blanc dans le bloc1 : ça va pas, il y a une image en dessous.
Le désespoir est au bout du chemin
Modifié par globy (15 Nov 2005 - 22:50)

Piste 2 : on peut glisser une image transparent en bas de la div bloc1 (zone bleue) ? Pour l'instant elle sort de la div sans le déformer sous FF

Encore une solution, pour être compatible avec du contenu de OhYeah! plus ou moins long. Redéfinir comme ceci:

#bloc1 {
background-color: #ffffff;
float: left;
width: 120px;
}

#bloc1 p{
background-color: #000066;
color: #FFFFFF;
width:100px;
min-height:80px;
}

Bonjour,

comme l'a fait remarquer clb56, il y a confusion entre id et class dans le code XHTML. Pour l'instant, ce n'est pas valide puisqu'un id est présent plus d'une fois dans une même page et tout code CSS reposant dessus est bati sur du sable fin ... tuto class et id

effectivement, j'avais oublié de corriger ça , trop empressé de poster un truc qui semi-fonctionne...

ceci dit, ça ne résoud pas le problème...

je ne comprends toujours pas pourquoi les bloc2 s'étendent jusqu'au bord gauche

@Felipe : merci de votre patience avec les petits bleus comme moi, j'en avais pris bonne note de la remarque, à juste titre, de clb56.

@yyoupla : ton idée se bonifie. Ça pourrait à présent servir de menu dynamique tant qu'on aurait pas besoin de transparence sous (et à droite) du bloc1. Déformation verticale. Pas horizontale.

Sinon il n'y a pas un élément discret qui pourrait obliger la div en float à se déformer horizontalement ? <hr> marche pas, <img> non plus d'après ce que j'ai cru voir.
Modifié par globy (15 Nov 2005 - 23:41)

j'ai triché en créant un faux padding à droite par la différence de largeur fixe entre le bloc conteneur et le contenu du bloc1...
il doit bien y avoir un moyen bon sang de bonsoir.

Bonjour,

Reprendre le code de départ (en corrigeant le problème d'id) et utiliser simplement une bordure droite de 20 pixels et de couleur blanche à la place de la marge droite du flottant.

#bloc1 {
background-color: #000066;
height: 80px;
width: 100px;
float: left;
[b]border-right: 20px solid #fff;[/b]
color: #FFFFFF;
}

Le pourquoi du comment: le comportement d'IE, bien arrangeant certes dans ce cas précis, est cependant totalement contraire à CSS2.1. Il est dû au fait que les éléments "rouges" ont une propriété height qui leur confère accidentellement dans IE Windows un état appelé "haslayout" (il n'existe que dans ce navigateur). Cet état de "haslayout" les empêche d'interagir normalement avec l'élément flottant, et fait commencer leur arrière-plan à sa limite de marge droite, au lieu de le faire commencer à la limite de bordure gauche du conteneur comme le prévoit la spécification.
Modifié par Laurent Denis (16 Nov 2005 - 06:38)

Bonjour Laurent

Houla merci pour cette explication pointue.
Donc il n'existera aucun moyen de faire cet habillage du bloc1 sans recourir au subterfuge du "tip-ex" blanc ?
Dommage aussi si on a un border-left / right sur les block2 / 1. Enfin ce qui m'ennuie est surtout le masquage du background.

bon j'ai testé un truc qui semble simple et fonctionne apparemment : essaye une bordure droite au bloc1, blanche et "solid", de 20px si tu veux 20px, et yoplaboom !

globy a écrit :
Bonjour Laurent

Houla merci pour cette explication pointue.
Donc il n'existera aucun moyen de faire cet habillage du bloc1 sans recourir au subterfuge du "tip-ex" blanc ?
Dommage aussi si on a un border-left / right sur les block2 / 1. Enfin ce qui m'ennuie est surtout le masquage du background.

La solution de la bordure indiquée ci-dessus ne pose aucun problème.

Laurent Denis a écrit :
Bonjour,

Reprendre le code de départ (en corrigeant le problème d'id) et utiliser simplement une bordure droite de 20 pixels et de couleur blanche à la place de la marge droite du flottant.

#bloc1 {
background-color: #000066;
height: 80px;
width: 100px;
float: left;
[b]border-right: 20px solid #fff;[/b]
color: #FFFFFF;
}

pardon, tu l'avais indiqué déjà... alors c'est résolu, non ?

Laurent Denis a écrit :


La solution de la bordure indiquée ci-dessus ne pose aucun problème.

Et bien :
1) j'ai une image de background dans le body donc on verra le blanc
2) de plus le border-left dans mon bloc2 est grignoté dans FF (j'ai matérialisé par du bleu dans le code suivant)
3) mon bloc1 est grignoté de l'intérieur toujours dans FF puisque le border est inclus dans le width du bloc (si j'ai bien suivi).

Je crois qu'il existe un code pour uniformiser tous les navigateurs au niveau des borders, je suis en train de zoner sur Alsacrea. Mais à vue de nez la soluce de yyoupla me paraît plus sympathique puique le point 3) ne se pose pas.

Je rappelle le code de la soluce de Laurent :

<style type="text/css">
* {margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
.bloc1 {
background-color: #000066;
height: 80px;
width: 100px;
float: left;
border-right: 20px solid #fff;
color: #FFFFFF;
}
.bloc2 {
background-color: #FF0000;
margin-bottom: 10px;
height: 20px;
display: block;
border: thin solid #00FFFF;
}
</style>
<span class="bloc1">Oh yeah!</span>
<span class="bloc2">I</span>
<span class="bloc2">like</span>
<span class="bloc2">to</span>
<span class="bloc2">be</span>
<span class="bloc2">in</span>
<span class="bloc2">my css</span>

Le dernier code donné par yyoupla :

<style type="text/css">
* {margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
.bloc1 {
background-color: #ffffff;
float: left;
width: 120px;
}
.bloc1 p{
background-color: #000066;
color: #FFFFFF;
width:100px;
min-height:80px;
}
.bloc2 {
display: block;
background-color: #FF0000;
margin-bottom: 10px;
height: 20px;
border: thin solid #00FFFF;

}
</style>
<div class="bloc1"><p>Oh yeah!</p></div>
<span class="bloc2">I</span>
<span class="bloc2">like</span>
<span class="bloc2">to</span>
<span class="bloc2">be</span>
<span class="bloc2">in</span>
<span class="bloc2">my css</span>

Dans cette solution, la différence de hauteur pour le bloc1 entre IE et FF ne poserait pas trop de problème en cas de d'utilisation en tant contener à données dynamiques.
Modifié par globy (16 Nov 2005 - 11:11)

avec ça, non ?

p {
margin: 0;
padding: 0;
}