Encore des soucis avec mes CSS

[GregK84]

tu as essaye avec top: 15px;

?

[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 ! )

[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

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 ?



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

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

[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)

[Gillou]

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

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 :
  
  
  
  (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 :
  
  
  
  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

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

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

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

[Mirovinben]

Mirovinben si tu pouvais te rappeler de ta solution

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 )

[Gillou]

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 !!!)

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 , 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 ?

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

[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">

[Gillou]

Pour 1), dommage

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

[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

[FF_Olivier]

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 .