Messages: 238

Enregistré le: 19 Déc 2003

Message le Lun Sep 06, 2004 17:32

Bonsoir a tous,

Suite à un topic laissé il y a environ 2 semaine sur le language CSS, et j'en profite pour remercier tt ceux qui mon donner les liens et les conseil pour arriver a faire ce que je voulais...merci..,j'aimerai donc vous montrer le resulta et avoir vos avis et conseil.

:arrow: http://www.apoilleux.com

Néanmoin, quelques questions subsiste.

A savoir :

1) Est ce que <h1>.......<em>.......</em>.......</h1> est bien lu comme une balise <h1> a part entiere ??

2) vous remarquerai que dans la <div> ou sont placé les vignette, celles ci sont centré horisontalement mais pas verticalement...comment puis je faire pour palier à ce probleme ??

3) et enfin, j'ai vu en controlant mon sit sur mozilla que chaque images etait entouré, ceci est modifiable ou alors propre a mozilla ??

Merci d'avance pour vos avis et conseil, si vous surfer avec autre chose que IE ou Mozilla dite moi si ça passe bien...

un grand merci a tous :D
Modifié en dernier par lekouti le Lun Avr 24, 2006 23:35, modifié 1 fois.
Haut
16 Réponses
Messages: 159

Enregistré le: 4 Juin 2004

Message le Lun Sep 06, 2004 17:36

Tout d'abord bravo, j'aime beaucoup le site ainsi que les photos :)

Pour ta question 1: Oui, c'est une balise "a part entière".

Et pour la 3:
Code: Tout sélectionner
a,img {
border:0;
}

;)
Haut
Messages: 3106

Enregistré le: 5 Sep 2003

Message le Lun Sep 06, 2004 17:36

Dans tes liens : "<a href="#" onClick="open('popupphoto.php?img=/couleur/114.jpg','popup','width=700, height=500')">", je te conseil de remplacer le "#" par "javascript:void(0);"
Haut
Messages: 238

Enregistré le: 19 Déc 2003

Message le Lun Sep 06, 2004 17:42

Merci pour le compliment Rafe... :D !!
Merci egalement pour le code ca marche nikel, les bordure on disparu.

Blman, quelle est la differrance ??
Haut
Messages: 1923

Enregistré le: 6 Juin 2003

Message le Lun Sep 06, 2004 17:48

blman a écrit:je te conseil de remplacer le "#" par "javascript:void(0);"


Et moi je te conseille de ne surtout pas le faire ;)
Par contre, ajoute un return false après le open(....);

Pour ce qui est du HREF, plusieurs solutions :

- mettre l'url du fichier :

Code: Tout sélectionner
<a href="popupphoto.php?img=/couleur/114.jpg" onclick="window.open(this.href,'popup','width=700, height=500'); return false;">


C'est la meilleure solution. Ses avantages : les internautes qui n'ont pas activé le javascript pourront quand même voir ton image, ceux qui ont un navigateur type Mozilla pourront la visionner dans un nouvel onglet en faisant un glisser-déposer du lien, et puis les moteurs pourront le suivre (même si ici ce n'est qu'une image, pas très important question référencement)

- mettre l'url d'un fichier qui explique pourquoi il est nécessaire d'activer le Javascript pour que le lien fonctionne, et aussi comment procéder.

Code: Tout sélectionner
<a href="no_js.html" onclick="window.open('popupphoto.php?img=/couleur/114.jpg', 'popup', 'width=700, height=500'); return false;">


A réserver uniquement aux cas où on ne peut pas faire autrement qu'en JS. Des cas très rares, donc.

Fred
Haut
Messages: 2657

Enregistré le: 28 Juil 2003

Message le Lun Sep 06, 2004 17:48

Le javascript:void(0); ou javascript:; empèche le rechargement de la page, ce qui est utile dans ton cas.
Haut
Messages: 1923

Enregistré le: 6 Juin 2003

Message le Lun Sep 06, 2004 17:50

BadProcESs a écrit:Le javascript:void(0); ou javascript:; empèche le rechargement de la page, ce qui est utile dans ton cas.


C'est le return false qui doit empêcher ça, les solutions ci-dessus peuvent provoquer par exemple un blocage des animations, ou encore l'ouverture de la console Javascript dans Mozilla...

Fred
Haut
Messages: 238

Enregistré le: 19 Déc 2003

Message le Lun Sep 06, 2004 17:57

olalalalala 8O que d'avis contraire... 8O que faire ??

J'ai fai la modif sur mes pages avec javascript:void(0);

Je le garde ??
Haut
Messages: 1923

Enregistré le: 6 Juin 2003

Message le Lun Sep 06, 2004 18:00

Non non...
http://openweb.eu.org/articles/popup/
Haut
Messages: 2657

Enregistré le: 28 Juil 2003

Message le Lun Sep 06, 2004 18:10

Effectivement il faut bien le return false pour empécher l'execution du lien,j'avais oublié de le préciser.
Quand je parlai du javascript:;, c'était en fait pour éviter les erreurs de script.
Haut
Messages: 238

Enregistré le: 19 Déc 2003

Message le Lun Sep 06, 2004 19:37

okaiiii, je met ça en place...merci !!

Vous avais d'autre avis ?? d'autre conseil ??
Haut
Messages: 793

Enregistré le: 4 Déc 2003

Message le Lun Sep 06, 2004 20:38

ouais,tu peux modifier le code de george:
<a href="popupphoto.php?img=/couleur/114.jpg" target="_blank" onclick="window.open(this.href,this.target,'width=700, height=500'); return false;">

Pour que ça s'ouvre obligatoirement dans une fenètre supplémentaire. Ceci dit, je préfère le code de george...
Haut
Messages: 370

Enregistré le: 26 Mar 2005

Message le Mar Mai 10, 2005 0:56

Juste un truc,
As-tu pensé à ceux qui ont une resolution 800x600?
Ton site est ilisible à celle-ci.
Haut
Messages: 238

Enregistré le: 19 Déc 2003

Message le Mar Mai 10, 2005 11:46

Non effectivement, j'ai pas pensé au resolution 800x600.
Mais seul 15% de mes visiteur sont dans cette resolution contre 60% en 1024x768...

Qu'entend tu pas "illisible" ?

Merci
Haut
Messages: 410

Enregistré le: 7 Juil 2003

Message le Mar Mai 10, 2005 11:57

George Abitbol a écrit:
blman a écrit:je te conseil de remplacer le "#" par "javascript:void(0);"

Et moi je te conseille de ne surtout pas le faire ;)


Moi je te conseille de ne pas utiliser la balise <a> quand c'est un lien en javascript.
L'attribut "onclick" peut se mettre directement sur l'image (ou le span) et c'est encore le mieux selon moi.
voir aussi l'attribut CSS "cursor" pour modifier l'aperçu du curseur et ainsi permettre à l'utilisateur de visualiser correctement ce "faux" lien.
Haut
Messages: 370

Enregistré le: 26 Mar 2005

Message le Mar Mai 10, 2005 12:07

Illisible dans le sens que à chaque fois on est obligé de toucher l'ascenseur d'en bas et qu'au depart la page presente un grand fond noir et on pourrait croire qu'il y a rien.

Tu as plusieurs solutions pour palier à ton probleme:
Soit tu fais des Frames, une methode especifique pour palier à ça. mais peu recomendable pour le referencement.

Soit tu fais le même site que pour les 800x600 et tu mets un detecteur de resolution. Pas tres conseillé nonplus pour le referencement.

Soit tu penses qu'aux resolutions 800x600 et ensuite tu mets tes pages dans une espece de : table avec 3 celliules celle de droite de 10% celle du millieu de 80% et celle de gauche de 10% tu centres le tout et sur n'importe quel resolution ton site es tres bien visible. (cela ne craind en rien sur le referencement)

J'en suis sur que tes 16% qui utilisent 800x600 te remercieront de ne plus devoir toucher à chaque page qu'on clique sur la barre de defilement d'en bas.

Sinon, à part ça, ton site et tes photos sont superbes.
Haut
Messages: 13

Enregistré le: 23 Aoû 2005

Message le Mar Aoû 23, 2005 2:23

Juste un petit détail XHTML

Pour toute balise sans fermeture comme <br> (par oposition à une balise du type <div></div>) tu doit inclure la fermeture de la balise dans celle ci.

la balise img fonctionne de la même façon...
exemple pris au hazard, <img src="vignette2/jan.jpg">, doit en réalité s'écrire <img src="vignette2/jan.jpg" alt="description de l'image"/>

Pour ta seconde question: si tu veux centrer du texte par rapport aux vignettes tu doit définir la hauteur de ligne selon la hauteur de l'image

exemple:
Code: Tout sélectionner
  <div style="line-height:45px;">
    <img src="image.gif" alt="c'est une image" height="45" />
    Le texte à centre sur l'image...
  </div>


sinon, en rêgle générale, le centrage tant vertical qu'horisontal s'obtient avec les marges avec la valeur auto. Tu a plusieurs possibilités,selon ton écriture des marges,
Concrettement:
margin:(haut) (droite) (bas) (gauche);
margin:15px 20px 15px 55px;
margin:auto 20px auto 55px;
mais aussi ,
margin:(haut et bas) (droite et gauche);
margin:auto 16px;
margin:8px 16px;
mais encore,
margin:(haut) (droite et gauche) (bas);
margin:10px auto 25px;
et pour finir,
margin:(les quatres cotés)
margin:20px;

Pour valider tes css et tes pages en elles-mêmes tu peux faire appel au validateur en ligne du W3Cà l'adresse http://validator.w3.org

L'intégralité des balises et leurs attibuts sont expliqués par le W3C à l'adresse http://www.w3schools.com/tags
Haut