Probleme d'align texte sous Safari

[Membre supprimé 64886]

Salut à tous

Voila j'ai un petit problème d'alignement du texte dans mon sous-menu ici :
[ lien supprimé à la demande de l'auteur ]

Ca marche sous IE, sous Firefox, mais pas sous Safari.

Les pages sont régies par un CSS ici :
[ lien supprimé à la demande de l'auteur ]
Confère la balise menu avec le texte-align: right;

Voili voilou... Merci d'avance

 

[Anonyme]

Salut JulienS,

J'ai pas Safari au boulot mais ton #menu étant constitué d'images et comme il n'y a pas de contenu texte, l'utilisation de text-align:right me semble une mauvaise idée. Je ferais autrement : tout en texte (et là l'alignement à droite est utilisable).

Pour l'html :

<ul id="menu">
  <li><a class="selected" href="index.htm">accueil</a></li>
  <li><a href="music.htm">musique</a></li>
  <li><a href="image.htm">photos</a></li>
  <li><a href="links.htm">liens</a></li>
  <li><a href="contact.htm">contact</a></li>
</ul>

Pour les CSS :

#menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: normal;
    color: #666666;
    text-align: right;
    list-style-type: none;
}
#menu a {
    color: #333333;
    text-decoration: none;
}
#menu a:hover, #menu .selected{
    color: #FF9933;
}

Ça réduit pas mal le code non?

Attention, l'intégration de l'animation flash n'est pas valide, voici le code correct :

<object type="application/x-shockwave-flash" data="header.swf" width="425" height="350">
<param name="movie" value="header.swf" />
<param name="wmode" value="transparent" />
<p>Texte alternatif si flash pas install&#233;</p>
</object>

Il y a encore moyen d'optimiser pas mal les CSS et HTML...

 

[Membre supprimé 64886]

Bonjour Gloupgloup et merci de m'avoir répondu. Donc.

En fait, j'ai oublié de préciser, désolé, c'est quand tu cliques sur "MUSIC" que ca déconne. Ca fait apparaitre un sous menu ou cette fois ci, il y a du texte. C'est ce texte qui ne s'aligne pas à droite sous Safari. (je vais éditer mon premier message).

Ensuite pour des raisons d'esthétiques et de design je préfère garder le menu ("about, music, image, contact...") en image même si c'est plus embetant. Ce sont d'ailleurs les seules images, je me suis passé de toutes les autres.

Enfin, effectivement, l'intégration flash n'est pas valide, j'avais passé un coup de validator. J'ai choisi de laisser les embed après pas mal de recherches, meme si c'est je sais que c'est des balises proprio. Je suis peut etre dans l'erreur, mais alors à quoi servent ces embed si on peut les enlever, pourquoi une majeure partie des intégrations flash sur le web les ont, adobe et macromedia y compris ? J'ai un peu lu ceci notamment :
http://antoine.media-box.net/index....her-du-flash-tout-en-respectant-les-standards

Mais bon ca me donne mal à la tete, je suis pas un codeur et c'est pas mon truc, mais ya des fois hein on choisit pas, bref. Si tu me dis que dégager les embed ne changera absolument rien, ok je le ferai

 

[obi wan]

Enfin, effectivement, l'intégration flash n'est pas valide, j'avais passé un coup de validator. J'ai choisi de laisser les embed après pas mal de recherches, meme si c'est je sais que c'est des balises proprio. Je suis peut etre dans l'erreur, mais alors à quoi servent ces embed si on peut les enlever, pourquoi une majeure partie des intégrations flash sur le web les ont, adobe et macromedia y compris ?

Honnêtement, c'est SWFObject qui est la meilleure solution pour intégrer du flash et rester valide avec contenu alternatif dans un div. Ça utilise javascript et c'est très simple à mettre en place.

 

[Anonyme]

Pour le menu en image ok, si tu le veux vraiment, mais alors met le texte quand même car des liens vide ça ne veut rien dire : les personnes souffrant d'un handicap ne s'y retrouveront pas et ce ne sera pas indexé par les moteurs de recherche. Le truc c'est de mettre un text-indent négatif très grand pour faire «disparaître» le texte et laisser l'image de fond.

text-indent: -5000px;

Pour faire le genre d'effet dont tu me parle (menu caché), il vaut mieux utiliser les listes imbriquées. Je vais voir si je trouve quelque chose...

 

[Membre supprimé 64886]

Daccord je vais tester avec le text-indent maintenant, en local.

Ceci étant, mon problème principal c'est le probleme de text-align qui n'est pas pris en compte par Safari

 

[Anonyme]

C'est parce que le sous-menu est dans un tableau (horreur :affraid et que l'alignement par défaut des tableaux est à gauche. Voici le code correct que tu devras adapter pour remplacer le texte par les images...

<ul id="menu">
  <li><a  href="index.htm">accueil</a></li>
  <li><a class="selected" href="music.htm">musique</a>
    <ul>
      <li><a href="#">Taciturn Songs</a> </li>
      <li><a href="#">Reserved Melodies EP</a> </li>
      <li><a href="#">Défonce comme l'abs. </a></li>
      <li><a href="#">Phil</a> </li>
      <li><a href="#">Un des nôtres</a> </li>
    </ul>
  </li>
  <li><a href="image.htm">photos</a></li>
  <li><a href="links.htm">liens</a></li>
  <li><a href="contact.htm">contact</a></li>
</ul>

#menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: normal;
    color: #666666;
    text-align: right;
    list-style-type: none;
}
#menu a {
    color: #333333;
    text-decoration: none;
}
#menu a:hover, #menu .selected, ul#menu ul a:hover{
    color: #FF9933;
}
ul#menu ul {
    font-size: 0.5em;
    list-style-type: none;
}

 

[Benjamin D.C.]

Honnêtement, c'est SWFObject qui est la meilleure solution pour intégrer du flash et rester valide avec contenu alternatif dans un div. Ça utilise javascript et c'est très simple à mettre en place.

Tout à fait d'accord, SWFObject ou tout autre solution de ce genre est vraiment à favoriser (le jQuery Flash Plugin est très bien aussi). Par contre, le seul petit bémol, c'est que l'utilisateur doit avoir JavaScript activé pour visualiser le SWF...

 

[Membre supprimé 64886]

Hello,

J'ai été contraint de le mettre dans un tableau car c'était la seule solution pour avoir un alignement à droite PARFAIT sous IE ET Firefox. J'ai jamais réussi à le retrouver avec liste, etc.. M'enfin je vais étudier de plus près ce que tu as dit et tester en conséquence.

Merci

Edit : Ok j'ai résolu mon problème provisoirement en mettant un text-align dans le TD du menu en css, c'était bien ca, bien vu !
Je vais essayer de trouver une solution pour me passer à la fois des images et du tableau, la j'ai fait au plus "urgent".

Merci à tous

 

[Anonyme]

Hello,

J'ai été contraint de le mettre dans un tableau car c'était la seule solution pour avoir un alignement à droite PARFAIT sous IE ET Firefox. J'ai jamais réussi à le retrouver avec liste, etc.. M'enfin je vais étudier de plus près ce que tu as dit et tester en conséquence.

Merci

Je suis sur PC au boulot et l'alignement est nickel sur IE6 et Firefox. À voir ce soir dans Safari...

 

[Membre supprimé 64886]

Normal, c'est encore un tableau là ;p

 

[Anonyme]

Normal, c'est encore un tableau là ;p

Je parlais des tests sur mon ordi avec les réglages que je t'ai donné.


P.S. : c'est bon dans Safari.