Webmaster Hub > Probléme de positionnement

Version complète: sur le forum Webmaster Hub : Probléme de positionnement

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

doomer2

samedi 30 octobre 2004 à 14:14

Voici mon probleme. Je veux en haut à droite de l'écran cette barre de leins qui permet aux visiteurs handicapes ou non de passer directement au contenu. Le probleme est que cette barre est bien colle au bord de la page sous IE mais sous mozilla elle se trouve plus bas soit peut 10px en dessous.

Mon source est dans le fichier htm :

CODE

<div id="toc">

<ul>
<li><a href="#contenu" accesskey="k" title="Le contenu. Key : k">aller au contenu</a></li>
<li><a href="#menu" accesskey="l" title="Navigation du site. Key : l">aller au menu</a></li>
<li><a href="#recherche" accesskey="s" title="Rechercher dans le site. Key : s">rechercher</a></li>
<li><a href="#pieddepage" accesskey="0" title="Informations sur le site. Key : 9">info legales</a></li>
</ul>
</div>

dans le fichier css :

CODE

#toc{
text-align: right;
color:#000000;
margin-left:700px;
position:absolute;
width:auto;
top:0;
padding:0px;
}

#toc a{
display: inline;
font-size: 60%;
color:#000000;
}

#toc a:hover{
display: inline;
font-size: 60%;
background-color: #FFCC33;
color:#ffffff;
}

#toc li{
padding: 0 5px;
border-left: 1px solid #ccc;
}

#toc ul li{
display: inline;
list-style-type: none;
}

A l'aide svp !!!

LaurentDenis

samedi 30 octobre 2004 à 16:56

Sans chercher plus avant, as-tu démarré ta feuille de style en annulant les marges et remplissage créé par défaut par les navigateurs, chacun à leur manière, y compris sur les éléments html et body ?

html, body {
margin: 0;
padding: 0;
}

ou

* {
margin: 0;
padding: 0;
}

LaurentDenis

samedi 30 octobre 2004 à 17:46

En fait, on ne peut pas s'empêcher d'y regarder d'un peu plus près :

CODE

les acceskeys sous forme de lettres sont actuellement abandonnés au profit d'une liste limitée d'accesskeys numériques, en raison des problèmes d'accessibilité qu'ils créent au lieu d'en résoudre. Voir http://openweb.eu.org/articles/accesskey_e...non_transforme/

CITATION

dans le fichier css :
[code]
#toc{
...
margin-left:700px;
position:absolute;
...
top:0;
...
}

Cette position absolue est-elle nécessaire ? Si ton menu d'accessibilité est, comme logiquement, en tête de contenu, elle est inutile et te complique la vie pour rien.

Le margin-left de 700px est un peu surprenant. Une marge de 700px, c'est presque la largeur d'un "petit" écran (800x600) ?

CITATION

#toc a{
display: inline;
...
}

Les éléments <a> sont déjà des éléments en-ligne par nature. Cette propriété est inutile.

CITATION

#toc a:hover{
display: inline;
}

re-belote. De toute façon, une propriété définie pour xxx s'applique par héritage à xxx:hover. Inutile de la répéter.

Aurais-tu l'url d'une page de test ?

Perrine

samedi 30 octobre 2004 à 17:52

Bonjour doomer2

J'ai rencontré le même problème avec Opera. C'était parce que j'avais juste mentionné le margin de mon body mais pas le padding.

- body {margin:0;}
FF et IE ne mettent pas de marge, mais Opera oui

- body {margin:0; padding;0}
FF, IE et Opera ne mettent aucune marge

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.