Forums Développement Multimédia

Aller au contenu

Marge et différence de navigateur.

CODE HTML CSS

2 réponses à ce sujet

#1 Xiimao

    Ceinture Orange

  • Members
  • PipPipPip
  • 35 messages

Posté 19 April 2012 - 10:29 AM

Bonjour je vais vous exposé mon problème et je pense que ça pourrait servir à plusieurs d'entre nous,
car à mon avis c'est un problème très courant.

Donc pour résumer j'ai mis en forme un "formulaire de contact" en HTML/CSS et mon soucis est que,
la partie "CP / Ville" de mon formulaire n'est pas soumis à un saut de ligne "<br />" (chose voulu pour raison de mise en forme).

Le soucis est que, à mon avis, la marge automatique entre le label "no" et le label "ville"
est différente sur chaque navigateur. Ce qui provoque un débordement.

Pour mieux comprendre je vous invite à télécharger le (.rar) des fichiers [test.html] et [test.css].



Voici le code: ;-)

HTML:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="ISO-8859-1"/>
                <link rel="stylesheet" href="css/csscontact.css" />
  <link rel="icon" type="image/png" href="images/favicon.png" />
   <head>
           <title>Exemple pour MediaBox</title>
           <link rel="stylesheet" media="screen" type="text/css" title="verif formulaire" href="test.css" />
   </head>  
 
<body>

  <div id="page">

   <header>
   </header>
 
   <section>
                                <article>
         <form method="post" action="email.php" onsubmit="return verifier(this);">
           <p>
           Nom / Prénom :   <input id="input_name" type="text" name="nom" size="39" onblur="verifNom(this)"/>

           Email :       <input id="input_mail" type="text" name="mail" size="39" onblur="verifMail(this)"/>

           CP / Ville :   <input id="input_no" type="text" name="no" onblur="verifNo(this)"/>
                         <input id="input_ville" type="text" name="ville" size="30" onblur="verifVille(this)"/>

           Sujet :       <input id="input_sujet" type="text" name="sujet" size="39" onblur="verifSujet(this)" />

                         <textarea id="textarea_message" name="message" onblur="verifMessage(this)"></textarea>

                          <input type="reset" name="reset" value="Effacer"/>
                          <input id="input_submit" type="submit" value="Envoyer"/>
           </p>
         </form>
                                </article>
   </section>
</body>
</html>
 

CSS:

#page
{
        width: 950px;
        margin: auto;
}
article input, article textarea
{
margin-top: 3px;
border: 2px solid #57413b;
box-shadow: 1px 1px 1px #000000;
}
article input:hover, article textarea:hover
{
opacity: 0.5;
}
article form
{
text-align: right;
}
#input_name
{
margin-left: 0px;
}
#input_mail
{
margin-left: 0px;
}
#input_no
{
margin-left: 0px;
width: 46px;
}

#input_ville
{
}
#input_sujet
{
margin-left: 0px;
}
#input_submit
{
margin-left: 0px;
}
#textarea_message
{
margin-top: 0px;
width: 366px;
height: 100px;
}
 

Fichier(s) joint(s)

  • Fichier joint  test.rar   982 octets   2 téléchargement(s)


#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 19 April 2012 - 18:06 PM

Bonjour Xiimao,

je te propose ceci, mais ça ne sera pas compatible IE7 et IE8.
Il te faudra faire une feuille de style spéciale pour ces deux navigateurs.

Je te laisse analyser le code ;)

Ren

Fichier(s) joint(s)

  • Fichier joint  test.zip   1.23 Ko   0 téléchargement(s)

---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 Xiimao

    Ceinture Orange

  • Members
  • PipPipPip
  • 35 messages

Posté 19 April 2012 - 19:52 PM

Merci je vais allé voir de ce pas.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP