En suivant les cours sa marche pas.

Pour le design et tout sa...

7 juin 2006 à 15:09:05

Le code css: (le même que sont exemple presque)

font-weight: bold; /* Soit écrite en gras (c'est plus voyant) */
margin-right: 5px; /* Qu'il y ait une marge de 5px à droite pour que ça colle pas trop au reste du texte */
}

strong
{
color: black;
}

em
{
color: gray;

img
{
display: block;
}

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("http://membres.lycos.fr/appa/em.gif"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

#en_tete
{
width: 600px;
height: 200px;
background-image: url("http://membres.lycos.fr/appa/banniere_appa.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* Tous les titres de menus */
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}

Et le code html: (le même que le sien)

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 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>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="appa.css" />
</head>
<body>
<div id="en_tete">
<!–– Ici on mettra la bannière ––>
</div>

<div id="menu">
<div class="element_menu"> <!–– Cadre correspondant à un sous–menu ––>
<h3>Titre menu</h3> <!–– Titre du sous–menu ––>
<ul>
<li><a href="page1.html">Lien1</a></li> <!–– Liste des liens du sous–menu ––>
<li><a href="page2.html">Lien2</a></li>
<li><a href="page3.html">Lien3</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre menu</h3> <!–– Titre du sous–menu ––>
<ul>
<li><a href="page5.html">Lien4</a></li> <!–– Liste des liens du sous–menu ––>
<li><a href="page6.html">Lien5</a></li>
<li><a href="page7.html">Lien6</a></li>
</ul>
</div>
</div>

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>
</body>
</html>

Et regarder ce que sa donne: Mon site >> sa marche pas... cliquer ici pour voir !

Kolimang

7 juin 2006 à 15:34:29

Il faudrait que tu mettes ton css en entier parce que là on ne voit pas les propriétés css pour le div #corps, et c'est sans doute là que ça coince.

francky03

7 juin 2006 à 15:39:07

Mais en fait, la je les ai mises en entier tu voit. Alors c'est quoi le bug ? Car sa me saoul je fait tout ce qui est dit dans le cours, sa marche a tout le monde, sauf moi !!! Pourquoi sa ??!

Kolimang

7 juin 2006 à 16:03:54

Euh, si tu nous as donné ton fichier css en entier, il y a un problème. Déjà parce qu'il commence comme ceci :

font-weight: bold; /* Soit écrite en gras (c'est plus voyant) */
margin-right: 5px; /* Qu'il y ait une marge de 5px à droite pour que ça colle pas trop au reste du texte */
}

Tu donnes des propriétés CSS qui ne se rapportent à aucune balise ou class. C'est déjà pas normal.

Par ailleurs regarde dans ton code source html, tu as :

Or dans ta feuille de style css tu ne définis pas les propriétés de cette section.

Essaye d'ajouter ceci à ta feuille de style css :

#Corps {
margin-left: 130px ;
}

Sans oublier de régler le problème des premières lignes de ta feuille css qui n'ont pas de sens.

francky03

7 juin 2006 à 16:09:34

Oulala je comprend rien de tout se que vous dites. Et c'est que j'ai oublié de mettre le début du code sur le forum.

Kolimang

7 juin 2006 à 16:19:32

Citation : francky03

Oulala je comprend rien de tout se que vous dites. Et c'est que j'ai oublié de mettre le début du code sur le forum.

C'est pour ça que je te propose d'éditer ton message et de remettre le CSS en entier

Pour les explications de ma réponse précédente, je ne vois pas comment être plus clair.

Anonyme

7 juin 2006 à 17:32:39

Bon, je mets ton code css en entier pour les autres...

p
{
width: 350px;
border: 1px ridge black;
text-align: justify;
padding: 12px;
margin-bottom: 50px;
margin: auto; /* On peut donc demander � ce que le block soit centr� avec "auto" */
color: silver;
font-family: "Comic Sans MS", "arial black", "Times New Roman", Times, serif;
}

p:first-letter /* Je veux que la premi�re lettre de mes paragraphes... */
{
float: left; /* Flotte � gauche */
font-size: 2em; /* Fasse une hauteur de 3 lignes */
font-family: Arial, Georgia, "Times New Roman", Times, serif; /* Soit mise en Arial si possible*/
font-weight: bold; /* Soit �crite en gras (c'est plus voyant) */
margin-right: 5px; /* Qu'il y ait une marge de 5px � droite pour que �a colle pas trop au reste du texte */
}

strong
{
color: black;
}

em
{
color: gray;

img
{
display: block;
}

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour �viter de coller avec le haut de la fen�tre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("http://membres.lycos.fr/appa/em.gif"); /* Une petite image de fond pour �viter d'avoir un vieux fond blanc

*/
}

#en_tete
{
width: 600px;
height: 200px;
background-image: url("http://membres.lycos.fr/appa/banniere_appa.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu
{
float: left; /* Le menu flottera � gauche */
width: 120px; /* Tr�s important : donner une taille au menu */
}

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px; /* Pour �viter que les �l�ments du menu ne soient trop coll�s */
}
.element_menu h3 /* Tous les titres de menus */
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* Toutes les listes � puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les c�t�s ont une marge int�rieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-l� fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, �a nous �vite d'avoir � en �crire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* M�me chose que tout � l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont � 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}

Et j'ai trouvé le petit détail qui casse tout:

em
{
color: gray;

img
{
display: block;
}

Il manque une accolade }
Tu ferme ca et le resultat est complètement différent!!!

Voili, voilou...

francky03

7 juin 2006 à 17:56:52

Merci sa marche maintenant. Mais je trouve sa très compliquer tout stes codes de partouts. Donc donc donc... je laisse tomvbé sa.