Limite verticale d'un bloc (div) ??

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Limite verticale d'un bloc (div) ??

electroger

Bonjour tout le monde !

Je bosse sur un site qui entièrement construit avec des div et une feuille de style qui organise le tout.
En gros ça donne ça :

<BODY>
<div class="global">
<div class="haut">
MENU EN HAUT DE LA PAGE
</div>
<div class="menu">
LE MENU SECONDAIRE
</div>

<div class="contenu">
LE CONTENU DU SITE
</div>

<div class="bas">
BAS DE PAGE
</div>
</div>
</body>

Bref, c'est assez simple. J'ai une classe "global" qui contient le haut, le menu, le contenu et le bas de page. Ce bloc global a une largeur absolue de 750px et est aligné à gauche. J'ai attribué une couleur de fond à mon body et une autre couleur de fond à la classe "global". Le problème c'est que la couleur attribuée à ma classe "global" de va pas jusqu'en bas de la page (body et global ont une hauteur de 100%). Bon comme je sens que c'est pas clair ( ) voici un p'tit schéma :

Pour le CSS :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
background-color: #333333;
height: 100%;
}

.global {
width: 750px;
border-right: 2px solid #333333;
background-color: #C1AF87;
height: 100%;
border: 3px solid red;
}

.haut {
width: 750px;
float: left;
background-image: url(images/style2/bouton1_bg.jpg);
background-repeat: no-repeat;
border: 3px solid yellow;
}

.menu {
float: left;
width: 262px;
padding: 10px;
padding-top: 220px;
background-image: url(images/style2/logo.jpg);
background-repeat: no-repeat;
margin-right: 20px;
border: 3px solid gray;
}

.contenu {
padding: 10px;
margin-left: 280px;
border: 3px solid blue;
}

.bas {
text-align: center;
float: left;
width: 750px;
height: 82px;
font-weight: bold;
color: #333333;
font-size: 13px;
text-indent: 150px;
border: 3px solid green;
}

Est ce que quelqu'un sait comment résoudre ce problème?

Publicité

electroger

C'est bon, avec un float: left dans la classe global, ça passe.

:sleep:

electroger

Bon je me suis planté... Si le contenu est trop important j'ai toujours le même problème. Pour info, le bloc global prend fin à la limite de mon écran et non pas à la limite de son contenu (sous Mozilla).

Quelqu'un peut m'aider?

huit

tente ptete le meme topic dans la categorie programation

sinon aucune idée ^^

wizopunker

FUCK ANARCHY!

c'est le 100% qui pose problème à mon avis, t'as pas essayé de mettre une valeur en pixels?

---------------
| .:: www.wizopunk-art.com - Développement web ::. |

electroger

Oui c'est sur c'est le 100% qui pose problème. Pour Mozilla, 100% c'est la hauteur en pixel de mon écran, contrairement à IE pour qui 100% c'est la hauteur total (mon écran s'il n'y a pas bcp de contenu ou l'ensemble du contenu s'il est supérieur à la hateur de mon écran).
Je viens d'essayer avec min-height:100% et du coup ça passe sur Mozilla mais pas sur IE...

Y a bien une solution : créer un autre bloc au dessus de global, mais ça fait un peu bricolage et ça me plait pas des masses...Si quelqu'un a une solution + propre :hello: .

EDIT : mettre une valeur en pixels n'est pas une solution non plus parce que je veut pas un gros blanc sous mon contenu si celui-ci n'est pas assez important.

Message édité par electroger le 16-06-2005 à 16:10:03

wizopunker

FUCK ANARCHY!

Ah, je pensais que ton global tu t'en servais comme moi. Manifestement tu lui en demandes plus que moi

---------------
| .:: www.wizopunk-art.com - Développement web ::. |

electroger

wizopunker a écrit :

Ah, je pensais que ton global tu t'en servais comme moi. Manifestement tu lui en demandes plus que moi

C'est à dire?

Danamir_

kodama

Je crois que c'est plutot un truc avec les margin En fait tu définis pas la hauteur, tu lui dis "laisse une marge de 10px en bas"... enfin c la théorie maintenant amuse toi

electroger

Danamir_ a écrit :

Je crois que c'est plutot un truc avec les margin En fait tu définis pas la hauteur, tu lui dis "laisse une marge de 10px en bas"... enfin c la théorie maintenant amuse toi

Je peux me tromper mais je crois bien qu'il n'y a aucun rapport . Si le contenu est assez important je veux bien croire qu'il laissera une marge en bas (genre 10px comme tu dis), mais si y a pas grand chose sur ma page ça changera rien.

Publicité

Mattc

Feel like I could...TAKE ON...

mets ton .global en position: absolute;

edit : et enleve les float de ton .haut si tu veux pas qu'il se fasse bouffer par le contenu

Message édité par Mattc le 16-06-2005 à 16:37:19

---------------
"Welcome to the soldier side, where there's no one here but me...."

Danamir_

kodama

Oué my bad j'avais pas remarqué que par défaut les div prennent toute la largeur et que du coup avec margin gauche et droite ca les fait varier en taille, mais que ca marche pas pour la hauteur :sweat:

electroger

Mattc a écrit :

mets ton .global en position: absolute;

edit : et enleve les float de ton .haut si tu veux pas qu'il se fasse bouffer par le contenu

Non, le problème est toujours le même : si le contenu est trop important (supérieur à la hauteur de mon écran) mon bloc ne va pas jusqu'en bas.

Mattc

Feel like I could...TAKE ON...

electroger a écrit :

Non, le problème est toujours le même : si le contenu est trop important (supérieur à la hauteur de mon écran) mon bloc ne va pas jusqu'en bas.

bizarre, j'ai testé avec ce que tu as donné et ca marchait

---------------
"Welcome to the soldier side, where there's no one here but me...."

Gnub

y a pas une question d'overflow:auto qu'il faudrait spécifier pour ton contenu ?

psycog

http://www.siteduzero.com/xhtml-css/css.php

Gnub

psycog a écrit :

http://www.siteduzero.com/xhtml-css/css.php

quand je vois la gueule de la source de la page, j'ose pas lire les conseils [:suri]

FlorentG

Unité de Masse

Le truc que tu essayes de faire (donc haut-contenu-bas), je pense avec haut et bas fixe, et barre de défilement sur contenu est complètement impossible à faire sous Internet Explorer, à cause de sa pauvre gestion des normes Donc c'est possible de le faire, il faut juste savoir que le rendu sera un peu différent sous IE...

electroger

Ouais, je vais en rester là. J'ai un rendu correct sur Mozilla, mais c'est pas le cas pour IE.

Merci tlm :jap: .

Mattc

Feel like I could...TAKE ON...

Gnub a écrit :

quand je vois la gueule de la source de la page, j'ose pas lire les conseils [:suri]

0 errors / 307 warnings [:matleflou]

---------------
"Welcome to the soldier side, where there's no one here but me...."

FlorentG

Unité de Masse

Mattc a écrit :

0 errors / 307 warnings [:matleflou]

50 morts / 250 blessés

Publicité

FORUM HardWare.fr

Graphisme

Web design

Limite verticale d'un bloc (div) ??

Sujets relatifs
[Xpress/PDF] Problème de couleur entre image et bloc	Taille limite des images pour GIMP 2 ?
Copie en bloc avec Indesign	Dessins au bloc-note
bloc image et bloc texte sur X press	Justification verticale avec Indesign CS
comment ancrer un bloc image au texte ds X.Press 4	bloc de texte dynamique pour X-Press
le frontiére/limite dans l'art?	bloc ancré xpress
Plus de sujets relatifs à : Limite verticale d'un bloc (div) ??

Page générée en 0.068 secondes