[résolu] Coins arrondis avec bordure

Bonsoir,

J'ai trouvé un super script pour arrondir les angles et avec une bordure (http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml). Voilà le HTML et la CSS:

La CSS

<style type="text/css"><!--
.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
//--></style>

Le HTML

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div></div></div></div></div> 

Ce code fonctionne bien, voir ma homepage: http://www.fireworkszone.com mais fonctionne moins bien lorsqu'il englobe un formulaire comme pour la newsletter, voir: http://www.fireworkszone.com/newsletter.html ou le formulaire de contact: http://www.fireworkszone.com/contact.html


Est ce que quelqu'un voit une solution?

Merci
Modifié par fireworkszone (20 Oct 2008 - 15:04)

C'est normal, des éléments de ton formulaires ont la même classe que celle que tu utilise pour ta boite arrondie:

<div class="r">
<label for="fullname" class="req">Full Name: <em>*</em></label>
<span class="f">
<input type="text" name="fullname" size="40" id="fullname" onBlur="trim('fullname')">
</span>
</div>

Et ça, c'est du a des conventions de nomage très discutable... Mais passons.

Ensuite, pour ce qui est de ta boite arrondie, ce n'est pas parce qu'elle fonctionne normalement, qu'elle est correcte...
Tu as une surabondance de div, ça tourne à la divite aigue là...
regarde ceci:
http://www.alsacreations.com/articles/cadre/

Bonsoir Kalak,

j'aimerais savoir quels sont les éléments de mes formulaires qui ont la même classe que celle que j'utilise pour ma boite. Je n'ai compris l'exemple que tu donnes aussi.

Voici le formulaire pour la newsletter:

<form method="post" id="addcomments" action="http://www.SplioList.com/form.pl" >
<fieldset>

<p><input type="text" name="email" class="input" value="Your Email" size=20 onFocus="this.value=''"></p><br/>

<input type="hidden" name="list" value="fireworkszone">

<p><input type="radio" name="action" value="add" checked>

<label>Subscribe</label><br/>

<input type="radio" name="action" value="del">
<label>Unsubscribe</label></p><br/>

<input name="image" type="image" src="/pictures/buttons/submit.gif" alt="submit" width="245" height="92" value="Submit">

</fieldset>
</form>

En ce qui concerne le tutoriel pour faire un cadre arrondi (premier et second cas) je connais les deux techniques.

C'est vrai que le code que j'utilise compte beaucoup de 'div' (8) mais en revanche il est très flexible en hauteur et en largeur avec peu d'images!

Thierry

Premièrement, n'écorche pas mon pseudo si ce n'est trop demander...

Le code que j'ai écrit, ce n'est pas un exemple mais un extrait de ta page Contact... Tu ne reconnais même pas ton code...
Là, t'as vraiment des noms de classe de rentrent en conflit, a force d'utiliser des noms d'un caractère de long.

Ensuite, ta page Newsletter, c'est ton DIV container ( avec class="t" ) qui prend



Tes balises doivent TOUJOURS être refermée. Ce n'est, par exemple, pas le cas de tes "input"

mes un " /" à la fin:

<input type="radio" name="action" value="del" />

Un <br /> à la suite d'un <p> est TOTALEMENT INUTILE...
Je rajouterai qu'entre "br" de "/>" il y a un espace.
Je suis d'accord, tu ne fais pas du xhtml strict, mais il est de bon aloi d'utiliser ces bonne pratiques.
Comme par exemple le fait que TOUT ATTRIBUT DOIT AVOIR UNE VALEUR
Exemple: checked="true" pour ton input type="radio".

Tes balises <label> doivent avoir l'attribut "for", qui pointe vers l'élément auquel elles se rapporte.
Aussi, TOUT CHAMPS d'un formulaire DOIT AVOIR UN LABEL.

La deuxième des deux méthodes du tutoriel que je t'ai montré est également très flexible et à le mérite d'être plus sémantiquement correcte et logique que son imbriquage immodéré de div.

Et j'ai le malheur de t'annoncer que tu as une Divite aigüe, doublé d'une inaccessibilite virale, que je pense je ne pourrai pas soigner.

Commence par faire des pages simples, valides, bien codées, propre, accessibles, respectant les normes, avant de nous sortir un code comme ça.
Apprend a marché avant d'essayer de courir...