Box fluid + coins arrondis + dégradé + bordure

Bonjour,

j'ai un petit problème avec un site ou je dois réaliser une boite fluide en hauteur qui aura une bordure blanche, un dégradé intérieur et des coins arrondi qu'elle serait la meilleur solution pour arriver à un résultat j'ai tester différentes techniques mais sans succès

J'ai ajouté une image pour vous donner une idée

Bonjour,

Je répondrai par une question et un petit jeu.

La question: les coins doivent être transparents, c'est à dire laisser apparaitre un fond de page non uni? Ou bien est-ce qu'on peut utiliser des images opaques?

Le petit jeu: j'ai relevé 11 erreurs dans le passage suivant:

a écrit :
j'ai un petit problème avec un site ou je dois réaliser une boite fluide en hauteur qui aura une bordure blanche, un dégradé intérieur et des coins arrondi qu'elle serait la meilleur solution pour arriver à un résultat j'ai tester différentes techniques mais sans succès

Les plus importantes ne sont pas des fautes d'orthographe, mais de syntaxe. En gros, tu écris en oubliant que les points, points d'interrogation et autres majuscule en début de phrase existent. Du coup, il devient assez difficile de te lire, et de comprendre tes explications et questions. Le jeu est donc le suivant: éditer ton message ci-dessus (bouton «éditer» en haut à droite) pour corriger un maximum d'erreurs. Fais surtout attention à la ponctuation. On peut facilement comprendre une phrase qui contiendrait quelques fautes d'orthographe ou de grammaire. Mais en l'absence de points, majuscules, ou points d'interrogation pour marquer les questions, il devient très difficile de reconnaitre les phrases elles-mêmes.

Désolé pour les fautes ainsi que pour la ponctuation j'édite ça après promis.

Concernant la box :
celle-ci devra être en transparence.

Je te joins un croquis

salut,

je ne suis pas sur mais si 'lon considère qu'il y a 3 boites imbriquées extensibles en hauteur avec, pour simplifier, uniquement le haut du parent en transparence puisque sur fond dégradé qui peut changer.

.leparent
{
float:left;
width:xxx
height:auto;
display:block
}
.leparent .top
{
float:left;
width:xxx
height:138px;
display:block;
background:url (ton arrondis exterieur en png24 transparent) top left no-repeat;
_background:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='racine du projet/images/ton arrondis exterieur en png24 transparent', sizingMethod='crop');
/* Fixe la hauteur de ton top dessous la 2eme barre blanche de gauche*/
}
.leparent .ctnt
{
float:left;
width:xxx
height:auto;
display:block;
background:url (ton contenu aligné en bas sur fd blanc) left bottom no-repeat;
/* Prévois cette image super haute avec un padding bottom*/
}

meme pricipe pour les enfants et les petits enfants mais peut etre n'est il pas necessaire de faire de transparence ici.( .leparent .enfant {}; .leparent .enfant .top{} etc.

Note que si tu tiens absolument avec avoir tout le parent en transparence, change la class .ctnt avec un bg repeat-y et ajoute un class .parent . bottom avec l'arrondis du bas en png 24 tout comme pour la class 'top'.

j'espere que je ne suis pas trop confus, ceci dit cela fonctionne .

Je n'ai pas examiné la solution de zincou mais en tout cas, brycedanice, tu as tapé dans le truc bien prise de tête à faire. J'aurais tendance à conseiller un tableau de mise en forme à 4 cellules (une de contenu en haut à gauche, et trois autres pour les autres coins.

Un peu de lecture (attentive, je l'espère):
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

héhé

je sais bien mais le truc c'est qu'en tableau c'est bon ça marche.

Ma consigne est de ne pas utiliser de tableaux de mise en forme.

Je pense que je vais tester en mettant deux blocs DIV

- Un DIV qui englobe tout avec en arrière plan le chapeau de box.

- Le deuxième qui renferme le contenu et en arrière plan le reste de la box qui va glisser suivant le contenu.

enfin je vais tester parce que je m'arrache les cheveux depuis ce matin

re hello,

ce que je te propose est somme toute assez simple, il faut juste partir du principe que le png transparent est gerable en background.
Apres si transparence au top, on cree une classe top avec bg png24, puis une class content avec bg de 2000px de haut par exemple, positionné en bas. tout ca dans un div container = 3 div pour une boite avec top transparent, 4 si le bottom est transparent comme je l'ai indiqué (dans ce cas le .ctnt est en repeat-y). (parent > top > ctnt .. evnetuellement .bttm=

S'il n'y a pas de transparence 2 div suffisent le container (dans lequel on met le bg de 2000px et le top dans lequel on met l'arrondis top avec le fond sous les arrondis cette fois, cela se comportera en clapet (parent > top ).

Apres il te suffira d'imbriquer ces solutions ...

mais c'est clair que je ne suis pas toujours clair