Problème HTML/CSS

29-04-2012 16:09:48

Bonjour tout le monde,
je suis en ce moment sur la création d'un site web, et j'avais, il y a 2 ou 3 mois, fait une modification sur mon code.
Seulement voilà, j'ai eu des problèmes d'ordi et je viens de le récupérer. Et je ne me rappelle pas de cette modification. Je n'ai pas réussi à la retrouver, et, cette modification ayant "pourri" la présentation de ma page, j'aimerais bien pouvoir régler ce problème. J'espère que vous m'aiderais!

Voici mon code HTML:

Code:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />

              <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->
        <link rel="stylesheet" href="style_3.css" />
            <title>The-World-Of-RPG, la référence sur les rpg</title>
      </head>
      <body>    
        <div id="text_page"> 
        <header>  
            <div id="banniere">
             <img src="banniere_worpg2.png" alt="bannière" />       
                </div>
                <div id="titre_principal">
                <h1>The World Of RPG</h1>
                </div>
        </header>    
            <nav>    
                        <ul>
                            <li><a href="dossier.html">Dossier</a></li>
                            <li><a href="#">Jeu en ligne</a></li>
                            <li><a href="#">Soluce</a></li>
                            <li><a href="#">Fanarts</a></li>
                            <li><a href="#">Salle de réunion</a></li>
                        </ul>    
            </nav>
        <section>    
            <article>        
                <div id="presentation">
                <div id="incription"><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" /><h1>Incrivez-vous!</h1></div>
                <p>Bienvenue dans l'espace d'inscription de WORPG!</p>
                <p>Bien des aventures vous attendent, mais il vous faudra remplir des missions, étudier à  l'académie des soldats et prouver votre valeur en affrontant les autres membres et défendre votre alliance au sein de l'abysse. Vous devrez braver tous les dangers et vous montrer d'une force et d'une stratégie incroyable pour un jour, vouloir rejoindre l'élite de votre alliance. Vous pourrez aussi vous joindre à une guilde et participer à des matchs contre les autres guildes. Choisissez vous un équipier et ensemble, devenez maître de l'abysse!</p>
                </div>
            </article>
        </section>        
        <section>
                        <!--Formulaires-->
            <article>
                <p>Connectez-vous et bravez tous les dangers!</p>            
                <form method="post" action="traitement.php">
                    <div id="formulaire1">
                    <p>
                           <label for="pseudo">Indiquer votre pseudo:</label>
                           <input type="text" name="pseudo" id="pseudu" />
                    </p>
                </form>
                <form>
                    <p>
                        <label for="e-mail">Votre adresse e-mail</label> : <input type="email" name="e-mail" id="e-mail" value="monadresse.truc@mailbidon.fr" />
                    </p>
                </form>
                </div>
                <div id="formulaire2">
                <form method="post" action="traitement.php">
                    <p>
                        <label for="mot_de_passe">Votre mot de passe</label>: <input type="text" name="mot_de_passe" id="mot_de_passe" />
                    </p>
                </form>
                <form method="post" action="traitement.php">
                    <p>
                        <label for="date_de_naissance">Date de naissance</label> : <input type="date" name="date_de_naissance" id="date_de_naissance" value="1998/09/25"/>
                    </p>
                </form>
                <form>
                    <p>
                        <input type="submit" value="S'inscrire" />
                    </p>
                </form>
                </div>
            <footer>
        <div id= "worpg">
            <p class="left"><a href="#">WORPG</a> &copy; 2012 <a href="#">FreneZia</a><br /><a href="#">WORPG</a> est né à Libourne</p>
        </div>
            <div id="bug">
            <p class="right"><a href="#">Demander de l'aide</a> <a href="#">Consulter les règles</a><br /><a href="#">Signaler un bug</a> <a href="#">Signaler une erreur</a></p>
            </div>
            </footer>
        </div>
    </body>
</html>

Et mon code CSS:

Code:

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{
    width: 100%;
    background: url('images/ciel.png') repeat;
    background-size: 100%;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    margin-right : auto;
    margin-left: auto;
}

#text_page
{
    background-image: url('images/fond_jaune.png');
    min-height: 300px;
    width : 70%;
    margin: auto;
}

section
{
    display: inline-block;
}
section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

#presentation
{
    padding-left: 8%;
    text-align: center;
    vertical-align: center;
    width: 225%;
    font-size: 20px;
    display: inline-block;
}
h1
{
    font-family: ballpark, Dayrom, serif;
    color: maroon;
}
header
{
    background: url('banniere_worpg2png') no-repeat;
}
header h1
{
     width: 80%;
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}
nav
{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom : 8%;
}
nav ul
{
    list-style-type: none;
}
nav li
{
    display: inline-block;
    margin-right: 15px;
}
nav
{
    background: url('images/ruban.png');
    text-align: center;
    vertical-align: center;
}
#titre_principal
{
    text-align: center;
    margin-left: 16%;
}
nav a
{
    border-bottom: 3px solid #760001;
    color: white;
}
/* Bannière */

#banniere
{
    height: 200px;
    border-radius: 5px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    color: white;
    font-size: 0.8em;
}
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}


/* Corps */
a
{
    color: #760001;
}


article
{
    vertical-align: top;
    text-align: left;
    width: 30%;
    display: inline-block;
    margin-right: 10%;
}


#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#inscription
{
    text-decoration: underline;
}

#formulaire1
{
    display: inline-block;    
    margin-left: 5%;
    width: 30%;
}

#formulaire2
{
    display: inline-block;
    width: 25%;
    margin-left: 5%;
}

#connexion
{
    background: url('images/ruban.png') repeat-x;
    padding-bottom: 0.5%;
    padding-top: 1.5%;
    vertical-align: middle;
    text-align: center;
    margin-left:60%;
    margin-bottom: 50%;
}

#connexion p
{
    color: #ffffff;
}

/* Footer */

footer
{
    background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; 
    padding-top: 3%;
    text-align: center;
    vertical-align: top;
}

footer p, footer ul
{
    font-size: 1em;
}

#worpg, #bug
{
    display: inline-block;
}

#bug
{    

    margin-left: 8%;
}

}

Maintenant, voilà le screen:

[url]http://www.casimages.com/img.php?i=120429041948159172.png[/url]

Comme vous pouvez le voir, les formulaires et le footer sont "collés" sur la gauche,, alors que les différentes parties du footer devrait être positionnées en inline block, et les formulaires aussi, mais 2 par 2.

Dernière modification par sasuke33500 (29-04-2012 16:16:07)

29-04-2012 20:12:10

Juste en refermant ta balise article tu arrive déjà à ça :
http://imageshack.us/photo/my-images/57 … itrezk.png
Tu modifie un peut la marge et ça devrait être bon.

Dernière modification par Onjü (29-04-2012 20:13:22)

29-04-2012 21:48:15

HTML? Lolnoep

Fais tes sites en Lisp, c'est beaucoup mieux. Ça t'ouvrira l'esprit à la programmation fonctionnelle
Ou en Assembleur c'est bien aussi.

Et CSS c'est pour les newbs, un vrai elite haxxor n'a pas besoin de décorations

30-04-2012 18:21:21

[quote=Izanagii]HTML? Lolnoep

Fais tes sites en Lisp, c'est beaucoup mieux. Ça t'ouvrira l'esprit à la programmation fonctionnelle
Ou en Assembleur c'est bien aussi.

Et CSS c'est pour les newbs, un vrai elite haxxor n'a pas besoin de décorations[/quote]
Lisp? C'est quand même [b]un peu[/b] plus dur que le HTML.

[quote=Onjü]Juste en refermant ta balise article tu arrive déjà à ça :
http://imageshack.us/photo/my-images/57 … itrezk.png
Tu modifie un peut la marge et ça devrait être bon.[/quote]
Ah oui merci, j'avais pas vu....

Question à part: Coment on fait pour mettre un lien sur une image comme pour la bannière de WoN?
J'ai déjà essayé <img srx="image.png" href="lien" /> mais sans résultat.

30-04-2012 19:22:57

<a href=""><img src=".jpg"/>
Si m'a mémoire est bonne

Izanagii > LOL

Dernière modification par Onjü (30-04-2012 19:23:07)

01-05-2012 10:05:44

[quote=Onjü]<a href=""><img src=".jpg"/>
Si m'a mémoire est bonne

Izanagii > LOL[/quote]
Effectivement, merci!

[spoil]Les erreurs suivantes doivent être corrigées pour que le message puisse être envoyé :

Les messages doivent être argumentés, nous vous invitons à relire les règles. Pour le dialogue, le bar est à votre disposition.[/spoil]

17-05-2012 15:58:24

Je reposte sur le topic, car je n'arrive pas à faire une chose (encore, décidément).
Je voudrais avoir cette disposition pur mes formulaires:

[img]http://i46.servimg.com/u/f46/16/86/94/97/maquet10.jpg[/img]

Voilà mon code HTML (il n'a pas beaucoup changé):

Code:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />

              <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->
        <link rel="stylesheet" href="style_3.css" />
            <title>The-World-Of-RPG, la référence sur les rpg</title>
      </head>
      <body>    
        <div id="text_page"> 
        <header>  
            <div id="banniere">
             <a href="index.html"><img src="banniere_worpg2.png" alt="bannière" />       
                </div>
                <div id="titre_principal">
                <h1>The World Of RPG</h1>
                </div>
        </header>    
            <nav>    
                        <ul>
                            <li><a href="dossier.html">Dossier</a></li>
                            <li><a href="index.html">Jeu en ligne</a></li>
                            <li><a href="#">Soluce</a></li>
                            <li><a href="#">Fanarts</a></li>
                            <li><a href="#">Salle de réunion</a></li>
                        </ul>    
            </nav>
        <section>    
            <article>        
                <div id="presentation">
                <div id="epingle"><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" /></div><div id="inscription" /><h1>Incrivez-vous!</h1></div>
                <div id="phrase_presentation">
                <p>Bienvenue dans l'espace d'inscription de WORPG!</p>
                <p>Bien des aventures vous attendent, mais il vous faudra remplir des missions, étudier à  l'académie des soldats et prouver votre valeur en affrontant les autres membres et défendre votre alliance au sein de l'abysse. Vous devrez braver tous les dangers et vous montrer d'une force et d'une stratégie incroyable pour un jour, vouloir rejoindre l'élite de votre alliance. Vous pourrez aussi vous joindre à une guilde et participer à des matchs contre les autres guildes. Choisissez vous un équipier et ensemble, devenez maîtres de l'abysse!</p>
                </div>
                </div>
            </article>
        </section>        
        <section>
                        <!--Formulaires-->
            <article>
                <div id="deviens_soldat">
                <img src="deviens_soldat2.png" alt="deviens_soldat" />
                </div>
                <div id="connectez-vous">
                <p>Connectez-vous et bravez tous les dangers!</p>         
                </div>
                <form method="post" action="traitement.php">
                    <div id="pseudo_div">
                    <p>
                           <label for="pseudo">Indiquer votre pseudo:</label>
                           <input type="text" name="pseudo" id="pseudo" />
                    </p>
                </form>
                    </div>
                <div id="e-mail_div">
                <form>
                    <p>
                        <label for="e-mail">Votre adresse e-mail</label> : <input type="email" name="e-mail" id="e-mail" value="monadresse.truc@mailbidon.fr" />
                    </p>
                </form>
                </div>
                </article>
                <article>
                <div id="formulaire3">
                <div id="perso_div">
                <form method="post" action="traitement.php">
                <p>
                        <label for="perso">Choisissez votre personnage:</label>
                        <select name="perso">
                                <option value="Cloud">Cloud, Final Fantasy 7</option>
                                <option value="Rydia">Rydia, Final Fantasy 4</option>
                                <option value="Sora">Sora, Kingdom Hearts</option>
                                <option value="Arthas">Arthas, The World Of Warcraft</option>
                                <option value="Zack">Zack, Final Fantasy Crysis Core</option>
                                <option value="Ethan">Ethan, Phantasy Star Universe</option>
                                <option value="Link">Link, The Legend Of Zelda</option>
                                <option value="Vaan">Vaan, Final Fantasy 12</option>
                                <option value="Shulk">Shulk, Xenoblade Chronicles</option>
                                <option value="Lightning">Lightning, Final Fantasy 13</option>
                                <option value="Elza">Elza, The Last Story</option>
                        </select>
                </p>
                </form>
                </div>
                <div id="alliance_div">
                <form method="post" action="traitement.php">
                <p>
                        <label for="alliance">Choisissez votre alliance:</label>
                        <select name="perso">
                                <option value="Dissydia">Alliance Dissydia</option>
                                <option value="Bionis">Alliance Bionis</option>
                                <option value="Mekonis">Alliance Mekonis</option>
                        </select>
                </p>
                </form>
                </div>
                </div>
                </article>
                <article>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <div id="formulaire2">
                <div id="mot_de_passe_div">
                <form method="post" action="traitement.php">
                    <p>
                        <label for="mot_de_passe">Votre mot de passe</label>: <input type="text" name="mot_de_passe" id="mot_de_passe" />
                    </p>
                </form>
                </div>
                <div id="date_de_naissance_div">
                <form method="post" action="traitement.php">
                    <p>
                        <label for="date_de_naissance">Date de naissance</label> : <input type="date" name="date_de_naissance" id="date_de_naissance" value="1998/09/25"/>
                    </p>
                </form>
                </div>
                </div>
                <div id="bouton">
                <form>
                    <p>
                        <input type="submit" value="S'inscrire" />
                    </p>
                </form>
                </div>
            </article>    
            <footer>
        <div id= "worpg">
            <p class="left"><a href="#">WORPG</a> &copy; 2012 <a href="#">FreneZia</a><br /><a href="#">WORPG</a> est né à Libourne</p>
        </div>
            <div id="bug">
            <p class="right"><a href="#">Demander de l'aide</a> <a href="#">Consulter les règles</a><br /><a href="#">Signaler un bug</a> <a href="#">Signaler une erreur</a></p>
            </div>
            </footer>
        </div>
    </body>
</html>

Et mon code CSS:

Code:

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{
    width: 100%;
    background: url('images/ciel.png') repeat;
    background-size: 100%;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    margin-right : auto;
    margin-left: auto;
}

#text_page
{
    background-image: url('images/fond_jaune.png');
    min-height: 300px;
    width : 70%;
    margin: auto;
}

section
{
    display: inline-block;
}
section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

#presentation
{
    padding-left: 8%;
    text-align: center;
    vertical-align: center;
    width: 225%;
    font-size: 20px;
    display: inline-block;
}
h1
{
    font-family: ballpark, Dayrom, serif;
    color: maroon;
}
header
{
    background: url('banniere_worpg2png') no-repeat;
}
header h1
{
     width: 80%;
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}
nav
{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom : 8%;
}
nav ul
{
    list-style-type: none;
}
nav li
{
    display: inline-block;
    margin-right: 15px;
}
nav
{
    background: url('images/ruban.png');
    text-align: center;
    vertical-align: center;
}
#titre_principal
{
    text-align: center;
    margin-left: 16%;
}
nav a
{
    border-bottom: 3px solid #760001;
    color: white;
}
/* Bannière */

#banniere
{
    height: 200px;
    border-radius: 5px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    color: white;
    font-size: 0.8em;
}
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}


/* Corps */
a
{
    color: #760001;
}


article
{
    vertical-align: top;
    text-align: left;
    width: 30%;
    display: inline-block;
    margin-right: 10%;
}


#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

/*inscription*/

#inscription
{
    text-decoration: underline;
    margin-left: 3%;
    display: inline-block;
    margin-right: 10%;
}

#epingle
{
    display: inline-block;
    margin-left: 10%;
}

#phrase_presentation
{
    margin-left: 20%;
}

#deviens_soldat
{ 
    margin-left: 80%;
}

#connectez-vous
{
    margin-left: 15%;
}
/* Formulaires */

#pseudo_div
{
    margin-left: 25%;
}

#e-mail_div
{
    margin-top: 75%;
    margin-left: 25%
}

#perso_div
{
    margin-top: 99%;
}

#pseudo_div, #alliance_div
{
    margin-right: 25%;
}

/* Bouton "s'inscrire" */
#bouton
{
    margin-right: 50%;
}


#connexion
{
    background: url('images/ruban.png') repeat-x;
    padding-bottom: 0.5%;
    padding-top: 1.5%;
    vertical-align: middle;
    text-align: center;
    margin-left:60%;
    margin-bottom: 50%;
}

#connexion p
{
    color: #ffffff;
}

/* Footer */

footer
{
    background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; 
    padding-top: 3%;
    text-align: center;
    vertical-align: top;
}

footer p, footer ul
{
    font-size: 1em;
}

#worpg, #bug
{
    display: inline-block;
}

#bug
{    

    margin-left: 8%;
}

Dernière modification par sasuke33500 (17-05-2012 16:01:15)

29-05-2012 09:19:13

Désolé de reposter,mais j'aimerais avoir ma réponse.
[spoil]Les erreurs suivantes doivent être corrigées pour que le message puisse être envoyé :
Les messages doivent être argumentés, nous vous invitons à relire les règles. Pour le dialogue, le bar est à votre disposition.[/spoil]

04-06-2012 12:23:19

Moi je ferais ça.

Pseudo et Mot de passe sont le formulaire 1.
Votre personnage et Alliance sont le formulaire 2.
Email et Date de naissance sont le formulaire 3.

Formulaire 1:

Mot de passe ==> float: right;

Formulaire 3:

Date de naissance ==> float: right;

Comme ça, tu auras déjà l'alignement.

Ensuite pour centrer tous ça, tu dois joueur sur le width de tes div compris dan ton <article> et rajouter:
margin-left: auto;
margin-right:auto;

Donc on a:

HTML:

<article>
<div id="formulaire1">
<div id="pseudo">
...
</div>
<div id="mot_de_passe">
...
</div>
</div>

<div id="formulaire2">
<div id="perso">
...
</div>
<div id="alliance">
...
</div>
</div>

<div id="formulaire3">
<div id="email">
...
</div>
<div id="date_de_naissance">
...
</div>
</div>
</article>

Mais bon tu peux trouver des formulaires déjà crée, ou de bon tutos:

http://24ways.org/2009/have-a-field-day … ml5-forms/
http://www.aidenet.com/pageperso57.htm
http://www.lesintegristes.net/2009/02/0 … -la-route/

04-06-2012 14:14:30

Joue avec les largeurs et les "float" si tu comptes faire ta mise en page via CSS. Sinon opte pour un tableau classique.
tu mettra beacoups moins de temps mais c'est pas conseillé pour les mises en page.

04-06-2012 16:08:21

Tu devrais apprendre le css et tu verrais tout serais si ... facile.

[quote]Les erreurs suivantes doivent être corrigées pour que le message puisse être envoyé :
Les messages doivent être argumentés, nous vous invitons à relire les règles. Pour le dialogue, le bar est à votre disposition.[/quote]

Forums » Problème HTML/CSS:

Problème HTML/CSS

29-04-2012 16:09:48