[html/css] positionnement de div

Résolu

Utilisateur anonyme -
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
Logiciel positionnement gratuit - Guide
Positionnement sms xiaomi - Forum Xiaomi
Exemple test de positionnement greta - Forum Études / Formation High-Tech
Br html ✓ - Forum Webmastering

10 réponses

Réponse 1 / 10

GIO0892 Messages postés 581 Date d'inscription Statut Membre Dernière intervention 59

montre ton html et ton css stp

Réponse 2 / 10

Utilisateur anonyme

<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 Statut Membre Dernière intervention 59

ok
tu voudrait faire quoi en faite ? éxactement merci

Réponse 4 / 10

Utilisateur anonyme

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 Statut Membre Dernière intervention 59

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

Utilisateur anonyme

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 Statut Membre Dernière intervention 59

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

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 Statut Membre Dernière intervention 59

ok encore désoler

Réponse 8 / 10

Utilisateur anonyme

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 Statut Membre Dernière intervention 59

Réponse 10 / 10

SodHyome

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

Votre réponse

Discussions similaires