Projet Pro / Aligner une div placée entre un float left et float right

Bonjour tout le monde !

Alors voilà, pour mon projet pro de fin d'année je dois intégrer un site internet à partir d'une maquette faite par mes soins et je tombe sur quelques problèmes lors de ce début d'intégration, donc si l'un d'entre vous pourrait m'aider à résoudre mon problème je lui en serait redevable

Dans un premier temps voici la tronche de ma page web que vous pouvez trouvez ici : http://www.arnaudbenez.fr/carole_cresson_website/index.html

Et voici ma maquette : http://www.arnaudbenez.fr/carole_cresson_website/home-pageV3.jpg

Mon problème actuel est que je n'arrive pas du tout à aligner mes <li><a>, du coup ils me font des retours à la ligne

Merci d'avance,
Modifié par Mister-Hims (17 Jul 2013 - 12:15)

salut,
je ne voudrait pas être méchant mais c'est quant même extrêmement simple ce truc, c'est véritablement le b.a.-ba.
Un simple "display: inline-block" sur tes <li>. Je te conseillerais aussi de lire ça, ça t'évitera de te poser d'autres questions.

Ah d'accord merci, j'me sent tout bête, j'avais déjà essayer mais je ne l'appliquai pas sur les <li> mais sur <li> <a> donc forcément ... Merci encore

Je rencontre un autre problème qui ets le suivant :

J'ai un slider que je vien d'installer mais j'aimerai qu'il prenne toute la largeur de l'écran mais malheureusement je ne peux pas le faire à cause de ma div wrapper qui me réduit à 960px du coup je voudrais savoir si il étais possible de détacher mon slider de la div avec une ligne CSS ?

Vous pouvez toujours voir l'aperçu ici : http://www.arnaudbenez.fr/carole_cresson_website/index.html

Merci d'avance,

Bonsoir,

Il faut reprendre la structure de votre site...
Sortir le slider du header, lui donner éventuellement une largeur de 100% (ou ce qui vous convient)
nb : il va falloir des images de très haute qualité et de belles dimensions, dont le poids devra être très surveillé...
Le positionner où bon vous semble, et le centrer éventuellement.

Le wrapper n'est peut-être pas utile, "header", "main_page" et "footer" peuvent être dimensionnés et centrés par eux-même, ou le wapper peut n'englober que "main_page" et "footer".

Manque un doctype à votre document... il serait peut-être bon de valider votre code afin d'éviter les mauvaises surprises...
Éviter également ce genre de déclaration :

body {
	background: url("../img/bg-top-menu.png") repeat-x  0 0 ;
	height: 40px;
} 

La hauteur me semble un poil sous-estimée et pour le moins parfaitement inutile

On parlera la prochaine fois du responsive web design

Bonjour et merci de ton aide !

Oui, j'avais effectivement oublier le DocType même si je ne connais pas réellement son utilité à par que c'est un moyen de "reconnaissance" pour w3c me semble t'il.

M'enfin, je pensais qu'il existait une ligne de code pour détacher une div d'une autre comme pour déshérité. Tant pis, en tout cas merci encore

PS : Il est possible de mettre plusieurs background à la fois d'affilé ? Parce que je voulais faire en sorte qu'il y ai ma barre de navigation qui prenne toute la largeur de mon écran, suivi d'un pattern puis encore un autre background sous le slider.
Modifié par Mister-Hims (15 Jul 2013 - 13:45)

Déclaration de Type de Document (DTD) alias Doctype

Plusieurs images dans un arrière-plan : background multiple

Merci encore 6l20, ton aide m'est précieuse et je n'ai jamais autant appris qu'en mettant ma main dans le cambouis !

Hors il m'arrive un autre petit problème que vous pourrez constater sur le lien de ma page un peu plus haut. Je voudrais que dans les derniers blocs en dessous, celui du milieu (le deuxième) soit correctement centré entre les deux autres. J'ai essayer en mettant un width suivi d'un margin: auto 0; pour placé l'élément pile au milieu du conteneur mais sans succès... existe-il un moyen d'y remédier sans devoir faire de margin-left ? Car je ne suis pas certain qu'utiliser des margin left de cette façon optimisera ma page web.

Cordialement,
Modifié par Mister-Hims (17 Jul 2013 - 12:21)