28172 sujets

CSS et mise en forme, CSS3

bonjour,

J'ai créé une page avec une feuille de style mais sans les avoir mises dans une dossier. Au moment où j'ai voulu les y mettre, l'effet de la feuille de style est inactive. J'ai ensuite créé les dossiers :

le site
images
pages
index.html
style
tentative.css

dans lequel j'y ai mis index.html et style.css. Dans index j'y donc misdans le head :

<title>tentativecss</title>
<link href="tentative.css" rel="stylesheet" type="text/css" />
</head>

et le resultat est le même. Qu'est-ce que j'ai fait, ou n'est pas fait qui fasse que le style ne fonctionne pas ? Merci.
Bonjour, pas très clair comme explications ..

Comment sont organisés tes fichiers ?
Voilà ce que j'ai compris ..

ton-site.com/images/
ton-site.com/pages/index.html
ton-site.com/styles/tentative.css

Si c'est bien celà :

- ta page index.html ne doit pas se trouver dans un sous-répertoire mais dans ton répertoire principal (root/)
- dans le cas de l'organisation actuelle des choses, tu ne dois pas appeler ta feuille de style via le chemin "tentative.css" mais via celui ci "../style/tentative.css" (les deux points permettent de remonter d'un niveau)
- si ta page index.html se trouvait à la racine, tu devrais appeler ta feuille de style comme ceci "style/tentative.css"


PS: si ton problème est résolu n'oublie pas de le signaler en éditant ton premier message et en ajoutant le tag [Résolu] devant ton titre Smiley cligne
Modifié par Akhilleus (05 May 2008 - 12:50)
salut,
mon site est comme ceci:
"monsite.com"/"mes pages"(dans lequel il y a index+ les autres pages, toutes au même niveau/au même niveau de "mes pages" il y a "mes images" et "style" dans le quel j'y ais mis tentative.css.

concernant la pages index, est- ce qu'il faut faire ? :

"mon site"/la page index.html/"mes page" puis au même niveau "mes images" et "style"

ESt ce que c'est correct ?
Bonjour,

Le plus simple serait de donner l'URL d'une page en ligne que chacun puisse constater les erreurs de chemin Smiley cligne .
slt,

Le site est encore à son stade primitif, il n'est pas en ligne. Je vous envoie le code :
Modifié par livaills (07 May 2008 - 21:37)
DESOLE

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">


<html>
<head>
    <title>apprendre</title>
    <link href="c:/Documents and Settings/monordi/Mes Documents/lesitepointcom/style/tentative.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<body style="direction: ltr;">
    <div id="header">
    <div id="baniere">
        </div>
     <ul id="menu_horizontalalamain">  
 ::: <a href="c:/Documents and Settings/monordi/Mes Documents/lesitepointcom/pages/frappe.html" alt="frappe" title="aller à la section 2">Dactylographie</a> :: <a href="frappe.html">Espa&ntilde;ol</a> :: <a href="frappe.html">Basque</a> :: <a href="frappe.html">photoshop &eacute;l&eacute;ment</a> :::  &raquo;  <a href="index.html" title="aller à la section 2">accueil</a> ::  <a href="frappe.html">contact</a>  &raquo;
  </ul> 
    </div>
 
  
    <div id="menu">         
        <div class="submenu">
            <h3>Apprendre</h3>
            <ul>
               <li><a href="frappe.html" title="aller à la section 1">DACTYLOGRAPHIE</a></li>
               <li><a href="#" title="aller à la section 2">ESPA&Ntilde;OL</a></li>
	             <li><a href="#" title="aller à la section 3">BASQUE</a></li>
	             <li><a href="#" title="aller à la section 4">PHOTOSHOP ELEMENT</a></li>
                   </li>   
            </ul>
       </div>
      <div class="submenu">
            <h3>Le Bio</h3>
            <ul>
                <li><a href="oligo.html">Produits Bio</a></li>
                <li><a href="tabper.html">Produits classiques</a></li>
                <li><a href="tuto_01.html">Tableau comparatif</a></li>
                <li><a href="de.html">liens</a>
                    </li>
              <ul>
                        <li><a href="dl1.html">Atac</a></li>
                        <li><a href="de2.html">Leclerc</a></li>
                        <li><a href="dl3.html">Cremerie</a></li>
                        <li><a href="dl4.html">Boulangerie</a></li>
                    </ul>
                </li>
        </div>

</div>  
  
    <div id="body">
        <h2>Ce site a été créé pour apprendre et perfectionner la dactylographie</h2>
        
            
            <p>La vie du 21ème siècle est telle, qu&#39;il nous est demandé constament d'en faire toujours plus mais les journées n'ayant que 24h, c'est le stress qui survient et tout les à coté. Nous passons un grand temps derrière notre écran mais nous souhaiterions parfois pouvoir aller plus rapidement pour être en mesure d'effectuer les tâches qui nous incombent, ou avoir un peu plus de temps pour soi &#40;ce qui n'est pas négligeable&#41;.<br><br> N'ayant pas à disposition les heures ou minutes nécessaires, j'estime que de nos jours savoir frapper correctement ainsi que rapidement est un gain de temps et c'est ce que je vous propose d'apprendre en quelques leçons. Le plus gênant sera par la suite, une fois seul(e), de poursuivre les entraînements avec assiduité, mais tout est faisable lorsque l'on y croît et qu'on le veut.
         </p>
             <p>
             Avant  toutes choses, il est nécessaire de connaître quelques "règles" qui vous aideront à <span class="police">mieux gérer cet apprentissage</span> et si elles pouvaient être suivies par la suite, ce ne serait que bénéfique,  une bonne habitude doit toujours être gardée.
             </p>
             
       <span class="conseil">QUELQUES CONSEILS</span><br><br>
       
            <li>a - Etre assis(e) de manière à ce que le dos soit bien calé, les fesses bien au fond de la chaise, utiliser de préférence un fauteuil ergonomique, pour ne pas que des problèmes de dos ne surviennent ; pour les personnes qui en sont sujettes, c'est une "obligation" uniquement si vous devez y passer du temps,
            <li>b - bien lire son texte avant, au minimum deux fois car il y a toujours quelque chose qui échappe à la première lecture et bien souvent aussi à la seconde. Il va de soit que celà doit être fait avec attention, 
            <li>c - frapper sans regarder le clavier pour mémoriser pour mieux mémoriser les touches,
            <li>d - ne pas essayer d'aller plus vite que ses capacités, c'est en agissant de cette manière que l'on fait des fautes, la vitesse viendra avec la pratique,
            <li>e - bien se relire à la fin, de préférence plus d'une fois,
            <li>f - si vous en avez la possibilité, essayez d'effectuer votre frappe dans le calme, sans stress, les résultats n'en seront que meilleurs,
            <li>g - être patient(e), il faut du temps pour parvenir à un résultat correct, à une frappe maîtrisée, mais en persévérant, on arrive à tout et je suis d'ailleurs là pour vous y aider.
       </li>

<p>Une fois ces conseils donnés, il ne reste plus qu'à les appliquer, nous allons donc pouvoir débuter notre premier cours frappe !!
</p>
       
       
        <div id="subbody1">
Sur ce site vous pourrez apprendre :<br><BR>&rArr; à positionner les doigts sur le clavier,<br><br>&rArr; les signes propres à la dactylographie,<br><br>&rArr; à associer plusieurs touches pour avoir un résultat qui ne peut exister sans celà,<br><br>&rArr; les touches raccourcis de word et office one,<br><br>&rArr; à connaître les signes de (mise au net) <br><br>&rArr; frapper correctement des courriers, des textes,<br><br>&rArr; ainsi que vous télécharger mes textes modifiés dont <u><i>vous devrez remettre en forme et que je vous corrigerais</u></i>.
    </div>
 
        <div id="subbody2">
<u>POUR ETRE EN MESURE DE PARTICIPER A CES COURS, IL EST NECESSAIRE DE</u> :<br><br>&rArr; POSSERDER ACROBAT READER<br><br>&rArr; DE S'INSCRIRE<br><h6>Une petite participation financière sera demandée pour nous permettre de pouvoir continuer à vous aider.</h6></b>
    </div>
     
    </div>
           
    <div id="footer">
   <ul id="menu_horizontalalamain">  
 ::: <a href="frappe.html">dactylographie</a> :: <a href="frappe.html">Espa&ntilde;ol</a> :: <a href="frappe.html">Basque</a> :: <a href="frappe.html">photoshop &eacute;l&eacute;ment</a> :::  &raquo;  <a href="frappe.html">accueil</a> :: <a href="frappe.html">nous contacter</a>  &raquo; 
  
  
  <br><br>remerciements : alsacreation.com - html.net - photomagazine.net<br><br>
  &copy; copyright  &mdash;  Derni&egrave;re mise &agrave; jour : t&ocirc;t ou tard...&nbsp;
  </ul>      
    </div>
</body>
</xhtml>




le css :

body
{
    font-family: verdana;
    width:100%;       
    background-color: #cbdaff;
    font-size: 0.9em;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
}



    .police 
{
    color: green;
    font-style: oblique;
    font-size: 200%;
    background-color: white;
}

#baniere
{
    background-image: url("c:/Documents and Settings/MIRENTXU/Mes Documents/lesitepointcom/images/dessindefrappe.gif");
    background-repeat:no-repeat;
    background-position: 5%;
    height: 120px;
    width:100%;
    background-color:#cfe019;
    padding-top: 3%; 
    margin-top: 0%;
    margin-bottom: 0%; 
   float:top;
}

#header
{
   
    width: 100%; /* largeur du head */
    background-color: #f4f9fd;   
    margin-bottom: 3%;
    float: top;
    

}

#menu_horizontalalamain
{
    text-align: center;
    font-family: verdana, arial, serif;"trebuchet ms";
    
}

ul#menu_horizontalalamain a
{
    text-decoration: none;
    color: #828282;
     
}

ul#menu_horizontalalamain a:hover
{
    text-decoration: underline ;
    color: #c8c8c8;
}


#menu /*mettre le dièse devant quand c'est un ID */
{
    float: left;
    width: 16%;
}

.submenu h3 /*titre menu.  Mettre un point devant quand c'est un CLASS */
{
    background-color: #e2e2e7 ;
    width: 97% ;
	  list-style: none ; /*supprimer puce devant enumeration ou liste*/
	  margin: 0 ;
	  padding: 0 ;
	  padding-left:3%;
    text-align: center;
    color: #98989d;
    font-family: courier new, monospace;
}

.submenu ul /*menu*/
{
  width:96%;
    background-color: #bebec3 ;
    list-style: none;
    padding-top: 3%;
    padding-left: 3%;
    padding-bottom: 5%;
    margin: 0px;
    margin-bottom: 9%;
    font-family: verdana, arial, serif;
    font-size: 0.7em ;
    font-weight: bold ;
    border: 1px outset #dfe0e5;

}

.submenu li ul /*sous-menu*/
{
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
    font-weight: normal ;
    font-style: italic;
    border: none; 
    text-align: center;
    
}

.submenu a
{
     text-align: left;
    text-decoration: none;
    color: #f4f9fd; /*couleur police menu*/
line-height: 1.8em ;
}

.submenu a:hover
{
    background-color: #51d8f6; /*couleur surlignement passage souris*/
    color: #7c7c7c; /*couleur police au passage de la souris*/
    display: block;
    width: 97%;
}

.couleurlienpage {
color: red;
}



#body 
{
    
    margin-left: 17.7%;
    margin-right: 0%;
    margin-bottom: 0px;
    padding-bottom: 3%;
    padding-right: 4%;
    padding-left: 4%;
    padding-top: 20px;
    color: #000000;
    background-color: #f3f6ff;
    text-align: justify;
    font-family: verdana, arial, serif;
    
}



#body h2 /*titre rose*/
{
    font-size: 1em;
    color: #666666;
    background-color: #ffccff;
    width: 80%;
    border: 1px solid #FF6CF0;
    text-align: center;
    padding: 2%;
    margin-left: 10%;
    margin-right: 10%;
}

h6
{
font style: italic;
}

.conseil{
margin-left: 10%;


color: red;
}

#subbody1
{
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 3%;
    
    padding : 4%;
    font-size: 1em;
    color: #ffffff;
    background-color: #000000;
    border : 1px solid #ffffff;
    
}

#subbody2
{
margin-left: 12%;
    margin-right: 12%;
    margin-top: 3%;
    
    padding : 4%;
    font-size: 1em;
    color: #ffffff;
    background-color: #000000;
    border : 1px solid #ffffff;
    
}
#footer
{
   
    margin-left: 17.7%;
    margin-right: 0%;
    margin-top: 3em;
    margin-bottom: 0em;
    margin-right: 0em;    
    padding-top: 0.3em;
    padding-bottom: 0.4em;   
    color: #666666;
    background-color: #f3f6ff;
    text-align: center;
    font-size: 0.7em; 
}




Modifié par livaills (07 May 2008 - 21:40)
Bonsoir,

le css fonctionne avec IE pas avec firefox et opera.

Je ne comprends pas. Ca marchait mais je ne sais pas si c'est depuis au j'ai mis le code dtd que ça foire.

Vous en pensez quoi ?
livaills a écrit :

<link href="c:/Documents and Settings/monordi/Mes Documents/lesitepointcom/style/tentative.css" rel="stylesheet" type="text/css"/>

Akhilleus a écrit :

Bonjour,
...
ton-site.com/images/
ton-site.com/pages/index.html
ton-site.com/styles/tentative.css

Si c'est bien celà :

- ta page index.html ne doit pas se trouver dans un sous-répertoire mais dans ton répertoire principal (root/)
- dans le cas de l'organisation actuelle des choses, tu ne dois pas appeler ta feuille de style via le chemin "tentative.css" mais via celui ci "../style/tentative.css" (les deux points permettent de remonter d'un niveau)
- si ta page index.html se trouvait à la racine, tu devrais appeler ta feuille de style comme ceci "style/tentative.css"



Allez courage, tu y es presque Smiley cligne
Salut,

le problème persiste encore. Je viens de sortir index.html et tentatives.css de leur dossier. Ils sont à la source.
Lorsque j'ouvre index.html avec opera et firefox, ça fonctionne, par contre je ne peux pas en dire autant pour les autres pages qui se trouvent dans un dossier.
J'ai fait précéder tentative.css de : style/, ou de style/style, et même de page/ mais rien ne change.

Je voudrais savoir si dans ces autres pages il faut mettre dans la source le DTD et le code de lien du lien de style :
<link href="tentative.css" rel="stylesheet" type="text/css"/ >
J'y 'ai toujours appliqué le code du lien de style mais maintenant je me demande si ce n'était pas une erreur bienque les fois où ça a marché ce n'était que parce qu'il y avait le code.

Merci encore
livaills,

Le plus simle serait de mettre tes pages en ligne afin que nous puissions regarder quelle(s) erreur(s) tu commets.

Pour chaque page de ton site tu dois effectivement indiquer un doctype et le lien vers ta feuille de styles.

Cdt,
Sylvain