ugrás a tartalomhoz

gond egy li - div szerkezettel

Blackfriar · 2011. Feb. 4. (P), 22.45
Sziasztok !
Az alábbi szerkezettel nem boldogulok. Az utolsó li tartalma belecsúszik a div-be.
  1. <ul>  
  2.     <li>blablabla</li>  
  3.     <li>  
  4.         <div style="float:left;margin-right:10px">blablabla:</div>  
  5.         <div style="float:left">  
  6.             blablabla<br />  
  7.             blablabla<br />  
  8.             blablabla  
  9.         </div>  
  10.     </li>  
  11.     <li>blablabla</li>  
  12. </ul>  
A segítségeteket előre is köszönöm.
‹ Linkek szinei jquery cycle ›
 ■
1

clear vagy .clearfix

Poetro · 2011. Feb. 4. (P), 22.50
Használhatsz clear css tulajdonságot:
  1. <ul>    
  2.     <li>blablabla</li>    
  3.     <li class="clearfix">    
  4.         <div style="float:left;margin-right:10px">blablabla:</div>    
  5.         <div style="float:left">    
  6.             blablabla<br />    
  7.             blablabla<br />    
  8.             blablabla    
  9.         </div>    
  10.     </li>    
  11.     <li style="clear: left">blablabla</li>    
  12. </ul>  
vagy clearfix-et:
  1. .clearfix:after {  
  2.   content: ".";  
  3.   display: block;  
  4.   height: 0;  
  5.   clear: both;  
  6.   visibility: hidden;  
  7. }  
  8. /* IE6 */  
  9. * html .clearfix {  
  10.   height: 1%;  
  11. }  
  12. /* IE7 */  
  13. *:first-child + html .clearfix {  
  14.   min-height: 1%;  
  15. }  
2

köszönet

Blackfriar · 2011. Feb. 4. (P), 23.55
Nagyon köszönöm a segítséged Poetro.
Mindenhová bepróbáltam a cleart, csak a li-be nem. :-)

Ami viszont érdekes, IE8 alatt a div-et tartalmazó li előtti jel (disc, circle stb.) rossz helyen van (gyakorlatilag a sor végén jelenik meg).
3

megnéztem

Blackfriar · 2011. Feb. 5. (Szo), 18.42
Megnéztem, a li előtti jel csak FF és Opera esetében van jó helyen, IE és Chrome esetén a sor végén jelenik meg. Ez mivel orvosolható?
4

Nem float

Poetro · 2011. Feb. 5. (Szo), 19.04
Például azzal, hogy a blokkban nem minden elemet float-olsz. Ha mégis akkor a clearfix mintájára be kell szúrni egy elemet az li elejére ami nincs float-olva és block típusú.
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title></title>  
  6.   <style type="text/css">  
  7.     li.clearfix:before {  
  8.       content: ".";  
  9.       display: block;  
  10.       height: 1px;  
  11.       clear: both;  
  12.       visibility: hidden;  
  13.     }  
  14.     .clearfix:after {  
  15.       content: ".";  
  16.       display: block;  
  17.       height: 0;  
  18.       clear: both;  
  19.       visibility: hidden;  
  20.     }  
  21.     /* IE6 */  
  22.     * html .clearfix {  
  23.       height: 1%;  
  24.     }  
  25.     /* IE7 */  
  26.     *:first-child + html .clearfix {  
  27.       min-height: 1%;  
  28.     }  
  29.   </style>  
  30. </head>  
  31. <body>  
  32. <ul>  
  33.   <li>blablabla</li>  
  34.   <li class="clearfix">  
  35.     <div style="float:left;margin-right:10px">blablabla:</div>  
  36.     <div style="float:left">  
  37.       blablabla<br />  
  38.       blablabla<br />  
  39.       blablabla  
  40.     </div>  
  41.   </li>  
  42.   <li>blablabla</li>  
  43. </ul>  
  44. </body>  
  45. </html>  
5

valami más baj van

Blackfriar · 2011. Feb. 5. (Szo), 19.22
Köszi a választ Poetro, de itt valami más baj van, mert így sem változik a helyzet.
Ha az általad javasolt megoldásként csak az utolsó li-be teszek egy clear:left-et, akkor FF és Opera alatt minden OK. Viszont IE8 és Chrome9 alatt a li jele nem a sor kezdetén van, hanem a sor végén. Ez egy vicc komolyan mondom. Ha ezt valaki meséli nekem, arra azt mondanám, hazudik. De nem, ez a való világ !!! :-))
6

Nem változik?

Poetro · 2011. Feb. 5. (Szo), 19.36
Mit értesz azon, hogy nem változik a helyzet? A fenti HTML teljesen jól néz ki IE8 és Chrome9 alatt. Ez nem vicc, erről szól a webfejlesztésnek a front-end része. Szokj hozzá, vagy foglalkozz valami mással. És hidd el manapság már jobb a helyzet, mint 2-5 évvel ezelőtt.
7

itt

Blackfriar · 2011. Feb. 5. (Szo), 19.43
http://www.esztergomifutomuvek.hu/?p=versenykiiras2

"Összetett" címszónál a "korcsoportok" részt nézd meg FF és IE alatt.
8

Mi tart vissza?

Poetro · 2011. Feb. 5. (Szo), 20.10
Mi tart vissza attól, hogy a fenti CSS-t alkalmazd? Mivel az működik, a másik megoldás meg nem a te esetedben ezekben a böngészőkben.
9

semmi

Blackfriar · 2011. Feb. 5. (Szo), 20.26
Semmi nem tart vissza. Betettem és ugyanúgy rossz helyen jelent meg a circle IE8 és Chrome9 alatt, ezért vettem aztán ki. Az igaz, hogy az IE6 és 7-re vonatkozó részt nem tettem bele, de mivel IE8 és Chrome9 alatt próbálétam, ezért gondolom nem annak hiánya okozta a gondot.
10

kedves

Blackfriar · 2011. Feb. 5. (Szo), 21.40
Kedves Poetro !
Most úgy tűnik, működik a dolog. Köszönet a segítségedért !
De ettől még fenntartom a véleményem: kupleráj van a webprogramozás háza táján. :-))