Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Ograniczony clear
bigZbig
post 13.06.2006, 11:25:41
Post #1





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

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


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
revyag
post 13.06.2006, 11:43:26
Post #2





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

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

Użyj br.
Kod
br.clr {
    clear:both;
}

[HTML] pobierz, plaintext 
  1. <p class="text"></p><br class="clr" />
[HTML] pobierz, plaintext


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

------
Go to the top of the page
+Quote Post
bigZbig
post 13.06.2006, 12:25:46
Post #3





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

To nie rozwiązuje mojego problemu poniewaz to powoduje ustawienie Podsumowania pod lewa kolumna.


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
revyag
post 13.06.2006, 12:54:47
Post #4





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

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

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).


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

------
Go to the top of the page
+Quote Post
bigZbig
post 13.06.2006, 13:25:40
Post #5





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

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


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
revyag
post 13.06.2006, 15:03:54
Post #6





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

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

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.


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

------
Go to the top of the page
+Quote Post
ActivePlayer
post 13.06.2006, 15:52:05
Post #7





Grupa: Przyjaciele php.pl
Postów: 1 224
Pomógł: 40
Dołączył: 6.07.2004
Skąd: Wuppertal

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

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
Go to the top of the page
+Quote Post
bigZbig
post 13.06.2006, 16:20:01
Post #8





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

@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.

Ten post edytował bigZbig 13.06.2006, 17:31:09


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
ActivePlayer
post 14.06.2006, 08:34:20
Post #9





Grupa: Przyjaciele php.pl
Postów: 1 224
Pomógł: 40
Dołączył: 6.07.2004
Skąd: Wuppertal

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

teraz zobacz ponownie moj kod smile.gif

_height: czyta tylko IE smile.gif... i sie rozciąga smile.gif
Go to the top of the page
+Quote Post
bigZbig
post 14.06.2006, 10:27:52
Post #10





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

@ActivePlayer - wybacz - te kreske przed height uznalem za literowke.


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
gekon
post 14.06.2006, 11:01:17
Post #11





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

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


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
bigZbig
post 14.06.2006, 11:15:42
Post #12





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

@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.


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
gekon
post 14.06.2006, 14:21:11
Post #13





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

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).

Ten post edytował gekon 14.06.2006, 14:21:39


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
bigZbig
post 14.06.2006, 14:27:02
Post #14





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

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

@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.


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
lukasz.sekula
post 26.04.2007, 16:45:22
Post #15





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 8.03.2007
Skąd: Nysa

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

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'

Ten post edytował lukasz.sekula 26.04.2007, 16:46:50
Go to the top of the page
+Quote Post
gekon
post 26.07.2007, 21:03:40
Post #16





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Wyciągam śmieci, ale cóż: http://glazar.info/float.html


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
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: 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 Wersja Lo-Fi Aktualny czas: 12.06.2025 - 13:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn