all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le mercredi 03 septembre 2008 à 18 h 25 par G-First.

Bonjour,

Je suis en train de réaliser un site qui contient une en-tête fixe. Dessous se trouve le menu (à gauche) et tout le contenu des pages (à droite). Sur cette partie inférieure se trouve une colonne à gauche sous forme d'image. J'aimerais que cette image prenne toute la hauteur restante. Peu importe si l'image est coupée en bas, mais je ne veux pas qu'il y ait de barre de scroll sur la page. J'avais pensé à appliquer à cet élément une balise height=auto mais ca ne fonctionne pas. A savoir que mon design se trouve entièrement dans un fichier css.

Voici l'ébauche du site, on y voit ce que j'ai pu réaliser :
http://www.c-graphik.fr/c-graphik/

Quelqu'un pourrait-il m'aider?
Merci d'avance.

• participer

Message publié le jeudi 04 septembre 2008 à 11 h 29 par DenisBrazz. Un conseil, c'est toujours utile, même si on le suit pas Ca peut servir pour plus tard ou donner d'autres idées. Denis

Salut

As-tu essayé avec overflow:
description ici : http://fr.selfhtml.org/css/proprietes/positionnement.htm#overflow

A+
Denis

• participer

Message publié le jeudi 04 septembre 2008 à 16 h 34 par G-First.

Je vais tenter ça merci, je n'y avais pas pensé, et je reviens vous voir....

• participer

Message publié le mardi 09 septembre 2008 à 13 h 51 par G-First.

Me revoilà.

J'ai essayé pas mal de choses, mais malgré toutes les astuces données ici, je n'arrive pas à faire en sorte que mon div prenne toute la hauteur restante de ma page. J'ai appliqué l'overflow mais tant que la balise height ne fonctionne pas comme il faut cela ne sert pas à grand chose

Voici mon code CSS :

----------------------------------------------------------------------------------
#conteneur{
position:absolute;
background:url("images/img_courbes.gif") no-repeat right top;
width:100% ;
height:100% ;
top:0px ;
right:0px ;
border:0px ;
margin:0px ;
}

#haut {
position:absolute;
width:100% ;
height:133px ;
top:0px ;
bottom:0px ;
left:0px ;
right:0px ;
margin:0px ;
border:0px ;
}

#entete {
background:url("images/img_entete.png") no-repeat left;
width:100% ;
height:133px ;
top:0px ;
bottom:0px ;
left:0px ;
right:0px ;
margin:0px ;
border:0px ;
}

#contact {
position:absolute;
float:right ;
background:url("images/img_contact.gif") no-repeat;
width:65px ;
height:65px ;
top:28px ;
right:28px ;
border:0px ;
margin:0px ;
}

#bas{
position:absolute;
float: left;
background:url("images/img_colonne.png") no-repeat left top;
width:100% ;
height:auto !important;
height:400px ;
min-height:400px ;
top:133px ;
right:0px ;
border:0px ;
margin:0px ;
overflow:hidden;
}
----------------------------------------------------------------------------------

Comme vous pouvez le voir, j'ai une en-tête de 133px de hauteur, et dessous un espace que je souhaite amener jusqu'au pied de la page, avec une image de fond que je souhaiterais voir occuper tout cet espace, quitte à être coupée. Mais je n'y arrive pas. En tout cas chez moi, sur Mozilla et IE, ça ne fonctionne pas. J'ai essayé toutes astuces données dans le tutoriel mais ça ne change pas beaucoup, je me dis que j'ai peut-être une faute ailleurs.

Voilà ce que ça donne :
http://www.c-graphik.fr/c-graphik/


Donc si quelqu'un pouvait m'aider, en me disant où j'ai fait une erreur, ce serait formidable. Merci d'avance.

• participer

Message publié le mardi 09 septembre 2008 à 18 h 17 par G-First.

Problème résolu.

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.