Problème de CSS

Problème de CSS - HTML/CSS - Programmation

Marsh Posté le 11-03-2009 à 15:21:48    

Bonjour,
 
Je vous expose mon problème, je suis en train de réaliser un site web et j'ai un petit souci au niveau du CSS.
J'ai un design centré de largeur fixe, composé de 2 blocs (la bannière/menu et le contenu) et je voudrais que le contenu occupe au moins la place restante.
Question, comment faire ?
 
Voici mon CSS existant :
 

Code :
  1. body {
  2. position : absolute ;
  3. margin-left : -350px ;
  4. left : 50% ;
  5. height : 100% ;
  6. margin-top: 0px;
  7. margin-bottom : 0px ;
  8. }
  10. .haut {
  11. height : 150px;
  12. width : 700px ;
  13. }
  15. .contenu  {
  16. min-height : 600px ;
  17. top : 150px;
  18. width: 680px;
  20. }


 
Merci d'avance

Reply

Marsh Posté le 11-03-2009 à 15:21:48   

Reply

Marsh Posté le 11-03-2009 à 16:46:17    

Si je comprends bien tu as ça

|-------------------------|
|     | Ma bannière |     |
|     |-------------|     |
|     | Mon contenu |     |
|     |-------------|     |
|                         |
|-------------------------|
   

Et tu voudrais

|-------------------------|
|     | Ma bannière |     |
|     |-------------|     |
|     | Mon contenu |     |
|     |             |     |
|     |             |     |
|-------------------------|
   

On triche un peu :
En fait, le contenu va faire toute la page, mais comme on le met en-dessous du haut ça ne se verra pas.

Code :
  1. #contenu{
  2.     position:absolute; /* On veut le placer précisément */
  3.     top:0; 
  4.     bottom:0; 
  5.     z-index:3; /* Le z-index sert à le mettre "en dessous" du haut */
  6.     width:700px;
  7.     padding-top:150px; /* On laisse la hauteur du haut avant de commencer à écrire */
  8. }
  9. #haut{
  10.     position:absolute; 
  11.     top:0; 
  12.     height: 150px;
  13.     width:700px; 
  14.     z-index:5; 
  15. }

Reply

Marsh Posté le 11-03-2009 à 16:49:49    

Tu pourrais utiliser la propriété min-height: 100%, de cette manière :

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {
  5. height: 100%;
  6. margin: 0;
  7. padding: 0;
  8. background-color: yellow;
  9. margin-left: 50%;
  10. height: 100% ;
  11. }
  12. .haut {
  13. height: 150px;
  14. width: 700px;
  15. margin-left: -350px;
  16. background-color: red;
  17. position: relative;
  18. z-index: 1;
  19. }
  20. .contenu  {
  21. min-height: 100%;
  22. margin-top: -150px;
  23. margin-left: -350px;
  24. width: 700px;
  25. background-color: blue;
  26. }
  27. #padding {
  28. padding-top: 150px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="haut">Haut<br><input type="button" value="Ajouter contenu" onclick="document.getElementById('padding').innerHTML +=
  34. document.getElementById('padding').innerHTML"></div>
  35. <div class="contenu"><div id="padding">Contenu<br>Contenu<br>Contenu<br>Contenu<br>Contenu<br>Contenu<br>
  36. Contenu<br>Contenu<br>Contenu<br>Contenu<br></div></div>
  37. </body>
  38. </html>


Mais évidemment ça ne fonctionne pas sous IE. Pour cette bouse, il doit y avoir moyen de simuler le min-height à coup de javascript direcement dans la CSS (extension propre à IE).


Message édité par tpierron le 11-03-2009 à 16:51:27
Reply

Marsh Posté le 11-03-2009 à 16:57:57    

Ça marche niquel, merci :)
 
Par contre j'ai un petit souci, j'ai un background en dégradé qui se raccorde la bannière.
 
Est-il possible de faire commencer ce background une fois qu'on passe au dessus de la bannière ?
 
Sinon je peux toujours rajouter 150px en haut mais si jamais il y a une solution :)
 
Merci encore
 
 
edit : En effet je n'avais pas pensé à ta solution non plus tpieron, mais bon la première à l'avantage de fonctionner sur le merveilleux IE =D


Message édité par darkgloom le 11-03-2009 à 17:00:04
Reply

Marsh Posté le 11-03-2009 à 18:23:20    

Pour la première solution, fait attention à l'overflow. Si ça déborde, le div contenant ne sera pas étendu. D'un autre coté, si tu es sûr ça ne débordera pas, c'est effectivement largement plus garantie de fonctionner partout.
 
Edit: j'avais cru comprendre que tu voulais qu'initialement la page occupe toute la hauteur du navigateur, puis que la hauteur s'adapte si jamais il y a davantage de texte.


Message édité par tpierron le 11-03-2009 à 18:24:50
Reply

Marsh Posté le 11-03-2009 à 18:36:43    

Ah oui en effet le div ne s'étend pas..
 
Il y a un moyen de simuler une continuité ?
Je ne suis pas sur que ça ne déborde pas, et c'est même le contraire en fait, je suis sur que ça débordera.

Reply

Marsh Posté le 11-03-2009 à 18:51:21    

Edit: décidément, c'est pas mon jour. j'ai parlé trop vite, ça ne fonctionne qu'en mode "quirks". Pas terrible.
 
Ah, ha, je pensais que ça allait être plus long que ça, mais finalement premier lien dans google pour la recherche "min-height ie", semble avoir trouvé le "hack" adéquat :
 
http://www.dustindiaz.com/min-height-fast-hack/
 
Avec la CSS de mon exemple modifiée, ça fonctionner sur IE7/FF/Safari/... (pas testé avec IE6, mais l'auteur semble dire que ça fonctionne aussi):

Code :
  1. body {
  2. height: 100%;
  3. margin: 0;
  4. padding: 0;
  5. background-color: yellow;
  6. margin-left: 50%;
  7. height: 100% ;
  8. }
  9. .haut {
  10. height: 150px;
  11. width: 700px;
  12. margin-left: -350px;
  13. background-color: red;
  14. position: relative;
  15. z-index: 1;
  16. }
  17. .contenu  {
  18. min-height: 100%;
  19. height: auto !important;
  20. height: 100%;
  21. margin-top: -150px;
  22. margin-left: -350px;
  23. width: 700px;
  24. background-color: blue;
  25. }
  26. #padding {
  27. padding-top: 150px;
  28. }


Message édité par tpierron le 11-03-2009 à 18:55:07
Reply

Marsh Posté le 11-03-2009 à 19:03:18    

Voila ce que j'obtiens :
 
http://avalanchedimages.free.fr/test
 
Si on ne met pas de contenu dans la div contenu, elle n'apparait pas.

Message cité 1 fois
Message édité par darkgloom le 11-03-2009 à 19:06:48
Reply

Marsh Posté le 11-03-2009 à 19:11:11    

darkgloom a écrit :

Voila ce que j'obtiens :
 
http://avalanchedimages.free.fr/
 
Si on ne met pas de contenu dans la div contenu, elle n'apparait pas.


Ouais, normal, il te manque le div#padding.
 
Tiens, spécial sans rapport. Je viens encore de tomber sur un joli bug de IE en testant mon exemple. Si on prends mon exemple tel quel et qu'on l'affiche dans IE, pouf, le <input type="button"> n'est pas affiché.
 
Pourquoi ? Apparement la règle "margin-left: -350px" sur le div.haut est aussi appliquée sur la balise "input". Si on ajoute un bloc à la suite différent de input, il n'est pas décalé.  [:opus dei] Haha, qu'est ce qu'on s'amuse avec IE.


Message édité par tpierron le 11-03-2009 à 19:12:31
Reply

Marsh Posté le 11-03-2009 à 19:16:43    

Ah moi il s'affiche tiens, j'ai la version 8 c'est surement pour ça.
 
Par contre j'ai bien mis le div#padding, et le bloc contenu ne prend pas toute la place.

Reply

Marsh Posté le 11-03-2009 à 19:16:43   

Reply

Marsh Posté le 11-03-2009 à 23:05:00    

edit : cétoké


Message édité par darkgloom le 11-03-2009 à 23:20:25
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed