[XHTML] Une mise en page un peu complexe

Version imprimable

27/05/2006, 16h42
psychoBob

1 pièce(s) jointe(s)

[XHTML] Une mise en page un peu complexe

Bonjour,

Pièce jointe 1324
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

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

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 ;)

27/05/2006, 17h12
joe206

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

Citation:

<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>
27/05/2006, 17h16
psychoBob

Amenez des bates les gars.

(J'y suis presque, si tu demandes pardon pour les frames, j'explique la mise en page en css).
27/05/2006, 17h44
joe206

:oops:

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 :roll:.

Voilà le truc :
Code:

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:

1 2 3 4 5 <div class="conteneur"> <div class="menuGauche"><div> <div class="centre"></div> <div class="copyright"><div> </div>
Et donc la div menuGauche est bien à gauche et la div centre est bien à droite, mais la divGauche est sous la div centre.

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

Citation:

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...
27/05/2006, 17h57
psychoBob

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.
27/05/2006, 18h03
psychoBob

1 pièce(s) jointe(s)

En image, maintenant ça donne ça :

Pièce jointe 1331

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.
27/05/2006, 18h07
<romain/>
l'erreur viens de la :
Code:

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:

1 2 3 width:559px; float:left;
27/05/2006, 18h09
psychoBob

Bien vu mon pote, Dieu te le rendra.