Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Wypozycjonowanie bloków
-po-
post
Post #1





Goście
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ść
Go to the top of the page
+Quote Post
JoShiMa
post
Post #2





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

Ostrzeżenie: (0%)
-----

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%;
Go to the top of the page
+Quote Post
-po-
post
Post #3





Goście
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
Go to the top of the page
+Quote Post
JoShiMa
post
Post #4





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

Ostrzeżenie: (0%)
-----

To się zdecyduj, czy ma być na całą szerokość czy nie, bo napisałeś wyraźnie "ale chcę żeby wrapper był na całą szerokość"...
Go to the top of the page
+Quote Post
-po-
post
Post #5





Goście
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.
Go to the top of the page
+Quote Post
JoShiMa
post
Post #6





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/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.
Go to the top of the page
+Quote Post
-po-
post
Post #7





Goście
Trochę napisałem chaotycznie. Hmm, chyba będę musiał pokombinować co nie co. Dzięki za pomoc
Go to the top of the page
+Quote Post
-po-
post
Post #8





Goście
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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 15:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn