Css...j'arrive plus - Programmation
TomsGuide.com : 700 000 inscrits répondent à toutes vos questions high-tech et informatique.
Pour obtenir de l'aide, inscrivez-vous gratuitement !
 

Ajouter une réponse



Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : Css...j'arrive plus
 
dryku
Profil : IDNaute
Plus d'informations
n°70708
04-07-2006 à 22: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

Liens sponsorisés


Inscrivez-vous ou connectez-vous pour masquer ceci.

Pshuuut
Profil : IDNaute
Plus d'informations
n°70716
04-07-2006 à 22:16:13

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

dryku
Profil : IDNaute
Plus d'informations
n°70721
04-07-2006 à 22: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??

windob
Profil : IDNaute
Plus d'informations
n°70723
04-07-2006 à 23: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.

NIGH7MARE
Profil : IDNaute
Plus d'informations
n°70724
04-07-2006 à 23: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 .

dryku
Profil : IDNaute
Plus d'informations
n°70729
04-07-2006 à 23:16:42

Eeeeee ca marche toujours pas!!

Voilà mon code Html:


Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.   <head>
  4.       <title>Mon super site</title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.       <link rel="stylesheet" href="ta_feuille_de_style.css" type="text/css">
  8.   </head>
  10.   <body>
  12.       <!-- L'en-tête -->
  14.       <div id="en_tete">
  15.          
  16.       </div>
  18.       <!-- Les menus -->
  20.       <div id="menu">     
  21.           <div class="element_menu">
  22.               <h3>Titre menu</h3>
  23.               <ul>
  24.                   <li><a href="page1.html">Lien</a></li>
  25.                   <li><a href="page2.html">Lien</a></li>
  26.                   <li><a href="page3.html">Lien</a></li>
  27.               </ul>
  28.           </div>
  29.      
  30.           <div class="element_menu">
  31.               <h3>Titre menu</h3>
  32.               <ul>
  33.                   <li><a href="page4.html">Lien</a></li>
  34.                   <li><a href="page5.html">Lien</a></li>
  35.                   <li><a href="page6.html">Lien</a></li>
  36.               </ul>
  37.           </div>     
  38.       </div>
  40.       <!-- Le corps -->
  42.       <div id="corps">
  43.           <h1>Mon super site</h1>
  44.      
  45.           <p>
  46.               Bienvenue sur mon super site !
  48.               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
  49.           </p>
  50.      
  51.           <h2>A qui s'adresse ce site ?</h2> 
  52.           <p>
  53.               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)
  55.               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
  56.           </p>
  57.          
  58.           <h2>L'auteur</h2> 
  59.           <p>
  60.               L'auteur du site ? Bah, c'est moi, quelle question :-p
  62.               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.
  64.               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).
  65.           </p>
  66.       </div>
  68.       <!-- Le pied de page -->
  70.       <div id="pied_de_page">
  71.           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
  72.       </div>
  74.   </body>
  75. </html>



Et voilà le Css:

Code :
  1. body
  2. {
  3.   width: 760px;
  4.   margin: auto;
  5.   margin-top: 20px;
  6.   margin-bottom: 20px; 
  7.   background-image: url("images/fond.png" );
  8. }
  10. /* L'en-tête */
  12. #en_tete
  13. {
  14.   width: 760px;
  15.   height: 100px;
  16.   background-image: url("images/banniere.png" );
  17.   background-repeat: no-repeat;
  18.   margin-bottom: 10px;
  19. }
  22. /* Le menu */
  24. #menu
  25. {
  26.   float: left;
  27.   width: 120px;
  28. }
  30. .element_menu
  31. {
  32.   background-color: #626262;
  33.   background-image: url("images/motif.png" );
  34.   background-repeat: repeat-x;
  35.  
  36.   border: 2px solid black;
  37.  
  38.   margin-bottom: 20px;
  39. }
  42. /* Quelques effets sur les menus */
  45. .element_menu h3
  46. { 
  47.   color: #B3B3B3;
  48.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  49.   text-align: center;
  50. }
  52. .element_menu ul
  53. {
  54.   list-style-image: url("images/puce.png" );
  55.   padding: 0px;
  56.   padding-left: 20px;
  57.   margin: 0px;
  58.   margin-bottom: 5px;
  59. }
  61. .element_menu a
  62. {
  63.   color: #B3B3B3;
  64. }
  66. .element_menu a:hover
  67. {
  68.   background-color: #B3B3B3;
  69.   color: black;
  70. }
  73. /* Le corps de la page */
  75. #corps
  76. {
  77.   margin-left: 140px;
  78.   margin-bottom: 20px;
  79.   padding: 5px;
  80.  
  81.   color: #B3B3B3;
  82.   background-color: #626262;
  83.   background-image: url("images/motif.png" );
  84.   background-repeat: repeat-x;
  85.  
  86.   border: 2px solid black;
  87. }
  89. #corps h1
  90. {
  91.   color: #B3B3B3;
  92.   text-align: center;
  93.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  94. }
  96. #corps h2
  97. {
  98.   height: 30px;
  100.   background-image: url("images/titre.png" );
  101.   background-repeat: no-repeat;
  102.  
  103.   padding-left: 30px;
  104.   color: #B3B3B3;
  105.   text-align: left;
  106. }
  109. /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
  111. #pied_de_page
  112. {
  113.   padding: 5px;
  115.   text-align: center;
  117.   color: #B3B3B3;
  118.   background-color: #626262;
  119.   background-image: url("images/motif.png" );
  120.   background-repeat: repeat-x;
  121.  
  122.   border: 2px solid black;
  123. }



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

dryku
Profil : IDNaute
Plus d'informations
n°70730
04-07-2006 à 23: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

Kymic@IDN
Profil : IDNaute
Plus d'informations
n°70734
04-07-2006 à 23: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.....


Aller à :
Ajouter une réponse
 
  FORUM Infos-du-Net » Programmation » Css...j'arrive plus

Plan du forum
Forum MesDiscussions.Net, Version 2007.1.2
© 2000-2007 No1Dev
Page générée en 0.490 secondes
Liens