Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Utilisateur anonyme - Modifié par to175 le 6/11/2012 à 23:44
 Utilisateur anonyme - 9 nov. 2012 à 21:50
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 8/11/2012 à 18:28
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
Modifié par to175 le 8/11/2012 à 20:20
: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
8 nov. 2012 à 20:24
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
8 nov. 2012 à 20:57
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
8 nov. 2012 à 21:29
pour il y a deux dossier contenant la meme chose?
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
8 nov. 2012 à 21:32 
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 jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
6 nov. 2012 à 23:43
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
7 nov. 2012 à 01:30
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 nov. 2012 à 08:19
Salut

enleve les <style> et </style> de ta CSS style.css
0
Utilisateur anonyme
7 nov. 2012 à 08:51
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 nov. 2012 à 09:01
en fait tu ne veux pas voir les bords de la table !

alors la oui tu peux mettre 
<table border="0"
0
Utilisateur anonyme
Modifié par to175 le 7/11/2012 à 15:12
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

recherche d'u
mimi -
brucine -

1 réponse
Instagram "Désolé, une erreur s'est produite"
bananamilk -
cedric.masdeb -

60 réponses