Céation de cadre

[Invité]

Bonjour,

Voila, depuis quelque jours j'essaie de trouver une réponse à ma question mais je ne trouve pas, surement parce que je formule mal tout cela.

J'aimerais pouvoir créer des sortes de cadres comme ceci:

Spoiler:

Et je voudrais savoir aussi s'il était pssible de les modifier à ma guise, et aussi savoir comment le faire bien sur !

JE vous remerci d'avance, en esperant que ma question ne soit pas des plus ennuyante.

Merci beaucoup et bonne fin d'après midi.

[Ashlee]

Je suis intéressée aussi

[Invité]

Bonjour,

C'est à la base un tableau à mon avis.
Alors pour pouvoir le modifier à ta guise et sans avoir à trifouiller dans tout le code, c'est de créer un attribut "class" via le CSS :
PA >> Affichage >> Couleurs > Feuille de style CSS > où nous allons créer un intitulé (par exemple "cadratablo" et lui paramétrer ses propriétés :

.cadratablo {border: 3px solid #ff0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 5px 10px 5px 10px;}

En HTML on reprend cet intitulé où l'on veut, ainsi :

<table width="100%" align="center" class="cadratablo" cellspacing="0" cellpadding="0"><tbody><tr><td>...</td><td>...</td><td>...</td></tr><tbody></table>

EDIT : Donc ce tableau aura 4 bordures de 3 pixels de couleur noires.
Les 4 coins seront arrondis d'un radius de 10 pixels (les deux dernières lignes du radius sont pour que d'autres navigateurs en dehors de Mozilla les voient, mais pas IE et Opera).
Enfin, le padding ainsi présenté, va dans le sens des aiguilles d'une montre et détermine l'espace qu'aura le contenu avec les bordures ainsi :
top (haut de 5 pixels) > right (droite de 10 pixels) > bottom (bas de 5 pixels) > left (gauche de 10 pixels)

[Invité]

Merci beaucoup ça donne l'effet que je desirais.

Le problème est que, j'avais dans l'idée de créer plusieur cadre mais pas de la même couleur, et donc si je change la couleur dans le css ça me change la couleur de tout les cadres.

Il n'existe pas un code html permettant de créer des cadres sans toucher au css ?


Merci beaucoup !

[Invité]

Si si, tu peux passer toutes ces propriétés directement par du style CSS dans des balises HTML (même BBcode) :

<table width="100%" align="center" style="background: #couleur_de_fond url('url_img'); border: 3px solid #ff0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 5px 10px 5px 10px;" cellspacing="0" cellpadding="0"><tbody><tr><td>...</td><td>...</td><td>...</td></tr><tbody></table>

Tu peux aussi mettre du style dans les balises "tr", "td", "div" ou "span", directement après l'adresse d'un lien dans sa balise, ou d'une balise image.

[Invité]

C'est nickel, ça donne exactement comme tout à l'heure

Merci beaucoup.

J'espere ne pas trop vous en demander mais serait-il possible que vous 'expliquiez rapidemment quel valeur modifier pour faire tel ou tel chose, car je en suis pas assez competent en matiere de html pour comprendre tout cela :d

Merci beaucoup

[Ashlee]

Han, je n'y arrive pas, avec le code

<table width="100%" align="center" class="cadratablo" cellspacing="0" cellpadding="0"><tbody><tr><td>...</td><td>...</td><td>...</td></tr><tbody></table>

Il faut le mettre où ? Je suis novice =$

[Invité]

J'espere ne pas trop vous en demander mais serait-il possible que vous 'expliquiez rapidemment quel valeur modifier pour faire tel ou tel chose

Nenni, ce n'est point trop me demander, mais tu ne seras jamais mieux servi que par toi-même et au rythme que tu veux en passant par GMA (Google Mon Ami) juste en tapant "c'est quoi tel ou tel intitulé en CSS ou en HTML".
C'est aussi le meilleurs chemin pour apprendre, crois en une autre ex-novice-d'il-n'y-a-pas-si-longtemps.
Sinon il y a ce site, qui est l'un des meilleurs pour les bases en tous genres.

<table width="100%" align="center" class="cadratablo" cellspacing="0" cellpadding="0"><tbody><tr><td>...</td><td>...</td><td>...</td></tr><tbody></table>

Il faut le mettre où ?

Ce code ? Où tu veux.
Le CSS dans la feuille de style CSS qui va avec le class comme je l'ai indiqué plus haut.

[Invité]

Merci

Merci beaucoup ça me servira vraiment

Bonne soirée et encor eun petit merci

Sujet résolu