28212 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Bonjour GTi Smiley smile

Tout l'intérêt d'un forum est que les réponses sont disponibles pour tous Smiley cligne

Donc commencer une discussion sur le forum et la finir en privé, ce n'est pas sympa pour les autres utilisateurs Smiley confus
Tout à fait d'accord avec toi et désolé pour cette mauvaise idée.

Le pb est que ce n'est pas évident de résoudre mon pb ici vu que j'y capte pas grand chose.

Ganou66 fait son possible mais le code qu'il m'a filer marche sauf l'effet a:hover.

donc comment faire tu as peu etre une idée ?

Smiley cligne
GTI pour utiliser moi aussi Dream (et alors ? Smiley lol ) je passe plus de temps à taper mon code à la main qu'à utiliser le menu de création du soft... CSS oui mais avec un peu d'huile de coude...

Le principe du a (:link, :hover... etc) est que tu en à un pour le body et après tu en créé pour les classes qui utilisent des liens, ou si tu n'a pas de classes tu fait des classes de a dans le body (heu j'ai l'impression de dire une connerie... non ?). Smiley rolleyes
j'ai besoin d'une petite précision : est ce normal que sur les liens qui ont déja été cliqué le hover n emarche plus....

cf www.merzeaud.com

attention le site est en cours de dévellopement, le code n'est pas trés propre et je m'initie au css..
Je vais pas pouvoir te répondre, j'ai pas pompé ton site pour avoir tes CSS, et là en regardant ton code... ça me fait drôle... je laisse les pros te donner une idée. Smiley langue
@zolegraf

Bonjour et bienvenue sur le forum Alsacréations !

Désolé d'avoir à te dire cela, mais ce sujet appartient à GTi. Ce n'est donc pas le bon endroit pour poser une question. Ce serait bien que tu lises d'abbord Aide/Règles, puis la FAQ pour voir si ta question n'a pas déjà été posée. Ensuite, après avoir lu Méthodologie à lire avant de poster dans ce salon, si ton problème demeure entier, tu pourras créer ton propre sujet.

Merci pour ta compréhension ! Smiley smile
--
Stephan
Tiens moi j'ai fait un essai avec ceci:

Je definis:

a.serie1 { }
a.serie2 { }

ensuite je fais:

a.serie1:hover
a.serie2:hover

sous IE6 ca a l'air de marcher et ca permet de definir deux sortes de hover.
Merci touriste je vais essayer ton truc mais moi je suis sous firefox et mon code (donné ci-dessus) ne marche pas.

Je vais mettre ma page en ligne pour vous faire une idée.

D'ici la si qq1 a une idée...

Smiley cligne
voila je viens de mettre un exemple de ce que je fait en ligne pour vous montrer le pb.

dl : http://tutoriauxfx.free.fr/exemple.rar (index + css = 2ko)

live : http://tutoriauxfx.free.fr (je c pas vous mais ici avec Firefox aucun effet visible - IE ok)

Je résume : je voudrais l'effet italique a:hover en haut, à gauche et à droite, comme il est la sauf que je voudrais garder la couleur de chaque partie : blanc en haut, bleu à gauche et rouge à droite.

Comment faire ? svp ?

En sachant que la je ne travaille qu'avec Dream, et avec des feuilles de style externes.

Merci

Smiley cligne
euh... je vois mal comment un navigateur pourrait aller chercher tes feuilles de style sur ton disque C Smiley biggol


<link href="file:///C|/Temp/Nouveau%20dossier/h1.css" rel="stylesheet" type="text/css">
Bon, ton code est pas top du tout, d'abord tes liens vers les feuilles de styles sont pas bons, vérifie ta configuration "site" dans Dream, ensuite tu mets TOUS tes styles dans la même feuille comme ça par exemple :
.h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #CC0000;
	text-decoration: none;
}
.h3 a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #CC0000;
}
.h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #006699;
	text-decoration: none;
}
.h2 a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #006699;
}
.h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
.h1 a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}


Mais déjà tu peux simplifier tes CSS en faisant ça par exemple :

.h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #CC0000;
	text-decoration: none;
}

.h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #006699;
	text-decoration: none;
}

.h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

.h3 a:hover, .h2 a:hover, .h1 a:hover {
	font-style: italic;
}


Pour finir, la typo si elle est générale ce met dans le body, un corps général va te simplifier la vie aussi (avec une déclinaison en % c'est plus pratique), il y a plein de façon d'optimiser ton code.
Comprend déjà le principe des classes et des pseudo-classes, le site d'Alsacréations est bourré d'infos et de tutos pour saisir déjà les bases des CSS (et je suis loin d'en avoir fait le tour)... Smiley smile Smiley cligne
Modifié par momo-fr (06 Apr 2005 - 02:07)
Merci momo pour ce code il est vrai tres clean, mais je viens de tester et chez moi ça ne marche ni sous Firefox ni sous IE. Et j'ai essayer les 2 codes !

Je n'ai pas l'effet italic : " font-style: italic"

Ca viens de chez moi ou quoi ?
Modifié par GTi (07 Apr 2005 - 22:54)
Gti, tes problèmes viennent essentiellement du code HTML que tu génères, si tu sélectionnes tes textes et que tu appliques le style correspondant tu vas voir que ça marche, ne laisse pas ton code en l'état car il est pourri... ta mise en page est lourdingue.

Vérifie bien que ta feuille de style est bien liée à ta page... accessoirement vide tes caches des navigateurs, chez moi sur Mac ça marche sous Safari, Firefox, IE et Opéra... donc le problème vient de toi... Smiley lol

Comme je te l'ai indiqué Alsacréations te donne plein d'explications et de tutoriels pour bien comprendre le fonctionnement des CSS, encore faut-il faire l'effort de les consulter.
Modifié par momo-fr (08 Apr 2005 - 09:04)
Stephan a écrit :

euh... je vois mal comment un navigateur pourrait aller chercher tes feuilles de style sur ton disque C Smiley biggol


<link href="file:///C|/Temp/Nouveau%20dossier/h1.css" rel="stylesheet" type="text/css">


Je viens de jeter un oeil sur ton code http://tutoriauxfx.free.fr et je ne vois toujours pas comment un navigateur pourrait accéder à ton disque C pour charger les feuilles de style.

<link href="file:///C|/Temp/Nouveau%20dossier/h1.css" rel="stylesheet" type="text/css">
<link href="file:///C|/Temp/Nouveau%20dossier/h2.css" rel="stylesheet" type="text/css">
<link href="file:///C|/Temp/Nouveau%20dossier/h3.css" rel="stylesheet" type="text/css">

Ou bien j'ai manqué quelque chose Smiley langue
En effet les gars autant pour moi.

Je viens de mettre un peu les mains dans le camboui et cette fois c'est bon, le code simplifier marche neekel et je vais de ce fait mettre mon site en ligne un peu grace à vous donc :

MERCI
Gti ton problème est résolu... indique-le dans le titre du fil (je dis ça j'ai moi aussi dû la faire précédemment)... Smiley lol
Modifié par momo-fr (18 Apr 2005 - 20:22)
Pages :