[XHTML] Une mise en page un peu complexe

**psychoBob** · 27/05/2006, 16h42

Bonjour,

Nom : schéma.gif
Affichages : 77
Taille : 5,1 Ko

Je voudrais réaliser cela et là j'ai un peu de mal.
Pour le moment:
C et E sont confondu et s'affiche avec un float right.
A est avec un float left.
B et D sont ensemble dans la div centre qui s'insère entre les bordures via une margin 180px.

Maintenant c'est plus difficile, comme vous le voyez sur le schéma?
Je me suis dit, je vais placer B et C dans une div centreHaut et D et E dans une div centreBas le tout dans la div centre.
B aurait un float left, c un float right.
même principe pour D et E et je donne à centreBas une propriété clear: both pour faire B et C sur la même ligne dans la div du dessus, soit centreHaut.

C'est pas vraiment un succès.

Est-ce que vous avez une feuille de style basique à me proposer pour réussir ça ?
Merci d'avance

**<romain/>** · 27/05/2006, 17h06

Alors moi je n'utiliserait que des float:leftpour faire ca.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
#titre{
float : left;
}
 
#a{
clear:both;
float:left;
}
 
#contenu{
float : left;
}
 
#footer{
clear:both;
float:left;
}
 
#b{
float:left;
}
 
#c{
float:left;
}
 
#d{
clear:both;
float:left;
}
 
#e{
float:left;
}
 
 
<div id="titre"></div>
<div id="a"></div>
<div id="contenu">
   <div id="b"></div>
   <div id="c"></div>
   <div id="d"></div>
   <div id="e"></div>
</div>
 
<div id="footer"></div>

A toit de compléter ensuite mais avec ca le positionnement devrait être ok...
romain

**joe206** · 27/05/2006, 17h12

ou des frames, avec des .html independant les un des autres (j vais encore me faire critiquer...)
un peu style :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-8.html" name="titre" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-4.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frameset rows="*" cols="*,508" framespacing="0" frameborder="no" border="0">
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-6.html" name="topFrame1" scrolling="No" noresize="noresize" id="topFrame1" title="topFrame1" />
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/Untitled-1.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-7.html" name="topFrame2" scrolling="No" noresize="noresize" id="topFrame2" title="topFrame2" />
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-5.html" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame" title="rightFrame" />
</frameset>
</frameset>
</frameset>
<frame src="file:///C|/Documents and Settings/vaioPG/Mes documents/autres/UntitledFrame-9.html" name="copyright" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

**psychoBob** · 27/05/2006, 17h16

Amenez des bates les gars.

(J'y suis presque, si tu demandes pardon pour les frames, j'explique la mise en page en css).

**joe206** · 27/05/2006, 17h44

**psychoBob** · 27/05/2006, 17h50

Bon alors j'y suis presque mais j'ai ce souci là, maintenant :

J'ai au centre de ma page une div menuGauche et une div Centre.
Le but avant c'était de faire correctement tout tenir dans la div Centre. Cela c'est bon maintenant.
Mais le problème désormais c'est que ma div menuGauche vient se caller en dessous à gauche de la div centre

.

Voilà le truc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.menuGauche
{
float:left;
width:181px;
}
/** affiche tout le centre des pages  **/
.centre
{
margin-left: 195px;
width:559px;
float:right
}
 
Et en dessous j'ai copyright qui normalement devrait faire tenir le tout :
.copyright
{
clear:both;
}

Dans la page html on a :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="conteneur">
<div class="menuGauche"><div>
<div class="centre"></div>
<div class="copyright"><div>
</div><!--ferme conteneur-->

Et donc la div menuGauche est bien à gauche et la div centre est bien à droite, mais la divGauche est sous la div centre.

**<romain/>** · 27/05/2006, 17h53

Envoyé par joe206

ou des frames, avec des .html independant les un des autres (j vais encore me faire critiquer...)

Mwarf comparer les frames avec (x)html + css, c'est un comme comparé une vieille R5 et une ferrari...

mais libre a toi de préférer la R5

Non plus serieusement, si tu veux que ton site soit evolutif rapidement, fonctionne sur tous les navigateurs (présent et futur), soit bien référencé j'en passe et des meilleurs ne choisit pas les frames...

**psychoBob** · 27/05/2006, 17h57

Eh j'avais pas vu ta réponse tout en haut Romain, je vais voir ça mais maintenant le problème est différent comme j'ai écrit deux posts au dessus.

Voyons quand même ce que tu proposes.

**psychoBob** · 27/05/2006, 18h03

En image, maintenant ça donne ça :

Nom : schema2.gif
Affichages : 86
Taille : 8,2 Ko

Y'a pas tout ce margin entre centre et copyright c'est collé, mais par contre centre devrait être en haut, bien aligné avec menuGauche.

**<romain/>** · 27/05/2006, 18h07

l'erreur viens de la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
margin-left: 195px;
width:559px;
float:right

Tu dis a ton bloc de se placer a droite et en plus d'avoir une amrge a gauche. Il a pas la place pour tout ettre a la suite donc il va a la ligne;

met ça a la place:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part