(CSS) Comment positionner mon container ?

[alargeau]

Bonjour,

je me permets de venir ici parce que je débute en CSS et que je galère pas mal, comme vous pouvez l'imaginer. Je suis autodidacte mais j'ai des limites.

Comme vous pouvez le voir sur mon site j'ai incorporé deux boutons car mon site a en fait deux sites en un. Pour incorporer ces boutons, j'ai fait un container qui appelle comme suit :

<div id="myExtraContainer3">
        <ul>
       <li><img src="http://www.peugeot309.net/Amicale/Fr/rw_common/themes/unity/images/icon1.png"></li> 
        <li><a href="http://www.peugeot309.net/Fr/"><img src="http://www.peugeot309.net/Amicale/Fr/rw_common/themes/unity/images/icon2.png"></a></li>        
        </ul>
    </div>

Ensuite, en CSS, je fais appelle comme suit :

#myExtraContainer3 {
    float: left;
    margin-left:750px;
    padding-top: 5px;
}


#myExtraContainer3 ul li {
    display: inline;
    padding-right: 10px;
}

Le problème est évident, les boutons se déplacent librement selon la résolution de votre écran. Je sais que le problème provient du code CSS et certainement de la valeur "float: left;" mais je ne sais pas comment régler le problème. En gros, je veux que les boutons soient à une place précise dans la page, quelle que soit la résolution de l'écran du visiteur. J'imagine qu'il sera impossible de positionner ces boutons où je les veux vraiment mais si je peux déjà les centrer, ce serait une petite victoire.

J'espère que quelqu'un pourra m'aider.

Merci d'avance.

alargeau

[Sarc]

Bonjour,

Il faut que tu mettes ton div ExtraContainer à l'intérieur de ton div containerTop, pour commencer. En effet, ces deux images seront liées à ce div pour leur placement. Ca modifiera déjà totalement les choses, tu verras.

Après, tu peux jouer soit avec le float, soit avec du position:absolute, soit avec du position:relative. Toutes les solutions sont possibles !

[alargeau]

Merci pour la réponse !

Alors je vais parler en termes de newbie vu que j'en suis un (mais j'assume) : Si je place mon div dans le containerTop, ça me met les boutons dans le fond gris, et pas juste au-dessus de mon image, dans le contentbackground. Et évidemment (je pense), plus je place mon div bas dans le code, plus il se retrouve... en bas.

Ensuite, j'ai essayé de "jouer" avec position: absolute;" et "position: relative;", mais ça ne fait rien...

Modifié 21 Janvier 2010 par captain_torche
Inutile de citer le message précédent; on vient de le lire.

[Sarc]

Alors, pour commencer : si tu es avec Firefox, télécharge Firebug, qui te permet de regarder tous les éléments de ton code, et où ils se situent. Tu comprendrais avec que c'est la marge de gauche sur ton <ul> qui est BIIIIEN trop grand. Si tu le mets à 350px, et que tu fais ce que j'ai dit juste avant, ton élément se placera correctement, comme tu le souhaites.

[alargeau]

Nickel !

En effet, avec Firebug, c'est bien mieux. C'est vrai que je n'utilise jamais Firefox (mais Safari) et en fait je devrais parce que je me suis aussi aperçu qu'il y avait quelques problèmes dans ma page.

Avec Firebug, j'ai bien pu voir tous les éléments de ma page, ça les illumine. Je voulais placer mes boutons vraiment tout en haut du cadre blanc mais je pense que ce qui apparaît comme mauve dans firebug indique qu'il s'agit d'un élément fixe uniquement présent dans le CSS et non dans le fichier HTML donc j'imagine qu'il est impossible de mettre mes boutons dans cet espace. C'est pas super grave non plus.

Merci encore !

[Dudu]

Salut

Avec Safari, c'est encore plus simple: c'est par défaut, sans extension à installer. Il suffit de cliquer-droit sur un élément et sélectionner "Inspecter l'élément".

Ça fait la même chose que Firebug, globalement...

[Sarc]

Ce qui est en mauve indique le padding de ton élément parent : c'est donc un espace que tu peux modifier à ta guise dans le CSS. Il suffit de cliquer sur ton élément où il y a du mauve, et chercher à droite le CSS qui s'applique à lui. Tu trouveras un padding-top de 35px. Si tu baisses cette valeur, tes boutons remonteront. Mais ton image de voiture aussi remontera ! Si tu veux qu'elle reste à la même hauteur, il faudra lui appliquer à elle une marge supérieure margin-top.