[ AVIS ] Enfin mon site en CSS, besoin de votre avis...merci

[lekouti]

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

 

[rafe]

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:

a,img {
border:0;
}

 

[blman]

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);"

 

[lekouti]

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

Blman, quelle est la differrance ??

 

[George Abitbol]

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 :

<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.

<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

 

[BadProcESs]

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

 

[George Abitbol]

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

 

[lekouti]

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

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

Je le garde ??

 

[George Abitbol]

Non non...
http://openweb.eu.org/articles/popup/

 

[BadProcESs]

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.

 

[lekouti]

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

Vous avais d'autre avis ?? d'autre conseil ??

 

[yanhl]

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...

 

[pistonocus]

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

 

[lekouti]

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

 

[easy_zik]

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.

 

[pistonocus]

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.

 

[topaze]

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:

  <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:
marginhaut) (droite) (bas) (gauche);
margin:15px 20px 15px 55px;
margin:auto 20px auto 55px;
mais aussi ,
marginhaut et bas) (droite et gauche);
margin:auto 16px;
margin:8px 16px;
mais encore,
marginhaut) (droite et gauche) (bas);
margin:10px auto 25px;
et pour finir,
marginles 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