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.
<ul>
	<li>blablabla</li>
	<li>
		<div style="float:left;margin-right:10px">blablabla:</div>
		<div style="float:left">
			blablabla<br />
			blablabla<br />
			blablabla
		</div>
	</li>
	<li>blablabla</li>
</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:
<ul>  
    <li>blablabla</li>  
    <li class="clearfix">  
        <div style="float:left;margin-right:10px">blablabla:</div>  
        <div style="float:left">  
            blablabla<br />  
            blablabla<br />  
            blablabla  
        </div>  
    </li>  
    <li style="clear: left">blablabla</li>  
</ul>
vagy clearfix-et:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}
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ú.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    li.clearfix:before {
      content: ".";
      display: block;
      height: 1px;
      clear: both;
      visibility: hidden;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    /* IE6 */
    * html .clearfix {
      height: 1%;
    }
    /* IE7 */
    *:first-child + html .clearfix {
      min-height: 1%;
    }
  </style>
</head>
<body>
<ul>
  <li>blablabla</li>
  <li class="clearfix">
    <div style="float:left;margin-right:10px">blablabla:</div>
    <div style="float:left">
      blablabla<br />
      blablabla<br />
      blablabla
    </div>
  </li>
  <li>blablabla</li>
</ul>
</body>
</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. :-))