Problème css : height: 100%; ne prend pas toute la hauteur
Problème css : height: 100%; ne prend pas toute la hauteur - HTML/CSS - Programmation
Marsh Posté le 02-04-2008 à 23:32:31
Ça_marche_chez_moi™
Edit: mais le résultat est, sans surprise, assez pourri.
Pour avoir aussi taté du height: 100% en CSS, je me suis rendu compte à quel point le résultat peut-être merdique entre les différents navigateurs.
De ce que j'ai vu, j'ai pas l'impression que ta mise en page ait besoin de ça. Si j'étais toi, deux div imbriqués avec un background-image en repeat-y et position: 0 0. Un autre background-image sur le deuxième div, repeat-y et position: 100% 0. Tu t'épargneras des heures de suplice. En attendant CSS3 qui permet de spécifier plusieurs background sur le même div....
Message édité par tpierron le 02-04-2008 à 23:33:27
Marsh Posté le 03-04-2008 à 11:52:28
Si ça marche chez toi c'est parce que dans le div#corps j'ai enlevé des caracteres pour alléger le post, mais si tu rajoute des caracteres pour que ca dépasse la hauteur de la page (pour qu'il y ait les barres de défilement), alors tu verras le probleme.
Je ne sais pas si tu as bien vu comment c'était fichu, en fait la bordure gauche et droite prennent 1% de la largeur de la page, et le menu est collé à la bordure gauche (il est à left: 1%; ). Donc en fait mon image qui se répète pour faire la bordure, c'est une image qui a une largeur et une longueur très petite (pour que ce soit bon pour les petites résolutions), et qui se répète en x et en y (ce qui est automatique quand je redimensionne l'image).
Au début j'avais mis deux div (comme je crois que tu dis), un pour la bordure gauche, et un autre pour la bordure droite, puis j'ai essayé avec les images, mais ça donne le même résultat...
J'ai pas très bien compris ton histoire de deux div imbriqués, tu veux dire un div dans un autre ? Mais je ne pense pas que cela résolurait mon problème.
Merci pour votre réponse 
Message édité par ghost_winged le 03-04-2008 à 11:54:18
Marsh Posté le 06-04-2008 à 16:01:06
Je persiste en disant qu'une solution infiniement plus simple serait d'utiliser deux (ok, plutôt trois) div imbriqués. Fixe le padding pour simuler tes marges gauche et droite, en y plaçant ton background-image.
Marsh Posté le 13-04-2008 à 00:51:52
Je baisse les bras, je mets la hauteur des bordures en pixels, parce que je ne comprends pas ce que tu veux dire, que mets-tu dans tes trois div imbriqués ? Je me suis aperçu que le problème est que pour la balise body, la page va jusqu'au début de la barre de défilement, mais que pour la balise html il n'y a pas de problème, la page va jusqu'en bas de la barre de défilement...
Pouvez-vous me donner plus d'explications quant à votre solution.
Merci.
Message édité par ghost_winged le 13-04-2008 à 00:52:39
Marsh Posté le 13-04-2008 à 05:18:42
Bon, à l'arrache, ça donne :
Code :
|
Sujets relatifs:
- probleme perl et sqlplus
- Problème avec htmlentities()
- [PHP]probleme vérification e-mail +mysql
- Problème espace design iframe
- Probleme de caractere spéciaux
- debutant,probléme ArrayList
- soap et problème de persistence mysql
- probléme affichage d'une longue chaine de caractére
- modifier la hauteur de ma balise menu dt
- Problème de clic sur controle TEdit
Marsh Posté le 02-04-2008 à 22:29:10
Bonjour,
faites une demande de paiement !</li>
Voilà je veux mettre une image (en fait juste une barre de couleur) sur la gauche de la page, et qui prend toute la hauteur de la page.
L'image n'est que dans le <body>, en position absolute... Voici plutot le code ce sera plus clair :
[css]html{
width: 100%;
height: 100%;
}
body{
font: "Lucida Grande", "Trebuchet MS", Verdana 0.9em;
background : #fff8e1;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
#bordure_gauche{
position: absolute;
width: 1%;
height: 100%;
left: 0%;
top: 0%;
}
#bordure_droite{
position: absolute;
width: 1%;
height: 100%;
right: 0%;
top: 0%;
}
#corps{
position: absolute;
width: 55%;
left: 23%;
top: 21%;
border-left: solid 2px #c98900;
border-right: solid 2px #c98900;
background: #ffffff;
}
#bas_page{
position: absolute;
width: 100%;
height: 68px;
bottom: 0px;
left: 0%;
}[/css]
Le problème est que le #bordure_gauche et #bordure_droite ne prennent pas toute la hauteur de la page, ils ne suivent pas les barres de défilement, l'image ne continue pas quand on baisse la barre de défilement.
Voilà le code html :
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="bons_plans.css" rel="stylesheet" type="text/css" media="screen" />
<title>Bons plans du web | Arrondissez facilement vos fins de mois</title>
</head>
<body>
<!-- Ici mettre l'en-tête de la page -->
<img src="media/haut_page.jpg" id="banniere"/>
<!-- Ici mettre le menu -->
<ul class="slidedoormenu">
<li><a href="index.html">» Accueil</a></li>
<li><a href="click_remunere.html">» Clicks rémunérés</a></li>
<li><a href="mail_remunere.html" >» Mails rémunérés</a></li>
<li><a href="surf_remunere.html">» Surf rémunérés</a></li>
<li><a href="parier.html">» Gagnez aux paris</a></li>
<li class="lastitem"><a href="jouer_gagner.html">» Jouez et Gagnez</a></li>
</ul>
<div id="corps">
<div id="bord_haut"></div>
<div id="bord_hg"></div>
<div id="bord_hd"></div>
<div id="date"><i>le xx/xx/xx à xxhxx</i></div>
<p>Nous sélectionnons pour vous les meilleurs plans du net, les plus rémunérateurs, et les mettons régulièrement
à jour.<br/></p>
<ul>N'hésitez-pas, lancez vous dès maintenant et soyez payés pour :<br/><br/>
<li>Cliquer : Vous n'avez qu'à cliquer sur les liens que vous propose le site PTC (Pay to Click) et il vous créditera
automatiquement votre compte. Une fois le payout atteint (solde minimum de votre compte à partir duquel vous pouvez retirer
l'argent gagné
<li>Lire des emails : Le principe reste le même que les PTC mis à part que les liens pour gagner de l'argent sont envoyés
sur votre boite mail interne du site et/ou (c'est généralement vous qui le choisissez) sur votre adresse email avec
laquelle vous vous êtes inscrit sur le site.<br/>
Note : Souvent les PTR (Pay to Read) font aussi PTC.</li>
<li>Surfer : Vous n'avez qu'à lancer une barre de surf (celle-ci se place sur un coin de l'écran) et continuer à
utiliser internet normalement.</li>
<li>Parier : Misez sûrement et intelligemment sur des évènements sportifs et gagnez sans retenue !</li>
<li>Jouer : Gagnez des cadeaux en jouant aux jeux du site !</li>
<p>hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</ul>
<div id="sign">par <i>ghostwinged</i></div>
<div id="bord_bas"></div>
<div id="bord_bg"></div>
<div id="bord_bd"></div>
</div>
<img src="media/bas_page.jpg" id="bas_page"/>
<img src="media/bordure_gauche.jpg" id="bordure_gauche"/>
<img src="media/bordure_gauche.jpg" id="bordure_droite"/>
</body>
</html>[/html]
Voilà, ça fait pas mal de temps que je bataille et que je cherche.
Merci d'avance !
Message édité par ghost_winged le 02-04-2008 à 22:31:53