Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwie kolemnu w CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Kas
21.08.2010, 00:04:47
Zrobienie dwóch kolumn w CSS i XHTML to, z pozoru banalna, sprawa. Czy może mi ktoś wytłumaczyć czemu to cholerstwo nie działa? Jest już późno i może popełniłem jakiś śmieszny błąd, ale już ledwie na oczy patrzę, a dostaję białej gorączki. sciana.gif

Chcę aby oba elementy <div> (menu i text) miały identyczną wysokość, płynnie dostosowywaną do zawartości. Już nie raz robiłem taki układ i działał, a teraz nie chce. Wrrr...
Quantum
21.08.2010, 07:49:57
http://www.puma.pomorze.pl/inne/rowny/rowny.php
Kas
21.08.2010, 17:44:55
Niestety, Twoje rozwiązanie coś nie za bardzo działa. Jest lepiej, ale to wciąż nie to:

Klik!

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title>bez nazwy</title>
  6. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  7. <link rel="shortcut icon" href="favicon.png" />
  8. <link rel="stylesheet" href="style.css" />
  9. </head>
  10. <body>
  11. <div id="header">
  12. <a href="index.php"><img src="logo.png" alt="Logo Alpha IT"/></a><img src="quote.png" alt="Cytat"/>
  13. </div>
  14. <div id="main">
  15. <div id="menu">
  16. <img src="menu_header.png" alt="Nagłówek menu" />
  17. <ul id="menu">
  18. <li><a href="index.php?page=1">O nas</a></li>
  19. <li><a href="index.php?page=2">Oferta</a></li>
  20. <li><a href="index.php?page=2">Referencje</a></li>
  21. <li><a href="index.php?page=2">Sklep internetowy</a></li>
  22. <li><a href="index.php?page=2">Logowanie</a></li>
  23. <li><a href="index.php?page=2">Kontakt</a></li>
  24. </ul>
  25. <img src="menu_footer.png" alt="Stopka menu" />
  26. </div>
  27. <div id="text"><p>aaaaaaaaaaaaaaaaaaaaa</p>
  28. </div>
  29. <div id="footer"><img src="footer.png" alt="Stopka" /></div>
  30. </div>	
  31. </body>
  32. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body
  2. {
  3. background-image:url('background.png');
  4. margin-top: 30px;
  5. padding: 0;
  6. border: 0;
  7. }
  8.  
  9. img
  10. {
  11. border: 0;
  12. }
  13.  
  14. div#header
  15. {
  16. width: 1000px;
  17. margin-left: auto;
  18. margin-right: auto;
  19. margin-bottom: 0;
  20. border: 0;
  21. }
  22.  
  23.  
  24. div#main
  25. {
  26. margin-left: auto;
  27. margin-right: auto;
  28. width: 1000px;
  29. margin-top: 0;
  30. overflow: hidden;
  31. }
  32.  
  33. div#menu
  34. {
  35. padding-bottom: 2000px; margin-bottom: -2000px;
  36. width: 200px;
  37. float: left;
  38. }
  39.  
  40. div#text
  41. {
  42. padding-bottom: 2000px; margin-bottom: -2000px;
  43. margin-top: 10px;
  44. width: 800px;
  45. background : url('text.png');
  46. float: right;
  47. }
  48.  
  49.  
  50. ul#menu
  51. {
  52. list-style: none;
  53. margin: 0;
  54. padding: 0;
  55. }
  56.  
  57. div#menu a
  58. {
  59. margin-left: 10px;
  60. color: #ffffff;
  61. text-decoration: none;
  62. }
  63.  
  64.  
  65. div.clear
  66. {
  67. clear: both;
  68. }
  69.  
  70. #menu li 
  71. {
  72. width : 200px;
  73. height : 50px;
  74. background : url('menu_normal.png');
  75. }
  76.  
  77. #menu li:hover
  78. {
  79. background : url('menu_hover.png');
  80. }
  81.  
  82. #menu li a
  83. {
  84. vertical-align: middle;
  85. line-height:50px;
  86. }
  87.  
  88. div#footer
  89. {
  90. margin-bottom: 30px;
  91. }
[HTML] pobierz, plaintext


Ech... sad.gif

Z problemem sobie poradziłem. Temat do zamknięcia. smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.