Css...j'arrive plus

dryku

4 Juillet 2006 20:00:51

Bonjour à tous, je finis d'apprendre les cours de mateo sur SdZ, a propose du Css et Xhtml, le probleme c'est que j'arrive pas a faire comme lui pour le design!
Lui ca lui fait un beau petit site avec des menus et tout!
Regardez Ici
Mais moi en revanche ca me fait Cela
Vous avez des suggestions?? Normalement tout a bien été crée, mon fichier html, le fichier .css, normalement ca devrait marcher mais ca marche pas, aidez moi svp, merci d'avance

Autres pages sur : css arrive

| Etre averti des réponses
| Alerter

Répondre à dryku

Pshuuut

4 Juillet 2006 20:16:13

T'as pas inséré le code css dans ta page.......

| Alerter

Répondre à Pshuuut

dryku

4 Juillet 2006 20:54:23

bah normalement c'est la meme chose, vu que j'ai un dossier, avec dedans la page .html et la feuille de style .css donc je comprends pas trop!
Mais on va essayer ta méthode, je dois placer le css entre quelles balises??

| Alerter

Répondre à dryku

windob

4 Juillet 2006 21:03:39

Il faut appeler la feuille CSS dans ta page HTML :

<link rel="stylesheet" href="ta_feuille_de_style.css" type="text/css">

Tu dois inserer cette balise entre les 2 balises <head> en remplaçant bien sur "ta_feuille_de_style.css" par l'URL de ta feuille de style.

| Alerter

Répondre à windob

NIGH7MARE

4 Juillet 2006 21:04:54

<!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>Exemple du Site du Zér0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
http://www.siteduzero.com
*/

body
{
width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background-image:url("fond.png");
}

/* L'en-tête */

#en_tete
{
width:760px;
height:100px;
background-image:url("banniere.png");
background-repeat:no-repeat;
margin-bottom:10px;
}

/* Le menu */

#menu
{
float:left;
width:120px;
}

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

border:2px solid black;

margin-bottom:20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color:#B3B3B3;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
text-align:center;
}

.element_menu ul
{
list-style-image:url("puce.png");
padding:0px;
padding-left:20px;
margin:0px;
margin-bottom:5px;
}

.element_menu a
{
color:#B3B3B3;
}

.element_menu a:hover
{
background-color:#B3B3B3;
color:black;
}

/* Le corps de la page */

#corps
{
margin-left:140px;
margin-bottom:20px;
padding:5px;

color:#B3B3B3;
background-color:#626262;
background-image:url("motif.png");
background-repeat:repeat-x;

border:2px solid black;
}

#corps h1
{
color:#B3B3B3;
text-align:center;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height:30px;

background-image:url("titre.png");
background-repeat:no-repeat;

padding-left:30px;
color:#B3B3B3;
text-align:left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding:5px;

text-align:center;

color:#B3B3B3;
background-color:#626262;
background-image:url("motif.png");
background-repeat:repeat-x;

border:2px solid black;
}
</style>
</head>
<body>
<div id="en_tete">

</div>

<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>

<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>

<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>

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

<p>
Bienvenue sur mon super site !

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)

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

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.

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>

Voila .
Si tu aurais mozilla firefox , clique droit sur la page / code source de la page et t'aurais tout ca .

Et juste en dessous de l'exemple de la page il y a

: Rappel : insérer un CSS dans le XHTML

Ca peut paraître idiot mais vous l'avez peut-être déjà oublié : pour que notre fichier XHTML s'affiche avec la présentation indiquée dans le CSS, il faut rajouter la ligne suivante entre <head> et </head> :

<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_mecanique.css" />

Cette ligne indique que l'on utilise le fichier "design_mecanique.css" pour la présentation

Et moi quand je fais des pages html j'utilise pas de CSS j'fais des tableaux au lieu de faire des headers et autres avec Dreamweaver .
Chacun sont truc .

| Alerter

Répondre à NIGH7MARE

dryku

4 Juillet 2006 21:16:42

Eeeeee ca marche toujours pas!!

Voilà mon code Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >
   <head>
       <title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" href="ta_feuille_de_style.css" type="text/css">
 
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">       
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>       
       </div>
 
       <!-- Le corps -->
 
       <div id="corps">
           <h1>Mon super site</h1>
 
           <p>
               Bienvenue sur mon super site !
 
               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)
 
               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
 
               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.
 
               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>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
       </div>
 
   </body>
</html>

Et voilà le Css:

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("images/fond.png");
}
 
/* L'en-tête */
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("images/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{   
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #B3B3B3;
}
 
.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}
 
#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
 
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
 
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}

Alors, ya quelqu'un qui peut m'aider?

| Alerter

Répondre à dryku

dryku

4 Juillet 2006 21:18:48

C'est bon, j'ai juste changé le nom de la feuille de style et ca a marché!!!

merci quand meme a vous!! :-D :-D :-D :-D :-D

| Alerter

Répondre à dryku

Kymic@IDN

4 Juillet 2006 21:50:13

Eh ben tout sa pour sa ! Bon c'est bien tu as trouvé tout seul ta bêtise...

Mais bon je me demandes comment on peut faire une erreur grosse comme sa ?!^^

Une précision : un ordinateur est bête et méchant : c'est la première règle que j'ai apprise, et de loin la plus utilile.

Comment veux tu que ton fichier html sache ou trouver la feuille de style si tu le lui indique même pas ou si tu lui fournit un chemin bidon !

ahlalaal.....

| Alerter

Répondre à Kymic@IDN

Tom's guide dans le monde