[html/css] positionnement de div [Résolu/Fermé]

Signaler
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 -
 SodHyome -
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...


10 réponses

Réponse 1 / 10
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
montre ton html et ton css stp
Réponse 2 / 10
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 101 
<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
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
ok
tu voudrait faire quoi en faite ? éxactement merci
Réponse 4 / 10
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 101
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...
Réponse 5 / 10
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
height: 100%
éssaye sa je ne sais pas si en html/css on peut
Signaler
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 101
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
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
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
Signaler
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 101
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
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
ok encore désoler
Réponse 8 / 10
Messages postés
674
Date d'inscription
samedi 15 avril 2006
Statut
Membre
Dernière intervention
30 août 2010
 101
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
Messages postés
581
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
29 septembre 2011
 58
ok
Réponse 10 / 10

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.
Posez votre question