Encore des soucis avec mes CSS

[Gillou]

B'jour
Bon décidemment, j'ai du mal avec les feuilles de style...

Je veux caler en bas à droite de chaque thumbnail de mon site une petite image pour indiquer que le thumbnail est cliquable pour voir la photo en grand.
Pour cela je définis un cadre, cadreimageh1 (le h1 n'est là qu'à cause des différents formats de thumbnails, ça n'a rien à avoir avec mon problème ici) comme ça :

Code : Tout sélectionner

.cadreimageh1{
	height:171px;
	width:200px;
	background-image:url(/root/magnify.png);
	background-repeat:no-repeat;
	background-position:100% 97%;
}

qui s'applique pour mes thumbnails horizontaux de largeur 200px et hauteur 150px, et ensuite je code l'image comme ça :

Code : Tout sélectionner

<div class="cadreimageh1"><a href="javascript:;" onClick="openPictureWindow('/malaisie/bouiboui_large.jpg','800','600','Cliquer pour fermer','','')"><img src="/malaisie/bouiboui_small.jpg" width="200" height="150" border="0"></a></div>

L'aperçu dans Dreamweaver est parfait (à part que je n'arrive pas à trouver comment centrer l'image, que dois-je ajouter comme attribut dans la classe pour ça ?) :

mais quand je me rends sur la page en question ça déconne : la petite image n'est pas là (pourtant elle est bien présente dans /root) et elle n'apparait même pas dans la liste des média de la page.

Bien sûr je pourrais faire ça à la bourin avec un tableau à chaque fois, mais je veux continuer à faire "web intelligent" en utilisant les CSS comme depuis le début de mon site

Quelqu'un à l'oeil "CSS-compliant" voit ce qui cloche ? Merci !

[GregK84]

je c que je ne repond pas a ta question, mais pourquoi ne pas utiliser la propriete cursor de ccs 2 ?

exemple

elle est compatible avec ie et ff

edit :

ton image ce trouve a cette adresse:
image

ta petite image se trouve a cette adresse
petit image

et si tes pages se trouve a la racine, ou dans un autre repertoire tu devrais note :

Code : Tout sélectionner

 background-image:url(../root/magnify.png); 

[Gillou]

pourquoi ne pas utiliser la propriete cursor de ccs 2 ?

1. parce que je ne connaissais pas
2. parce que ça ne me plait pas vraiment, c'est moins visible qu'une petite icône en bas de la miniature... il faut avoir le curseur sur la miniature pour s'en rendre compte, avec une icône tu vois qu'il y a quelque chose même si tu n'es pas dessus

J'aimerais donc trouver une autre solution, et surtout comprendre pourquoi la mienne ne fonctionne pas (alors que c'est ok sous dw, c'est frustrant !).

[SB]

Je ne trouve pas dans tes css

Code : Tout sélectionner

.cadreimageh1{
	height:171px;
	width:200px;
	background-image:url(/root/magnify.png);
	background-repeat:no-repeat;
	background-position:100% 97%;
}

[GregK84]

• parce que ça ne me plait pas vraiment, c'est moins visible qu'une petite icône en bas de la miniature... il faut avoir le curseur sur la miniature pour s'en rendre compte, avec une icône tu vois qu'il y a quelque chose même si tu n'es pas dessus

J'aimerais donc trouver une autre solution, et surtout comprendre pourquoi la mienne ne fonctionne pas (alors que c'est ok sous dw, c'est frustrant !).

effectivement tu n'as pas tord, mais perso quand je vais sur un site je passe tjr sur les images ... donc c un probleme que je n'ai pas. et a mon avis je ne suis pas le seul.

et comme l'a dit sb, ce n'est pas dans ta feuille de style, un oublie d'uploade
css

[Gillou]

SB et GregK84, vous êtes géniaux et je suis le plus gros boulet du monde, un oubli d'upload !!! Plus boulet tu meurs, j'ai honte

Maintenant que ça c'est résolu (merci !!!), un autre problème apparaît :
pour que la miniature+l'icône soient en lien, je donne la structure suivante :

Code : Tout sélectionner

<a href=...><div class="cadreimageh1"><img ...></div></a>

Mais, comme vous pouvez le voir :

• Problème n°1 : il ne me met qu'une seule image par ligne (alors que je lui en demande deux) (ligne des tours jumelles et de la passerelle)
• Problème n°2 : c'est toute la ligne entière qui est en lien

Voyez-vous comment éviter cela ?
Merci de votre aide


EDIT
En fait, je ne comprends pas du tout pourquoi ça fait toute la ligne puisque je lui spécifie que cadreimageh1 a une largeur de 200px

[SB]

Essaie de rajouter à ton premier <a>

Code : Tout sélectionner

style="float:left"

[GregK84]

aufet c'est normale que ces quelques ligne soit present 3 fois dans le code source de ta page ?

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pampryl Tour 2004</title>
<link rel="stylesheet" href="stuff/styles.css" type="text/css">
<script type="text/javascript" src="stuff/scripts.js"></script>
<link rel="icon" type="image/png" href="/root/favicon.png" />
</head>

tu as essaye de mettre ta classe directement sur ton lien ?

[Gillou]

Essaie de rajouter à ton premier <a>

Code : Tout sélectionner

style="float:left"

Voilà ce que j'obtiens en mettant un float:left dans le 1er <a> uniquement :

et en mettant en plus de ça un float:right dans le 2ème <a> :

ce qui n'est pas mal mais m'oblige à descendre sous les images avec des &nbsp; avant d'écrire la suite. De plus les images ne sont pas centrées au milieu de la page, ce que je préférerais (je suis pénible hein...)

[Gillou]

aufet c'est normale que ces quelques ligne soit present 3 fois dans le code source de ta page ?

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pampryl Tour 2004</title>
<link rel="stylesheet" href="stuff/styles.css" type="text/css">
<script type="text/javascript" src="stuff/scripts.js"></script>
<link rel="icon" type="image/png" href="/root/favicon.png" />
</head>

Ah tiens tu fais bien de me prévenir
C'est parce que j'ai une page index.php qui inclut à gauche menu.php et à droite machin.php ave menu et machin qui contiennent à chaque fois les lignes, je les avais pas virées. Il faut ?

tu as essaye de mettre ta classe directement sur ton lien ?

Voilà ce que ça donne (j'ai fait <a class="cadreimageh1" href...>, c'est bien à ça que tu pensais ?):

C'est bon mais la petite icône disparait !!! Y'a de quoi péter les plombs...

[FF_Olivier]

(à part que je n'arrive pas à trouver comment centrer l'image, que dois-je ajouter comme attribut dans la classe pour ça ?)

Code : Tout sélectionner

...
height: 171px ;
width: 200px ;
margin: auto ;
...

[GregK84]

Ah tiens tu fais bien de me prévenir
C'est parce que j'ai une page index.php qui inclut à gauche menu.php et à droite machin.php ave menu et machin qui contiennent à chaque fois les lignes, je les avais pas virées. Il faut ?

perso je placerais ma doctype,html, head, css, javascrip, body (dans le body l'inclurais mes autres pages) ... sur ma page index.php.

et toutes les autres pages ne comporterait pas la doctype, ni les balise html,head,body (je garderais juste le contenu du body rien d'autre)

Voilà ce que ça donne (j'ai fait <a class="cadreimageh1" href...>, c'est bien à ça que tu pensais ?):

oui c'est a ca que je pensais ...
il y a quelques temps, j'ai realiser l'affichage d'un formulaire entierement en css, tu pourrais p-e te baser sur ce code pour resoudre ton probleme. (sans garantie)
ici

dans cette exemple, la proprite fieldset et lengend ne te seront pas utile. juste le label

voila j'espere que cela poura t'etre utile

[Gillou]

J'y suis presque !!! Le placement est parfait maintenant, pile comme je veux.
Voilà ce que j'ai fait, en utilisant toutes vos réponses :

• pour l'image de gauche, le lien est en float:left
• pour l'image de droite, le lien est en float:right

Si je m'arrête là, le texte se trouve entre les 2 images, et celle de gauche est complètement à gauche et celle de droite complètement à droite, alors que je veux qu'elles soient pas loin du centre. Pour palier cela :

• j'ai découvert clear:both qui permet de ne reprendre le texte qu'après les images en float (une bonne partie de mes soucis vient de ce que je ne connais pas suffisamment les balises, ce serait bien de pouvoir s'uploader toutes les balises dans le cerveau, mais je crois que ma version de DW ne le permet pas )
• je mets les 2 images dans un nouveau bloc, qui lui ne fait que 80% de large, le bloc étant en margin:auto, ce qui me le centre

Explication par le code :
CSS

Code : Tout sélectionner

.cadreimage{
	width:80%;
	margin:auto;
}

.cadreimage .gauche{
	float:left
}

.cadreimage .droite{
	float:right
}

.cadreimageh1{
	height:167px;
	width:200px;
	background-image:url(/root/magnify.png);
	background-repeat:no-repeat;
	background-position:100% 100%;
}

HTML

Code : Tout sélectionner

<div class="cadreimage">
<a class="gauche" href="javascript:;" onClick="openPictureWindow('/malaisie/twin_large.jpg','800','600','Cliquer pour fermer','','')">
<div class="cadreimageh1">
<img src="/malaisie/twin_small.jpg" width="200" height="150" border="0">
</div>
</a>
<a class="droite" href="javascript:;" onClick="openPictureWindow('/malaisie/skybridge_large.jpg','800','600','Cliquer pour fermer','','')">
<div class="cadreimageh1">
<img src="/malaisie/skybridge_small.jpg" width="200" height="150" border="0">
</div>
</a>
</div>

Voilà, jusque là tout va bien.

Mais, autre problème qui surgit :
le texte en-dessous des images est trop collé. Je me dis "qu'à cela ne tienne", et je mets pour commencer le texte un

Code : Tout sélectionner

<p style="clear:both;padding-top:15px">

au lieu du simple <p style="clear:both">.

Là, nickel, le texte est bien éloigné du bas des images :



Mais comme j'ai pas envie de taper ces deux attributs à chaque fois sous chaque image, je me dis que je vais en faire une classe, appelée apcadreimage, définie ainsi :

Code : Tout sélectionner

.apcadreimage {
	clear:both;
	padding-top:15px;
}

et que je vais appeler mon texte suivant l'image par un simple <p class="apcadreimage">. Dans ce cas le clear:both est bien pris en compte car le texte commence sous les images, mais pas le padding-top car le texte est collé !



Vous y comprenez quelque chose ?

[GregK84]

essaye avec un margin-top: 15px;

[Gillou]

essaye avec un margin-top: 15px;

ça marche pas, le texte reste collé