Problème de positions <div>

Bonjour,

Depuis peu, je débute dans le domaine de la conception web et j'ouvre ce topic pour vous exposer mon petit problème.

Dans un souci de clarté je vous présente ça en images, vu que je risquerais de vous embrouiller avec mes mots

Voici ma page web (actuelle) en mode plein écran : http://img97.imageshack.us/img97/1070/portfolioweb.jpg

Et voilà le résultat auquel j'aspire : http://img337.imageshack.us/img337/9155/portfoliot.jpg


J'ai crée une div pour la barre blanche que vous pouvez voir en pied de page, idem pour chacune des flèches violettes (tous des "class").
Simplement je n'arrive pas à positionner ces éléments comme il se doit. Une fois que j'aurais la solution, je pense que la réalisation de la colonne de gauche et de droite ne sera qu'une formalité...

Si vous voulez plus de précisions : voici mon code html et css que vous pouvez consulter grâce aux liens suivants :

HTML : http://wall.deblan.fr/x950/html/1/
CSS : http://wall.deblan.fr/x951/css/1/

Merci d'avoir pris la peine de lire, je sais qu'une fois que j'aurais maitrisé ces "div" je me sentirais tout feu tout flamme !!

Tu pourrais essayer de placer tes deux blocs contenant les flèches dans #fond_partenaire, et les placer de manière absolue de manière à ce que chacune se colle à un bord de l'écran, si c'est bien ce que tu veux (et n'oublie alors pas de donner la propriété position: relative; à #fond_partenaire).
Modifié par phpdoesnotcare (27 Apr 2010 - 16:45)

phpdoesnotcare a écrit :
Tu pourrais essayer de placer tes deux blocs contenant les flèches dans #fond_partenaire, et leur donner ...

Leur donner quoi ?

Au sujet des propriétés position relative et absolue, je n'ai jamais su les distinguer...
Ne faut-t-il pas ajouter d'autres éléments dans la feuille de style pour rendre ces propriétés effectives ?

Je ne sais pas si j'ai été clair...
Modifié par Okashira (27 Apr 2010 - 16:43)

Désolé, j'étais revenu sur mon idée. Le "leur donner" n'a plus rien à faire ici.

Pour ce qui est du positionnement, ce n'est pas si compliqué que ça en fait :

- relative permet de positionner un élément de manière relative à sa position actuelle. Autrement dit, si on ne spécifie que la propriété position: relative;, c'est un peu comme si on ne faisait rien du tout (je vais y revenir). Pour que ça ait un véritable effet, il faut donner des valeurs différentes de 0 (valeur par défaut, d'où l'impression que ça ne change rien si on ne les modifie pas) aux propriétés left, top, right ou bottom.
En gros, ça revient à dire au bloc : décale-toi de ta position normal de Xpx vers la gauche/droite, et de Ypx vers le haut/bas.

- absolue, maintenant, sert à positionner un élément de manière absolue par rapport au premier élément-parent qui est lui-même positionné de manière relative ou absolue, en précisant les coordonnées par rapport à celle de cet élément-parent, avec celles que j'ai nommées plus haut.

Dans ton cas, l'idée serait de positionner les flèches à gauche et à droite de l'écran, en les plaçant de par et d'autre de l'écran (respectivement avec un left: 0; et right: 0; (inutile de préciser top ou bottom : ils valent 0 par défaut, et c'est très bien comme ça. ).
Or comme je viens de le dire, cela impose qu'un élément-parent soit positionné de manière absolue ou relative. Ce fameux élément-parent, ici, ça va être le bloc qui contient les deux flèches, càd #fond_partenaire, auquel on va donner la propriété position: relative; sans donner de left etc., pour dire : "tu es très bien où tu es, c'est juste pour que le positionnement absolue des flèches se fasse par rapport à toi".
Modifié par phpdoesnotcare (27 Apr 2010 - 16:57)

Ok, une dernière question , j'aimerais que le #fond_partenaire soit placé par dessus le corps du site (au niveau du pied de page).

Est-ce que je peux déplacer le #fond_partenaire légèrement vers le haut, comme ici : http://img337.imageshack.us/img337/9155/portfoliot.jpg, sans pour autant décaler ce qu'il y a au dessus (à savoir la #bannière et le #body).
Modifié par Okashira (27 Apr 2010 - 17:24)

Si je comprends bien, tu veux que la bande blanche avec les flèches soit soit juxtaposée au contenu de ton site ?