Witam.
Stworzyłem schemat stronki na div:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="style.css" type="text/css">
  5. <title>Div</title>
  6. </head>
  7. <body>
  8. <div id="page">
  9. <div id="header">
  10. </div>
  11.  
  12.  
  13. <div id="menu">
  14. <div class="menu_css" id="menu1"> <p>Menu</p>
  15. <ul>
  16. <li><a href="#">Strona Główna</a></li>
  17. <li><a href="#">Download</a></li>
  18. <li><a href="#">Kontakt</a></li>
  19. <li><a href="#">Forum</a></li>
  20. </ul>
  21. </div>
  22. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  23. <ul>
  24. <li><a href="#">Strona Główna</a></li>
  25. <li><a href="#">Download</a></li>
  26. <li><a href="#">Kontakt</a></li>
  27. <li><a href="#">Forum</a></li>
  28. </ul>
  29. </div>
  30. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  31. <ul>
  32. <li><a href="#">Strona Główna</a></li>
  33. <li><a href="#">Download</a></li>
  34. <li><a href="#">Kontakt</a></li>
  35. <li><a href="#">Forum</a></li>
  36. </ul>
  37. </div>
  38. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  39. <ul>
  40. <li><a href="#">Strona Główna</a></li>
  41. <li><a href="#">Download</a></li>
  42. <li><a href="#">Kontakt</a></li>
  43. <li><a href="#">Forum</a></li>
  44. </ul>
  45. </div>
  46. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  47. <ul>
  48. <li><a href="#">Strona Główna</a></li>
  49. <li><a href="#">Download</a></li>
  50. <li><a href="#">Kontakt</a></li>
  51. <li><a href="#">Forum</a></li>
  52. </ul>
  53. </div>
  54. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  55. <ul>
  56. <li><a href="#">Strona Główna</a></li>
  57. <li><a href="#">Download</a></li>
  58. <li><a href="#">Kontakt</a></li>
  59. <li><a href="#">Forum</a></li>
  60. </ul>
  61. </div>
  62. <div class="menu_css" id="menu2"> <p>Menu 2</p>
  63. <ul>
  64. <li><a href="#">Strona Główna</a></li>
  65. <li><a href="#">Download</a></li>
  66. <li><a href="#">Kontakt</a></li>
  67. <li><a href="#">Forum</a></li>
  68. </ul>
  69. </div>
  70. </div>
  71.  
  72.  
  73. <div id="content">
  74. </div>
  75. <div id="stopka">
  76. </div>
  77. </div>
  78. </body>
  79. </html>
[HTML] pobierz, plaintext


Divy z klasy menu_css po najechaniu na nie rozszerzają się dając opcje menu. I tu zaczyna się problem, gdyż div "content" nie jest doklejony do div "menu" tylko ucieka na dół i klei się do prawego dolnego rogu div menu.

Plik style.css wygląda następująco:
[HTML] pobierz, plaintext 
  1. /*Wygląd dla kontenera głównego*/
  2. div#page {
  3. 	background-color: silver;
  4.     width      : 100%;
  5. 	height      : 100%;
  6. }
  7. /*Wygląd nagłówka strony*/
  8. div#header {
  9. 	background-color: black;
  10.     margin     : 0px;
  11.     border     : 0px;
  12.     padding    : 0px;
  13.     width      : 100%;
  14. 	height      : 15%;
  15. }
  16. /*Wygląd menu strony*/
  17. div#menu {
  18. 	background-color: blue;
  19.     margin     : 0px;
  20.     border     : 0px;
  21.     padding    : 0px;
  22.     width      : 20%;
  23. 	height      : auto; 
  24. 	min-height      : 80%;
  25. 	min-width : 200px;
  26. 	float : left;
  27. }
  28. /*Wygląd kontenera zawartości strony*/
  29. div#content {
  30. 	background-color: red;
  31.     margin     : 0px;
  32.     border     : 0px;
  33.     padding    : 0px;
  34.     width      : 80%;
  35. 	height      : auto;
  36. 	min-height      : 80%;
  37. 	min-width : 400px;
  38. 	float : right;
  39. }
  40. /*Kolumny lewą (menu) i prawą(content) umieszczamy z lewej i z prawej strony za pomocą atrybutów float*/
  41.  
  42. /*Wygląd stopki strony*/
  43. div#stopka {
  44. 	background-color: yellow;
  45.     margin     : 0px;
  46.     border     : 0px;
  47.     padding    : 0px;
  48.     width      : 100%;
  49. 	height      : 5%;
  50. 	clear : both;
  51. }
  52. /*Stopkę przesuwamy pod spód kolumn lewej i prawej atrybutem clear*/
  53.  
  54.  
  55. /*
  56. 		WYGLĄD ELEMENTÓW MENU
  57. */
  58. div.menu_css { /* div "menu" */
  59. width: 150px; /* szerokość */
  60. border: 1px solid #D3D3D3; /* obrazmowanie */
  61. height: 30px; /* wysokość */
  62. overflow: hidden; } /* przycinanie */
  63.  
  64. div.menu_css:hover { /* najechane menu */
  65. width: 150px; /* szerokość */
  66. height: auto; } /* wysokość (wartość musi być 100% lub "auto" */
  67.  
  68. ul { /* ul */
  69. margin: 0px; /* margines */
  70. padding: 0px; } /* odstęp */
  71.  
  72. li { /* li */
  73. list-style-type: none; /* rodzaj wykazu */
  74. width: 150px;} /* szerokość */
  75.  
  76. li a { /* linki */
  77. text-decoration: none; /* dekoracja linka */
  78. display: block; /* rodzaj wyświetlenia elementów */
  79. width: 150px; /* szerokość */
  80. padding: 5px; /* odległości */
  81. color: #3B3B3B; } /* kolor linka */
  82.  
  83. li a:hover { /* najechany link */
  84. text-decoration: none; /* dekoracja tekstu */
  85. color: #3B3B3B; /* kolor linka */
  86. width: 150px; /* szerokość */
  87. padding: 5px; /* odległości pomiedzy linkami */
  88. background-color: #F0F0F0 } /* tło */
  89.  
  90. p { /* paragraf <p> */
  91. text-align: center; }/* tekst wyśrodkowany */
[HTML] pobierz, plaintext


Nie wiem czemu tak się dzieje, schemat robiłem wg tutoriala ale tam nie uwzględniono zmiennej wysokości divów :/. Proszę o pomoc.

PS. Jakby ktoś jeszcze napisał jak podlinkować kolejne strony do div content (tak, aby w nim się ładowały po kiknięciu z menu) byłbym bardzo wdzięczny. (chodzi o coś takiego jak w ramkach był znacznik target).

Pozdrawiam