28173 sujets

CSS et mise en forme, CSS3

[RESOLU ;)] Mise en forme 3 blocs CSS

Bonjour,

Cela fait des semaines (sisi ! Smiley biggol ) que je m'arrache la tête pour essayer d'obtenir une mise en page telle que ci-dessous.

http://img95.imageshack.us/img95/5774/miseenpage2vk.th.png



J'espère que mes explications sont assez claires. Je tiens à préciser qu'en ultime recours, j'ai essayé de mettre les 3 DIVs dans une table ( Smiley confused ) mais cela me pose ensuite des problèmes lorsque je veux, par Javascript, changer la taille de mon applet pour la faire passer en plein écran puis revenir dans sa cellule de tableau (passage d'absolute en relative qui réinitialise mon applet, et c'est pas bien du tout dans mon cas).


Si quelqu'un a des pistes, mêmes très succintes, je suis très très preneur !

Merci d'avance Smiley smile
Benjamin.
Modifié par kartben (10 May 2006 - 23:47)
En fait ce que je veux faire (mais sans utiliser de table) c'est exactement ce que me permettrait ça :


<html>
<body>
<table style="height:100%;width:100%;" border="3">
  <tr>
    <td width="250px" height="100%" valign="top">
    ICI LE CONTENU DE 1
    </td>
    <td width="*" height="100%" valign="top">
    ICI LE CONTENU DE 2
    </td>
  </tr>
  <tr>
    <td colspan="2" height="0%" valign="bottom">
    ICI LE CONTENU DE 3
    </td>
  </tr>
</table>
</body>
</html>


Voir ici en live : http://mcabe.free.fr/css/exemple.html

Voilà, merci encore.... Si quelqu'un a une idée......... Smiley smile

Benjamin.
je pense que c'est ce que tu veux :
La css:

body {
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#00f;
}
#centre {
background-color:#f00;
margin-left: 250px;
}
#gauche {
position: absolute;
left:0;
width: 250px;

}
#footer {
height: 30px;
background-color: #0f0;
}
</style>


Et le xhtml:
<body>

<div id="conteneur">



	  <div id="gauche"><p>menu</p>
	  	<p>menu largeur fixe : 250px</p>
	  </div>
	  
	  <div id="centre">
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
		blabla   blabla  blabla  blabla  blabla blabla <br />
  	</div>

	  	  <div id="footer">footer</div>
</div>
	  
</body>
</html>


C'est quelque chose dans ce style que tu voulais ?
Bonjour, et merci pour ta réponse !

Malheureusement je veux quelque chose d'un peu plus compliqué que ça (cf mon deuxième post..)

Y a tout bon dans ce que tu m'envoies _sauf_ que le bloc rouge doit prendre une hauteur telle que le bas du bloc vert soit pile en bas de la page (hauteur du bleu + du vert = 100% de la hauteur de la page, quoi)

Merci d'avanceeeeeeeeeee
Excellent ! Smiley winner Smiley winner Smiley winner
Merci ! Smiley cligne

(bon dans la journée finalement j'ai changé assez radicalement de mise en page Smiley confused mais ton lien est TRÈS intéressant !..... Smiley murf
Sujet clos
Aller à