Div à l'interieur d'un cadre arrondi

Bonjour,

J'ai un cadre avec des coins arrondis.
Je cherche à y mettre dedans 2 div cote à cote.

Pour le cadre arrondi pas de soucis

.t {background: url(images/dot.gif) 0 0 repeat-x; width: 98%;margin-left: auto;margin-right: auto;margin-top:10px;background-color: #FFFFFF;}
.b {background: url(images/dot.gif) 0 100% repeat-x}
.l {background: url(images/dot.gif) 0 0 repeat-y}
.r {background: url(images/dot.gif) 100% 0 repeat-y}
.bl {background: url(images/bl.gif) 0 100% no-repeat}
.br {background: url(images/br.gif) 100% 100% no-repeat}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px} 

et

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

<div id="1">Div 1</div>
<div id="2">Div 2</div>

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

Pour les div 1 et 2, si je mets juste un width elle se retrouve une en dessous de l'autre, si je mets float:left elles sortent du cadre, idem en position absolute...
J'avoue que je ne sais plus trop où chercher.

Qq'un aurait un idée ?

D'avance Merci

bonjour,

pour le CSS moi les background je les présente comme ça
{background: url(images.gif) no-repeat 0 0 ;} avec des points virgules après chaque instructions il y a aussi à la fin padding:10px il manque un point virgule non - cela provient peut-être de ça -

Ps je suis malvoyant donc moi le vert très clair pour les ponctuations du code j'ai un peu de mal à voir sur ce fond pastel.
Modifié par Gil88 (04 Aug 2008 - 09:17)

Bonjour et bienvenu sur le forum

yobogs a écrit :
Pour le cadre arrondi pas de soucis

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

<div id="1">Div 1</div>
<div id="2">Div 2</div>

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

A voir le code proposé pour réaliser un cadre arrondi...
Je dirais pour ma part qu'il y a un problème

8 <div> imbriqués vides pour obtenir un aspect graphique, c'est un peu beaucoup, tu ne trouves pas ?
Il serait encore plus accessibles d'utiliser un tableau... ou de suivre des méthodes un peu moins lourdes.

Je te conseille par exemple la lecture de cet exemple : Boites fluides avec bordures et coins en images

Bonne lecture

Bonjour,

Eh bien, le code de ce bloc aux coins arrondis est rudement compliqué!
Je sais bien que l'exercice n'est pas évident, mais il n'y avait pas moyen de simplifier un peu tout ça?
Est-ce un bloc de largeur fixe, ou de largeur variable? Peut-on voir le design? As-tu lu Boites fluides avec bordures et coins en images par exemple?

Pour placer les deux blocs côte-à-côte, il faut:
- leur donner une largeur;
- utiliser float.

Apparemment, tu connais mal le concept de dépassement des flottants. Il est traité dans la FAQ du forum, ou dans l'article suivant.

Gil88 a écrit :
pour le CSS moi les background je les présente (...) avec des points virgules après chaque instructions

Les points-virgules sont nécessaires pour séparer les déclarations CSS (pour rappel, une déclaration est constituée d'une propriété et d'une valeur). La toute dernière déclaration d'un bloc de déclarations CSS n'a pas besoin de point-virgule. Pour ma part j'en mets un systématiquement car on se retrouve souvent à ajouter des propriétés à la fin, et que si on oublie de rajouter le point-virgule qui va bien on se retrouve avec une erreur de syntaxe. Mais le point-virgule final (à la fin du bloc de déclarations) n'est pas obligatoire.

il y a aussi à la fin padding:10px il manque un point virgule non - cela provient peut-être de ça -

Gil88 a écrit :
Ps je suis malvoyant donc moi le vert très clair pour les ponctuations du code j'ai un peu de mal à voir sur ce fond pastel.

C'est effectivement un défaut du thème du forum. Pour ma part, j'utilise des correctifs CSS (styles utilisateur) à l'aide de l'extension Stylish pour Firefox. Avec quelque chose comme ça:

#yay pre, code, div.code {
	color: #040 !important;
	font-family: "DejaVu Sans Mono", monospace !important;
}

J'ai trouvé la solution pour la lisibilité j'avais oublié la manip, j'appuie sur CTRL+molette arrière et là je peux mieux voir çà fait tout gros et cela grossi le sujet mais bon là j'ai vu qu'il n'y avait pas de point-virgule. sinon je n'ai pas besoin j'arrive à voir quand il n'y a pas trop de mélange de couleur.

Oui en plus ce sujet m'intéresse car en revoyant mon site j'avais inséré des blocs de texte dans mes pages avec un encadrement au coins arrondis mais le tout sous forme d'image avec une ombre portée fait sous illustrator

Donc maintenant il faut que je mette vraiment du vrai texte dans un cadre et je mettrai en background justement mon image en ombre portée.

merci pour les précisions


Edit : merci beaucoup j'ai lu les liens et c'était tout à fait ce qu'il me fallait pour ce problème de bloc -image http://nobleconnection.fr/accueil.html que je vais pouvoir refaire
Modifié par Gil88 (04 Aug 2008 - 14:52)