Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Wypozycjonowanie bloków
Forum PHP.pl > Forum > Przedszkole
po
20.08.2008, 10:04:07
Witam. Mam mały problem z kodem
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. html, body {
  3. 	background-color: #fff;
  4. 	color: #000;
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
  8.  
  9.  
  10.  
  11.  
  12. #container {
  13. border: 1px solid red;
  14. margin: 2px auto;
  15. display: block;
  16. overflow: auto;
  17. min-width: 800px;
  18. max-width: 1100px;
  19. }
  20.  
  21.  
  22.  
  23. #top {
  24. 	background-color: #888;
  25. }
  26.  
  27. #menu {
  28. 	width: 150px;
  29. 	float: left;
  30. 	overflow: hidden;
  31. 	position: relative;
  32. 	background-color: #ccc;
  33. 	margin-top:10px;
  34. }
  35.  
  36.  
  37.  
  38. #content {
  39. margin-left: 160px;
  40. margin-top:10px;
  41. background-color: #fff;
  42. overflow: auto;
  43. border: 1px solid #000;
  44. }
  45.  
  46. #wrapper {
  47. float:right;
  48. border: 1px solid red;
  49. float: right;
  50. width: 500px;
  51. }
  52.  
  53.  
  54. #mnright {
  55. float:right;
  56. border: 1px solid blue;
  57. width: 150px;
  58. overflow: hidden;
  59. position: relative;
  60. }
  61.  
  62.  
  63. #footer {
  64. 	clear: both;
  65. 	background-color: #888;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div id="container">
  71. <div id="top">dfdfdfdf</div>
  72. <div id="menu">  dfdfdf dAeER</div>
  73.  
  74. <div id="content">
  75. <div id="mnright">prawe menu lalal <br/>fdfdfdfdf ffddf <br/>fdd dfdfdf</div>
  76.  
  77. <div id="wrapper">
  78. dsdsdssdds dsdsdsds dsdsdsds dsdsdsdssdd  ddddd dddd dddd ddfg dddd ddddddd ddddd dddd ddd dsdsdsdsdsdsds dsdsds d sdsdsds ddsdsf ddddd ddd ddd dddddd  d fdfdfd dfd fdfd fd fdfdf dffgffg fgdfsdf sfgfgfgs dfdfdfdfdf dfdfdfdf dfdfdfdfdf fddfff fddfdff dfdfdfdf dfdfdf dffdddf dfdfdfdff dfdfdffdfdf dfdff
  79. </div>
  80.  
  81. </div>
  82.  
  83.  
  84. <div id="footer">  dfdfdf dAeER</div>
  85. </div
[HTML] pobierz, plaintext



Jeżeli dla wrapper ustawie szerokość w px, wtedy jest obok diva mnright, ale chcę żeby wrapper był na całą szerokość. Jeżeli usunę diva mnrgiht to się wrapper nie rozszerzy na całą szerokość
JoShiMa
20.08.2008, 10:08:12
Cytat(po @ 20.08.2008, 11:04:07 ) *
Jeżeli dla wrapper ustawie szerokość w px, wtedy jest obok diva mnright, ale chcę żeby wrapper był na całą szerokość. Jeżeli usunę diva mnrgiht to się wrapper nie rozszerzy na całą szerokość


Jeśłi chcesz mieć coś na całą szerokość, na przykład wrapper, to :
1. Daj mu clear: both; jeśli jest za jakimś elementem z ustawionym float;
2. Jeśli za nim jest jakiś element z ustawionym float to jemu daj clear:both;
3. Daj mu szerokość 100%;
po
20.08.2008, 10:26:20
Jeżeli dla wrapper dam clear: both; wtedy będzie na całą szerokość, ale nie uwzględnia mnright - czyli prawego menu i jest pod spodem mnright.


[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #fff;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8. #container {
  9. border: 1px solid red;
  10. margin: 2px auto;
  11. display: block;
  12. overflow:visible;
  13. min-width: 800px;
  14. max-width: 1100px;
  15.  
  16. }
  17.  
  18. #top {
  19. 	background-color: #888;
  20. }
  21.  
  22. #menu {
  23. 	width: 150px;
  24. 	float: left;
  25. 	overflow: hidden;
  26. 	position: relative;
  27. 	background-color: #ccc;
  28. 	margin-top:10px;
  29. }
  30.  
  31. #content {
  32. margin-left: 160px;
  33. margin-top:10px;
  34. background-color: #fff;
  35. overflow:auto;
  36. min-width: 800px;
  37. border: 1px solid #000;
  38. }
  39.  
  40. #wrapper {
  41. float:right;
  42. border: 1px solid red;
  43. min-width: 500px;
  44. overflow: visible;
  45. }
  46.  
  47. #mnright {
  48. float:right;
  49. border: 1px solid blue;
  50. width: 150px;
  51. overflow: hidden;
  52. position: relative;
  53. }
  54.  
  55. #footer {
  56. 	clear: both;
  57. 	background-color: #888;
  58. }
[HTML] pobierz, plaintext


Teraz w IE i Firefoxie działa mi max-width i min-width. Tyle że dalej jest problem z wrapperem, żeby pod Fierfox wyfloatował obok mnright
JoShiMa
20.08.2008, 10:28:06
To się zdecyduj, czy ma być na całą szerokość czy nie, bo napisałeś wyraźnie "ale chcę żeby wrapper był na całą szerokość"...
po
20.08.2008, 10:40:53
W przypadku braku prawego menu (mnright) żeby był na całą szerokość. Rozumiesz?

To jest sytuacja, gdy wyłączyłbym prawe menu.

Stona główna będzie posiadała prawe menu, podstrony już nie, Na tej zasadzie buduje layout.
JoShiMa
20.08.2008, 10:45:21
Cytat(po @ 20.08.2008, 11:40:53 ) *
W przypadku braku prawego menu (mnright) żeby był na całą szerokość. Rozumiesz?

Teraz tak, ale do mnie trzeba mówić po polsku, żebym zrozumiała aaevil.gif
żeby to łatwo zrobić menu musisz dać wewnątrz wrapper a sam wrapper na 100% i tekst we wrapper ma opływać menu.
po
20.08.2008, 10:59:55
Trochę napisałem chaotycznie. Hmm, chyba będę musiał pokombinować co nie co. Dzięki za pomoc
po
20.08.2008, 11:39:24
Poniżej szablon - layout strony w xhtml-u, który dostosowuje się do rozdzielczości. Możliwe usunięcie prawego menu bez żadnych kolizji. Max-width i min-width także działa pod IE.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title>ms</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.  
  7.  
  8.  
  9. <style type="text/css">
  10. html, body {
  11. 	background-color: #fff;
  12. 	color: #000;
  13. 	margin: 0;
  14. 	padding: 0;
  15. }
  16.  
  17.  
  18.  
  19.  
  20. #container {
  21. border: 1px solid red;
  22. margin: 2px auto;
  23. display: block;
  24. overflow:visible;
  25. min-width: 780px;
  26. max-width: 1100px;
  27.  
  28. }
  29.  
  30.  
  31.  
  32. #top {
  33. 	background-color: #888;
  34. 	border: 1px solid red;
  35. }
  36.  
  37. #menu {
  38. width: 150px;
  39. float: left;
  40. overflow: visible;
  41. position: relative;
  42. background-color: #ccc;
  43. margin-top:10px;
  44. border: 1px solid red;
  45. }
  46.  
  47.  
  48.  
  49. #content {
  50. margin-left: 160px;
  51. background-color: #fff;
  52. overflow:auto;
  53. border: 1px solid #000;
  54. margin-top: 10px;
  55. }
  56.  
  57. #wrapper{
  58. background-color: #fff;
  59. overflow:auto;
  60. border: 1px solid #000;
  61. }
  62.  
  63.  
  64. #mnright {
  65. width: 150px;
  66. float: right;
  67. overflow: visible;
  68. position: relative;
  69. background-color: #ccc;
  70. border: 1px solid red;
  71. }
  72.  
  73.  
  74. #footer {
  75. 	clear: both;
  76. 	background-color: #888;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <div id="container">
  82. <div id="top">dfdfdfdf</div>
  83. <div id="menu">&nbsp; dfdfdf dAeER</div>
  84.  
  85. <div id="content">
  86. <div id="mnright">prawe menu lalal <br/>fdfdfdfdf ffddf <br/>fdd dfdfdf</div>
  87. <div id="wrapper">
  88.  
  89. dsdsdssdds dsdsdsds dsdsdsds dsdsdsdssdd  ddddd dddd dddd ddfg dddd ddddddd ddddd dddd ddd dsdsdsdsdsdsds dsdsds d sdsdsds ddsdsf ddddd ddd ddd dddddd  d fdfdfd dfd fdfd fd fdfdf dffgffg fgdfsdf sfgfgfgs dfdfdfdfdf dfdfdfdf dfdfdfdfdf fddfff fddfdff dfdfdfdf dfdfdf dffdddf dfdfdfdfdsdsds d sdsdsds ddsdsf ddddd ddd ddd dddddd  d fdfdfd dfd fdfd fd fdfdf dffgffg fgdfsdf sfgfgfgs dfdfdfdfdf dfdfdfdf dfdfdfdfdf fddfff fddfdff dfdfdfdf dfdfdfdsdsds d sdsdsds ddsdsf ddddd ddd ddd dddddd  d fdfdfd dfd fdfd fd fdfdf dffgffg fgdfsdf sfgfgfgs dfdfdfdfdf dfdfdfdf dfdfdfdfdf fddfff fddfdff dfdfdfdf dfdfdfdsdsds d sdsdsds ddsdsf ddddd ddd ddd dddddd  d fdfdfd dfd fdfd fd fdfdf dffgffg fgdfsdf sfgfgfgs dfdfdfdfdf dfdfdfdf dfdfdfdfdf fddfff fddfdff dfdfdfdf dfdfdff dfdfdffdfdf dfdff
  90. </div>
  91.  
  92.  
  93. </div>
  94.  
  95.  
  96. <div id="footer">&nbsp; dfdfdf dAeER</div>
  97. </div>
  98.  
  99.  
  100. </body>
  101. </html>
[HTML] pobierz, plaintext
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.