Souci avec le positionnement des blocks

5 blocks + menu, bannière et footer ^^

Sujet résolu

27 juillet 2006 à 16:00:36

Bonjour à tous !
je m'arrache les cheveux depuis un moment déjà donc je viens ici pour requérir voter aide. J'ai bien relu les tuto et tout, mais pas moyen de positionner mes block comme je veux. Je vous montre ce que j'aimerai faire, puis vous mettrai mon code

! C'est parti !!! C'est pour le site d'un club de rugby, sur la page d'accueil, j'aimerais :

|---------------------------------------------------|
|---------------------Bannière--------------------|
|---------------------------------------------------|
|---------||
|-menu-||------------------||------------------|
|---------||---Bloc news---||---Bloc-----------|
|---------||-----------------|| Meilleur joueur|
|---------||____________||______________|
|---------||-----------------||-------------------|
|---------||bloc photo de ||bloc joueur-------|
|---------||la semaine----||blessé-------------|
|---------||____________||______________|
|---------||---------------------------------------|
|---------||bloc prochains matchs-------------|
|---------||____________________________|
|---------||Pied de page
|---------||____________________________|

Donc, voilà, 5 blocs à la place du corps du texte. Mon code css fait presque ce que je veux : il place mes blocks là ou je le demande dans la largeur de la page, mais en hauteur, c'est tout décalé. Ils se mettent en quinquonce (?) les un en dessous des autres... genre : (seuls es blcks rouge me posent problème)

|---- Bloc 1 ----|

|---- Bloc 2 ----|

|---- Bloc 3 ----|

|---- Bloc 4 ----|

|------------------------------------- Bloc 5 ----------------------------|

Et moi je voudrais ça :

|---- Bloc 1 ----||---- Bloc 2 ----|
|---- Bloc 3 ----||---- Bloc 4 ----|
|-------------- Bloc 1 -------------|

Je vous poste mon code, en espérant avoir été assez clair... C'est super long à faire ces dessins au clavier

#news
{
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
width : 400px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: black;
}

#photo_de_la_semaine
{
width : 400px;
margin-top : 0px;
margin-left: 600px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right:0px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
#homme_du_match
{
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right:420px;
width : 400px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
#infirmerie
{
width : 400px;
margin-left: 600px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right:0px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}

#prochain_match
{
width : 840px;
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}

J'ai enlevé tout ce qui était en rapport avec les font et le background, car on s'en fout.

Voilà, si quelqu'un peut me venir en aide, C'est volontiers que j'accepte ses remarques et ses conseils, si vous êtes plusieurs, c'est encore mieux !!!

Merci d'avance !

Bye !

v0n^

PS. Mon site à une largeur de 1000px et mon menu à gauche fait 150px de large.

Zazou

27 juillet 2006 à 16:05:47

Tu mets un float: left à ton menu, un float-right à ton bloc meilleur joueur et blessé.

Les blocs news e meilleur joueur de la même taille.
Les blocs photos et blessé de la même taille

Tu peux mettre un bloc autour de ses 4 divs comme un corps en fait pour placer ton pied de page ensuite. Ce corps fera la taille que tu voudras.

Great man

27 juillet 2006 à 16:19:16

Salut,

et si tu mettais une marge plus grande ou plus petite selon les besoins?
Du genre plus grand que 160px pour #news et plus petit que 600px pour #photo_de_la_semaine, après t'ajustes selon ce que tu voulais.

v0naRx

27 juillet 2006 à 20:54:28

Ok, je vais essayer et je vous tiens au courant

!

Bon, alors je suis au regret de vous dire que ça change rien

! Mais merci quand même de vos idée !! Quelqu'un en a d'autre ? le problème reste entier

Cyril0506

27 juillet 2006 à 22:04:00

question comment fait tu pour alligné les news avec l'homme du match? j'ia essayer mais marche pas

v0naRx

27 juillet 2006 à 22:29:03

Citation : Cyril0506

question comment fait tu pour alligné les news avec l'homme du match? j'ia essayer mais marche pas

Bah oui... bah moi non plus

c'est bien ça mon souci, et ca va devenir un problème existenciel pour finir... c'est un des derniers trucs qui me résiste... Arfffff !!!

Cyril0506

28 juillet 2006 à 11:05:47

mais moi sa se met l'un en dessosu de l'autre

cronos6

28 juillet 2006 à 12:51:30

c'est un problème assez génant

Voici ce que j'ai réussi à faire : http://img216.imageshack.us/img216/8854/positionnementpg7.jpg

le problème est légérement résolu puisque mes "gauche" et "droite" son bien placé, mais le problème reste pour le dernier "milieu" qui commence au même niveau que les "gauche et "droite", hors il devrait commencer à partir de 10px en dessous du "gauche" et "droite"

voici mon css :

#haut
{
width : 794px;
padding: 5px;
background-color: #948BDF;
margin-bottom: 20px;
text-align:center;
}

#milieu
{
width : 300px;
padding: 5px;
background-color: #948BDF;
margin: 0px 0px 20px 250px;
text-align:center;
}

#gauche
{
width : 100px;
margin-bottom: 20px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:left;
}

#droite
{
width : 100px;
margin-left: 494px;
margin-bottom: 20px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:right;
}

#bas
{
width : 794px;
padding: 5px;
background-color: #948BDF;
text-align:center;
}

v0naRx

28 juillet 2006 à 20:20:24

Merci pour vos aides !!! J'ai finalement réglé mon problème en faisant un bloc news qui flotte à gauche, et 4 bloc à droite les uns au dessus des autres !
merci pour tout !
a bientot !