[html/css] positionnement de div
Résolu
Utilisateur anonyme
-
SodHyome -
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...
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
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
- Div c++ - Télécharger - Langages
- Espace html - Astuces et Solutions
10 réponses
<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"> </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>
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...
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
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
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...
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...
bon finalement j'ai utilisé du JS... :/
j'ai fai un calcul pour redéfinir la taille de la div centrale...
j'ai fai un calcul pour redéfinir la taille de la div centrale...
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:
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.
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.
