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
‹ Több HTML kimenet egyidejű megjelenítése az ablakban CSS függőleges igazítás, valamint min-height probléma ›
 ■
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:
#pic_container ul {
    margin: 5px;
    float:right;
    }
#pic_container li {
    float:left;
    }
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:

#normal li{
    list-style-type: circle;
    display: list-item;
    float: none;
    margin-left: 15px;
}
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:

<div id="pic_container">
   <ul id="pics">
   ...
   <ul id="normal">
   ...
</div>
CSS:

#pic_container ul#pics{
   padding:0; 
   list-style-type:none; 
   margin: 5px;
   float:right;
}
#pic_container ul#pics li {
   float:left;
}
#normal{
   padding: 0;
   border: solid lime 1px;
   text-align: left;
}
#normal li{
   list-style-type: circle;
   margin-left: 15px;
}
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 :(

#normal{
   border: solid lime 1px;
   text-align: left;
   position: relative;
   clear: both;
}
#normal li{
   float:left;
   list-style-type: square;
   display: list-item;
   margin-left: 15px;
}
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