IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Utilisation police de caractères


Sujet :

CSS

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2015
    Messages : 7
    Points : 7
    Points
    7
    Par défaut Utilisation police de caractères
    Bonjour,

    -J'arrive pas à rendre effective ma police Alegreya, pourtant, elle fonctionnait avant
    (La propriété text-decoration: none; fonctionne le sélecteur est donc bon, j'ai un message : "invalid property value" au niveau de la propriété font)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!doctype html>
    <html lang="fr">
    	<head>
    		<link rel="stylesheet" href="principale.css">
    	</head>
    	<body>
    		<header>
    			<div id="haut">
    				<a href="lienfou1.html"><div id="surmenu1" class="bouton"><div class="trait"><div class="derouler"></div></div>Cliquez ICI oui!</div></a>
     
    				<a href="lienfou2.html"><div class="bouton"><div class="trait"></div>Cliquez ici</div></a>
    				<a href="lienfou3.html"><div class="bouton"><div class="trait"></div>Cliquez ici</div></a>
     
    				<a href="lienfou4.html"><div id="last"><div id ="surmenu2" class="bouton"><div class="trait"></div>Cliquez ici</div></div></a>
     
    				<!--<div id="sousmenu1">
    					<a href="lienfou1-1.html"><div class="boutton"><div class="trait"></div>Cliquez ici</div></a>
    					<a href="lienfou1-2.html"><div class="boutton"><div class="trait"></div>Cliquez ici</div></a>
    					<a href="lienfou1-3.html"><div class="boutton"><div class="trait"></div>Cliquez ici</div></a>
    					<a href="lienfou1-4.html"><div class="boutton"><div class="trait"></div>Cliquez ICI oui!</div></a>
    				</div>-->
    			</div>
    		</header>
     
    		<div id="corp">
     
    			<h1>Ce site claque</h1>
    		<p>
    			mangeur de cuillére -sous les jupes des filles
    			<br />
    			complètement biologique, OGM de Cthulhu
    			<br/>
    			La congolexicomatisation des lois du marché, bien sur
    		</p>
     
    		</div>
     
    		<footer>
     
    		<div id="bas">
    			<a href="lienfou.html"><div id="last">Agro<div></a>
    			<a href="lienfou.html">Ponyta</a>
    			<a href="lienfou.html">Epona</a>
    			<a href="lienfou.html">Joli jumper</a>
    			<a href="lienfou.html">Bojack Horseman</a>
    		</div>
     
    		</footer>
     
    	</body>
     
    </html>
    La feuille de style :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    /*initialisation et prérequis_________________________________________________*/
    @charset "UTF-8";
    @font-face 
    {
        font-family: "alegreya";
        src: url('polices/alegreya-Regular.ttf');
    }
     
    html
    { 
      overflow-y: scroll; /*force la scrollbar, passe le 1366 en 1349*/
    }
    img, object, embed, canvas, video, audio, picture /*arrengement medias multiterminaux*/
    {
       max-width: 100%;
       height: auto;
    }
    body
    { 	
    	position: relative;
    	width:733px;/*la taille par raport au background*/
    	margin-top: 163px;
    	margin-left: auto; /*ideal => 308px -> 308/1349*/
    	margin-right: auto; /*Idem droite*/
    	margin-bottom: 0;
    }
    /*fin initialisation et prérequis_________________________________________________*/
    /*menu haut_______________________________________________________________________*/
    #haut a /*parametrage du texte*/
    {
    	text-decoration: none;
    	font: 1.4em, "alegreya", Helvetica, Arial, sans-serif;
    	color: #FFFFFF;
    }
    .bouton  /* par rapport a body, 4 bouttons espacé de 3 x ?? px en 1349*/ 
    {
    	float: left;
        font-size: 1.4em; /*22.4 px = 16 * 1.4 */
        width: 24.465240642%; /**/
        padding-top: 1%; /*permet le centrage vertical*/
        text-align: center;
     
    	margin-right: 0.71301247733%; /*espace entre les bouttons*/
     
    	background: linear-gradient( to top, rgba(255,255,255,0), rgba(61,61,61,65), rgba(25,25,25,100), rgba(61,61,61,35), rgba(255,255,255,0));
    	border-radius: 10%;
    }
    #last .bouton /*bricolage de centrage dans l'entéte pour le dernier element*/
    {
    	margin-right: 0;
    }
    /*decoration bouttons*/
    /*triangle de deroulement*/
    /*animation survol*/
    /* rendre visible les sousmenus*/
    .bouton:hover
    {
        background: linear-gradient( to top,rgba(255,255,255,0), rgba(61,61,122,30), #000033, rgb(61,61,61), rgba(150,150,150,0));
    }
    /*apparition sous menu*/
    /*#sousmenu1 .bouton
    {
    	z-index: 1;
    	visibility:hidden;
    	display: none;
    	clear: left;
    }*/
    /*fin menu haut___________________________________________________________________*/
    /*corp____________________________________________________________________________*/
    #corp
    {
    	float: top;
     
    	text-align: center;
    	color: rgb(153,153,153);
    	width: 100%;
    	height: auto;
    	background-color: rgb(00,00,51);
    }
    /*fin corp________________________________________________________________________*/
    /*menu bas________________________________________________________________________*/
    #bas a
    {
    	background-color: rgb(187,187,187);
    	float: left;
    	width: 20%;
    	text-align: center;
    }
    Désolé pour l'indigestion de code "burp"

    Merci de votre attention et/ou aide !

  2. #2

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2015
    Messages : 7
    Points : 7
    Points
    7
    Par défaut Merci mais
    Merci d'avoir prêté attention à mon post

    Avant de faire comme j'ai fait, j'ai bien vu un tutoriel du même genre, mais je n'en ais pas compris l’utilité et ce pour deux raisons :
    -Ma police fonctionnais très bien avant (j'ai un Screenshots (non anonyme) qui l’atteste.
    -Ma police est bien au format .ttf, j'ai, a ce propos, déja des fichiers .ttf "italic" et "bold".

    Le tuto n'est donc visiblement pas crucial pour ce que je veux ( en plus ça alourdis mon site).

    J'ai bien essayé (comme dans le tuto) la propriété : "font-family", mais rien n'y fait.

    Je précise que la ligne désignant la police n'est simplement pas interprété par le navigateur ==> inspecter l’élément de chrome m'en atteste, pourquoi ?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    je commencerais par vérifier la syntaxe de la déclaration de la police
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #haut a /*parametrage du texte*/
    {
    	text-decoration: none;
    	font: 1.4em, "alegreya", Helvetica, Arial, sans-serif; /* peut être une virgule en trop */
    	color: #FFFFFF;
    }
    Pour mon information personnelle, tu l'as trouvée où cette valeur pour float: top ?

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par poneyz Voir le message
    Le tuto n'est donc visiblement pas crucial pour ce que je veux ( en plus ça alourdis mon site).
    A moins que le site soit à ton usage exclusif, tu ferais bien de suivre les conseils du tuto... (et commencer par le LIRE, ça ne te ferait pas de mal...)

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2015
    Messages : 7
    Points : 7
    Points
    7
    Par défaut
    Haha ! C'est cela qui m'avait fait fonctionner la première fois

    http://www.w3schools.com/cssref/pr_font_font.asp

    J'ai dû rajouter une virgule "psychologique":

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    font: 1.4em, "alegreya", Helvetica, Arial, sans-serif; /* ne fonctionne pas*/
    font: 1.4em "alegreya", Helvetica, Arial, sans-serif; /* fonctionne*/
    Merci NoSmoking

    Cette valeur est... Inutile ! Je ne me souviens plus trop de sa présence, peut-être un essai

    jreaux62, j'ai déjà lu, ton post m'a fait le lire une 3éme fois, mais je ne vois pas ce que j'ai loupé

    Je crois me souvenir sur le tuto du même genre que ça permettais une lecture de la police, par exemple sur certain vieux navigateurs, mais la méthode que j'utilise fonctionne sur IE8, et sur les mobiles, ce qui me suffit. (mai peut-être ai'je loupé quelque chose ?)

    Si non, j'ai du mal a comprend les interactions entre les différents éléments, pourtant j'ai lu quelques tutos :s, si a défaut de jouer à l'inspecteur dans mon charabia code, vous me donnez des tutos très explicite, sa serais gentil (j'ai déjà suivi des cours à ce sujet et lu maint et maint tuto, mais je ne sais pourquoi, en pratique, les références de tailles et de position sont différentes de celles que j'imagine en écrivant mon code grrr).

    Enfin dois'je mètre "Résolu" ou je peut espérer de l'aide pour le positionnement ?

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    je vais te faire la même réponse que faite il y a peu sur le forum
    Enfin dois'je mètre "Résolu" ou je peut espérer de l'aide pour le positionnement ?
    8< ---------------------
    merci de bien vouloir tenir compte des règles.
    Une discussion = une question
    en conclusion solde cette discussion, bouton résolu, et ouvre en une autre, cela épargnera les mélanges de genres,
    Merci.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par poneyz Voir le message
    ... la méthode que j'utilise fonctionne sur IE8, et sur les mobiles, ce qui me suffit...
    C'est bien ce que j'ai dit : c'est pour ton usage personnel, et tu ne te soucies pas des autres, qui n'ont pas forcément un "vieil" ordinateur (un Mac, par exemple), sur lequel ta police ne s'affichera pas faute d'avoir mis le code et le fichier nécessaires...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème Sticky Footer mise en page clone Flash
    Par bio-designer dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 02/11/2010, 21h23
  2. Problème de design/mise en page auto
    Par zax-tfh dans le forum Silverlight
    Réponses: 2
    Dernier message: 09/02/2010, 00h01
  3. Problème de compatibilité - mise en page
    Par talmai dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 18/12/2009, 15h35
  4. Problème avec la mise en page
    Par mo_amyot dans le forum Word
    Réponses: 5
    Dernier message: 03/12/2007, 17h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo