Width 100% - X px

Salut à tous,

j'ai un problème de CSS, j'ai fais quelques essais mais rien de bien concluant, de meme pour mes recherches ...

En faite je voudrai faire un cadre avec bord arrondi sans utiliser le CSS3 (donc 3 div je pense) une div gauche avec une image en background de 12px de large, une div droite avec une image en background de 8px de large, et au centre une div de 100% avec une image en background.

Ce qui me donnerai au final une div centrale de : 100% - 12px - 8px

Auriez vous une solution à mon problème ?

Merci d'avance !

Hello LapinOuf et bienvenue,

en attendant CSS3 et la fonction calc on ne peut pas faire ce genre de calcul. Tu pourrais jeter un œil à http://covertprestige.info/css/boites-fluides/
Modifié par Heyoan (07 Aug 2010 - 18:44)

Merci pour ta réponse, mais si j'ai bien compris c'est faire en tableau ou alors une grosse magouille pour le faire en div ... !?

LapinOuf a écrit :
c'est faire en tableau ou alors une grosse magouille pour le faire en div ... !?

Ben il n'y a aucune magouille. Simplement si tu te retrouves avec 9 divs au lieu de 9 cellules de tableau ça n'a pas d'intérêt.

En complément tu peux voir : Créer des coins arrondis en CSS et sans images.

En faite je voulais éviter d'utiliser le CSS3 car il n'est pas toujours très compatible avec tous les navigateurs, je pense surtout a notre très cher IE ...

Et je voulais éviter les tableaux car sinon en tableau je sais le faire, ce n'est pas bien dur !

Hello,

Pourquoi ne pas mettre tes divs les uns dans les autres, associer les images de fond nécessaire et jouer avec les marges pour laisser ton div centra "respirer" ?
Ca ne colle peut-être pas à l'effet que tu souhaites obtenir, mais sans image ou page en ligne j'ai du mal à me le représenter.

Sinon, que le CSS3 ne soit pas reconnu par IE, j'ai envie de te dire que ce n'est pas très grave

Peux tu m'aiguiller un peu plus en me donnant un morceau de code ?
Sinon oui ce n'est pas faut pour l'arrondi ... C'est que de la visibilité donc pas très très génant au final !

Bonjour,

Tu peux aussi lire cet article sur CSS3. Ça te permettrait d'avoir un code simple qui fonctionne théoriquement partout.

LapinOuf a écrit :
Peux tu m'aiguiller un peu plus en me donnant un morceau de code ?

Il y a plein de morceaux de codes dans l'article indiqué tout au début par Heyoan.

Pour qu'on puisse t'aiguiller un peu, peux-tu nous aiguiller un peu en nous montrant le design que tu souhaites réaliser, et en précisant quelles dimensions doivent être variables?
Suivant les cas de figure, ça peut être relativement simple à faire avec deux éléments imbriqués et une image de fond, ou bien plus complexe et là c'est soit la solution barbare en HTML (pléthore de DIVs ou gros tableau de mise en page qui tache), soit la solution de type amélioration progressive à coup de CSS3 (et vivement IE9!).

Bonjour,

Pour les dimensions de la div centrale, elles doivent etre de 100% - 12px - 8px ...

En faite j'ai mis sur cette page, les images dont je dispose et le rendu final que j'aimerai !
Ici j'ai mis 98% pour la div centrale mais ce n'est pas ce que je veux

Url d'exemple

<div class="one">
	<div class="two">
		<div class="three">
			Blabla
		</div>
	</div>
</div>

.one {
	height:25px;
	background:url(haut_gauche.png) top left no-repeat;
}
.two {
	height:25px;
	margin-left:12px;
	background:url(haut_droite.png) top right no-repeat;
}
.three {
	height:25px;
	margin-right:8px;
	background:url(haut_centre.png) top left repeat-x
}

Voila pour l'idée, imbriquer le trois éléments et leur donner chacun une image de fond différente, mais en les espacant pour qu'elles se superposent correctement.
Modifié par Tymlis (08 Aug 2010 - 22:20)