Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1610 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] Petit problème de taille d'un div

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css] Petit problème de taille d'un div

n°870710
satchie
http://satchie.free.fr
Posté le 11-10-2004 à 21:35:25  profilanswer
 

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 9px;
  4. margin: 0;
  5. padding: 0;
  6. background-image:url("design/fond.png" );
  7. background-color: #cbd6ff;
  8. }
  9. #conteneur {
  10. position: absolute;
  11. width: 750px;
  12. left: 50%;
  13. margin-left: -375px;
  14. background-color: red;
  15. }
  16. #haut {
  17. height: 150px;
  18. background-color:white;
  19. background-image:url("design/fond4.png" );
  20. background-repeat: repeat-y;
  21. background-position: right;
  22. background-color: #cbd6ff;
  23. padding-left:10px;
  24. }
  25. #menugauche {
  26. position: absolute;
  27. left:0;
  28. width: 180px;
  29. padding-left:10px;
  30. padding-right:10px;
  31. background-color: blue;
  32. }
  33. #centre {
  34. background-color:#f6eed4;
  35. margin-left: 200px;
  36. margin-right: 0px;
  37. padding-left:10px;
  38. padding-right:10px;
  39. text-align:justify;
  40. background-color: yellow;
  41. }
  42. #pied {
  43. height: 20px;
  44. background-image:url("design/pied.png" );
  45. background-repeat: repeat-y;
  46. background-position: right;
  47. background-color: #cbd6ff;
  48. }


 
http://satchie.free.fr/prb.png
 
Je voudrais que le #menugauche en bleu aille jusqu'au #pied mais je veux pas indiquer une taille fixe de hauteur.
 
Merci d'avance, ce problème me bloque depuis plusieurs jours!


Message édité par satchie le 11-10-2004 à 21:36:41

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
mood
Publicité
Posté le 11-10-2004 à 21:35:25  profilanswer
 

n°870803
satchie
http://satchie.free.fr
Posté le 11-10-2004 à 22:21:58  profilanswer
 

Svp à l'aide :)


---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
n°870992
satchie
http://satchie.free.fr
Posté le 11-10-2004 à 23:12:51  profilanswer
 

J'ai mis 100% en height, ca s'affiche différement entre Mozilla et IE mais surtout ca s'affiche pas correctement dans les deux cas.  
 
http://satchie.free.fr/test/index.html
 

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <head>
  5.  <title> :: Satchie  :: News :: </title>
  6.  <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="conteneur">
  10. <!-- Haut / Navigation -->
  11. <div id="haut">
  12.  <br>
  13.  <br>
  14.  <br>
  15.  <br>
  16.  <br>
  17.  <br>
  18.  <br>
  19.  <br>
  20.  <br>
  21.  <h4><a href="index.html">  N e w s </a> | <a href="custo.html"> C u s t o m  </a> |<a href="mao.html">  M a o </a> </h4>
  22. </div>
  23. <div id="menugauche">
  24.  <br>
  25.  <h2>| I n f o s |</h2>
  26.   <p>Pseudo: Satchie
  27.   <p>Nationalité: Française
  28.   <p>Ville: Lyon
  29.   <p>Age: 26
  30.  <br>
  31.  <br>
  32.  <h2>| C o n t a c t |</h2>
  33.   <p><a href="mailto:satchie@free.fr">Satchie@free.fr </a>
  34.   <p>Msn: satchie78@hotmail.com</p>
  35.   <p>&nbsp</p>
  36.  <br>
  37.  <br>
  38.  <h2>| A f f i l i a t i o n  |</h2>
  39.    <p>&nbsp</p>
  40.  <br>
  41.  <br>
  42.  <h2>| L i e n s |</h2>
  43.   <p><a href="http://forum.hardware.fr/hardwarefr/Discussions/sujet-10270-1.htm" target="blank">Topic Hardware.fr</a><br>
  44.   <p><a href="http://forum.clubic.com/forum2.php3?config=&post=28145&cat=19&cache=cache&sondage=&owntopic=0&p=2&trash=&subcat="target="blank">Topic Clubic.com</a><br>
  45.   <p><a href="http://customxp.net/"target="blank">> CustomXP</a><br>
  46.   <p><a href="http://www.trucsenvrac.com/"target="blank">> Trucsenvrac</a><br>
  47.   <p><a href="http://www.gfxoasis.com/" target="blank">> GfxOasis</a><br>
  48.   <p><a href="http://www.studiotwentyeight.net/"target="blank">> Studio28</a><br>
  49.   <p><a href="http://www.deviantart.com/"target="blank">> Deviantart.com</a><br>
  50.   <p><a href="http://www.rad-e8.com/"target="blank">> RadE8</a><br>
  51.   <p><a href="http://www.foood.net/"target="blank">> FoodIcons</a><br>
  52.   <p><a href="http://www.iconfactory.com/"target="blank">> TheIconFactory</a><br>
  53. </div>
  54. <!-- CENTRE -->
  55. <div id="centre">
  56.  <a name="hautdelapage"></a>
  57.  <br>
  58.  <h2>| 1 0  &nbsp;s e p t e m b r e &nbsp;2 0 0 4 |</h2>
  59.  <p>Voici la cinquième version de mon site. Quelques nouveautés à savoir :
  60.  <p>&nbsp</p>
  61.  <h2>| 1 2  &nbsp;s e p t e m b r e &nbsp;2 0 0 4 |</h2>
  62.  <p> <a href="http://nico.aerial-music.com/perso/index.html" target="_blank">Fletchernic</a> et <a href="http://www.ultradesks.fr.fm/" target="_blank">Ultraman</a> deux membres de la Frenchtouch ont récemment refais leur site, à voir absolument.
  63.   <p>&nbsp</p>
  64.  <h2>| 31  &nbsp;a o û t &nbsp;2 0 0 4 |</h2>
  65.  <p>Le forum <a href="http://www.trucsenvrac.com/" target="_blank">TrucsenVrac</a> organise sur une idée de <a href="http://www.bioscoop.fr.st/" target="_blank">BioScoop</a> un concours de desks sur le thème suivant: autour du monde en 30 jours: évasion dans les pays lointains... <a href="http://www.trucsenvrac.com/forum/viewthread.php?tid=4133" target="_blank">Accès direct au topic</a>. Le concours se termine le 24 septembre.</BLOCKQUOTE>
  66.  <p>&nbsp</p>
  67.  <h2>| 30  &nbsp;a o û t &nbsp;2 0 0 4 |</h2>
  68.  <p>J'ai testé un logiciel porté de linux sous windows qui offre une expérience originale de customisation, à savoir <a href="http://bb4win.sourceforge.net/bblean/" target="_blank">BbLean</a> qui est une variante du logiciel <a href="http://www.bb4win.org/news.php" target="_blank">Bb4Win</a> qui lui même est un portage de BBox sous linux. En quelques mots l'installation est aisée, la configuration du programme est facile mais il faut souvent passer par l'édition de fichiers *ini (en fait *.rc). Pour le reste il est facilement customisable, de nombreux plug in sont disponibles et une communauté conséquente (voir le forum <a href="http://forums.loose-screws.com/index.php?sid=c2b492afed8cbadcef80b8b2547b86d0" target="_blank">loose-screws.com</a> ) permet d'avoir pas mal d'activité autour de ce logiciel. <br>
  69. Pour information, la customisation des différents programmes à savoir bsplayer et winamp sur mes deux derniers screenshots n'est pas encore terminée.
  70. Maintenant, il reste à savoir si BbLean représente une alternative viable à long terme de l'explorer. Suivant mes disponibilités je ferai peut être un petit article sur ce logiciel.
  71.  <p>&nbsp</p>
  72.  <h2>| 19  &nbsp;a o û t &nbsp;2 0 0 4 |</h2>
  73.  <p>Une petite news pour vous informer que deux membres de la Frenchtouch à savoir <a href="http://perso.wanadoo.fr/ultr4man/" target="_blank">Ultraman</a> et <a href="http://www.bioscoop.fr.st/" target="_blank">Bioscoop</a> ont refait leur site.
  74. Le même Ultraman a créé son <a href="http://www.ultrablog.fr.st/" target="_blank">blog</a>, alors si vous voulez tout savoir sur la vie trépidente d'un membre de la Frenchtouch, vous savez où aller!
  75.  <p>&nbsp</p>
  76.  <h2>| 19  &nbsp;j u i l l e t &nbsp;2 0 0 4 |</h2>
  77.  <p>Un nouveau desk basé sur la suite <a href="http://whistl3r.deviantart.com/" target="_blank">Nano</a> par les membres du groupe <a href="http://www.4imp.de/" target="_blank">FOURIMPRESSION</a>. La suite est complète, elle comprend le thème et un shell, une suite d'icones avec des modèles pour en créer d'autres, un skin winamp, des curseurs... C'est une suite que j'apprécie particulièrement car originale et minimaliste.
  78.  <p>&nbsp</p>
  79.  <h2>| 1 4 &nbsp; j u i l l e t &nbsp;2 0 0 4 |</h2>
  80.  <p>Ce site a été référencé par <a href="http://www.gfxoasis.com/" target="_blank">GfxOasis</a> (ex: design Technika /DT2) comme le site de la semaine.</h3>
  81.  <p>&nbsp</p>
  82.  <h2>|1 8 &nbsp;j u i n&nbsp; 2 0 0 4 |</h2>
  83.  <p>Spéciale dédicace à DocVespine!J'ai corrigé la faute :o <br>
  84. Ajout d'un nouveau desk et de deux walls.</h3>
  85.  <p>&nbsp</p>
  86.  <h2>| 1 7 &nbsp;j u i n &nbsp; 2 0 0 4 |</h2>
  87.  <p>Ajout d'un nouveau desk pour la réouverture, vous remarquerez que j'utilise un nouveau skin pour winamp 5, <a href="http://www.customize.org/details/33750" target="_blank">Hal's Eye</a> que je vous recommande chaudement d'essayer.
  88.  <p>&nbsp</p>
  89.  <h2>| 1 6 &nbsp;j u i n &nbsp;2 0 0 4 |</h2>
  90.  <p>Nouvelle version du site, c'est la troisième ;-) dans un style plus reposant.
  91.  <p>&nbsp</p>
  92.  <h2> | 1 5&nbsp; j u i n &nbsp;2 0 0 4 |</h2>
  93.  <p>Ajout du lien vers le ring de laFrenchTouch, ring qui rassemble les sites de custo française, bonjour à toute la team!
  94.  Vous avez pu remarquer que le site n'est pas souvent mise à jour, ceci par manque de temps, j'en suis désolé. <br>
  95.  Je tiens aussi à remercier ceux qui m'envoient des mails pour le site, comme toujours n'hésitez pas à me contacter si vous   chercher des walls, des icones... je met juste un peu de temps pour répondre ;-) .
  96.  <p>&nbsp</p>
  97.  <h2> | 1 7&nbsp; a v r i l &nbsp;2 0 0 4 |</h2>
  98.  <p>2 nouveaux desktops et 5 archives. Ajout des sites de Fletchernic et Alxboss à l'initiative de Ultraman pour créer un ring sur la custo.
  99.  <p>&nbsp</p>
  100.  <h2> | 1er &nbsp;m a r s &nbsp;2 0 0 4 |</h2>
  101.  <p>Quelques petites modifications sur le site (rubrique liens) et un nouveau desk.
  102.  <p>&nbsp</p>
  103.  <h2> | 2 5 &nbsp;f é v r  i e r &nbsp;2 0 0 4 |</h2>
  104.  <p>Salut à toutes et à tous, ouverture du site.
  105.  <p>&nbsp</p>
  106.  <a href="#hautdelapage"><p>^ H a u t &nbsp;d e&nbsp; l a &nbsp;p a g e ^</a> <br><br>
  107.  </div>
  108. <div id="pied">
  109. <h4>Satchie © - 2004</h4>
  110. </div>
  111. </div>
  112. </body>
  113. </html>


 
 
et le css
 

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 9px;
  4. margin: 0;
  5. padding: 0;
  6. background-image:url("design/fond.png" );
  7. background-color: black;
  8. height:100%;
  9. }
  10. #conteneur {
  11. position: absolute;
  12. width: 750px;
  13. left: 50%;
  14. margin-left: -375px;
  15. background-image:url("design/fond2.png" );
  16. background-repeat: repeat-y;
  17. background-position: right;
  18. background-color: red;
  19. }
  20. #haut {
  21. height: 150px;
  22. background-color:white;
  23. background-image:url("design/fond4.png" );
  24. background-repeat: repeat-y;
  25. background-position: right;
  26. background-color: #cbd6ff;
  27. padding-left:10px;
  28. }
  29. #menugauche {
  30. position: absolute;
  31. left:0;
  32. height:100%;
  33. width: 180px;
  34. padding-left:10px;
  35. padding-right:10px;
  36. /*background-image:url("design/menu.png" );  
  37. background-repeat: repeat-y;
  38. background-position: left;*/
  39. background-color: blue;
  40. }
  41. #centre {
  42. background-color:yellow;
  43. margin-left: 200px;
  44. margin-right: 0px;
  45. padding-left:10px;
  46. padding-right:10px;
  47. text-align:justify;
  48. /*background-image:url("design/menu2.png" );  
  49. background-repeat: repeat-y;
  50. background-position: right;*/
  51. }
  52. #pied {
  53. height: 20px;
  54. background-image:url("design/pied.png" );
  55. background-repeat: repeat-y;
  56. background-position: right;
  57. background-color: #cbd6ff;
  58. }
  59. /* titre */
  60. h1 {
  61. font-size : 14px;
  62. font-family : Verdana, Arial, Helvetica, sans-serif;
  63. color : #6c9cc8;
  64. text-align: left;
  65. }
  66. /* titre des dates*/
  67. h2 {
  68. font-size : 9px;
  69. font-family : Verdana, Arial, Helvetica, sans-serif;
  70. color : #6c9cc8;
  71. text-align: left;
  72. }
  73. /*Texte des news*/
  74. h3 {
  75. font-size : 9px;
  76. font-family : Verdana, Arial, Helvetica, sans-serif;
  77. color : #666666;
  78. text-align: justify;
  79. margin-left: 20px;
  80. }
  81. /*le menu */
  82. h4 {
  83. font-size : 9px;
  84. font-family : Verdana, Arial, Helvetica, sans-serif;
  85. color : white;
  86. text-align: center;
  87. word-spacing: 10px;
  88. }
  89. a:link {color: white; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif; }
  90. a:visited {color: white; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif;}
  91. a:hover {color: #5385eb; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif;}
  92. p {margin: 0px 0px 10px 0;}


---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
n°871130
Flyman30
Posté le 12-10-2004 à 09:38:28  profilanswer
 

Tu ne pourras pas!  :sweat:  la seule solution mettre la même couleur que le menu à l'ID conteneur  [:airforceone]  
 
Il y a bien une astuce pour fixer une hauteur minimale, mais si le bloc centre dépasse cette hauteur mini, on retourne à la case départ  :(  
 
teste si tu veux :
 
 #menugauche {
 position: absolute;
 left:0;
 width: 180px;
 padding-left:10px;
 padding-right:10px;
 background-color: blue;
 height: auto !important;
 height: 450px; /* because ie suxxe */
 min-height: 450px;
 }
 

n°871192
satchie
http://satchie.free.fr
Posté le 12-10-2004 à 11:04:16  profilanswer
 

Merci pour ta réponse je testerai ce soir .
En fait si tu pouvais regarder ce site http://www.maniacalrage.net/films/
la colonne grise  s'ajuste automatiquement à la taille de l'ensemble  :??:


---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.
n°871247
Xav_
The only one...
Posté le 12-10-2004 à 11:43:31  profilanswer
 

et qu'est-ce qui t'empeche de regarder leur source pour essayer de comprendre comment ils ont fait ?


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
n°872396
cybercap
Ours véritable
Posté le 13-10-2004 à 14:29:13  profilanswer
 
n°872578
Flyman30
Posté le 13-10-2004 à 18:29:54  profilanswer
 


 
Oui et ???? y a toujours le même problème cadre du menu ne s'agrandi pas, c'est juste que la couleur de fond est la même ! ce que j'ai dit à la première réponse  :whistle:

n°872888
satchie
http://satchie.free.fr
Posté le 14-10-2004 à 01:12:53  profilanswer
 

Je crois avoir trouvé la solution
http://www.zdnet.fr/builder/web_de [...] 674,00.htm


Message édité par satchie le 14-10-2004 à 01:14:19

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] Petit problème de taille d'un div

 

Sujets relatifs
probleme de classe[ORACLE 9.2] Problème dans le Manager des tâches Win
[Java] Problème de conception d'une classe GraphMapProblème avec la classe vector
probleme d'un débutant avec la focntion mail()[MYSQL]probleme requete imbriquée
Lister les noms de fichiers,taille,type d'un serveur http ?probleme avec un if[RESOLU]
[C#] WebBrowser & encoding : limite de taille du contenu ?[C] problème de boucle
Plus de sujets relatifs à : [css] Petit problème de taille d'un div


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR