[Debutant] mes premiers essais par Emcy38 - page 1

"tu devrais mettre tes codes sur le forum ou donner une url parceque telecharger des zip on sait pas ce qu'ils contiennent"
=> depuis quand un fichier zip peut s'auto-activer pour installer des virus ?

bon voici mon code :

fichier index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon premier site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Mon Theme 1" href="montheme1.css" />
</head>
<body>
<div id="page">
<div id="en_tete">
</div>

<div id="menu_horizontal">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>

<div id="menu_vertical_gauche">
<div class="element_menu_vertical_gauche">
<h3>Menu 1</h3>

<ul>
<li>Sous Menu 1</li>
<li>Sous Menu 2</li>
<li>Sous Menu 3</li>
<li>Sous Menu 4</li>
<li>Sous Menu 5</li>
<li>Sous Menu 6</li>
</ul>
</div>

<div class="element_menu_vertical_gauche">
<h3>Livre d'or</h3> 

<p>
Bravo, ton site est excellent !<br/>
Totoche
<p>
</div>
</div>

<div id="menu_vertical_droit">
<div class="element_menu_vertical_droit">
<h3>Sondage</h3>

<p>
Qu'elle la couleur du cheval blan d'Henri IV ?
</p>
</div>

<div class="element_menu_vertical_droit">
<h3>News Letter</h3>

<p>
Voulez-vous vous inscrire ?
</p>
</div>
</div>

<div id="corps">
<p>
Bonjour tout le monde,<br/>
Voici mon premier Site Web : il est classe, non ?
</p>
</div>

<div id="pied_de_page">
<ul>
<li>HTML 1.1 Strict</li>
<li>CSS 2.0</li>
<li>Conforme W3C</li>
<li>Interent Explorer</li>
<li>Mozilla</li>
<li>Copyright "je suis une star"</li>
</ul>

</div>
</div>
</body>
</html>

fichier montheme1.css :

/* mon theme 1 */

body
{
background-color: rgb(255,255,255); /* blanc */
font-family: arial, helvetica, sans-serif;
color: rgb(0,0,0); /*noir */
}

#page
{
width: 940px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(190,200,230); /* gris bleuté */
}

#en_tete
{
width: 940px;
height: 100px;
background-color: rgb(230,170,200); /* pourpre */
margin-bottom: 10px;
}

/* -------------------------- menu horizontal ------------------------------------------------ */
#menu_horizontal ul
{
padding-left: 0;
margin-left: 0;
background-color: rgb(100,40,220); /* bleu clair */
color: White;
float: left;
width: 100%;
}

#menu_horizontal ul li { display: inline; }

#menu_horizontal ul li a
{
padding: 0.2em 1em;
background-color: rgb(100,40,220); /* bleu clair */
color: White;
text-decoration: none;
float: left;
border-right: 1px solid white;
}

#menu_horizontal li a:hover
{
background-color: rgb(220,210,250); /* bleu très clair */
color: blck;
}

#menu_horizontal li#active a
{
padding: 0.2em 1em;
background-color: rgb(230,203,100); /* bleu clair */
color: White;
text-decoration: none;
float: left;
border-right: 1px solid white;
}

#menu_horizontal li#active a:hover
{
background-color: rgb(220,210,250); /* bleu très clair */
color: blck;
}

/* -------------------- menu vertical gauche --------------------------------------------------------- */

#menu_vertical_gauche
{
background-color: rgb(220,130,220); /* mauve */
float: left; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
width: 140px; /* Très important : donner une taille au menu */
padding: 0;
}

.element_menu_vertical_gauche
{
margin: 5px;
padding: 5px ;
background: yellow;
}

.element_menu_vertical_gauche ul
{
padding: 0 1px 1px;
margin-left: 0;
background: gray;
width: 120px;
}

.element_menu_vertical_gauche li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

.element_menu_vertical_gauche li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

.element_menu_vertical_gauche li a:link { color: #448; }
.element_menu_vertical_gauche li a:visited { color: #667; }

.element_menu_vertical_gauche li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

.element_menu_vertical_gauche li#active
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

.element_menu_vertical_gauche li#active a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid orange;
background: #CCD;
text-decoration: none;
}

.element_menu_vertical_gauche li#active a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

#menu_vertical_droit
{
background-color: rgb(220,130,220); /* mauve */
float: right; /* Le menu flottera à gauche */
width: 140px; /* Très important : donner une taille au menu */
}

.element_menu_vertical_droit
{
background-color: rgb(245,160,155); /* rouge pale */
border: 2px solid black;
margin: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

#corps
{
float: left; /* Le menu flottera à gauche */
margin: 5px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
width: 640px;
background-color: rgb(240,240,105); /* jaune pale */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#pied_de_page
{
float: right; /* Le menu flottera à gauche */
width: 940px;
background-color: rgb(155,150,240); /* bleu pale */
}

aussi j'aimerais faire un effet d'ombre sur ma zone principale (#page): est-ce possible ?

Emcy38

10 janvier 2006 à 15:36:52

bonjour,

voici mon premier essai de âge xHtml
http://cjoint.com/?bkpICMcypD

J'ai plusieurs problemes :
1- je n'ai pas le même affichage sous IE et FireFox : #page ne prend pas toute la page sous FireFox => comment faire pour changer cela ? la largeur du menu de gauche change sous IE lorsque je zoom => comment faire pour changer cela ?
2- Pour FireFox, pourquoi n'ai je pas de margin bottom sur #page ?
3- sinon, est-ce qu'il y a d'autres points à modifier dans ma page ?

jp949

10 janvier 2006 à 16:28:31

salut.
tu devrais mettre tes codes sur le forum ou donner une url parceque telecharger des zip on sait pas ce qu'ils contiennent

11 janvier 2006 à 11:53:59

headbanger

11 janvier 2006 à 12:53:12

jeu veu pas paraitre mechan mais c'est un truc de debutant quoi les couleures vives ca le fait pas trop et surtout le nombre de couleur différentes.
il y a trop de contraste

un conseil : choisi une couleure principale (bleu , gris ou autre) et apres utilise surtout celle la. les melange ca rend pas tres bien.

11 janvier 2006 à 12:59:21

c'est fait exprès les couleur : c'est pour bien voir les différentes zones => je changerais une fois mon gabarit finis

=> j'ai changé le code pour te faire plaisir (c'est encore flachi) te j'ai réussi à mettre le pied de page => regardez mon premier post, j'ai changé les questions...

[Debutant] mes premiers essais

[Debutant] mes premiers essais

Supprimer

Modérer

Signaler le message aux modérateurs