une image sur toute la hauteur de la page

Sujet résolu

4 août 2006 à 17:01:42

Bonjour, j'aimerais avoir un background sur la totalité de la hauteur de la page.
Le repeat-y ne fonctionne pas comment faire ??

Merci d'avance.

strucky

4 août 2006 à 18:39:05

Donner une hauteur à ton bloc ?

Jimmy Labuche

4 août 2006 à 19:48:58

mon design fait 780 Px de large. Et 2 barre de chaque coté doivent toucher et le haut et le bas de la fenetre. Mais j'arrive pas a faire en sorte que l'image se rèpète jusqu'en bas...

Comment faire ?

strucky

4 août 2006 à 20:05:31

Si tu parles de faire un cadre extensible, regarde dans vos tutos.

Jimmy Labuche

4 août 2006 à 20:18:50

erf vous avez pas compris j'ai du mal a m'exprimé et je trouve pas de site prenant cette exemple...

Je vais faire un design de taille 780 px .

Et de chaque coté de ce design il y a une barre decorré avec un motif. (A gauche et a droite donc)
Au milieu il y a le contenu.

Et bien je veux que la barre de gauche et la barre de droite ne change pas de taille en fonction de la taille du contenu. Je veux qu'elle arrive jusqu'en bas de la page quoiqu'il arrive.
Vous comprenez ?
Merci

strucky

4 août 2006 à 20:41:52

Tu parles d'un position fixe sur ta page ?

Jimmy Labuche

4 août 2006 à 21:19:48

http://www.jeuxvideo.com/etajvbis.htm

Tu vois sur jeuxvideo.com par exemple j'ai pas trouvé de site comme je le souhaité désolé pour la pub qui n'en est pas

.
Alors voila, tu vois les bord blanc ? imagine qu'à droite et a gauche ca soit un border "decoré" et que je soit obligé de répeter une image pour que ca arrive en bas de la fenetre... Et bien c'est exactement ca que je veux faire et ce même si le contenu fais 2 ligne je veux que les bords ailles jusqu'en bas.

tu vois ce que je veux dire ??

Les double || représente les bords decoré)
Les underscor _ représente le haut et le bas de fenetre.
Les tiret - represente un espace vide.

Et donc je veux que les bord decoré (Soit l'image repeté X fois) descendee jusqu'en bas quelque soit la taille du contenu.

____________________
||---------------||
||HEADER------||
||---------------||
||contenu de 2||
||ligne --------||
||---------------||
||---------------||
||---------------||
||---------------||
||---------------||
||---------------||
____________________ (Imagine que les bord tpouche bien evidement...

strucky

4 août 2006 à 21:25:45

Ben un min-height dans ces cas là.

Jimmy Labuche

4 août 2006 à 21:38:54

et oui mais comme valeur ??

strucky

4 août 2006 à 21:48:34

Euh, c'est pas moi qui vais te le dire, c'est ta page non ?

Jimmy Labuche

5 août 2006 à 10:43:51

Tiens regarde jme suis empressé de faire une ptite barre gauche a repeter...

voila le site :

http://s140283582.onlinehome.fr/gfx/

Je voudrais que la ptite image que tu vois en haut se répète jusqu'à ce qu'elle touche le bas du navigateur. Comment faire ??

strucky

5 août 2006 à 12:56:42

En strict, c'est difficile de faire ceci, ça doit être faisable, mais faut tester.

Tandis qu'en transitionnal, c'est bien plus facile :

Tu imbriques tes blocs :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Ultimate GFX</title>
<link rel="stylesheet" type="text/css" href="Ultimate%20GFX_files/style.css" media="screen">
<link rel="shortcut icon" type="image/x-icon" href="http://s140283582.onlinehome.fr/gfx/favicon.ico">
</head>
<body>

<div class="bord_gauche">
   <div class="bord_droit">
   <div id="page">
   </div>
</div>
</div>

</body>
</html>

Et ton css, avec des height à 100% :

body{
background: url('../images/design/fond.gif');
margin: 0 auto;
padding: 0;
height: 100%;
width: 760px;
}

#page{
height: 100%;
margin: auto;
margin: 0 35px;
background-color:#333;
}

.bord_gauche{
height: 100%;
background: url('../images/design/bord_gauche.png') repeat-y;

}

.bord_droit{
background: url('../images/design/bord_droit.png') top right repeat-y;
height: 100%;
}

Tu obtiendras le résultat voulu.

Jimmy Labuche

5 août 2006 à 13:57:54

Les bored ne descendent pas jusqu'en bas :'(

Ils sont proportionnel a la taille du contenu :'(

Merci quand meme pour ton aide

strucky

5 août 2006 à 14:35:22

Euh si, j'ai testé avec IE et FF, les bordures prennent bien toute la hauteur de l'écran.

Jimmy Labuche

5 août 2006 à 15:09:06

Et bah j'ai fais un copié collé pur et simple de ton code et bien va voir lresultat sur le site tu vas voir :'(

strucky

5 août 2006 à 15:40:40

Ah désolé, j'ai oublié de remettre le :

html{
height: 100%;
}

Jimmy Labuche

5 août 2006 à 16:24:26

EXCELLENT !!!

Merci beaucoup pour ton aide !!! Sincèrement !