Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Ograniczony clear
bigZbig
post
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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
bigZbig
post
Post #2





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
Go to the top of the page
+Quote Post

Posty w temacie
- bigZbig   Ograniczony clear   13.06.2006, 11:25:41
- - revyag   Użyj br. Kodbr.clr { clear:both; } [HTML] pob...   13.06.2006, 11:43:26
- - bigZbig   To nie rozwiązuje mojego problemu poniewaz to powo...   13.06.2006, 12:25:46
- - revyag   Masz rację, dla takiego rozwiązania layoutowego ch...   13.06.2006, 12:54:47
- - bigZbig   ustalanie na sztywno szerokosci kolumn nie wchodzi...   13.06.2006, 13:25:40
- - revyag   Zawsze możesz to zrobić w mnie wyrafinowany sposób...   13.06.2006, 15:03:54
- - ActivePlayer   pseudokod: Kod<div style="min-height: ...   13.06.2006, 15:52:05
- - bigZbig   @ActivePlayer - Twoje rozwiazanie to wlasnie to o ...   13.06.2006, 16:20:01
- - ActivePlayer   teraz zobacz ponownie moj kod _height: czyta tyl...   14.06.2006, 08:34:20
- - bigZbig   @ActivePlayer - wybacz - te kreske przed height uz...   14.06.2006, 10:27:52
- - gekon   Tę kreskę rozumie tylko IE6, IE7 niestety nie. Są ...   14.06.2006, 11:01:17
- - bigZbig   @gekon Zapis height: auto !important nadpisuje...   14.06.2006, 11:15:42
- - gekon   Sorry, pisałem z palca. [HTML] pobierz, plain...   14.06.2006, 14:21:11
- - bigZbig   @gekon - powiem szczerze - nie chcialo mi sie spra...   14.06.2006, 14:27:02
- - lukasz.sekula   tak sobie przeglądam ten temacik i nasun...   26.04.2007, 16:45:22
- - gekon   Wyciągam śmieci, ale cóż: http://glazar.info/float...   26.07.2007, 21:03:40

« Następny starszy · CSS · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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