Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Clear: both - nie działa
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Flaku
10.12.2011, 13:25:53
Witam,

Po długiej przerwie przyszło do mnie zlecenie do wykonania...

Po napisaniu całego kodu pojawił się błąd, blok contenta i prawego menu nie wyrównują się poziomo, próbowałem dodać do kodu diva ze stylem clear ale to też nie działa, błąd nadal się pojawia:

Jeżeli jest więcej treści w contencie to robi się tak:

http://www.twojprojekt.com/web1.jpg

Jeżeli zaś jest jej mniej niż w blokach obok to robi się tak:

http://www.twojprojekt.com/web2.jpg

A chciał bym żeby się wyrównywały te bloki do poziomu, jeżeli ktoś ma jakiś pomysł jak mogę to zrobić to proszę o pomoc, poniżej umieszczam kod od strony:

[HTML] pobierz, plaintext 
  1. <!-- SITE -->
  2.     <div class="site">
  3.     	<!-- CONTENT -->
  4.         <div class="content">
  5.  
  6.             <!-- CONTENT TITLE -->
  7.             <div class="ctitle">
  8.             	<div class="ctitleA"></div>
  9.                 <div class="ctitleB">
  10.                     <div class="ctitletext"><p class="bright">Autoryzowany Serwis Q-track</p></div>
  11.                 </div>
  12.                 <div class="ctitleC"></div>
  13.             </div>
  14.             <!-- CONTENT TITLE END -->
  15.  
  16.             <!-- CONTENT TEXT -->
  17.             <div class="cbg">
  18.             	<div class="cbg2">
  19.                     <div class="ctext">Ogromne, wyraziste oczy, pięknie zarysowane kości policzkowe, zgrabny nos, zmysłowe usta... "Za jej Poli Raksy twarz..." - tymi słowami unieśmiertelnili aktorkę Zbigniew Hołdys i Bogdan Olewicz w "Autobiografii", hymnie pokolenia śpiewanym przez zespół Perfect od początku lat 80. Roman Gutek, twórca i dyrektor festiwalu Era Nowe Horyzonty, zapytany przez Remigiusza Grzelę o to, czy w dzieciństwie kochał się w aktorkach, odpowiadał: "Oczywiście, jak wszyscy – w Poli Raksie". Marusia oczarowała również nastoletniego Janusza Machulskiego, co reżyser wyznał Jackowi Szczerbie. Kilka lat temu czytelnicy "Super Expressu" uznali Polę Raksę za najwspanialszą z polskich blond gwiazd. Najwyraźniej aktorka nie przestaje wzbudzać w nas fascynacji. Ogromne, wyraziste oczy, pięknie zarysowane kości policzkowe, zgrabny nos, zmysłowe usta... "Za jej Poli Raksy twarz..." - tymi słowami unieśmiertelnili aktorkę Zbigniew Hołdys i Bogdan Olewicz w "Autobiografii", hymnie pokolenia śpiewanym przez zespół Perfect od początku lat 80. Roman Gutek, twórca i dyrektor festiwalu Era Nowe Horyzonty, zapytany przez Remigiusza Grzelę o to, czy w dzieciństwie kochał się w aktorkach, odpowiadał: "Oczywiście, jak wszyscy – w Poli Raksie". Marusia oczarowała również nastoletniego Janusza Machulskiego, co reżyser wyznał Jackowi Szczerbie. Kilka lat temu czytelnicy "Super Expressu" uznali Polę Raksę za najwspanialszą z polskich blond gwiazd. Najwyraźniej aktorka nie przestaje wzbudzać w nas fascynacji. Ogromne, wyraziste oczy, pięknie zarysowane kości policzkowe, zgrabny nos, zmysłowe usta... "Za jej Poli Raksy twarz..." - tymi słowami unieśmiertelnili aktorkę Zbigniew Hołdys i Bogdan Olewicz w "Autobiografii", hymnie pokolenia śpiewanym przez zespół Perfect od początku lat 80. Roman Gutek, twórca i dyrektor festiwalu Era Nowe Horyzonty, zapytany przez Remigiusza Grzelę o to, czy w dzieciństwie kochał się w aktorkach, odpowiadał: "Oczywiście, jak wszyscy – w Poli Raksie". Marusia oczarowała również nastoletniego Janusza Machulskiego, co reżyser wyznał Jackowi Szczerbie. Kilka lat temu czytelnicy "Super Expressu" uznali Polę Raksę za najwspanialszą z polskich blond gwiazd. Najwyraźniej aktorka nie przestaje wzbudzać w nas fascynacji. Ogromne, wyraziste oczy, pięknie zarysowane kości policzkowe, zgrabny nos, zmysłowe usta... "Za jej Poli Raksy twarz..." - tymi słowami unieśmiertelnili aktorkę Zbigniew Hołdys i Bogdan Olewicz w "Autobiografii", hymnie pokolenia śpiewanym przez zespół Perfect od początku lat 80. Roman Gutek, twórca i dyrektor festiwalu Era Nowe Horyzonty, zapytany przez Remigiusza Grzelę o to, czy w dzieciństwie kochał się w aktorkach, odpowiadał: "Oczywiście, jak wszyscy – w Poli Raksie". Marusia oczarowała również nastoletniego Janusza Machulskiego, co reżyser wyznał Jackowi Szczerbie. Kilka lat temu czytelnicy "Super Expressu" uznali Polę Raksę za najwspanialszą z polskich blond gwiazd. Najwyraźniej aktorka nie przestaje wzbudzać w nas fascynacji.</div>
  20.                 </div>
  21.             </div>
  22.             <!-- CONTENT TEXT END -->
  23.  
  24.         </div>
  25.         <!-- CONTENT END -->
  26.  
  27.         <!-- RIGHTBLOCK -->
  28.         <div class="rightblock">
  29.             <!-- MENU -->
  30.             <div class="menu">
  31.             	<ul class="mtext">
  32.                     <li><a href="#" title="#" alt="#">Strona główna</a></li>
  33.                     <li class="spacer"></li>
  34.                     <li><a href="#" title="#" alt="#">Nowości</a></li>
  35.                     <li class="spacer"></li>
  36.                     <li><a href="#" title="#" alt="#">Historia Firmy</a></li>
  37.                     <li class="spacer"></li>
  38.                     <li><a href="#" title="#" alt="#">Nasze Usługi</a></li>
  39.                     <li class="spacer"></li>
  40.                     <li><a href="#" title="#" alt="#">Cennik</a></li>
  41.                     <li class="spacer"></li>
  42.                     <li><a href="#" title="#" alt="#">Referencje</a></li>
  43.                     <li class="spacer"></li>
  44.                     <li><a href="#" title="#" alt="#">Jak Nas Znaleźć</a></li>
  45.                     <li class="spacer"></li>
  46.                     <li><a href="#" title="#" alt="#">Mapa Strony</a></li>
  47.                     <li class="spacer"></li>
  48.                     <li><a href="#" title="#" alt="#">Dane Kontaktowe</a></li>
  49.                 </ul>
  50.             </div>
  51.             <!-- MENU END -->
  52.  
  53.             <!-- QUESTION -->
  54.             <div class="question">
  55.             	<div class="qtitle"><p class="dark" title="Zadaj Pytwnie">Zadaj</p> <p class="bright" title="Zadaj Pytanie">Pytanie</p></div>
  56.                 <div class="qtext"></div>
  57.             </div>
  58.             <!-- QUESTION END -->
  59.         </div>
  60.         <!-- RIGHTBLOCK END -->
  61.         <!-- clear --><div class="clear"></div><!-- clear stop -->
  62.     </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. /* ------------------------- */
  2. /* ------------------------- */
  3. .clear {
  4. 	clear: both;
  5. }
  6.  
  7. /* ------------------------- */
  8. /* ------------------------- */
  9. .site {
  10. 	margin-left: 50px;
  11. 	margin-right: 40px;
  12. }
  13.  
  14. /* ------------------------- */
  15. /* Ustawienia okna z trescia */
  16. /* ------------------------- */
  17. .content {
  18. 	float: left;
  19. 	width: 660px;
  20. }
  21.  
  22. /* Ustawiania tytulu ------- */
  23. .ctitle {
  24. 	float: left;
  25. 	width: 660px;
  26. }
  27.  
  28. .ctitleA {
  29. 	background: url(_img/img_15.png) no-repeat;
  30. 	float: left;
  31. 	height: 33px;
  32. 	width: 56px;	
  33. }
  34.  
  35. .ctitleB {
  36. 	background: url(_img/img_15b.png) no-repeat;
  37. 	float: left;
  38. 	height: 33px;
  39. 	width: 551px;	
  40. }
  41.  
  42. .ctitleC {
  43. 	background: url(_img/img_15c.png) no-repeat;
  44. 	float: right;
  45. 	height: 33px;
  46. 	width: 53px;
  47. }
  48.  
  49. .ctitletext {
  50. 	background: url(_img/arrow.png) no-repeat;
  51. 	float: left;
  52. 	margin-top: 4px;
  53. 	padding: 7px 0px 0px 61px;
  54. 	height: 29px;
  55. 	width: 500px;
  56. }
  57.  
  58. /* Ustawienia tresci ------- */
  59. .cbg {
  60. 	background: url(_img/img_21.png) repeat-y;
  61. }
  62.  
  63. .cbg2 {
  64. 	background: url(_img/img_23.png) bottom right no-repeat;
  65. }
  66.  
  67. .ctext {
  68. 	color: #464646;
  69. 	display: table-cell;
  70. 	font-family: Arial, Helvetica, sans-serif;
  71. 	font-size: 13px; 
  72. 	margin: 0 auto;
  73. 	padding: 40px 95px 40px 95px;
  74. 	text-align: justify;
  75. }
  76.  
  77. /* ------------------------- */
  78. /* Ustawiania prawego bloku  */
  79. /* ------------------------- */
  80. .rightblock {
  81. 	float: right;
  82. 	width: 250px;
  83. }
  84.  
  85. /* Ustawiania prawego menu */
  86. .menu {
  87. 	background: url(_img/img_16.png) no-repeat;
  88. 	padding: 20px 0px 20px 15px;
  89. 	width: 250px;
  90. }
  91.  
  92. /* Tytul menu glownego */
  93. .mtitle {
  94. 	padding: 18px 0px 0px 69px;
  95. }
  96.  
  97. /* Tresc menu glownego */
  98. .mtext {
  99. 	display: table;
  100. 	margin: 0;
  101. 	padding: 0;
  102. 	height: 100%
  103. }
  104.  
  105. .mtext li {
  106. 	display: block;
  107. 	margin: 0;
  108. 	padding: 0;
  109. }
  110.  
  111. .mtext li.spacer {
  112. 	background: url(_img/spacer_.png) no-repeat center center;
  113. 	height: 26px;
  114. 	width: 199px;
  115. }
  116.  
  117. .mtext a {
  118. 	color: #000;
  119. 	font-family: Arial, Helvetica, sans-serif;
  120. 	font-size: 14px;
  121. 	padding: 3px 35px 3px 35px;
  122. 	text-decoration: none;
  123. }
  124.  
  125. .mtext li a:hover {
  126. 	color: #0068c3;
  127. 	background: url(_img/arrow_.png) no-repeat center right;
  128. 	font-weight: bold;
  129. }
  130.  
  131. /* Ustawienia bloku zad.pyt */
  132. .question {
  133. 	float: right;
  134. 	height: 288px;
  135. 	width: 250px;
  136. }
  137. .qtitle {
  138. 	background: url(_img/img_24.png) no-repeat;
  139. 	padding: 22px 0px 0px 91px;
  140. 	height: 25px;
  141. 	width: 250px;
  142. }
  143.  
  144. .qtext {
  145. 	background: url(_img/img_25.png) no-repeat;
  146. 	height: 241px;
  147. 	width: 250px;
  148. }
[HTML] pobierz, plaintext


Z góry dziękuję za pomoc.
Kostek.88
10.12.2011, 13:37:27
Widze 2 wyjscia:

1) do bloku, w ktorym jest tresc ustaw wlasciwosc min-height, bo z tego co widze, strona ma jakas minimalna ogolna wysokosc. Moze pomoc. Tu chyba chodzi o .cbg, .cbg2

2) zapoznaj sie z wlasciwoscia overflow i poszukaj w Google pod haslem "equal columns css". Moze to http://www.impressivewebs.com/easy-equal-columns-with-css/ ?
Flaku
11.12.2011, 09:08:37
1. Niestety nie działa sad.gif
2. Za dużo roboty, widziałem że ludzie robią to dużo prościej i działa ale w moim stylu coś właśnie nie chce zatrybić ;/

Próbowałem dodać też fixa którego znalazłem na necie ale to też nie działa a ludziom ponoć działał:

[HTML] pobierz, plaintext 
  1. /*------------------------------*/
  2. /* Clear Float Fix              */
  3. /*------------------------------*/
  4. .clearFix:after {
  5. 	content: "."; 
  6. 	display: block; 
  7. 	height: 0; 
  8. 	clear: both; 
  9. 	visibility:hidden; 
  10. }
  11. /* Mark Hadley's fix for IE Mac */ 
  12. .clearFix {
  13. 	display: inline-block;
  14. }    
  15. /* Hides from IE Mac \*/
  16. * html .clearFix { 
  17. 	height: 1%;
  18. } 
  19. .clearFix {
  20. 	display:block;
  21. }
  22. /* End Hack */
[HTML] pobierz, plaintext


Może ktoś ma jeszcze jakieś pomysły co mogłem spaprać w tym stylu?
prowseed
26.12.2011, 16:12:12
Wybacz, ale troche za duzo kodu- nie chce mi sie paczeć, natomiast:
- floaty maja to do siebie, ze nie rozciagaja tla
- dla calego body daj tlo 1px wysokosci i 100% (dla layoutu, to nie wiem, tak na oko 980px) szerokosci z rozciaganiem po osi y [ .foo{background:url(fsd.jpg) center top repeat-y;} - jakos tak ] wyciete z obszaru gdzie na calej szerokosci jest bialo (obszar content) ale bez mapki. W kazdym innym miejscu tlo bedzie przykryte przez obrazki (z tego co widze) wiec nie ma problemu.
- zrob sobie jeden duzy div a'la 'wrapper' ktory bedzie w sobie trzymal i div z trescia i z paskiem na boku, nadaj mu tlo mapki i ustaw w css [...] bottom right no-repeat; dla tla.

I w sumie to by juz wystarczylo, zeby polatac te puste obszary. Przyckisk 'zadaj pytanie' powinien byc png bo widze, ze ma zaokraglone rogi, a czasem bedzie na mapce, czasem poza.
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.