Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Pływanie elementów blokowych, 1 problem, dwa różne nie do końca poprawne sposoby rozwiązania
Jarod
post
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Próbując zrealizować prosty szablon natknąłem się na problem (który już kiedyś 'olałem' stosując różne tricki ale teraz jest to nie możliwe). Na końcu tego posta wkleiłem kod html i css.
Zacznijmy od tego co chcę osiągnąć:
Porządany efekt

W elemencie blokowym header mam dwa bloki, które powinny przylegać do siebie bokami, a całość powinna być objęta tym headerem.

Jeśli użyję pływania to oba te bloki wypływają poza header. Nie mogę zastosować overflow:auto; ponieważ pod ff rozjeżdża się rozwijane menu. Rozwiązaniem mogłoby być dodanie do header height: 30px; ale nie chcę ustawiać wysokości na stałe. Możecie mnie jakoś nakierować?


[HTML] pobierz, plaintext 
  1. wycięte
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. wyciete
[HTML] pobierz, plaintext





EDIT: Znalazłem przyczynę. Nie rozumiem dlaczego tak się dzieje. Może mi to ktoś wytłumaczyć?

To jest to czego oczekuję
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<meta http-equiv="Content-language" content="pl" />
  6.  
  7. 	<link rel="stylesheet" href="css/main.css" type="text/css" />
  8.  
  9. 	<title>Test</title>
  10. </head>
  11. <body>
  12. 		<div style="width: 600px; background-color: blue; padding: 8px 0;">
  13. 			<div style="width: 200px; background-color: red; float: left;">Teskt 1</div>
  14. 			<div style="width: 200px; background-color: green; float: left;">Teskt 2</div>
  15. 			<div style="background-color: magenta;">Teskt 3</div>
  16. 		</div>			
  17. 		<div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0;">
  18. 			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
  19. 		</div>			
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext



Po dodaniu szerokości wszystko się sypie.
[HTML] pobierz, plaintext 
  1. <div style="width: 100px; background-color: magenta;">Teskt 3</div>
[HTML] pobierz, plaintext

Macie jakieś pomysły?

Ten post edytował Jarod 6.05.2007, 19:11:27


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 12)
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

floatujesz divy, ostatni tez musi miec float:left.
Po wszystkim trzeba dac clear:both, albo uzyc innej metody. Ale ta jest najporstsza.
[HTML] pobierz, plaintext 
  1. <div style="width: 200px; background-color: red; float: left;">Teskt 1</div>
  2. <div style="width: 200px; background-color: green; float: left;">Teskt 2</div>
  3. <div style="width:100px; background-color: magenta; float:left">Teskt 3</div>
  4. <br style="clear:both" />
[HTML] pobierz, plaintext


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #3





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(revyag @ 6.05.2007, 19:26:25 ) *
floatujesz divy, ostatni tez musi miec float:left.

Niekoniecznie bo w puste miejsce powinien wskoczyć kolejny element. Ale też tak zrobiłem.

Cytat(revyag @ 6.05.2007, 19:26:25 ) *
Po wszystkim trzeba dac clear:both, albo uzyc innej metody. Ale ta jest najporstsza.
[HTML] pobierz, plaintext 
  1. <br style="clear:both" />
[HTML] pobierz, plaintext

No właśnie wstawianie tego <br/> jest mało eleganckie.

Zmusiłem blok header do pływania w lewo, ale każdy następny element (kontener, stopka) też muszą pływać. Dla mnie to jest trochę dziwne. Bo jak raz użyjesz pływania to trzeba już cały czas.


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Cytat
Zmusiłem blok header do pływania w lewo, ale każdy następny element (kontener, stopka) też muszą pływać. Dla mnie to jest trochę dziwne. Bo jak raz użyjesz pływania to trzeba już cały czas.

Nie wiem czy do końca rozumiesz to co napisałeś smile.gif
Używając float definiujesz czy element ma być otaczany z lewej, prawej strony. Aby "wyskoczyć" z otaczania musisz zdefiniować nowy akapit, co robisz poprzez clear:both. (albo inaczej: link)

Jeśli masz ustawione float dla jakiegoś elementu, nie determinuje to definiowania float dla każdego następnego.
Kod
div#head, div#content, div#foot {
    width:600px;
}
div.col {
    width:200px;
    float:left;
}
br.clr {
    clear:both;
}

[HTML] pobierz, plaintext 
  1. <div id="head">
  2.     <div class="col"></div>
  3.     <div class="col"></div>
  4.     <div class="col"></div>
  5.     <br class="clr" />
  6. </div>
  7. <div id="content">
  8. </div>
  9. <div id="foot"></div>
[HTML] pobierz, plaintext


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #5





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Może źle się wyraziłem.

Wklej do przeglądarki ten kod:
[HTML] pobierz, plaintext 
  1. (...)
  2. <div style="margin: 5px auto; padding: 0; width: 1002px; height: auto; background-color: green; overflow: auto;">
  3. <div style="width: 600px; background-color: blue; padding: 8px 0; float: left;">
  4. 	<div style="width: 200px; background-color: red; float: left;">Teskt 1</div>
  5. 	<div style="width: 200px; background-color: green; float: left;">Teskt 2</div>
  6. 	<div style="width: 200px; background-color: magenta; float: left;">Teskt 3</div>
  7. </div>			
  8. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0;">
  9. 	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
  10. </div>			
  11. </div>		
  12. (...)
[HTML] pobierz, plaintext


Dwa sposoby rozwiązania problemu, który przedstawiłem wcześniej. Zastosowanie 
[HTML] pobierz, plaintext 
  1. <br style="clear:both" />
[HTML] pobierz, plaintext

które moim zdaniem jest małe estetyczne. Lub zamiana

[HTML] pobierz, plaintext 
  1. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0;">
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0; float: left;">
[HTML] pobierz, plaintext


Ten post edytował Jarod 6.05.2007, 22:13:44


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

No dobra, odpaliłem ten kod i wygląda ok, bez dodawania czegokolwiek, więc w czym problem ? smile.gif


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #7





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(revyag @ 6.05.2007, 21:26:39 ) *
(...)bez dodawania czegokolwiek, więc w czym problem ? smile.gif

hehe.. w tym, że jak z:
[HTML] pobierz, plaintext 
  1. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0; float: left;">
[HTML] pobierz, plaintext

usunie float: left;

to nie jest dobrze. W ff i Operze ma być tak jak pokazuje badzIEwie..


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Kod:

[HTML] pobierz, plaintext 
  1. <div style="margin: 5px auto; padding: 0; width: 1002px; height: auto; background-color: green; overflow: auto;">
  2. <div style="width: 600px; background-color: blue; padding: 8px 0">
  3. 	<div style="width: 200px; background-color: red; float: left;">Teskt 1</div>
  4. 	<div style="width: 200px; background-color: green; float: left;">Teskt 2</div>
  5. 	<div style="width: 200px; background-color: magenta; float: left;">Teskt 3</div>
  6. </div>
  7. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0;">
  8. <br /><br /><br />
  9. </div>
[HTML] pobierz, plaintext


Float użyty tylko do stworzenia trzech kolumn. Brak <br> z clearem. Test na ie 6.0, 7.0, ff, opera. Wszędzie wygląda tak samo - dobrze.
smile.gif

Jak chcesz to mogę Ci screeny pokazać smile.gif


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #9





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Zgadza się ale łądujesz <br/>. A ten znacznik jest raczej do odzielania tekstu a nie elementów blokowych. Do tego zmierzam. Czyli aby ominąć <br/> trzeba dodać tego float'a winksmiley.jpg

Podeślij screen'a bo chyba coś kręcisz tongue.gif

Ten post edytował Jarod 6.05.2007, 23:00:03


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #10





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Jesuuu snitch.gif
Wsadziłem w diva br, żeby go rozszerzyć. Tyle, to żaden zabieg.

Masz screena.



Koniec dyskusji snitch.gif


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #11





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(revyag @ 6.05.2007, 22:48:44 ) *
Jesuuu snitch.gif
Wsadziłem w diva br, żeby go rozszerzyć. Tyle, to żaden zabieg.

Tu masz racje, pomyliłem się z tym br.

Tu masz moje screeny:
IE
FF i Opera


A tu cały kod użyty w powyższym teście, żeby nie było nie domówień.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<meta http-equiv="Content-language" content="pl" />
  6.  
  7. 	<title>Test</title>
  8. </head>
  9. <body>
  10.  
  11. <div style="margin: 5px auto; padding: 0; width: 1002px; height: auto; background-color: green; overflow: auto;">
  12. <div style="width: 600px; background-color: blue; padding: 8px 0">
  13. <div style="width: 200px; background-color: red; float: left;">Teskt 1</div>
  14. <div style="width: 200px; background-color: green; float: left;">Teskt 2</div>
  15. <div style="width: 200px; background-color: magenta; float: left;">Teskt 3</div>
  16. </div>
  17. <div style="width: 600px; background-color: orange; margin-top: 5px; padding: 8px 0;">
  18. <br /><br /><br />
  19. </div>
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #12





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Dwie pierwsze linijki niech wyglądają tak:
[HTML] pobierz, plaintext 
  1. <div style="margin: 5px auto; padding: 0; width: 1002px; background-color: green;">
  2. <div style="width: 600px; background-color: blue; padding: 8px 0;  overflow: hidden; height:100%">
[HTML] pobierz, plaintext


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #13





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

@revyag: z tym overflow to też wpadłem ale nie może tak być (pisałem w pierwszym poście), ponieważ jak wstawię rozwijane menu to pod ff i operą się chrzani.

Wstaw sobie w tego diva, gdzie pisze tekst1 taki kod:
[HTML] pobierz, plaintext 
  1. <div class="menu" style="float: left;">
  2. 				<ul>
  3. 					<li><a href="">Menu<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  4. 						<ul>
  5. 							<li><a class="drop" href="#">CPanel<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  6. 								<ul>
  7. 									<li><a href="#">111111111</a></li>
  8. 									<li><a href="#">22222222</a></li>
  9. 									<li><a href="#">33333333</a></li>
  10. 									<li><a href="#">4444444</a></li>
  11. 								</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  12. 							</li>
  13. 							<li><a href="#">aaaaaaaaaa</a></li>
  14. 							<li><a href="#">bbbbbbbb</a></li>
  15. 							<li><a href="#">cccccccc</a></li>
  16. 							<li><a href="#">dddddddd</a></li>
  17. 							<li><a href="#">eeeeeeeee</a></li>
  18. 							<li><a href="#">fffffffff</a></li>
  19. 						</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  20. 					</li>
  21. 				</ul>
  22. 			</div>
[HTML] pobierz, plaintext


i dodaj dla tego menu arkusz ze stylem:
[HTML] pobierz, plaintext 
  1. .menu ul {
  2. 			padding:0;
  3. 			margin:0;
  4. 			list-style-type:none;
  5. }
  6.  
  7.  
  8.  
  9. /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
  10. .menu li {
  11. float:left;
  12. width:152px;
  13. background-color: yellow;
  14. position:relative;
  15. }
  16.  
  17. /* style the links for the top level */
  18. .menu a, .menu a:visited {
  19. padding: 6px 0;
  20. width:139px;
  21. height:30px;
  22. color:#fff;
  23. background:#e2dfa8;
  24. border-bottom:1px solid blue;
  25. /*border-width:1px 1px 0 0; */
  26. font-size:11px;
  27. text-decoration:none;
  28. line-height:29px;
  29. display:block;
  30.  
  31. }
  32.  
  33. .menu ul li a{
  34. 	width: 200px;
  35. background:red;
  36. }
  37.  
  38.  
  39. /* CPanel */
  40. .menu ul ul a.drop, .menu ul ul a.drop:visited {
  41. background:#949e7c;
  42. }
  43.  
  44. /* kolor CPanel dla IE */
  45. .menu ul ul a.drop:hover{
  46. background:#c9ba65;
  47. }
  48. /* dla pozostałych*/
  49. .menu ul ul :hover > a.drop {
  50. background:#c9ba65;
  51. }
  52.  
  53.  
  54.  
  55. /* tło drugiego podmenu */
  56. .menu ul ul ul a, .menu ul ul ul a:visited {
  57. background:#e2dfa8;
  58. }
  59.  
  60.  
  61. /* hover dla tło drugiego podmenu dla IE */
  62. .menu ul ul ul a:hover {
  63. background:#b2ab9b;
  64. }
  65. /* hover dla tło drugiego podmenu dla pozostałych */
  66. .menu ul ul ul :hover > a {
  67. background:#b2ab9b;
  68. }
  69.  
  70.  
  71.  
  72. /* ukrywanie menu */
  73. .menu ul ul {
  74. visibility:hidden;
  75. position:absolute;
  76. height:0;
  77. top:31px;
  78. left:0; 
  79. width:150px;
  80. }
  81.  
  82.  
  83. /* pozycja drugiego podmenu */
  84. .menu ul ul ul{
  85. left:150px; 
  86. top:0;
  87. width:150px;
  88. }
  89.  
  90.  
  91. /* style the table so that it takes no part in the layout - required for IE to work */
  92. .menu table {position:absolute; top:0; left:0;}
  93.  
  94. /* pierwsze podmenu */
  95. .menu ul ul a, .menu ul ul a:visited {
  96. background:#d4d8bd; 
  97. color:#000; 
  98. height:auto; 
  99. line-height:1em; 
  100. padding:5px 10px; 
  101. width:129px
  102.  
  103.  
  104. /* rozwijane pierwsze menu */
  105. }
  106. * html .menu ul ul a{
  107. width:150px;
  108. }
  109.  
  110.  
  111.  
  112. /* tło menu dla IE */
  113. .menu a:hover, .menu ul ul a:hover{
  114. color:#fff; 
  115. background:#949e7c;
  116. }
  117. /* tło menu dla pozostałych */
  118. .menu :hover > a, .menu ul ul :hover > a {
  119. color:#fff;
  120. background:#949e7c;
  121. }
  122.  
  123. /* odkrywanie pierwszego podmenu w momencie najechani na menu */
  124. .menu ul li:hover ul,
  125. .menu ul a:hover ul{
  126. visibility:visible; 
  127. }
  128.  
  129.  
  130.  
  131.  
  132. /* ukrywanie drugiego podmenu kiedy nie powinno być widoczne */
  133. .menu ul :hover ul ul{
  134. visibility:hidden;
  135. }
  136.  
  137.  
  138. /* odkrywanie drugiego podmenu */
  139. .menu ul :hover ul :hover ul{ 
  140. visibility:visible;
  141. }
[HTML] pobierz, plaintext



i podziwiaj jak overflow wszystko psuje.... Działa tylko pod IE. Bez overflowpod każdą ale nie mam tego odstępu o który tak walczyliśmy;)


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

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