Problème d'alignement d'un cadre

Bonjour,

comme expliqué dans le titre, je cherche à mettre en place un cadre, à angle arrondis et ombre de portée. Pour cela, je suis parti sur une structure à 9 éléments, soit 3 colonnes de div, soit une structure comme cidessous :

corner-tl border-t corner-tr
border-l 'content' border-r
corner-bl border-b corner-br

chaque image (ex: corner-tl.png) a son propre div, et un autre div englobe chaque colonne.

Le hic, c'est que toutes mes colonnes s'alignent... hoizontalement . Elles se superposent !


Voici mon CSS :

.colonne-gauche 	{
position:relative;
float:left;
}

.colonne-milieu 		{
position:relative;
float:left;
}
							
.colonne-droite 		{
position:relative;
float:left;
}

.corner-tl		{
background-image:url(/pics/corner-tl.png);
height:30px;
width:30px;
border-width:0px;
border-style:none;
}

.corner-tr{
background-image:url(/pics/corner-tr.png);
height:30px;
width:30px;
margin:0px 0px	0px 0px;
padding:0px 0px 0px 0px;
border-width:0px;
border-style:none;
}

.corner-br{
background-image:url(/pics/corner-br.png);
height:30px;
width:30px;
border-width:0px;
border-style:none;
}

.corner-bl{
background-image:url(/pics/corner-bl.png);
height:30px;
width:30px;
border-width:0px;
border-style:none;
}

.border-t {
background:url(/pics/border-t.png) repeat-x;
height:30px;
width:400px;
border-width:0px;
border-style:none;
}

.border-r {
background:url(/pics/border-r.png) repeat-y;
height:300px;
width:30px;
border-width:0px 0px 0px 0px;
border-style:none;
}

.border-b {
background:url(/pics/border-b.png) repeat-x;
width:400px;
height:30px;
border-width:0px;
border-style:none;
}
	
.border-l {
background:url(/pics/border-l.png) repeat-y;
width:30px;
height:300px;
border-width:0px;
border-style:none;}

#content {
background-color:#999999;

width:400px;
height:300px;
border-width:0px;
border-style:solid;
border-color:White;
}

#content h1	a {
font-family:"Helvetica";											
font-style:normal;
text-decoration	:none;
color:LightSkyBlue;
}

... et mon HTML :

<div class="colonne-gauche">
	<div class="corner-tl">	</div>
	<div class="border-l">	</div>
	<div class="corner-bl">	</div>
</div>

<div class="colonne-milieu">
	<div class="border-t"></div>
	<div id="content"></div>
	<div class="border-b"></div>
</div>

<div class="colonne-droite">
	<div class="corner-tr"></div>
	<div class="border-r"></div>
	<div class="corner-br"></div>
</div>

Des idées ?? Pliiiizzz !!!
Modifié par veferfevesinfos (01 Dec 2009 - 17:18)

Et sinon juste en CSS...
- Pour les coins arrondis border-radius
- pour les ombres box-shadow

Ouais, 'fin le CSS 3, il est loin d'être partout...

veferfevesinfos a écrit :
un cadre, à angle arrondis et ombre de portée

Quelqu'un a dit has been?

veferfevesinfos a écrit :
Pour cela, je suis parti sur une structure à 9 éléments, soit 3 colonnes de div

Dans ce cas, faire un tableau de mise en forme à 9 cellules (trois lignes, trois colonnes). Ça sera beaucoup plus facile et robuste.

veferfevesinfos a écrit :
chaque image (ex: corner-tl.png)

À priori si tu as plus de, hum, disons 3 images, tu as loupé une occasion d'optimiser les temps de chargement de tes pages. Dommage.

veferfevesinfos a écrit :
Le hic, c'est que toutes mes colonnes s'alignent... hoizontalement . Elles se superposent !

Faire un tableau.
Sinon, lire ceci (pas en diagonale): http://covertprestige.info/css/boites-fluides/

Il se peut aussi, comme dit dans cet article, que tu puisse utiliser certaines caractéristiques du design souhaité pour simplifier les choses et éviter d'avoir 9 cellules de tableau ou même 4. Ça va dépendre pour l'essentiel:
- de l'utilisation de la transparence ou non;
- de la présence d'une dimension fixe en pixels (hauteur ou largeur) ou non.

veferfevesinfos a écrit :
Ouais, 'fin le CSS 3, il est loin d'être partout...

Ce qui est bloquant pour un site pro, mais pas nécessairement pour un site perso.

Puis le CSS 3 aujourd'hui c'est partout sauf les IE < 9 ... J'dis ça, j'dis rien

MoOx a écrit :
Puis le CSS 3 aujourd'hui c'est partout sauf les IE < 9 ... J'dis ça, j'dis rien

Donc à peine 50% des utilisateurs en bénéficient. Pour du partout, c'est un petit partout...

Si le but est purement décoratif et implémenté correctement, pas de problème ; si le but est d'avoir une interface identique sur les principaux navigateurs du marché, c'est pas encore jouable (ou alors il faut prévoir deux design distinct et utiliser une bonne collection de commentaires conditionnels (= maintenabilité faible)).
Modifié par Laurie-Anne (02 Dec 2009 - 10:15)

Après quelques tests, c'est vrai que le CSS3, c'est génial... sauf que malheureusement, ça ne passe pas partout, et surtout, jamais de la même manière.
Pour l'heure, j'essaie d'harmoniser mes rendus sur Firefox, Safari et Opera (que personne n'utilise, certes, mais tout ce que je leur souhaite, c'est que ça ne dure pas tellement qu'il est bien (!), donc j'y prête attention), et ce avec une seule feuille de style. Je suis sous Mac, donc je compte m'occuper d'IE plus tard.

Bref, je vous passe les détails, mais après maintes recherches et essais, ça m'a permis de me rendre compte que :

- Opera 10 ne connaît pour l'heure ni border-radius, ni box-shadow, mais intègre bien le format d'images .svg ;
- Firefox 3.5, lui, connait les deux, mais les images en .svg ne lui font ni chaud ni froid ;
- Safari 4, lui s'en sort très bien avec tout ça mais impossible de lui préciser à quel coin précis d'une boite un attribut doit s'appliquer, c'est tous... ou aucun.

Et encore, tout ça en me servant de -moz- et de -webkit-.

Au final, j'ai abandonné l'idée de mon cadre compliqué (d'autant que c'est vrai que c'était plutôt moche, en fait ) et j'ai suivi le conseil de Florent en regroupant mes coins en une seule image et en utilisant des sprites.

Cela dit (et bien que tout ça ne soit pas mon boulot), une question me taraude. Une vraie harmonisation, c'est pour quand ?

En tout cas, merci à tous les trois pour le coup de main !
Modifié par veferfevesinfos (08 Dec 2009 - 15:57)