Page 2 sur 3

Publié : 21 janv. 2005, 20:11
par GregK84
tu as essaye avec top: 15px;

?

Publié : 21 janv. 2005, 20:15
par Gillou
C'est bon j'ai trouvé en fait, j'avais encore bouletisé : c'était tout simplement en conflit avec .story p{padding:0px 0px 10px 10px} qui est défini plus loin dans ma feuille de style. C'est lui qui gagnait, empêchant mon padding-top:15px de s'exprimer !

Comment sont définies les priorités entre deux classes contradictoires ?

En tout cas, merci à tout le monde pour l'aide, maintenant tout va bien (jusqu'au prochain souci ! :wink: )

Publié : 22 janv. 2005, 02:00
par Gillou
Bon, une dernière question ! Avant de la poser j'ai bien cherché, essayé plein de trucs, je ne crois pas avoir fait le boulet avec une erreur évidente cette fois donc j'appelle à l'aide :oops:

CSS

Code : Tout sélectionner

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
}
HTML

Code : Tout sélectionner

<div id="siteInfo">
<div style="float:left;">| <a href="#top">Haut de page</a> | <a href="#">Contact</a> | <a href="#">Plan du site</a> |</div>
<div style="width:16px; margin:auto;"><a href="/"><img src="/root/favicon.png" alt="Retour à l'accueil" title="Retour à l'accueil" border="0"></a></div>
<div style="float:right;">&copy;2005 Gillou</div>
</div>
Est-ce que quelqu'un comprend pourquoi le copyright se met sur une autre ligne ?

Image

Comment faire pour que les 3 liens soient à gauche, l'icône au milieu et le copyright à droite, le tout sur une même ligne ?
Merci

Publié : 22 janv. 2005, 09:38
par Mirovinben
Selon moi, c'est l'icône au centre qui fout le bazard et fait décaler le copyright... J'ai déjà eu ce type de pb mais je ne me souviens pas de la solution que j'avais trouvée... Mais tu dois modifier qqchose au niveau du <DIV> central... voir même au niveau de la balise <img> qui fait un alignement "bas" par défaut du texte qui suit l'image... ?

Publié : 22 janv. 2005, 10:23
par GregK84
essaye de remplace la div de ton image par un span. voir meme de remplace toutes les div contenue dans ta div info pas des <span></span>

j'ai pu remarqué que les div fesait des daut de ligne, le probleme est p-e du a ca .

(j'ai pu lire quelque part : div pour un paragraphe et span pour une ligne)

Publié : 22 janv. 2005, 11:41
par Gillou
Mirovinben a écrit :Selon moi, c'est l'icône au centre qui fout le bazard et fait décaler le copyright... J'ai déjà eu ce type de pb mais je ne me souviens pas de la solution que j'avais trouvée... Mais tu dois modifier qqchose au niveau du <DIV> central... voir même au niveau de la balise <img> qui fait un alignement "bas" par défaut du texte qui suit l'image... ?
GregK84 a écrit :essaye de remplace la div de ton image par un span. voir meme de remplace toutes les div contenue dans ta div info pas des <span></span>

j'ai pu remarqué que les div fesait des daut de ligne, le probleme est p-e du a ca .

(j'ai pu lire quelque part : div pour un paragraphe et span pour une ligne)
  • Si je remplace le div central par span (ou même tous les div à l'intérieur de siteInfo par span), voilà ce qui se produit :

    Image

    (apparemment le fait de passer en span rend inopérant le margin:auto; et l'image n'est plus centrée)
  • En revenant à des div partout, si je supprime carrément l'image au milieu tout est bon, les liens de gauche et le copyright de droite sont alignés. On ne peut pas dire pour autant que c'est l'image qui cloche, car si je la remplace par une lettre, voilà ce qui se passe :

    Image

    Que ce soit une image ou une lettre au milieu, ça cloche. Ce n'est donc pas l'image qui cloche mais le div central. J'ai essayé de lui ajouter toutes sortes d'alignement en style:"" mais ça n'a rien changé.
Mirovinben si tu pouvais te rappeler de ta solution :wink:

Au pire si tout le monde sèche je peux faire ça en sale avec un tableau à 3 colonnes, mais bon...

Publié : 22 janv. 2005, 14:23
par Gillou
Ne vous tracassez plus j'ai la solution (c'est tout bête...) !
Voyant que tout le monde commençait un peu à sécher sur geckozone, j'ai également posé la question sur hardware ce matin, et on m'a répondu qu'il fallait placer le code de l'image centrale après les deux flottants, ce qui fonctionne effectivement !

Merci à tous pour votre aide tout au long de ce fil en tout cas.

Publié : 22 janv. 2005, 14:37
par SB
Arf ! Trop ballot, je me suis levé trop tard ce matin (enfin cet après-midi) pour te donner la solution car j'ai fait comme ça sur mon site. :)

Publié : 22 janv. 2005, 15:54
par Mirovinben
Gillou a écrit :Mirovinben si tu pouvais te rappeler de ta solution :wink:
Ben non, désolé ! j'avais dû faire un align="left" sur la balise <img> ou qqchose comme çà... mais je n'en suis plus sûr du tout...

Par contre celle que tu donnes est super et élégante quoique pas évidente à trouver tout seul... Bravo et merci (pour une prochaine fois :wink: )

Publié : 22 janv. 2005, 16:08
par Gillou
SB a écrit :Arf ! Trop ballot, je me suis levé trop tard ce matin (enfin cet après-midi) pour te donner la solution car j'ai fait comme ça sur mon site. :)
T'inquiète pas tu vas quand même pouvoir m'aider, il me reste encore plein de problèmes en réserve (même si à chaque fois j'annonce que c'est le dernier !!! ils arrivent tout seuls !!!) :wink:

En voilà 2 rien que pour ce post :
  1. Tu as suivi le début de la discussion avec le magnify.png que je place en dessous à droite de chaque image agrandissable pour signaler justement qu'elle est agrandissable. Je voudrais améliorer un truc (c'est un détail, je fignole) : je veux mettre en alt et title de cette petite image Cliquer pour agrandir.
    Est-ce possible dans ma classe CSS ? Avec je sais pas moi, un truc du genre background-alt et background-title (qui n'ont pas l'air d'exister :cry:, pourtant c'était des bons noms que j'avais trouvé là... )
  2. Rien à voir, voilà un problème surnaturel avec IE (FF lui est OK), qui ne me change plus le curseur en main sur certains liens javascript (sur mon site, les liens JS sont des agrandissements popup d'image).
    Exemple sur cette page :
    • tous les liens non JS sont ok, en main
    • vers le bas de la page, le lien JS de la photo des Twin Towers est en flèche (pas OK), celui de l'image de la passerelle est en main (OK). L'unique différence entre les deux est que la photo de droite n'est pas en classe cadreimageh1 (cad qu'elle n'a pas la petite icône d'agrandissement) !!!
      Je rappelle que cette classe n'est rien d'autre que

      Code : Tout sélectionner

      .cadreimageh1{
      	height:167px;
      	width:200px;
      	background-image:url(/root/magnify.png);
      	background-repeat:no-repeat;
      	background-position:100% 100%;
      }	
      
      pas de quoi fouetter un curseur quoi...
    Quelqu'un y comprend quelque chose ou faut que je m'adresse à marabout ?

Publié : 22 janv. 2005, 16:20
par SB
Pour 1) je te propose de faire une demande d'homologation directement au W3C. :) Alt et title c'est que en html, pas en css.
Pour 2) je te propose de remplacer tes liens par

Code : Tout sélectionner

<a href="/malaisie/bouiboui_large.jpg" onClick="openPictureWindow('/malaisie/bouiboui_large.jpg','800','600','Cliquer pour fermer','','');return false">
ce qui présente l'avantage en plus que ceux qui ont javascript désactivé peuvent quand même suivre le lien.

Publié : 22 janv. 2005, 16:24
par poof65
Ou en plus court

Code : Tout sélectionner

<a href="/malaisie/bouiboui_large.jpg" onClick="openPictureWindow(this.href,'800','600','Cliquer pour fermer','','');return false">

Publié : 22 janv. 2005, 17:01
par Gillou
Pour 1), dommage :cry:

Pour 2), je ne connaissais pas cette syntaxe, alliée à la ruse de sioux de poof65, c'est de la balle d'éviter le JS, merci !!!
Mais par contre ça ne résoud pas le problème de la main disparue sous IE... le curseur reste en flèche sur la photo de gauche qui est en classe cadreimageh1, il passe bien en main sur celle de droite qui a cette classe désactivée... :cry:

Publié : 22 janv. 2005, 19:19
par SB
Ah bizarre.
Sans être convaincu ni voir quel résultat ça va donner je te fais 2 propositions.
1) Inverse l'ordre de tes balises : mets <div><a><img></a></div> à la place de <a><div><img></div></a>
2) Essaie <a class="gauche cadreimageh1"...><img></a> et supprime le div

Publié : 22 janv. 2005, 19:23
par FF_Olivier
SB a écrit :1) Inverse l'ordre de tes balises : mets <div><a><img></a></div> à la place de <a><div><img></div></a>
Euuuh, on ne peut pas mettre un élément-bloc (<div>) dans un élément-en ligne (<a>), par contre l'inverse est possible ;).