28173 sujets

CSS et mise en forme, CSS3

Probleme hauteur colonnes

Bonjour tout le monde,
je suis en train d'essayer de coder un design mais je beug à un endroit.
Tout d'abord, voilà le lien vers le design : Lien
En fait, mon probleme vient du fait que le menu est le corps soient plus long que la page ce qui provoque l'apparition d'un scroll.
J'aimerais savoir comment résoudre ce probleme.
Merci d'avance

Voici mon code xhtml

<body>

<div class="conteneur">

   <div class="header">
   </div>

   <div class="gauche">
   </div>
		
   <div class="frame">
   </div>

</div>
</body>


Et mon CSS
html, body 
{
   height: 100%;
}

body 
{
   margin: 0;
   padding: 0;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   background-color: #fff; /*couleur de fond blanche*/
}

.conteneur 
{
   width: 100%;
   height: 100%;
   position: absolute;

}

.header 
{
   background-color:#A4B0DD;
   height:100px;
   background-image:url(images/header/gauche.jpg);
   background-position:left;
   background-repeat:no-repeat;
}

.gauche
{
   position: absolute;
   left:0;
   width:88px;
   height:100%;
   background-image:url(images/gauche/gauche.jpg);
}

.frame 
{
   margin-left: 88px;
   width: auto;
   height: 100%;
   overflow: auto;
   background-image:url(images/corps/fond.jpg);
   background-repeat:repeat-x;
}
Salut Fatality,

POur ce que tu cherches à faire, il serait peut être plus simple d'utiliser la position fixe pour le header et le menu, avec un DOM (ou une mise ne page alternative) pour Internet Explorer 6 et versions inférieures (car ils ne prennent pas en charge cette position, seul IE 7 le fera).

Bonne continuation Smiley smile
Modifié par Alan (04 Feb 2006 - 22:11)
Tout d'abord, désolé pour le up ...
Pour olivier, je ne cherche pas à faire des colonnes de hauteurs égales.Je cherche juste à ce que mon menu et mon corps ne dépasse pas la largeur de la page.
Pour alan, je n'ai pas compri le lien que tu m'as donné. Tu pourrais m'expliquer s'il te plait?
Merci à tous les deux
Salut,
Je m'explique un peu mieux : Connais-tu la position: fixed; ? C'est une position qui permettrait par exemple à ton header de rester toujours en haut. Ainsi si tu appliques cette position à ton menu et ton header, ils ne seraient pas concernés par le scroll, seule ta div#frame le serait. Et tu aurais l'effet voulu facilement sans les "height: 100%" que tu as partout. (en plus, avec ta méthode, le problème vient de fait que le header ne peut pas être en hauteur relative, donc ça coince)

C'est enfantin à mettre en place... mais le problème ce que ça ne marche pas encore avec IE (seulement avec la future version, IE7.

- La solution peut être une mise en page alternative: ce qui est facile à faire, puisqu'il suffit juste d'indiquer pour IE une "position: absolute" là où pour les autres il y a une position fixe ! Ce que tu peux faire en commentaire conditionnel pour IE 6 et inférieurs (éventuellement avec avec hack pour IE mac. Mais peut être celui-ci prend en charge la position fixe ??) c'est tout.. Dans ce cas, le header et le menu seront concernés par le scroll. Tes visiteurs qui n'utilisent pas IE6 ou inférieur auront juste un petit plus.
Voici un exemple ICI

- pour le DOM, l'autre solution, il suffit juste de faire un lien vers le fichier .htc (que tu peux trouver en allant sur le lien que je t'avais donné) dans le bloc de déclaration où est utilisée la position fixe : behavior: url(ie-fixed.htc);. Ca va faire marcher la position fixe sur IE, où plutôt l'émuler car il y a certaines restrictions (bottom: x; je crois par exemple), mais aussi des différences de comportements. Peut être faut-il mieux le mettre également en commentaire conditionnel ou en hack de sorte qu'IE 7 utilise simplement la position fixe qu'il implémentera.

La seule difficulté, dans ton cas, vient du dégradé (fond.jpg).. je suppose que tu voudrais qu'il reste toujours en haut de #frame.. ce qui est facile avec les navigateurs conformes, mais ne marcherait pas avec IE via le fichier .htc (c'est une des différences). Il faudrait alors attribuer cette image de fond au body. Mais comme j'avais attribué dans l'exemple précédent l'image de fond gauche au body, il me faut donc changer en l'attribuant à #gauche, et lui donner une hauteur suffisante !
Voici un exemple ICI
Mais je pense qu'il serait mieux peut être d'oublier le dégradé fixe (fond.jpg) pour IE (ça changerait pas grand chose), et de laisser la div#gauche s'étendre simplement en fonction du contenu.
Mais peut être ne souhaitais tu même pas que ce dégradé soit en fixe ?

Note: dans les exemples, j'ai utilisé un hack seulement suivi par IE6 et inférieurs, et IE mac (ne sachant même pas si IE Mac implémente la position fixe ou si le DOM fonctionne sur ce navigateur Smiley ohwell ). à toi de voir le mieux à faire des essais.


A+
Modifié par Alan (05 Feb 2006 - 18:55)
@Fatality > désolé j'ai lu trop vite mais la récurrence de cette question d'hauteur égale + la présence de la réponse dans la faq font qu'à la longue, ça agace et dès qu'on voit hauteur et colonne dans la même phrase on pète un cable !!! lol


Je te conseille la lecture de ce topic concernant la volonté de contrôle (utopique) sur les hauteurs sur le media web :
http://forum.alsacreations.com/topic-14-7267-1-Petite-question-sur-les-raisons-dtre-des-designs-figs-en-hauteur.html
Modifié par Olivier (05 Feb 2006 - 19:18)
Sujet clos
Aller à