28172 sujets

CSS et mise en forme, CSS3

Boite arrondi extensible

Bonjour.

Quel est à votre avis le meilleur moyen pour coder cela?
D'habitude je prends une image pour le haut, une autre pour le fond et une autre de 1px pour la contenu qui se répète en y.

Avec le problème de ce flou je ne vois pas comment m'y prendre proprement.
En effet je verrais bien une solution mais qui consisterai a ne plus qu'avoir une image de haut qui serait hyper grande pour prévoir les longs contenus et qui contiendrait en haut le flou, et une autre image pour le footer, mais je trouve pas ça propre du tout.

Vos idées sont les bienvenues.

upload/4463-help.jpg

Merci.
Bonjour,

Dans quelles directions ta boite doit-elle être extensible ? En hauteur uniquement ?

Est-ce que le "flou" doit se trouver au milieu de la boite absolument ou en haut à gauche ?
Laurie-Anne a écrit :
Bonjour,

Dans quelles directions ta boite doit-elle être extensible ? En hauteur uniquement ?

Est-ce que le "flou" doit se trouver au milieu de la boite absolument ou en haut à gauche ?


Elle doit être extensible sur la hauteur uniquement.
Et pour le flou il doit toujours se trouver comme sur l'image, c'est à dire en haut au centre.

Merci Smiley smile
Modifié par marseille (02 Jun 2009 - 11:50)
Dans ce cas c'est asse simple, Tu coupe ton image en 2 :
* La partie haute qui va jusqu'au bas du dégradé et la partie basse avec l'arondi du bas. Dans la partie extenssible tu comblera avec un fond de couleur uni.

<div class="bloc"></div>
<div class="blocbas"></div>


.bloc{
   background:#codecouleur url(tonimage.png) no-repeat;
   margin: ;
}
.blocbas{
   background:url(tonimagebas.png) no-repeat;
}


à adapter, mais c'est l'idée.

Il faudra ajouter un min-height à .bloc pour éviter que le bas du dégradé soit coupé si le contenu est trop court (et un height pour IE6 à la place)
Modifié par Laurie-Anne (02 Jun 2009 - 11:58)
Mon image explicative est partiellement fausse, en effet elle est simplifiée.

Je viens de refaire une image plus juste.
Au niveau du contenu on ne peux plus remplir d'une couleur unie car on a des bordures avec de l'ombre.
D'ou mon problème.

Pour l'image on imagine que l'ombre fait tout le tour.
upload/4463-help1.jpg

Merci
Modifié par marseille (02 Jun 2009 - 12:33)
2 solutions :
* Tu fait une image pour le haut très longue avec les bordures, ou
*Tu peux éventuellement doubler le div bloc pour pouvoir mettre deux fond

<div class="bloc"><div class="blocint"></div></div>
<div class="blocbas"></div>

.bloc{
   background:#codecouleur url(tonimage.png) no-repeat;
   margin: ;
}
.blocint{url(lesbordures.png) repeat-y;
.blocbas{
   background:url(tonimagebas.png) no-repeat;
}
Bonjour,

Pardon de m'incruster sur ton post mais la dernière réponse de Laurie-Anne ma fais douter.

Vaut t'il mieux avoir plus d'images ou des images plus grosse que de multiples div et moins d'images ?
L'imbrication de div les une dans les autres pour arriver à faire ce que l'on veux n'est pas la bonne solution à choisir ? J'ai tjs l'impression que l'utilisation de div n'est pas lourd contrairement au images et que le navigateur gère mieux les div.
Bonjour,

Ta question est assez confuse.

Mais pour y répondre : Il n'y a pas de réponse magique ou de solution miracle. Tout dépends du contexte, des images, de l'architecture actuelle du site...

L'imbrication de div n'est pas vraiment une bonne chose car elle alourdi le code et peut être à l'origine d'erreur (mauvaise fermeture de div...). Bien que les navigateurs sachent se débrouiller avec de multiples div imbriqués, l'utilisation de balises supperflues n'est pas "propre".

L'utilisation d'images de grande taille est tout à fait supporté par les navigateurs mais peut demandé un plus grand temps de chargement (mais il est tout à fait possible d'optimiser ces images, par exemple un dégradé sur deux couleurs, au format gif en 1000px par 1000px ne pèsera pas si lourd que l'on pourrait le croire).
Modifié par Laurie-Anne (20 Oct 2009 - 15:50)
Sujet clos
Aller à