28172 sujets

CSS et mise en forme, CSS3

Grmbl, je coince là-dessus depuis un bail... je décide de m'y remettre sérieusement, et je coince toujours.

Bon, il s'agit de faire une boite rectangulaire extensible dans tous les sens, rien que de très classique. On a donc un truc du genre :

<div>
<em class="a">texte</em>
<em class="b">texte</em>
<em class="c">texte</em>
</div>


(c'est juste pour l'exemple hein, on se moque des éléments utilisés).

On créé deux sprites pour le fond, que l'on appelle successivement : droite en haut à droite, gauche en haut à gauche, gauche en bas à gauche, droite en bas à droite. Puis on trifouille le padding pour que ça rentre bien comme il faut. Et pour les trucs en ligne, on les passe en display:block. Ok.

Or, j'ai un problème sur le troisième élément, enfin sur son fond. Il n'est pas en bas à gauche du parent (div dans mon exemple), mais en bas à gauche de lui-même (le em, donc basiquement à gauche mais au milieu verticalement du div).

Ce comportement me semble logique en fait... sauf que tous les emplois de cette technique assez classique que je peux voir (y compris l'explication soit disante détaillée de Cerderholm) marchent parfaitement, alors que le mien comme ma logique me montrent que non.

Qu'est-ce que j'ai raté ? Je craque là, je craque... Smiley biggol
Bonjour,

Jeremie a écrit :
Qu'est-ce que j'ai raté ?

Difficile à dire. Comme on ne sait même pas ce que tu as fait (où est le code, ou mieux encore la page en ligne?) et ce que tu voulais faire (quel design à intégrer), difficile de dire quoi que ce soit. Smiley cligne
Mouais... ben à vue de nez tu t'y prends pas de la bonne manière (ou d'une des bonnes manières possibles). Si tes em doivent s'afficher comme du texte normal, qui plus est en display: inline;, tu ne peux pas les utiliser pour placer tes coins.

Si tu travailles en largeur fixe:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Pour des constructions plus complexes:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html
Heu non, mes em s'affichent tous en bloc justement. En clair, ça revient exactement au même que de faire :

<div>
<div></div>
<div></div>
<div></div>
</div>


Ce que (basiquement) tu préconises sur ton site.

Si il y a un problème spécifique aux éléments inline en display block (je ne vois pas pourquoi, mais j'ai peut-être raté un truc) je peux les remplacer par les paragraphes par exemple, mais je pense que le problème sera le même :

comment est-ce que le troisième élément (deuxième élément enfant) peut prendre la taille de l'élément parent (puisque à priori c'est ça le problème) ?

Edit : bon en fait il semble bien y avoir un problème avec les inlines, il faut absolument que ce troisième élément soit un bloc natif. Le pourquoi m'échappe un peu, mais j'ai fini par trouver une solution plus acceptable que la brouette de div pour afficher 3 pov' trucs. Merci quand même Smiley smile .
En fait, il semblerait qu'il faille que ce troisième élément ait comme parent le premier bloc global... et quelque part, ça a un sens. Ca n'a donc rien à voir avec bloc vs inline, mais plutôt sur qui est le parent de quoi.
Modifié par Jeremie (10 Apr 2008 - 19:05)
Jeremie a écrit :
En clair, ça revient exactement au même que de faire :

<div>
<div></div>
<div></div>
<div></div>
</div>


Ce que (basiquement) tu préconises sur ton site.

Hmm... non.
Les solutions que je préconisent auraient plutôt tendance à utiliser des imbrications:
<div>
	<div>
		Bla bla du contenu quel qu'il soit.
	</div>
</div>

Si on travaille en largeur fixe, le balisage ci-dessus suffit dans la plupart des cas.

En largeur et hauteur fluide, en collant au design de ton exemple, on peut faire des choses du genre:
<div class="conteneur">
	<span class="coin bas-gauche"></span>
	<span class="coin haut-droit"></span>
	<div class="subconteneur">
		Bla bla du contenu quel qu'il soit.
	</div>
</div>

Et du CSS dans ce genre:
div.conteneur,
div.conteneur span.coin,
div.conteneur div.subconteneur {
	background: black url(big-black-background.png) no-repeat center center;
}

div.conteneur {
	position: relative;
	padding: 10px 0 0 10px;
	background-position: left top;
}
div.conteneur span.coin {
	position: absolute;
	height: 10px;
	width: 10px;
}
div.conteneur span.bas-gauche {background-position: left bottom;}
div.conteneur span.haut-droit {background-position: right top;}
div.conteneur div.subconteneur {
	padding: 1px 11px 11px 1px; 
	background-position: right bottom;
}

Et une grosse image de 2000px par 3000px par exemple. Avec un design simple et en PNG, ça ne pèse pas grand chose.
Modifié par Florent V. (10 Apr 2008 - 19:25)