[résolu] Cadre arrondi contenant une image -> pas de resize

Bonjour.

Comme vous pouvez le voir, je suis un petit nouveau :3

J'avais dans l'idée de réaliser la nouvelle mouture de mon site en tableless (pour faire "propre") et en profiter pour repenser l'adaptabilité du bignou.

En gros, ce site permet de diffuser réggulièrement une planche de bande dessinée, que je comptais placer dans un cadre arrondi (fignolé par mes soins avec une image map dans les coins haut droite et bas droite) .

En voyant l'article, je me dis qu'effectivement, ca a l'air très simple à mettre en place, mais est-il possible de resizer le cadre automatiquement selon l'image que l'on met dedans ? Pour l'instant nous sommes en hauteur et largeur fixe, mais si jamais je décide un jour de "casser" ces dimensions, j'aimerais que l'image ne déborde pas sur le cadre. Y'a-t-il un moyen d'y arriver à partir de l'article sur les cadres arrondis ?
Modifié le 19 Jan 2005 - 17:58

bon, bein je vais me débrouiller autrement, et ressortir mes tables

Un [Résolu] serait apprécié en éditant ton sujet si ton problème est réglé.

Stephan -> je crois qu'il n'a rien résolu mais vu le manque de réponses il a laissé tomber

Comme l'a dit littlesam, le problème n'est pas du tout résolu.

Disons que comme personne ne semble avoir une réponse quant à un cadre qui se resize automatiquement en largeur et en hauteur, je vais réutiliser des tableaux faute de mieux, ou bidouiller la largeur manuellement pour chaque image.

Si personne n'a répondu à ton sujet, tu peux toujours le faire remonter en postant par exemple :

exemple a écrit :

Personne n'a de suggestion ?

Parce que :

batou a écrit :

bon, bein je vais me débrouiller autrement, et ressortir mes tables

je trouve ça puérile comme attitude et si tu n'as pas de patience, tu n'as tout simplement pas le minimum qu'il faut pour dévellopper selon les normes.

Je ne vois pas ce qu'il y a de puéril dans ma réaction.

Si le message a été lu plus de 25 fois sans qu'aucune réponse ne soit postée, soit c'est qu'il n'y a pas de solution (j'en doute, mais sait-on jamais) soit ca n'intéresse personne.

Mes recherches sur google et sur le forum étant vaines, j'ai un peu l'impression que l'idée d'un cadre étirable dans sa largeur n'a effleuré personne, au vu de la floppée de tutoriaux pour des cadres extensibles en hauteur, mais pas en largeur.

Enfin, si les bumps sont autorisés, je retire ce que j'ai dit, j'ai juste cru qu'il n'était pas bon d'insiter lourdement.
Modifié le 12 Jan 2005 - 22:37

Avec quelques codes ou mieux, un lien vers une page-test, on serait plus à même de t'aider. Ce que tu demandes n'est pas très compliqué, seulement il existe plusieurs façons de le faire.

C'est souvent plus difficile de poser une bonne question que de fournir une bonne réponse.

Salut,

1) un cadre arrondi sous Mozilla/Firefox, et droit sinon, ça se fait sans problème grâce à -moz-border-radius
2) je n'ai jamais essayé de faire ce que tu dis, mais je pense à une technique similaire : celle utilisée pour créer des onglets à bord arrondi. Problème : cette technique nécessiterait probablement dans ton cas de rajouter du code html destiné à supporter les cadres, donc du code sémantiquement inutile. Pourrais-tu fournir ton code afin de voir ce qu'il en est au niveau structure, stp ?

Voilà une page test :

http://francedesu.com/stuff/test/test1.html

Je veux faire en sorte que le cadre s'adapte en largeur à l'image, mais sans avoir à modifier à la mimine la largeur du cadre (que ce soit en pourcentage, en pixels ou en em).

</chieur>

Les images du cadre sont celles du tutorial, pour l'instant, mais ne devrait pas être très éloignées de ça (le menu en haut à gauche en moins) : http://www.francedesu.com


Merci d'avance à qui voit la solution
Modifié le 12 Jan 2005 - 22:59

Là on a du concret !
Je vais y jeter un oeil ce soir (ici il est 17:29)

I aim to please *bows*

Merci par avance pour le temps que tu vas y consacrer :3

Le but ultime serait d'arriver à faire un cadre arrondi sans balisage inutile, ce qui est possible avec -moz-border-radius, mais comme le disait Marvin Le Rouge, cette propriété n'est implémentée que par Mozilla/Firefox.

Par ailleur, avec un minimum de structure, il est possible d'arriver à quelque chose de très bien comme on peut le voir dans ces articles de Soren Madsen intitulés CSS Design: Creating Custom Corners & Borders et CSS Design: Creating Custom Corners & Borders Part II publiés sur A List Apart.

On y utilise le HTML suivant :

<div class="Article">
 <h3>Article header</h3>
 <div class="ArticleBody">
  <p>A few paragraphs of article text.<br />A few paragraphs of article text.</p>
  <p>A few paragraphs of article text.<br />A few paragraphs of article text.</p>
 </div>
 <div class="ArticleFooter">
  <p>A paragraph containing author information</p> 
 </div>
</div>

Par contre dans le cas d'une simple image, je crains qu'il ne faille utiliser plusieurs éléments inutiles.
Je parle ici en fonction du principe qu'une image purement décorative devrait être présentée à l'aide de CSS.
Je dirais également que c'est une mauvaise pratique d'utiliser des éléments vides dans un seul but esthétique.

Pour toutes ces raisons, j'opterais pour ajouter le cadre directement sur l'image, mais c'est plutôt facile comme réponse et moins pratique si tu dois ajouter un cadre à chaque fois que tu changes d'image. Ça risque aussi d'être assez gênant pour ceux qui voudraient télécharger ton image de se retrouver avec ta jolie bordure en prime.

Donc si on doit ajouter du balisage inutile, autant le faire proprement.

Les différents essais que j'ai fait jusqu'à maintenant ne donnent rien que j'oserais poster ici (code trop lourd).

Je vais laisser murir un peu...

hélas pour moi, le but ultime mettrait 75% de mes lecteurs sur le carreau

(et encore, je ne me plains pas, je trouve que 65% de lecteurs sous ie, ce n'est pas beaucoup par rapport à la "moyenne")

J'avais déjà étudié la solution de Soren Madesn, mais je ne suis pas sûr qu'elle soit extensible en largeur. Je vais quand même recreuser cette soultion pour les blocs de "texte".
Modifié le 13 Jan 2005 - 11:26

Ce qui risque le plus de fonctionner est une adaptation des Drop-Shadows :

CSS Drop Shadows
http://www.alistapart.com/articles/cssdropshadows/
Sergio Villarreal

CSS Drop Shadows II: Fuzzy Shadows
http://www.alistapart.com/articles/cssdrop2/
Sergio Villarreal

Onion Skinned Drop Shadows
http://www.alistapart.com/articles/onionskin/
Brian Williams

Par expérience, je dirais que seul "Onion Skinned Drop Shadows" donne un résultat similaire sur les navigateurs majeurs (PC et Mac), mais le nombre de <div> imbriqués me rebute un peu.

Ca pourrait marcher, effectivement, mais je ne sais pas si le gain en code serait rentable (sans compte la floppée de découpes à faire)

De ce que je peux voir sur ce lien : http://www.francedesu.com/ l'image en question ne fait pas partie d'un cadre arrondi. Est-ce bien ce design que tu veux reproduire ? Parce qu'un cadre arrondi n'est peut être pas la bonne technique à utiliser.

je veux créer un cadre comme dans le tutorial, donc des bordures arrondies autour de l'image avec une marge fixe. (ce que j'ai mis dans la page de test)

Ce que j'ai fait sur la page actuelle (ancien design) c'est un tableau avec les différents éléments placés. Le problème, c'est qu'à cause du menu "collé" à la barre de navigation, et les commentaires collés en bas du cadre, on ne peut pa agrandir le cadre pour y mettre une image plus large.

La solution a donc été de séparer les commentaires et le menu, et de ne laisser que la navigation dans un coin.

On a donc un coin "fixe" en haut à droite, un deuxième coin "fixe" en bas à droite, deux coins tout bêtes (bordures arrondies) et des bordure qui, idéalement, seraient étirables en hauteur et en largeur.

après avoir lu cet article : ici(et surtout la phrase : "L'objectif est à présent de créer un cadre de contenu, aux bords arrondis et qui s'adapte automatiquement selon le contenu, en hauteur et en largeur") je me suis dit qu'un cadre à bords arrondis "customisé" serait la solution.

je vais essayer de poster le nouveau design ce soir pour pouvoir visualiser la chose.

Edit : voila un aperçu

(environ 120 ko)
Modifié le 13 Jan 2005 - 19:33

J'ai l'impression que le fait de poster le design a refroidi tout le monde.

C'est si moche que ça ? </joke>

Autant j'adore les dessins autant le design me semble... euh... soyons diplomate... euh... fade ? Je préférais l'ancien. Avec un site qui utilise un hamster géant comme logo on s'attends à truc pétillant, plein de couleurs et de dynamisme.

Sinon pour ton problème de cadre étirable à part multiplier les divs j'avoue que je ne vois pas trop... voir même pas du tout. Mais personellement je préfère encore des divs vides en trop qu'un tableau pour arriver au résultat.

Bon courage !