Je précise que je suis totalement néophyte, soyez donc indulgents, surtout que ce n'est que le début. J'avance par tâtonnements. Et dernière précision, le CSS, je l'ai pris à quelqu'un d'autre, va falloir que je m'y intéresse aussi.
<!DOCTYPE html>
<html>
<head>
<title>Page web</title>
</head>
<body>
<div id="fiche">
<div id="titre">
Fiche de Personnage
</div>
<div id="menu">
<ul>
<li id="presentation" class="button"><a href="#desc_presentation">Presentation</li>
<li id="caracteristiques" class="button"><a href="#desc_caracteristiquess">Caracteristiques</li>
<li id="histoire" class="button"><a href="#desc_histoire">Histoire</li>
<li id="inventaire" class="button"><a href="#desc_inventaire">Inventaire</li>
<li id="competences" class="button"><a href="#desc_competences">competences</a></li>
</ul>
</div>
<div id="contenu">
<div id="desc_presentation" class="description">
<h1>Presentation</h1>
<p><form method="post" action="traitement.php">
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" placeholder="Ex : Zozor" size="40" maxlength="30" />
<label for="Race">Race :</label>
<input type="text" name="race" id="race" placeholder="Ex : humain" size="30" maxlength="20" /> <br /><br />
<label for="classe">Classe :</label>
<input type="text" name="classe" id="classe" placeholder="" size="40" maxlength="25" />
<label for="alignement">Alignement</label>
<select name="alignement" id="alignement">
<option value="loyal bon">Loyal Bon</option>
<option value="loyal neutre">Loyal Neutre</option>
<option value="loyal mauvais">Loyal Mauvais</option>
<option value="Neutre bon">Neutre Bon</option>
<option value="neutre">Neutre</option>
<option value="neutre mauvais">Neutre Mauvais</option>
<option value="chaotique bon">Chaotique Bon</option>
<option value="chaotique neutre">Chaotique Neutre</option>
<option value="chaotique mauvais">Chaotique Mauvais</option>
</select>
</form></p>
</div>
<div id="desc_caracteristiques" class="description">
<h1>Caracteristiques</h1>
<p></p>
</div>
<div id="desc_histoire" class="description">
<h1>Histoire</h1>
<p>C'est une longue histoire</p>
</div>
<div id="desc_inventaire" class="description">
<h1>Inventaire</h1>
<p>Je suis fauché</p>
</div>
<div id="desc_competences" class="description">
<h1>Competences</h1>
<p>Je sais utiliser ma souris</p>
</div>
</div>
<div class="clear"></div>
</div>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
#fiche {
width: 800px;
height: 600px;
border: 1px solid #888888;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0px 0px 10px #888888;
-webkit-box-shadow: 0px 0px 10px #FFF8DC;
box-shadow: 0px 0px 10px #888888;
background-color: cornflowerblue;
}
#titre {
width: 100%;
height: 25px;
-webkit-border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
border-bottom: 1px solid #888888;
background-color: #AAAAAA;
text-align: center;
font-weight: bold;
font-size: 18px;
color: blue;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}
#menu {
width: 180px;
height: 575px;
float: left;
background: #AAAAAA;
border-right: 1px solid #888888;
-webkit-border-radius: 0px 0px 0px 15px;
-moz-border-radius: 0px 0px 0px 15px;
border-radius: 0px 0px 0px 15px;
}
#contenu {
width: 619px;
height: 575px;
float: right;
-webkit-border-radius: 0px 0px 15px 0px;
-moz-border-radius: 0px 0px 15px 0px;
border-radius: 0px 0px 15px 0px;
}
.description {
width: 619px;
height: 575px;
-webkit-border-radius: 0px 0px 15px 0px;
-moz-border-radius: 0px 0px 15px 0px;
border-radius: 0px 0px 15px 0px;
background-color: cornflowerblue;
}
.description h1 {
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
.description p {
margin: 5px;
}
.clear { clear: both; }
.button {
width: 175px;
padding-left: 5px;
border: 1px solid #888888;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.button:hover {
background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
color: #666666;
}
</style>
</body>
</html>
Connexion
Inscription
FAQ
C'était un essai pour voir si j'avais bien compris ce que j'avais lu, et essayer de vous aider. Mais, j'ai compris que c'était pas la bonne méthode, tant pis.