Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ograniczony clear
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
bigZbig
13.06.2006, 11:25:41
Mam typowy trzykolumnowy uklad strony oparty na plywaniu (float). Ponizej zamiescilem uproszczony kod strony i arkusza styli.

W srodkowej czesci mam obrazek. Chce aby ten obrazek byl oplywany przez nastepujacy po nim tekst. Natomiast pod tekstem mam kolejny element "podsumowanie" (class="summary"). Podsumowanie ma sie zawsze znajdowac pod obrazkiem. Moge uzyc clear: left ale wtedy trace opływanie wzgledem lewej kolumny. Moge ustalić wysokość dla tekstu poprzedzajacego podsumowanie, ale w przypadku przepełnienia tekst ten zleje się z trescia podsumowania.

Czy jest jakas mozliwosc zrobienia wzglednego clear, albo jakis inny trik, ktory rozwiazalby moj problem?

Kod
/* <![CDATA[ */

#header {
  background: yellow;
}
.wrapper {
  clear: both;
}
.wrapper:after {
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#columnLeft {
  float: left;
  width: 200px;
  background: blue;
}

#columnMiddle {
  display: block;
  margin-left: 200px;
  margin-right: 200px;
}

#columnRight {
  float: right;
  width: 200px;
  background: blue;
}

#columnLeftBottom {
  float: left;
  width: 50%;
}

#columnRightBottom {
  width: 49%;
  margin-left: 50%;
}

#footer {
  clear: both;
  background: yellow;
}

.content {
  padding: 1em;
  position: relative;
  z-index: 3;
}

.content img {
  float: left;
  height: 150px;
  width: 150px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: red;
}

.content .summary {
  clear: left;
  background: green;
}
/* ]]> */


[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" >
  3. <head>
  4.   <meta name="author" content="" />
  5.   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  6.   <title>Example</title>
  7.  
  8.   <link rel="stylesheet" href="style.css" type="text/css" />
  9.  
  10. </head>
  11. <body>
  12. <div id="page">
  13.   <div id="header">
  14.     <div class="content">
  15.       <h1>Header</h1>
  16.     </div>
  17.   </div>
  18.   <div id="wrapperTop" class="wrapper">
  19.     <div id="columnLeft">
  20.       <div class="content">
  21.         <h1>Left</h1>
  22.         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  23.       </div>
  24.     </div>
  25.     <div id="columnRight">
  26.       <div class="content">
  27.         <h1>Right</h1>
  28.         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  29.       </div>
  30.     </div>
  31.     <div id="columnMiddle">
  32.       <div class="content">
  33.         <h1>Middle</h1>
  34.         <img src="picture.gif" />
  35.         <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  36.         <p class="summary">Lorem Ipsum is simply dummy text</p>
  37.       </div>
  38.     </div>
  39.   </div>
  40.   <div id="footer">
  41.     <div class="content">
  42.       <h1>Footer</h1>
  43.     </div>
  44.   </div>
  45. </div>
  46. </body>
  47. </html>
[HTML] pobierz, plaintext
revyag
13.06.2006, 11:43:26
Użyj br.
Kod
br.clr {
    clear:both;
}

[HTML] pobierz, plaintext 
  1. <p class="text"></p><br class="clr" />
[HTML] pobierz, plaintext
bigZbig
13.06.2006, 12:25:46
To nie rozwiązuje mojego problemu poniewaz to powoduje ustawienie Podsumowania pod lewa kolumna.
revyag
13.06.2006, 12:54:47
Masz rację, dla takiego rozwiązania layoutowego chyba ciężko będzie taki efekt uzyskać. Możesz ewentualnie poszukać na
http://www.positioniseverything.net/articles/onetruelayout/
lub zmienić koncepcję. Wszystkim trzem kolumnom ustawić szerokość na sztywno i każdej dać float:left. Wtedy będzie ok. Ale dla ie będziesz musial zrobić osobne regułki (problem z padding i margin).
bigZbig
13.06.2006, 13:25:40
ustalanie na sztywno szerokosci kolumn nie wchodzi w rachube poniewaz zamierzam maksymalnie wykorzystac przestrzen. Jedyne rozwiazanie jakie przychodzi mi w tej chwili do glowy to uzycie tabeli. Co prawda tekst nie zawinie się pod obrazkiem ale przynajmniej zachowam pewien uklad
revyag
13.06.2006, 15:03:54
Zawsze możesz to zrobić w mnie wyrafinowany sposób smile.gif Dają kilka znaczników <br /> przed akapitem podsumowania, tak żeby przesunął Ci go pod obrazek.
ActivePlayer
13.06.2006, 15:52:05
pseudokod:
Kod
<div style="min-height: 300px; _height:300px;">
<img src="images/cos.jpg" style="float: left">
tekst
</div>
cos pod obrazkiem

min-height i height dajesz tyle ile wysokosc obrazka
bigZbig
13.06.2006, 16:20:01
@ActivePlayer - Twoje rozwiazanie to wlasnie to o co mi chodzilo z tym ze definiujac styl dla kontenera otaczajacego obrazek i oplywajacy go tekst powinienes sie ograniczyc tylko do nadania wartosci minimalnej. Swoja droga dzieki tobie dowiedzialem sie ze takie cos jest w ogole mozliwe. Ku mojemu wielkiemu zdziwieniu dziala to bez zarzutu zarowno w Firefoxie, Operze jak i w IE.

-- edit --
Poprawka - efekt zostal osiagniety nie dzieki definicji minimalnej wysokosci ale dzieki uzyciu dodatkowego kontenera, ale min-height tez dziala. Co obrazuje ponizszy przyklad.

[HTML] pobierz, plaintext 
  1. <img src="images/cos.jpg" style="float: left; height: 300px;">
  2. <div style="min-height: 300px;">
  3. Tekst opływający
  4. </div>
  5. Tekst pod obrazkiem
[HTML] pobierz, plaintext


Aha min-height jednak nie dziala pod IE.

-- edit --

No no dobra po poczatkowej eufori upewnilem sie jeszcze raz i niestety wyszlo ze pod IE ten sposob w ogole nie dziala, ale chyba znalazlem inne rozwiazanie.
[HTML] pobierz, plaintext 
  1. <head>
  2.     <style type="text/css">
  3.         img {
  4.             width: 150px;
  5.             height: 150px;
  6.             margin-left: 20px;
  7.             margin-bottom: 20px;
  8.             float: left;
  9.         }
  10.         .text {
  11.             min-height: 150px;
  12.         }
  13.     </style>
  14.  
  15.     <!--[if IE]>
  16.         <style type="text/css">
  17.             .text {
  18.                 height: 150px;
  19.             }
  20.         </style>
  21.     <![endif]-->
  22. </head>
  23. </body>
  24.  
  25.     <div class="text">
  26.         <img src="images/cos.jpg" />
  27.         Tekst opływający
  28.     </div>
  29.     <div class="summary">Tekst pod obrazkiem</div>
  30. </body>
[HTML] pobierz, plaintext


Firefox i Opera obsluguja min-height z kolei IE na przepełnienie kontenera reaguje domyslnie jego powiekszeniem zatem mamy rozwiazanie. Kolejny hack do kolekcji.
ActivePlayer
14.06.2006, 08:34:20
teraz zobacz ponownie moj kod smile.gif

_height: czyta tylko IE smile.gif... i sie rozciąga smile.gif
bigZbig
14.06.2006, 10:27:52
@ActivePlayer - wybacz - te kreske przed height uznalem za literowke.
gekon
14.06.2006, 11:01:17
Tę kreskę rozumie tylko IE6, IE7 niestety nie.
Są dwa sposoby: komentarze warunkowe albo:

CSS
[HTML] pobierz, plaintext 
  1. min-height: 300px;
  2. height: 300px;
  3. height: auto !important;
[HTML] pobierz, plaintext
bigZbig
14.06.2006, 11:15:42
@gekon Zapis height: auto !important nadpisuje wczesniejsza definicje height: 300px; co sprawia, ze to nie dziala pod IE.

Nie testuje narazie swoich skryptow pod IE7 - czekam do wydania wersji oficjalnej. Tak sobie mysle jednak, ze IE7 powinno juz interpretowac min-height. Przyzwoitosc by tego wymagala.
gekon
14.06.2006, 14:21:11
Sorry, pisałem z palca.
[HTML] pobierz, plaintext 
  1. min-height: 300px;
  2. height: auto !important;
  3. height: 300px;
[HTML] pobierz, plaintext

Jednak i obsługę !important poprawiono w 7 (która dalej nie obsługuje min-height).
bigZbig
14.06.2006, 14:27:02
@gekon - powiem szczerze - nie chcialo mi sie sprawdzac Twojej ostatniej propozycji. Zgaduje, ze jesli dasz wiecej tekstu przy obrazku (tak ze zajmie on wiecej miejsca niz wynosi wysokosc obrazka), to tekst ten w Firefoxie przykryje element, ktory sie pod nim znajduje.
lukasz.sekula
26.04.2007, 16:45:22
tak sobie przeglądam ten temacik i nasunęła mi się myśl, o której pisał kiedyś riddle na swoim blogu....

niestety IE odmiennie interpretuje min-height i height.... z niedowierzaniem zacząłem sprawdzać i na serio tak jest...

ale o IE można pisał dłuugie ballady guitar.gif tongue.gif

mówiąc odmiennie miałem na myśli 'na odwrót'
gekon
26.07.2007, 21:03:40
Wyciągam śmieci, ale cóż: http://glazar.info/float.html
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.