Polices dreamweaver

[claire04]

Comment faire pour un site fait avec dreamweaver sur mac pour que les polices utilisées (Abadi MT Condensed Light pour le cas) s'affichent de la meme manière chez ceux qui consultent le site ?

 

[edenpulse]

Hello, ca s'appelle utiliser des web-fonts avec font-face :
http://www.html5rocks.com/en/tutorials/webfonts/quick/

 

[momo-fr]

En plus simple tu embarques des Google Fonts… :rolleyes: :siffle:

Des typos dans mon site (tuto)

 

[claire04]

Merci pour les réponses,
j'ai mis :
<meta name="Keywords" content="maquillage artistique,maquillage,maquillage cin&eacute;ma,maquillage théâtre,maquillage opéra,coiffe,postiches,masques,accessoires,perruque,perruquière,effets spéciaux,postiche,catherine gargat" />
<link href="design.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Josefin Sans' rel='stylesheet' type='text/css'>

et dans la CSS :
}
.Style4text {
font-family: Josefin Sans, sans-serif;
font-size: 16px;
color: #999999;
font-style: normal;
font-weight: normal;
}

mais ca ne change rien dans l'apparence du texte, pourquoi ? et la typo n'apparait pas dans "modifier la liste des polices". est-ce qu'il faut la télécharger d'abord ?

c'est pour la page CV de mon site : http://www.catherine-gargat.fr

 

[momo-fr]

Ce n'est pas très clair… le site que tu indiques utilise la règle CSS suivante qui est dans ton fichier design.css :

.Style4text {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #999999;
font-style: normal;
font-weight: normal;
}

Ce n'est donc pas ce que tu indiques dans ton post… mise à jour du fichier ?

Autre point, pas d'appel de la source typo Google dans le head… tu es sûre d'avoir uploadé tes fichiers ? Sur ce site ?

Sinon ça marche sur mon essai perso.

 

[claire04]

Non je n'ai pas mis à jour mes fichiers car mon pb n'est pas résolu et j'ai fait des tests en interne seulement.

Comment as-tu fait ton essai perso ? est-ce qu'il faut voir le résultat en ligne uniquement ?
Peux-tu me donner le code du Head que tu as mis dans ton essai perso, est-ce que c'est du genre ca :
<link href="design.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Josefin Sans' rel='stylesheet' type='text/css'>
+ la font-family dans la css

 

[momo-fr]

J'ai fait le test en ligne sur ton site avec Firebug pour Firefox, un module de développement Web.

J'ai collé ton appel à la Google-Font en éditant le code HTML (c'est un mode live je ne touche pas ton fichier en ligne seulement dans mon navigateur).

Changé la règle font-family de tes 2 CSS et ça marche direct !

Tu peux donc effectuer tes changements et publier tes fichiers&#8230;

 

[claire04]

Merci pour tes réponses, tu m'as sauvée... et ca marche !!

Un autre petit point : comment personnaliser le menu déroulant dans dw cs5.5, avant on pouvait le faire dans dw 8.
Le menu de reroutage proposé par cs5.5 est vraiment trop basique !

 

[momo-fr]

Un autre petit point : comment personnaliser le menu déroulant dans dw cs5.5, avant on pouvait le faire dans dw 8.

C'est un menu liste <select> et les possibilités ne sont pas légions (à tester selon les navigateurs en plus car tous ne permettent pas de styliser les menus select et leur liste d'options), mais c'est possible…

Tu peux même ajouter un style sur l'option sélectionnée pour la mettre en valeur avec :

option[selected=selected] {
    /* Styles pour tout élément OPTION ayant un attribut
        selected avec pour valeur "selected" */
}

 

[claire04]

Pourquoi mon site www.catherine-gargat.fr n'apparait pas dans Google au bout de 10 jours ? j'ai enlevé le fichier robots.txt, est-ce que c'était ca ??

 

[momo-fr]

As-tu fais les démarche de déclaration au robot ? c'est 10 jours environ mais si tu déclares l'URL sinon c'est plus aléatoire.

 

[claire04]

qu'est-ce qu'il faut que je fasse pour faire cette déclaration au robot ? connais pas.
j'ai mis ce fichier à la base du site chez l'hébergeur : http://www.catherine-gargat.fr/google5924c2bba59ec4f8.html
est-ce que c'est suffisant ?

j'ai toujours mis en ligne des sites sans faire cela, ca a changé ?

inconditionnelle du mac depuis 1990 et autodidacte, dommage que l'on habite pas la même région, j'aurais bien pris des cours, html notamment, suis maquettiste PAO à la base...

 

[claire04]

d'habitude je fais un fichier sitemap.html, mais là pas fait, je suppose que c'est ca le pb ?

---------- Nouveau message ajouté à 18h54 ---------- Le message précédent a été envoyé à 17h36 ----------

besoin d'un cours à domicile sur qq jours, c'est possible pour toi ou c'est trop loin ?

en fait je ne suis pas assez douée en html pour personnaliser le menu déroulant, j'ai vu le code sur ton menu déroulant "photographies" sur ton site mais c'est compliqué pour moi !

 

[momo-fr]

St Hilaire du Touvet c'est loin de Bordeaux&#8230;

Ceci dit Skype ou TeamViewer peuvent suppléer pour de la formation à distance.

Contacte-moi en MP SVP.

PS : le fichier sitemap devrait plutôt être un .xml

 

[claire04]

oui j'en demande peut-être un peu trop.

bon skype c'est bien, mais par écrit c'est mieux pour moi, j'aurais juste besoin que tu me donnes le code exacte à mettre dans le head et dans le body en rapport avec mon menu déroulant "photos", avec le même style que le menu, après je suis capable de changer la couleur, la typo...
comme ca je fais un copier/coller.
ca t'est possible ca ?

tu as fait ton site dans Flash ?

pour le sitemap, j'ai juste besoin de changer l'extension du fichier html en xml ?

 

[momo-fr]

J'ai comme toi appris sur le "tas", avantage du web tout ce que tu vois est disponible dans le code, en utilisant le module Firebug dans Firefox tu retrouves tout ce qui est associé à un élément HTML (CSS, &#8230.

Le lien que je t'ai indiqué expose tous les codes à utiliser et les styles pour un select, je pense ne pas avoir à la remettre ici&#8230; non ?

Je te le redit un select n'est pas évident à styliser car cette balise est protégée sur certains navigateurs, tu n'auras pas le même résultat partout.

Il vaut mieux créer un vrai menu déroulant vertical à base de liste à point qui peut être complétement manipulé via CSS et/ou javascript.

tu as fait ton site dans Flash ?

Je ne fais pas de site avec Flash, aujourd&#8217;hui c'est HTML5/CSS3/Javascript soit, en fait, l'utilisation d'un CMS (WordPress) avec un thème adéquat que je sais éditer et personnaliser.

pour le sitemap, j'ai juste besoin de changer l'extension du fichier html en xml ?

Créer son fichier sitemap.xml

 

[claire04]

pour le menu déroulant, j'ai essayé un vrai menu déroulant vertical , mais ca ne marche pas, le menu reste fixe et ne se déroule pas !

 

[momo-fr]

Ce tuto devrait correspondre à ce que tu veux, en très simple voilà le code :

<!doctype html>
<html>
<head>
       <title>Petit menu sympa</title>
  <meta charset="UTF-8">
<style type="text/css">

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}
</style>
</head>
<body>
<ul id="menu-deroulant">
	<li><a href="#">Mon menu</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

 

[claire04]

Merci, ca y est j'y suis enfin arrivée.

3 choses me manquent :
- Il n'y a qu'un truc que je n'arrive pas à faire c'est que quand on survole les sous-menus, les textes deviennent noirs, pour l'instant ils restent gris.

- Je voudrais aussi que quand on est sur les pages Photos, le menu Photos soit en rouge, j'ai pourtant mis dessus le Style6 ??

- Les sous-menus sont trop collés à gauche, comment laisser une petite marge ?

 

[momo-fr]

- Il n'y a qu'un truc que je n'arrive pas à faire c'est que quand on survole les sous-menus, les textes deviennent noirs, pour l'instant ils restent gris.

2 points à vérifier et/ou utiliser : le survol du <li> ou le survol du <a>, sachant que le <li> représente toute la surface du menu si tes <a> ne sont pas en "display:block".

- Je voudrais aussi que quand on est sur les pages Photos, le menu Photos soit en rouge, j'ai pourtant mis dessus le Style6 ??

C'est normal, si tu utilisais Firebug comme je te le conseille tu verrais le principe de filiation des styles en action, à savoir pour ce menu ceci :

Le "#menu-deroulant" représente une valeur unique et est appliqué à l'élément parent du lien <a> que tu veux mettre en rouge, la couleur définie sur le parent prend le dessus sur ta couleur de la classe (plus faible) enfant où tu définis le rouge. On peut ré-écrire la classe comme ceci :

Dans cet exemple la classe pour le lien est entièrement contextualisée. On part du parent puis du style précédé de la balise, ce n'est que le lien <a> qui reçoit cette règle et rien d'autre.
Note que l'on peut faire autrement c'est fonction du contexte et de tes connaissances dans la filiation CSS des règles de styles.

- Les sous-menus sont trop collés à gauche, comment laisser une petite marge ?

Sur le style des liens <a> tu vas ajouter un padding tout autour comme ceci :

#menu-deroulant a {
    color: #999999;
    display: block;
    text-decoration: none;
    padding: 5px 10px;
}

Le code utilisé est simplifié : 5px pour les marges haut/bas et 10px pour les marges droite/gauche selon le principe de l'horloge des définitions : haut / droite / bas / gauche mais qui s'écrivent en 2 valeurs lorsqu'elles sont identiques, sinon ça serait "padding:5px 15px 8px 10px;".