[CSS3] Utiliser ma propre font et l'intégrer dans la page

Résolu
Utilisateur anonyme -  
 Utilisateur anonyme -
Bonsoir,
Je n'arrive pas a afficher ma police dans mon tableau, pourriez vous me donner un coup de main sil vous plait??!
Ma page : 
<html> 
 <head> 
<link rel="stylesheet" type="text/css" href="style.css" media="all"/> 
  <title></title> 
 </head> 
 <body> 
  <table border="2" cellpadding="5" cellspacing="20" style="width: 95%; height: 500px; "> 
   <tbody> 
    <tr style="width: 95%; height: 150px; "> 
     <td colspan="3">az 
       </td> 
    </tr> 
    <tr> 
     <td rowspan="3" style="width: 20%; height: 500px; "> 
       </td> 
     <td rowspan="3" style="width: 60%; height: 500px; "> 
       </td> 
     <td colspan="1" rowspan="2" style="width: 20%; height: 1000px; "> 
       </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> 
    </p> 
 </body> 
</html>


ma feuille css: 
<style> 
td{ 
font-family:"LogoCraft";
font-size:20px;
}
body{
background-image: url('http://i.minus.com/iJdaYrkfiMYwo.jpg');
}
tabe{
opacity:50;
}
</style>


et ma police : logocraft.ttf
A voir également:

2 réponses

Réponse 1 / 2
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Voila en 12 mns ! ;-))

Bien que je ne soit pas un fervent adepte des % , je t en ai fais un tout en %
,et je l ai commente un peu !

voila ce que ca donne 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  <head>  
    <title>Ton Titre</title>  
   <!-- saved from url=(0014)about:internet -->  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
/*<![CDATA[*/  
    <!--  
    * {  
      margin: 0;  
      padding: 0;  
    }  

    body{  
      background-image: url('http://i.minus.com/iJdaYrkfiMYwo.jpg');  
    }  

    #site{  
      width: 85%;  
      margin: 0 auto;  
      clear: both;  
    }  

    .banniere{  
      width: 100%;  
      border: none;  
      height: 150px;  
    }  
    /* DECOMENTER SI PAS D IMAGE class="banniere" DANS LE HEADER  */  
    /*  
     #header{  
     width: 100%;  
     height: 150px;  
     }  
     */  

    #colonne-gauche{  
      float: left;  
      width: 18%;/* (20%-2%)  -2% sur chaque colonne pour avoir les 6% de marges cumule (margin: 1% X 6) de la class .opacite    */  
      height: 500px;  
    }  

    #colonne-droite{  
      float: left;  
      width: 18%;/* (20%-2%)  -2% sur chaque colonne pour avoir les 6% de marges cumule (margin: 1% X 6) de la class .opacite    */  
      height: 500px;  
    }  

    #colonne-centre{  
      width: 58%;/* (60%-2%) -2% sur chaque colonne pour avoir les 6% de marges cumule (margin: 1% X 6) de la class .opacite    */  
      float: left;  
      height: 500px;  
    }  

    .opacite{  
      margin: 1%;  
      margin-top: 2%;/* pour avoir la meme marge en haut que entre les colonnes    */  
      background: none;  
      background-color: rgba(225, 223, 223, 0.6);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99E1DFDF,endColorstr=#99E1DFDF);  
      zoom: 1;  
    }  

    .titre{  
      font-weight: bold;  
      font-size: 18px;  
      text-align: center;  
    }  

    .map{  
      background: none;  
      background-color: rgba(121, 145, 160, 1);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF7991A0,endColorstr=#FF7991A0);  
      zoom: 1;  
    }  

    .seed {  
      background: none;  
      background-color: rgba(151, 107, 68, 1);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF976b44,endColorstr=#FF976b44);  
      zoom: 1;  
    }  

    .autre {  
      background: none;  
      background-color: rgba(143, 143, 143, 1);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF8f8f8f,endColorstr=#FF8f8f8f);  
      zoom: 1;  
    }  

    #colonne-gauche ul{  
      margin-bottom: 20px;/* pour avoir 20px de marge entre les listes de la colonne gauche   */  
      margin-left: 20%;/* pour replacer les listes dans la div  colonne gauche  */  
    }  
    -->  
    /*]]>*/  
    </style>  
  </head>  
  <body>  
    <div id="site">  
      <div id="header">  
        <img src="banniere.png" alt="banniere" class="banniere" />  
      </div>  
      <div id="colonne-gauche" class="opacite">  
        <div class="titre map">  
          <a href="/map.html">MAP</a>  
        </div>  
        <ul>  
          <li>article 1  
          </li>  
          <li>article 2  
          </li>  
        </ul>  
        <div class="titre seed">  
          <a href="/seed.html">SEED</a>  
        </div>  
        <ul>  
          <li>article 1  
          </li>  
          <li>article 2  
          </li>  
        </ul>  
        <div class="titre autre">  
          <a href="/autre.html">AUTRE</a>  
        </div>  
        <ul>  
          <li>article 1  
          </li>  
          <li>article 2  
          </li>  
        </ul>  
      </div>  
      <div id="colonne-centre" class="opacite">  
        Colonne-centre  
      </div>  
      <div id="colonne-droite" class="opacite">  
        Colonne-droite  
      </div>  
    </div>  
  </body>  
</html>


je t ai mis les fichiers a telecharger ,
il y a en CSS dans la page et en CSS externe + les images optimiser
telecharge le http://www.datafilehost.com/download-09d83292.html

decoche 
Use our download manager and get recommended downloads
avant de telecharger

a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
1
Utilisateur anonyme
 
:O MERCI INFINIMENT
(et pendant qu'on est dans l'irréalisme, vous n'auriez pas connaissance d'un site offrant des serveurs dédiés gratuitement?)
0
Utilisateur anonyme
 
Dernière chose : l'hébergeur gratuit sur lequel je suis ma donné un compte FTP mais dessus je ne peux pas créer de sous dossier apparemment, je peux seulement créer des fichiers dans la racine et y accéder comme /map.html par exemple, et même iframe n'est pas disponible, ça met automatiquement de la pub...
J'espère que ça ne va pas être gênant pour le code.
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
non aucun probleme c est juste moins bien pour le rangement a la racine du site !
tu met les images optimise et tu change juste les liens vers ces images ! !
0
Utilisateur anonyme
 
pour il y a deux dossier contenant la meme chose?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
  
pour il y a deux dossier contenant la meme chose?

comprend pas ??
0
Réponse 2 / 2
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
Bonsoir to175,
essais de délocaliser le style du code html, même pour les dimensions du tableau

pour la police applique la a une balise

<table class="tableaux">
<tr>
<td><p>kjkdjfkd</p></td>
</tr>
</table>

et dans ta feuille de style css

.tableaux{
width:95%;
}

.tableau p{
font-family: 'LogoCraft';
}


pour maximiser la prise en compte de la police par les navigateurs mieux vaux aussi l'avoir en .oet et .woff
pour obtenir des conversions tu peux allé ici https://www.fontsquirrel.com/tools/webfont-generator


--
0
Utilisateur anonyme
 
Merci,
jai contourné le probleme mais jen ai un autre, je veux que mon tableau soit beaucoup moins transparent...
mon code 
<style>
td{ 
font-size:30px;
opacity:0.6;
background-color:#E1DFDF;
}
body{
background-image: url('http://i.minus.com/iJdaYrkfiMYwo.jpg');
}
</style>


et ca donne ca: http://worldofminers.hebergratuit.com
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

enleve les <style> et </style> de ta CSS style.css
0
Utilisateur anonyme
 
He super :) merci et je voudrais rendre invisible Le TABLE Mai's pas TD jai pas trop compris comment utiliser, je dois mettre <table border:0;> ?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
en fait tu ne veux pas voir les bords de la table !

alors la oui tu peux mettre 
<table border="0"
0
Utilisateur anonyme
 
ha, la cest bien transparent dans les TD mais jai mis une div et elle l'est aussi, comment faire pour quelle soit pas transparente comme le TD dans lequel elle est? 
<div style="background-color:#7991A0 ; opacity:1"><a href="/map.html">MAP</a></div>
0

Discussions similaires

Impossible d'utiliser ce numéro de téléphone pour la validat
Marie -
MPMP10 -

1 réponse
Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses
Paiement Leboncoin
JamesDu76 -
contrariness -

2 réponses