ugrás a tartalomhoz

Lista elemek hibás megjelenése

balazsgabi · 2005. Nov. 20. (V), 00.43
Üdv Mindenkinek!

Az alábbi oldalon van egy kis gondom, amire nem tudok magamtól rájönni.
-Az utolsó <li> elem miért nem kerül új sorba?
-Ugyanezek IE-ben miért vannak egymás után ömlesztve?

gábor
 
1

over-styled

Anonymous · 2005. Nov. 20. (V), 01.49
Ez egy kicsit agyon van css-ezve, én úgy látom. Kicsit egyszerűsíteni kellene a layout-ot, már ami a stylesheetet illeti.
Egyébként ez a kettő kuszálja össze azt a listát, a mi a <div id="comment">-ben van:
  1. #pic_container ul {  
  2.     margin5px;  
  3.     float:right;  
  4.     }  
  5. #pic_container li {  
  6.     float:left;  
  7.     }  
Ha sok listát használsz, és mindegyiket másképp, akkor ne írj ilyen általánosan érvényesülő float-okat.

Gyulus
2

clear:

balazsgabi · 2005. Nov. 22. (K), 09.19
köszönöm, ez bennem is felmerült (over-styled), viszont egyelőre annak is örülök ha úgy néz ki mint amit szeretnék. A "háttér" gondolom a gyakorlattal együtt egyszerűsödni fog.
Viszont nem értem mit értesz általánosan érvényesülő float-okon? A clear deklarációt nem erre találták ki?
Egyébként ezért "azonosítottam" be a szóban forgó <ul>-t, hogy ne az öröklődött tulajdonságokkal formázódjon.

A fent említett két szelektort ha modosítom, vagy mellőzöm akkor nem azt kapom amit szeretnék. (Vagy nem jó helyre nyúlok)

Összefoglalva: Több listát, amik különböző néven futnak, de nincsenek egymásba ágyazva, nem lehet egymástól függetlenül formázni egyazon oldalon belül?



gábor
4

float és margin-left

nAgYu · 2005. Nov. 25. (P), 08.59
CSS:
  1. #normal li{  
  2.     list-style-typecircle;  
  3.     displaylist-item;  
  4.     floatnone;  
  5.     margin-left15px;  
  6. }  
Nálam ez egész tűrhetően működik (IE 6, FF 1.07).
Ha nem ezt akartad elérni, akkor bocs, de félreértettelek...

Üdv.:
nAgYu
5

így gondoltam

balazsgabi · 2005. Nov. 25. (P), 12.55
kössz, most már csak az a homály, h a " nem lebegtetem és float:none; " között mi a különbség. Az öröklődéshez van valami köze?
Az eredményt látom csak a logikáját nem értem.
gábor
6

A logika

nAgYu · 2005. Nov. 25. (P), 13.57
Őszintén bevallom, trehány a megoldásom, mert mindössze annyit tettem, hogy az eredeti CSS-ben található float: left;-et átírtam. Egyszerűbb lehetett volna, ha simán kitörlöm...

Ha nem "lebegteted" akkor nem is "lebeg".

Üdv.:
nAgYu
7

logika vs IE

balazsgabi · 2005. Nov. 25. (P), 14.44
igazad van, de csak FF-ban nem lebeg, IE-ben ömlesztve van továbbra is amennyiben nem lebegtetem :none értékkel.

Tehát továbbra is azt sztném tudni, hogy a " nem lebegtetem és float:none; " között van-e érdemi különbség, vagy ez is IE bug?

gábor
9

Bocs, hogy csak most...

nAgYu · 2005. Nov. 28. (H), 09.27
... válaszolok, de az asszonnyal is törődnöm kell néha...
Ma megittam gyorsan 4 kávét, és átnéztem újra.
Az IE szokásához híven kissé másképpen értelmezi a dolgokat, mint kellene, de megoldható, pl. így:

HTML:
  1. <div id="pic_container">  
  2.    <ul id="pics">  
  3.    ...  
  4.    <ul id="normal">  
  5.    ...  
  6. </div>  
CSS:
  1. #pic_container ul#pics{  
  2.    padding:0;   
  3.    list-style-type:none;   
  4.    margin5px;  
  5.    float:right;  
  6. }  
  7. #pic_container ul#pics li {  
  8.    float:left;  
  9. }  
  10. #normal{  
  11.    padding0;  
  12.    bordersolid lime 1px;  
  13.    text-alignleft;  
  14. }  
  15. #normal li{  
  16.    list-style-typecircle;  
  17.    margin-left15px;  
  18. }  
Vagyis a #pic_container-en belül minden ul külön id-t kapott, így már az IE sem örökíti a float: left-et.

Az eredeti CSS-ben #pic_container li-nél szerepelt a float: left, így az IE úgy döntött, hogy ez minden li elemre érvényes, még a #normal li-re is. Ha megkülönbözteted őket, akkor ez kivédhető.

Üdv.:
nAgYu
8

clear:

balazsgabi · 2005. Nov. 25. (P), 15.00
ez is csak böngészőkben müxik, vagy tényleg nem értem a logikáját :(
  1. #normal{  
  2.    bordersolid lime 1px;  
  3.    text-alignleft;  
  4.    positionrelative;  
  5.    clearboth;  
  6. }  
  7. #normal li{  
  8.    float:left;  
  9.    list-style-typesquare;  
  10.    displaylist-item;  
  11.    margin-left15px;  
  12. }  
gábor
3

nem jól kérdeztem?

balazsgabi · 2005. Nov. 24. (Cs), 21.54
mitől lesz valami általánosan érvényesülő?

gábor