[html/css] positionnement de div

Résolu/Fermé

Utilisateur anonyme - 11 févr. 2009 à 14:52
SodHyome - 19 juin 2009 à 14:34

Bonjour

Je suis en train de faire mumuse avec des div, sauf que ca ne marche pas comme je voudrais.

en fait je voudrai avoir ca sur ma page :

-----------------
haut
-----------------
milieu
-----------------
bas
-----------------

donc la page est divisé en 3 blocs,
le bloc du haut et le bloc du bas ayant une taille fixe, je voudrai que le bloc du milieu s'agrandisse ou se étrecisse selon la taille du navigateur sauf que j'y arrive pas lol j'arrive à mettre le bloc du milieu juste en dessous du bloc du haut, (c'est pas trop dur ca lol), j'arrive à fixer le bloc du bas en bas de la page, mais le bloc du milieu ne veux pas de finir avant que le bloc du bas commence, donc le bloc du milieu et le bloc du bas se mélangent...

A voir également:

[html/css] positionnement de div
Editeur html - Télécharger - HTML
Div c++ - Télécharger - Langages
Br html - Forum HTML
&Nbsp html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

10 réponses

Réponse 1 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
11 févr. 2009 à 14:53

montre ton html et ton css stp

Réponse 2 / 10

Utilisateur anonyme
11 févr. 2009 à 14:56

<html>
<style>

.frame_principale
{
	background-color : pink;
	width:100%;
	height:100%
	display:block;
}

.planning
{
	width:70%;
	background-color : red;
	
	position:absolute;
	top:30px;
	display:block;
	bottom: 90px;

	overflow : auto;
	height : 100%;
}

.trame_heures
{
	height : 30px;
	font-size:20px;
	position:absolute;
}

.trames_bas
{
	position:absolute;
	bottom:0px;
	border-width :1px;
	border-style:solid;
	height:90px;
	width:100%;
}

.trame_jours
{
	height : 30px;	
	border-width :1px;
	border-style:solid;
	position:absolute;
	bottom: 60px;
}

.trame_semaines
{
	height : 30px;	
	border-width :1px;
	border-style:solid;
	position:absolute;
	bottom: 30px;
}

.trame_mois
{
	height : 30px;
	width :99%;
	margin : 0;
	padding:0;
	font-size:20px;
	border-width :1px;
	border-style:solid;
	position:absolute;
	bottom:0px;
}

.trame_spacer
{
	display : none;
	width:50px;
}
</style>




<div class="frame_principale">
	<div class="trame_heures">
	<span class="trame_spacer">&nbsp;</span>0h00 | 1h00 | 2h00 | 3h00 | 4 | 5 | 6 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 
	</div>

	<div class="planning">
	planning
	<br /><br /><br /><br /><br /><br />!!!!!!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />youhou<br /><br /><br /><br /><br /><br /><br /><br /> bouh !
	</div>

	<div class="trames_bas">
	trame du bas :p
		<!--<div class="trame_jours">
		Lundi 1 |  Mardi 2 | Mercredi 3 | Lundi 1 |  Mardi 2 | Mercredi 3 | Lundi 1 |  Mardi 2 | Mercredi 3 | Lundi 1 |  Mardi 2 | Mercredi 3
		</div>

		<div class="trame_semaines">
		1 | 2 | 3 | 4 | 5 | 6 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 | 2 | 3 | 4 
		</div>

		<div class="trame_mois">
		décembre |[2009] janvier | février | mars | avril | mai | février | mars | avril | mai
		</div>
		-->
	</div>
</div>
</html>

Réponse 3 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
11 févr. 2009 à 15:10

ok
tu voudrait faire quoi en faite ? éxactement merci

Réponse 4 / 10

Utilisateur anonyme
11 févr. 2009 à 15:13

je l'ai expliqué dans mon premier message... je vois pas comment être plus clair,
je veux que le bloc du milieu s'adapte à la taille du navigateur, alors que les bloc haut et bas reste avec une taille fixe...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
11 févr. 2009 à 15:38

height: 100%
éssaye sa je ne sais pas si en html/css on peut

Utilisateur anonyme
11 févr. 2009 à 15:41

hein ?

tu t'y connais au moins en CSS ?

déjà le height tu veux que je l'applique à quel div ?
et je ne le ferai pas car je sais que ca ne marchera pas ;)

Réponse 6 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
11 févr. 2009 à 15:48

oui je mit connait enfin je suis débutant juste assait pour savoir de quoi tu parle mais sinn en javascript tu peut l'augmenter mais je ne pense pas en html sinn fais un fichiers css ou tu mais les donnée css tu vérra mieu au niveau de ton html car aprés il va étre tros long ^^ sinn désoler de ne pas pouvoir d'aidé j'aurais éssayer

Utilisateur anonyme
11 févr. 2009 à 15:51

oui masi désolé ce n'est pas déun débutant que j'ai besoin..

et pour le fichier je sais, là c'est jsute pour des raisons pratiques que j'ai tout mis dans le même fichier, mais à terme il y'aura des fichiers distincts ;)

et j'aurai aimé évité le JS....

ps : fais gaffe à ton orthographe, j'ai beaucoup de mal à te comprendre...

Réponse 7 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
11 févr. 2009 à 15:59

ok encore désoler

Réponse 8 / 10

Utilisateur anonyme
12 févr. 2009 à 11:39

bon finalement j'ai utilisé du JS... :/

j'ai fai un calcul pour redéfinir la taille de la div centrale...

Réponse 9 / 10

GIO0892 Messages postés 581 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 29 septembre 2011 59
12 févr. 2009 à 18:33

Réponse 10 / 10

SodHyome
19 juin 2009 à 14:34

Salut :p

bon, j'aime pas le travail non accomplie donc voici la réponse meme si elle ne t'aidera pas, elle sera surement utile à quelqu'un d'autre.

voila ce qu'il faut faire:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="author" content="SodHyome">
  <title></title>
<style type="text/css">
#blocHAUT /* "dièse" parce que j'ai bien travailler avec des "id"*/
{
	background-color : pink; /* couleur */
	width:800px; /* largeur que tu veux */
	height:200px;  /* hauteur que tu veux */
	display:block; /* un div est automatiquement en "block" normalement, donc optionnel */
}

#blocCENTRE
{
	background-color : purple; /* couleur */
       width: 100%; /* largeur max de la div */
	min-height: 50%; /*pour mettre le div centrale à une taille minimum (je sais plus si ça fonctionne sous IE) */
	display:block; /* optionnel */
}

#blocBAS
{
	background-color : red; /* couleur */
	width:800px; /* largeur que tu veux */
	height:150px;  /* hauteur que tu veux */
	display:block; /* un div est automatiquement en "block" normalement, donc optionnel */
}

#global
{
	width:100%;
}
</style>
</head>
<body>


<div id="global" align="center"> /* la div permet d'aligner les autres*/

<div id="blocHAUT"></div>
<div id="blocCENTRE">Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte <br> Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</div>
<div id="blocBAS"></div>

</div>
</body>

SodHyome, étudiant en informatique BTS 1ere année.

Si tu veux des améliorations, demande :)

(tu as utilisé des positions absolue, dans mon exemple il n'y en a pas.

Discussions similaires

positionner une image dans une page html