Aide - Recherche - Membres - Calendrier
Version complète : IEMac on the radio
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
RockMakesMeSweat
May 7 2005, 11:33 AM
Salut à tous !

Voici mon code :
CODE
<html>

<head>

</head>

<body style="background: #ff0000;">

<form action="#" method="POST">

 <input type="radio" name="id_style" value="1"><br>

 <input type="radio" name="id_style" value="2"><br>

 <input type="radio" name="id_style" value="3"><br>

 <input type="radio" name="id_style" value="4" checked><br>

 <input type="radio" name="id_style" value="5"><br>

 <input type="radio" name="id_style" value="6"><br>

 <input type="radio" name="id_style" value="7"><br>

 <input type="radio" name="id_style" value="8"><br>

 <input type="radio" name="id_style" value="9"><br>

 <input type="radio" name="id_style" value="10"><br>

 <input type="radio" name="id_style" value="11"><br>

 <input type="radio" name="id_style" value="12">

</form>

</body>

</html>

Je crois que je ne peux pas faire plus simple !

Maintenant voici mon problème :
Sous ie mac, j'ai plein de choses étranges !

Tout d'abord quand j'arrive sur ma page, les boutons se chevauchent de quelques pixels ! (voir 001.jpg)

Ensuite, si je clique sur un autre de mes boutons radios, une sorte de border apparait en haut et en bas de celui précédement sélectionné. (voir 002.jpg)

Si je clique sur les autres boutons, le même phénomène se produit pour donner à la fin un truc du genre 003.jpg.

J'ai mis ce post sur le forum "css", car je pense que c'est grace au styles que je pourrait contrer le problème. J'ai essayé plein de trucs (padding à 0 border à 0; margin à 0, bgcolor, etc.) mais rien n'y fait !

Avez-vous une idée de ce qui se passe ?

Antoine.
thierkaz
May 8 2005, 10:32 AM
Bonjour,

Personnellement, j'utilise des tableaux pour placer des éléments de formulaire.

Dans ton cas, si tu ne veux pas placer tes boutons radio dans un tableau (ce qui me semble effectivement pas nécessaire), pour éviter ce chevauchement, il faut définir des espaces en hauteur entre tes boutons.

Tu as plusieurs moyens de le faire.

1/ Définir un style pour la balise "form" avec une valeur pour line-height de 30px par exemple.

2/ Mettre ton formulaire dans un div et définir un style pour ce div avec une valeur pour line-height (il faut essayer plusieurs valeurs pour trouver celle qui conviendra le mieux)

3/ Definir un style pour tes boutons en leur attribuant une valeur pour margin-bottom ou padding-bottom

Le but de tout ça est d'avoir des boutons bien alignés verticalement avec un espace de quelques pixels entre chacun. Si tu mets des padding ou des margin à 0, c'est normal que tu n'aies pas d'espace entre tes boutons.
RockMakesMeSweat
May 8 2005, 02:01 PM
Salut Thierkaz !

Un grand merci pour ta réponse !

En effet pour le tableau, ç'a aurait pu le faire, mais mon but était de faire un maximum appel aux css.

En ce qui concerne le premier problème, à savoir le chevauchement de mes boutons, un petit appel à le propriété margin, me la régler.

Cependant, cela n'a pas réglé le problème des petites marges blanches qui apparaissaient en haut et en bas de chacun de mes boutons anciennement cliqués.

J'ai un peu tapé dans tous les sens, sur toutes le propriétés qui me paraissaient pouvoir renfermer une piste de solution.

Je me suis finalement apperçu que ces petites marges semblaient avoir un rapport avec la propriété border.
En effet si je passait mon border à "solid 1px;" les marges en question rétrécissaient.

J'ai donc fait plein d'essais en jouant avec le border de mes inputs.

Tout d'abord, j'ai fixé le border à "0"
J'étais assez confiant, mais hélas, même topo qu'avant, toujours la présence de ces deux petites marges blanches.

Après, je me suis dit que si je mettais la même couleur à mes borders que la couleur de fond, certes elles seraient présentes mais invisibles, j'ai donc passé mon border à "border: solid 1px #ff0000;" Là, surprise, toujours des marges blanches mais elles ne font plus qu'un seul pixel de large.

J'ai décidé alors d'aller contre la logique et d'augmenter la taille de mes borders. "border: solid 2px #ff0000;" sachant que "#ff0000" correspond à ma couleur de fond : MIRACLE ça marche !

Donc le code définitif qui fonctionnne est le suivant :

CODE
<html>

<head>

</head>

<body style="background: #ff0000;">

<form action="#" method="POST">

 <input type="radio" name="id_style" value="1" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="2" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="3" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="4" style="border: solid 2px #ff0000;" checked><br>

 <input type="radio" name="id_style" value="5" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="6" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="7" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="8" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="9" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="10" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="11" style="border: solid 2px #ff0000;"><br>

 <input type="radio" name="id_style" value="12" style="border: solid 2px #ff0000;">

</form>

</body>

</html>


En conclusion, c'est cool, j'ai une solution mais par contre, je n'y comprend que couic !

Y'a t'il quelqu'un qui y voit plus clair que moi ?


Antoine
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.