begin process at 2012 05 29 02:27:34
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

colonne infinie en y

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

colonne infinie en y

lundi 24 mai 2010 à 13:38:41 | colonne infinie en y

inaden
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
mercredi 26 mai 2010 à 22:41:02 | Re : colonne infinie en y

PetoleTeam

Membre Club
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 :
Code HTML :
<!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>
<body>
<div id="D_MAIN">
  <div id="D_GAUCHE">
    <p>Contenu Gauche...</p>
  </div>
  <div id="D_DROITE">
    <p>Contenu Droit...</p>
    <p>Contenu Droit...</p>
    <p>Contenu Droit...</p>
    <p>Contenu Droit...</p>
    <p>Contenu Droit...</p>
  </div>
</div>
</body>
</html>

A finaliser suivant tes besoins

;O)
jeudi 27 mai 2010 à 08:51:26 | Re : colonne infinie en y

inaden
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
jeudi 27 mai 2010 à 16:41:58 | Re : colonne infinie en y

inaden
Réponse acceptée !
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
jeudi 27 mai 2010 à 19:09:41 | Re : colonne infinie en y

PetoleTeam

Membre Club
Réponse acceptée !
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
Code HTML :
html, body {
  margin : 0px;
  padding : 0px;
  height : 100%
}

et dur le DIV D_MAIN
Code HTML :
  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)
vendredi 28 mai 2010 à 09:24:23 | Re : colonne infinie en y

inaden
Merci pour cette solution que j'essaierais aussi.


Tout vient à qui sait attendre
vendredi 28 mai 2010 à 09:59:06 | Re : colonne infinie en y

inaden

Perfect... ça fonctionne aussi, je n'avais pas pensé à mettre le html à 100%.
Merci du tuyau.

Tout vient à qui sait attendre


Cette discussion est classée dans : site, fond, colonne, gauche, infinie

Répondre à ce message

Sujets en rapport avec ce message

texte défilant [ par cristina49 ] bonsoir,je souhaite faire apparaitre sur mon site un texte défilant. Or sur tous les sites ou j'ai été, le texte se trouve dans un cadre (une zone de Résolution [ par BenjS ] Et vi,c'est encore moi,Je rencontre un autre probleme.Cela concerne les pages du site suivant la resolution perso des personnes le visitant.A savoir q Inserer une musique de fond sur un site [ par adrien67 ] Salut tous le mondej'ai un petit soucis j'ai inserer une ligne de fond musicale sur mon site mais a chaque fois c'est adobe photo shop qui me l'ouvre Passer d'une frame à l'autre [ par linkinpar236737 ] Bonjour, j'ai un petit problème avec mon site. Voila, en fait, j'ai une frame pour faire une sorte de menu à gauche et à droite, je mets un lien vers [HTML]Choix du fond d'écran d'un site [ par azerty21suze ] Bonsoir a tous,Voici mon probleme :J'aimerais faire des liens ( qui sont en fait des carré de couleurs ) et que quand on clique sur ces liens, le fond musique de fond [ par louis32 ] Amis informaticiens bonjour,je suis nouveau sur le site, et je me sens un peu intrus mais voilà, j'ai un problême je voudrais mettre dans mon site une Couleur de fond de site mode expert [ par philippe77290 ] Bonjour à tous, J'ai trouvé sur ce site le moyen de permettre aux utilisateurs de mon site de pouvoir changer la couleur de fond d'après un menu déro Fond d'écran statique [ par momo6666 ] Bonjour, Je suis nouveau sur votre site et j'aurai une petite question technique à vous poser. J'ai pour projet de réaliser un site internet, et j'a Alterner deux images [ par CyricFirehands ] Bonjour, Je suis en train de coder un site internet, pour mon petit plaisir, or en essayant de coder une fonction Javascript, je me heurte a quelques conception et creationd 'un site web [ par orman05 ] "conception et realisation d'un site web pour l'aide à la lecture en langue etrangere"


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,340 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)