Colonne infinie en y

Résolu
cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 - 24 mai 2010 à 13:38
cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 - 28 mai 2010 à 09:59
Bonjour à tous,
voilà j'ai un problème de mise en page. Un site avec deux colonnes : une à gauche, petite avec un fond noir (180px de large) l'autre à droite avec le contenu.
Le tout centré... et c'est bien là que le bas blesse, parce que la colonne de gauche doit être "infinie", c'est à dire descendre jusqu'en bas de la fenêtre même si le contenu n'y va pas.
J'ai essayé de mettre une image de fond noir dans mon div porteur qui centre le site, dans la colonne et de jouer sur le heigth = 100%.
Mais rien en fonctionne et je ne sais pas trop par où prendre le problème.
J'ai bien pensé à mettre mon image de fond dans le body, mais je ne vois pas comment faire en sorte que l'image soit toujours sous ma colonne de gauche puisque le site étant centré, la colonne n'est pas toujours à la même distance du bord gauche de la fenêtre.

Si quelqu'un a une idée.
Merci d'avance.


Tout vient à qui sait attendre

6 réponses

cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 2
27 mai 2010 à 16:41
Bonjour,
en fait, le problème avait une réponse simple.
Mon div porteur fait 1000px et est centré. Ma colonne fait 180px et doit avoir un fond noir qui descend plus bas (jusqu'en bas de la page) que le contenu.
J'ai donc fait une image de 1000px avec les 180 px en noir, et ai inséré cette image en font de body et centré en y... et le tour est joué : j'ai bien ma colonne gauche noir qui descend en bas de la page quelque soit la quantité de contenu.
Voilà... pour ceux que cela intéresse.

Tout vient à qui sait attendre
3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
27 mai 2010 à 19:09
Bonjour,
je n'avais pas percuté que tu voulais qure cela descende en bas de fenêtre, mal lu le post.
Pour ce faire en ajoutant
au style
html, body {
  margin : 0px;
  padding : 0px;
  height : 100%
}

et dur le DIV D_MAIN
  height : 100%;

Mais, c'est comme tu le sens, avec peut être des effets indésirables si la largeur de la fenêtre est inférieure à la largeur du DIV, le background risque de se dérober.

;O)
3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
26 mai 2010 à 22:41
Bonjour,
il te faut plutôt mettre l'image de fond dans un DIV englobant.
Ensuite on joue avec les styles pour la mise en position.
exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#D_MAIN {
  width : 80%;
  border : 1px solid #a0a0ff;
  background : url(image_fond.gif) repeat-y;
  background-color : #e0e0f0;
  margin-left: auto;
  margin-right: auto;
}
#D_GAUCHE {
  width : 180px;
  float : left;
}
#D_DROITE {
  margin-left : 200px;
}
</style>
</head>



  

    Contenu Gauche...


  

  

    Contenu Droit...


    Contenu Droit...


    Contenu Droit...


    Contenu Droit...


    Contenu Droit...


  




</html>

A finaliser suivant tes besoins

;O)
0
cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 2
27 mai 2010 à 08:51
salut, et merci de ta réponse.
En fait, j'ai construit comme cela, avec un div conteneur, mais la hauteur du div se limite au contenu de la page. Et même en mettant ce div conteneur (Main) à 100% en hauteur, cela n'a aucune incidence.
En tout cas, merci de ton aide.


Tout vient à qui sait attendre
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 2
28 mai 2010 à 09:24
Merci pour cette solution que j'essaierais aussi.


Tout vient à qui sait attendre
0
cs_inaden Messages postés 618 Date d'inscription mercredi 4 avril 2007 Statut Membre Dernière intervention 27 août 2010 2
28 mai 2010 à 09:59
Perfect... ça fonctionne aussi, je n'avais pas pensé à mettre le html à 100%.
Merci du tuyau.

Tout vient à qui sait attendre
0
Rejoignez-nous