[CSS]Angle arrondi pour une balise <div>

S'il s'agit réellement d'apprendre...

... Alors la question n'est pas avec ou sans images (background s'entend) mais avec ou sans css. Donc avec ou sans maintient de la qualité et de l'intégrité du code html initial (pour autant qu'il existe, évidemment, ce qui semble bien complètement échapper à bon nombre).
Bon déjà le petit jeu que tu as choisi de suivre sur les coins arrondis sans images est un bel exemple de massacre complet.

Il y a une chose qu'il faut comprendre c'est que les css servent avant tout à permettre de parler présentation sans que le document html ne s'en trouve aucunement affecté en terme de balisage structurant et rien d'autre.

Cela a des contraintes nombreuses, cela a des limites nombreuses, par bonheur cela offre des possibilités nombreuses aussi...

Tu veux une solution sans images ??? Très simple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<table style="width:100%"> <tr> <td style="width:130px;"> <p> Ici ta pub qui tue. </p> </td> <td> <!-- Ici un très vague contenu dont tout le monde se contrefiche du moment que la pub tue --> </td> </tr> </table>

---

Et la question est réglée.

Tu veux une solution en javascript ??? Très simple aussi :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function ma_machine_a_gaz() { var referent=document.getElementById('contenue').offsetHeight; var calcul_hauteur_pub=document.getElementById('autre').offsetHeight; var calcul_hauteur_texte=document.getElementById('texte').offsetHeight;   if (calcul_hauteur_pub < referent) { document.getElementById('autre').style.height=referent+'px'; } if (calcul_hauteur_texte < referent) { document.getElementById('texte').style.height=referent+'px'; } } window.onload=ma_machine_a_gaz;

---

Et basta on nage dans le bonheur...

Et tout ça pour quoi ?



Encore une fois, s'il s'agit bien d'apprendre :

1. Revoir les bases du html structurant (version strict donc, et sans détournement de la balise <table>)
2. S'exercer aux possibilités et limites des css
3. Utiliser des images quand c'est la meilleure solution de ce point de vue.

Je te remercie :D

Donc en fait je pense que j'ai voulu exagéré avec le css ... ne voulant absolument pas utiliser de tableaux, et bien j'en ai perdu la notion ...

je connais pas le javascript et avant même de m'y mettre , je vais donc approfondir mes modeste connaissance.

Merci a tous.

Histoire de me répéter

Citation:

---

Envoyé par clb56

et sans détournement de la balise <table>

---

;)

Allez, re Bon Courage ! :)

PS :

En fait c'est beaucoup moins dur qu'il y parait, c'est surtout une question de méthode.

Le point 1 c'est html et rien d'autre.

http://www.cssplay.co.uk/boxes/krazy.html

Citation:

---

Envoyé par SpaceFrog

http://www.cssplay.co.uk/boxes/krazy.html

---

Oui, c'est un très beau tour de force. Cela reste néanmoins, je trouve, un pur jeu de lego, brillantissime bien sur mais bon...

Au passage on est très proche là de la technique javascript des nifty corners où les différents <b></b> nécessaires aux supports de propriétés css ad hoc sont générés en javascript justement.

Là aussi c'est très brillant...

Salut,

à Shinuza >

J'ai à nouveau réfléchi à ta solution via doublage de conteneur par <span>

Citation:

---

Une solution extensible en largeur ET en hauteur qui permet d'avoir un header, et qui peut être décliné de plein de manières.

---

Citation:

---

Code:

---

1 2 3 4 5 6

<div class="block"> <div class="top"><span>Idealement top est un élement header (hx)</span></div> <div class="contenu"> </div> </div>

---

---

Finalement, ça se combine plutôt bien avec mes propres recherches

. S'il s'agit de purs coins sans bordures alors ma solution reste meilleure
. Dans tous les cas où la hauteur du bloc global reste limitée idem
. Dans le cas où la hauteur n'est pas limitée, et que l'on cherche une bordure simple pouvant être raccordée avec la propriété border de css alors la simple combinaison :

Code:

---

1 2 3 4 5 6 7 8

<div class="conteneur_section"> <hn><span class="special_shinuza">Telle section</span></hn> <div class="contenu_section"> <!-- Contenu --> <p id="last_of_telle_section">Blublu</p> </div><!-- Fin .contenu_section --> </div><!-- Fin .conteneur_section -->

---

Y suffit

. Dans le cas où la hauteur n'est pas limitée, et où l'on cherche cette fois une bordure complexe, typiquement une ombre portée sur toutes les bordures, alors il suffit de combiner ainsi :

Code:

---

1 2 3 4 5 6 7 8

<div class="conteneur_section"> <hn><span class="special_shinuza">Telle section</span></hn> <div class="contenu_section"> <!-- Contenu --> <p id="last_of_telle_section"><span class="special_shinuza_bis">Blublu</span></p> </div><!-- Fin .contenu_section --> </div><!-- Fin .conteneur_section -->

---

Finalement, quand on voit le champ de ruine que constitue du point de vue du document html toutes les tentatives sur les coins arrondis en design fluide, c'est plutôt excellent comme résultat :)


PS :

Ah oui, j'avais pas relevé la dernière fois,

Citation:

---

Des coins arrondis, j'en fais depuis suffisament longtemps

---

Et moi donc ;)