ugrás a tartalomhoz

Firefox 1.5 CSS float bug?

janoszen · 2005. Dec. 3. (Szo), 16.42
Sziasztok!

A http://www.kontenerpiac.hu/ oldalról lenne szó. Bal oldalt van egy keresődoboz, ami IE 6 és FF 1.0.7 alatt tökéletesen megjelenik, de a FF 1.5 alatt teljesen szétesik. Mintha nem venné figyelembe a clear:left paramétert.

Én toltam el valamit, vagy tényleg bugos a kedvenc böngészőm?
‹ képernyőméret js lekérdezése Popup ablak "Always on Top" ›
 ■
1

Én ezzel kezdeném...

Edit · 2005. Dec. 3. (Szo), 17.17
http://validator.w3.org/

:-)
2

Kijavítva, mégsem

janoszen · 2005. Dec. 3. (Szo), 20.18
Kijavítottam, mégsem jön helyre... Szal nem ez volt a hiba.
3

CSS?

Edit · 2005. Dec. 3. (Szo), 21.17
A CSS validátor is hibát jelez:

http://jigsaw.w3.org/css-validator/validator?uri=www.kontenerpiac.hu&usermedium=all
4

Vaólban

janoszen · 2005. Dec. 3. (Szo), 21.24
Valóban, de ennek nincs köze ehhez. Ezen az oldalon nem is fordul elő imgdisplay elem. Ha kiveszem, ugyanaz a hiba. Majd kijavítom azt is, csak még nem volt rá időm. A float-tal van baj a #sidebar-ban.
5

definition list

Edit · 2005. Dec. 3. (Szo), 22.45
Szerintem ezt a legegyszerűbben dl-lel lehet megoldani:

<form>
<dl>
<dt><label>...</label></dt>
<dd><select>...</select></dd>
...
</dl>
</form>


dt {float: left;}
dd {margin: 0;}
select {width: 150px; float: right;}
6

Nem definició

Jano · 2005. Dec. 3. (Szo), 23.34
A HTML elemeknek jelentése van. A definiciós litában definicó és azok magyarázatai vannak. Egy űrlap mező és a hozzá tartozó címke pontosan a fent is jelölt select és label HTML elemmel jelölendő és nem dt-dd párral.
7

Pápább a pápánál?

Edit · 2005. Dec. 4. (V), 00.19
Meghatározandó: Típus.
Meghatározás: ISO 20 lábas.

Meghatározandó: Telephely.
Meghatározás: Budapest.

Ez legalább annyira szemantikus, mint dialógusok felcímkézéséhez használni:

"Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."
http://www.w3.org/TR/html4/struct/lists.html#h-10.3

És ez csak "for example", azaz más célokra is használhatod.

Továbbá:

"A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls."
http://www.w3.org/TR/REC-html40/interact/forms.html

Szerintem még amellett is lehet érvelni, hogy a form valójában tabuláris adatokat tartalmaz, tehát hagyományos módszerrel táblázatként is fel lehet címkézni.
8

Megoldható, deeee

janoszen · 2005. Dec. 4. (V), 11.30
Üdv!

Hát köszi a válaszokat, de nem az a bajom, hogy nem tudom máshogy megoldani, hanem az, hogy a formcontrol-okat szeretném CSSből formázni és nem működik a float. Ha belegondolsz, nem csak ilyen helyzetekben használhatom, mint ahogy nem is csak ilyen helyzetben használom a floatot. És máshol is bugzik...
9

Mire?

Edit · 2005. Dec. 4. (V), 12.21
De mire kell a formcontrol? Ha csak szépen el akarod rendezni a labeleket és a mezőket, akkor semmi szükség rájuk.
12

Miért ne?

noocx · 2005. Dec. 4. (V), 18.23
Szia!

Szerintem jó megoldás lehet a divek használata az egyes label-select elemek
csoportosítására. Az elrendezésük pedig egyszerűbb mintha pl. <br>-eket szurkálnék be minden egyes select elem után csak azért mert sortörésre van szükségem, így a div mint block elem automatikusan hozza magával ezt a tulajdonságot és még egy csoportba is fogja a label-select párost, plusz karakteres böngészőben is jobban mutat.
Tehát szerintem semmi baj nincs azzal hogy div-et használ a probléma megoldására.

</noocx>
13

Miért formcontrol?

janoszen · 2005. Dec. 4. (V), 18.59
Üdv!

Hát, a formcontrol használatára irányuló kérdésekre igen egyszerű a válasz:

Hogyan lehet kézenfekvően megcsinálni azt, hogy mondjuk egy "formcontrol" a hozzá tartozó label-lel együtt kapjon egy színes hátteret? Ez esetben nem érdekes, de az admin-felületen használtam ilyet.

Másik kér(d)ésem az lenne, hogy valaki magyarázza el érthetően a float-ot, mert én úgy értelmeztem a talált leírásokat, hogy lehet clearing div nélkül is dolgozni.

Ha a saját logikámból indulok ki, akkor egy

div *
{
 float:left;
}
azt kellene, hogy jelentse, hogy az adott diven BELÜLI elemek balra floatolódnak, de a diven belül maradnak. Szal nem keverednek össze a div után jövő tartalommal.

Így van/kellene lennie? Mert nem ezt veszem észre.
14

<Nincs cím>

noocx · 2005. Dec. 4. (V), 19.14
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
15

Nem jól gondolod

Jano · 2005. Dec. 4. (V), 19.16
Amennyiben a te értelmezésed szerint működne, akkor a következő esetben a képet a második bekezdés már nem folyná körbe:

<p><img src="/lead.gif" style="width:200px;height:200px;float:left;">
Egy nagyon rövid bekezdés ami nem ér le a kép aljáig.
</p>

<p>Második bekezdés ami még szintén a kép mellé fog kerülni,
ha az első bekezdésben keves a tartalom és a kép elég mgas.</p>
Adj a p-nek háttérszínt, hogy lásd meddig ér. Ha az első bekezdésben növeled vagy csökkented a szöveg mennyiségét, láthatod, hogy csak a szöveg mennyiség befolyásolja a befoglaló p magasságát, a képé nem. Ha a szöveget teljesen kiveszed akkor a p magassága 0 lesz. Vagyis egy floatolt elem nincsen hatással az őt befoglaló elem magasságára.
(Ezalól kivétel amikor maga a befoglaló elem is floatolt, illetve ha overflow:auto tulajdonságú.)
10

Ok

Jano · 2005. Dec. 4. (V), 15.24
Miközben az okokat írtam, hogy miért ne, találtam egy értelmezést amivel el tudom fogadni :)

Előre bocsátom, hogy olyan okokat fogo írni amik túl lépnek a hagyományos böngésző értelmezésen és mindenféle HTML-t értelmezni tudó feldolgozóra gondolok.

Éreztem, hogy túl sarkos kijelentés volt. HTML tagből viszonylag kevés van, így sokszor valóban érdemes tágítani az egyes jelölők használati eseteit. Ennek a tágításnak mindenkinél máshol vannak a határai. Azt gondoltam:

- az input és label elemek a for és id attributúmuknál fogva már össze vannak kapcsolva, erre ráhúzni még egy dt-dd jellegű összekapcsolást is már felesleges.

- szerintem a szabványban példaként megadott párbeszéd jelölés már nagyon vad használat, ugyanis a dt-dd pár rettentően jól feldolgozható lenne. Pl egy keresőbe beírva: "definition:css" vissza adná találatként azokat a dd definició magyarázat bejegyzéseket amiknél a dt a definicó a CSS. Nyilván egy input mező nem lenne értelmes definició..

- aztán arra gonodoltam, hogy a definició és magyarázata szerep mellett a mostani esetben használt: tulajdonság-érték párok használata eléggé elterjedt. A fenti keresős mókát persze ez is tönkre tenné, hiszen pl egy elméleti "css deinition:position" keresésre nem a CSS position tulajdonság magyrázatát kapnánk hanem egy absolute vagy relative értéket.

- aztán azt gondoltam, ha a tulajdonság-érték párnak vesszük akkor jelöljük a form eredményében így a dolgokat de ne magában a formban. Arra gondlok ugyanis, hogy esetleg egy eszköz speciális módon kezeli a dt-dd párokat és speciálisn kezeli az űrlpokat és a kettő összeütközik. Pl egy telefonon keresztüli böngésző felolvassa az űrlap mező címkéjét, majd várja, hogy bediktáljuk, beüssük neki az értéket, egy definiciós listát viszont nem elejétől végéig elolvas, hanem felsorolja a listában lévő címeket.

- végül arra jutottam, hogy ha már speciálisan kezeljük a dt-dd taget akkor már lehet annyi esze annak a feldolgozónak, hogy az űrlapbn szereplő tagekre is van megoldása, aminek kb az az értelme, hogy amit ide beírsz, az eredményként ilyen jelölést kap.

Végül, hogy miért nem táblázat: mert űrlap mezők nem igazi mátrix szerű adatok. Mert táblázatban nem használható a fieldset mező az egyes beviteli mezők összefogására.
11

szörszálhasogatás

noocx · 2005. Dec. 4. (V), 17.53
Szia!

Ugye a tag szó helyett az elem elnevezést szeretted volna használni ?
Végülis nem túl nagy probléma csak kicsit zavaró amikor olvasom az irásod és az elemek helyett azok tagjaira gondolok.

</noocx>
16

Akkor kövi kérdés

janoszen · 2005. Dec. 5. (H), 17.45
Akkor a következő kérdésem:

Van a következő HTML kód:

 <div id="container">
  <div id="sidebar1">
   Valami tartalom, jó hosszú
  </div>

  <div id="sidebar2">
   Valami tartalom, jó hosszú
  </div>

  <div id="content">
   <p><img class="floatleft" /> Valami szöveg</p>
   <p class="clearleft">Valami szöveg</p>
  </div>
 </div>
És hozzá a CSS kód:

#sidebar1
{
 float:left;
 width:180px;
}

#sidebar2
{
 float:right;
 width:180px;
}

#content
{
 padding-left:180px;
 padding-right:180px;
}

.floatleft
{
 float:left;
}

.clearleft
{
 clear:left;
}
Hogy kellene ezt módosítani, hogy ne a sidebar-ok alatt kezdődjön a clearleft, hanem csak a content-en belüli floatokat vegye figyelembe?

Köszi
17

Ha jól értem...

Edit · 2005. Dec. 6. (K), 01.12
...akkor azt szeretnéd, hogy legyen két oldalt sidebar, középen meg a content - magyarán egy háromhasábos szerkezetet akarsz kialakítani. Három lépés:

1.
Jobb oldali sidebar: float right. Margin-left: content + baloldali sidebar szélessége.
2.
Content + baloldali sidebar: az egészet betenni egy extra divbe, ez fel fog csúszni a jobb oldali sidebar mellé.
3.
Az extra diven belül content: float right. Margin-left: a bal sidebar szélessége. A bal sidebar fel fog csúszni a content mellé.

"<p><img class="floatleft" /> Valami szöveg</p>"
Szerintem ilyen állat nincs.

Ha a szöveget a kép köré akarod folyatni, akkor simán megoldható egy float-tal az img elemen. Ha nem akarod, akkor semmit nem kell vele csinálni, a p magától az img alá fog törni.

Egyébként három hasábnál már elég komoly gondot jelenthet a hasábok közti fehér területek és a lábléc kialakítása. Én ahol lehet abszolút pozicionálást használnék float-ok helyett - de ez persze ízlés dolga.
18

Elvi dolog...

janoszen · 2005. Dec. 6. (K), 11.18
Udv!

Nem konkretan arrol volt szo, hogy most 3 hasabos v mi legyen, hanem arrol, h ha van egy div, amelyik ki van floatolva, amellett van meg egy div, abban egy ugyan olyan float es alatta egy clear-elt valami, akkor hogy oldhato meg, hogy ne a kulso kifloatolt div ala torje, hanem a belso (ez esetben a content) divben levo floatolt elem ala torje.
19

Extra div a barátod

Edit · 2005. Dec. 7. (Sze), 12.51
Nem egészen értem, miről van szó, de ilyen típusú problémák esetén a megoldás általában az, hogy becsomagoljuk az összetartozó dolgokat (jelen esetben: content, clear-elt div) egy extra div-be, és azt float-oljuk.
20

:(

janoszen · 2005. Dec. 7. (Sze), 13.48
Pont az lett vonla a lényege, hogy szemantikus legyen és extra div nélkül játsszon. Tiszta HTML kódot akarok. A sok extra div könnyen átláthatatlanná válhat.

Közben megoldottam a dolgot. Némi abszolut-relatív pozicionálást vittem be a dologba. Még játszom vele, hátha sikerült egy tiszta float megoldást találnom, ami kielégíti az igényeket.
21

Szemantika?

Edit · 2005. Dec. 7. (Sze), 16.39
Mit értesz azon, hogy "szemantikus" legyen? A div elem definíciója: "generic language/style container". Azaz a div stílus, vagy nyelv szempontjából összetartozó dolgok összecsomagolására való (pl. jelen esetben azok a tartalmak, amiket a lap közepére akarsz helyezni). Nincs olyan, hogy egy div nem szemantikus, mivel az egésznek a szemantikához semmi köze, tisztán a megjelenésről/nyelvről szól.
22

Üres div...

janoszen · 2005. Dec. 7. (Sze), 19.19
A CSS dizájn ellenzői leginkább az üres, jelentés nelküli diveket sérelmezték. És a neten több helyen láttam olyan blogokat, hogy a clearing diveket elhagyják, úgy csinálják meg az oldalakat, hogy ne kelljen. Ezt akarom elérni.
23

Plusz elem nélküli float clear

Jano · 2005. Dec. 7. (Sze), 21.45
3 módszer:

24

Cool

janoszen · 2005. Dec. 7. (Sze), 22.19
Ez lett volna a kérdés. :) Köszönöm szépen. :D
25

Miért jobb?

Edit · 2005. Dec. 8. (Cs), 00.38
Továbbra sem értem, hogy miért jobb egy csúnyán meghekkelt CSS mint egy szabályosan használt div. A div (span, br) elemet pontosan erre találták ki.
26

1 sor

attlad · 2005. Dec. 8. (Cs), 01.04
Mondjuk az overflow-os az 1 db sor alapból.

Attila
28

2 sor

Edit · 2005. Dec. 8. (Cs), 10.30
Alapból 2 sor (IE miatt):

_height:1%;
overflow:auto;

A kérdés elvi szempontból érdekes - szerintem sokan átestek a túlsó oldalra, és azt hiszik, hogy csak akkor lehet tartalmat felcímkézni, ha a címke leírja a tartalom jelentését. Ez általában igaz, kivéve a div, span és br elemeket. Erre mondtam azt, hogy egyesek pápábbak a pápánál, a W3C szerint ugyanis ezek az elemek STÍLUSHORGONYOK. Ha én az attlad szó 6 betűjét 6 különböző színnel akarom szedni, és beteszek 6 span-t, akkor teljesen szabványosan használom az elemet, erre való. Jelenleg az a divat, hogy inkább egy 200x nagyobb kép, csak nehogy legyen a kódban egy "üres" span vagy div, mert az nem "szemantikus". Hát tényleg - de miért kéne annak lennie?
30

Táblázatok elszaparododása

Jano · 2005. Dec. 8. (Cs), 11.04
Igazad van, hogy a DIV és SPAN általános, "jelentés nélküli" HTML elemek de alapvetően a cél a CSS kitalálásával az volt, hogy a kinézetet elkülönítsük a szerkezettől. Természetesen ez csak bizonyos határig megoldható, hiszen tudnunk kell a HTML fa felépítését különben nem tudjuk megírni a kiválasztóinkat se.

DE! Alapvetően az CSS-nek nem szabadna visszahatnia a HTML kódra. Tehát csak azért betenni egy plusz HTML elemet, mert ott nekem éppen kell egy kis piszok mert a grafikus úgy álmondta meg. Ha ugyanis elfogadjuk azt, hogy a CSS miatt állandoan a HTML-be nyúlkálunk akkor igazából nem különítettük el a dizájnt a szerkezettől. Pontosítok: ebben az esetben az alapvető dokumnetum szerkezetet jelölő elemek mellé betettünk stílus miatt szükséges elemeket.

Ha tovább visszük ezt a gondolatmenetet akkor egy esetleges grafika lecseréléskor ezeknek az elemeknek az egyrészét nem fogjuk használni és feleslegessé vállhat. Az ilyet pedig nem szeretjük.

Ez az elmélet. A gyakorlatban mivel egy elemhez korlatoltan tudunk csak stílus elemeket hozzátenni, pl csak egy háttérkép lehet ezért a legnagyobb trükközések mellett is előfordulhat, hogy az a jobb megoldás ha beteszünk egy plusz elemet. De ez egy döntés eredménye és nem a szabvány "ajánlott" megoldása!

Ha nem tartjuk magunkat ahhoz, hogy a lehető legkevesebb HTML elemmel oldjunk meg egy problémát akkor oda juthatunk mint anno a táblázatokkal. Elsőre nagyon jól nézett ki a dolog: 1-2 cellára osztottuk a táblázat és minden problémánk megoldodott. Aztán gondolkodás nélkül amikor látszólag fel kellett osztani megint a dizájn miatt egy területet, újabb beágyazott táblázatok jöttek és ez szépen elburjánzott. A gyakorlatban ezt szeretnék a kóderek elkerülni.
33

Alapból

attlad · 2005. Dec. 8. (Cs), 12.01
Azért írtam, hogy alapból, mert böngészőkben 1 sor ha minden igaz, az hogy az Explorer aktuális verzióiban néha 2 lényegtelen, lehet majd javítják következő verziókban.

Plusz információkat nyerhetsz ki a HTML kódból, ha szemantikus. De amúgy én nem minden esetben mondom azt, hogy ne legyen egy plusz HTML elem se a kódban. A válasz arra ment, hogy azt írtad csúnya CSS hack, szerintem meg ebben az esetben egyszerűbb/rövidebb/jobb az overflow megadása mint plusz div meg annak style.

Attila
27

<Nincs cím>

noocx · 2005. Dec. 8. (Cs), 04.10
Szia!

Mert egy div igazából szerintem tartalmi egységek összefogására való, és nem pedig mindenféle megjelenítési problémák kiküszöbölésére.

</noocx>
29

W3C

Edit · 2005. Dec. 8. (Cs), 10.37
Oké, noocx, majd ha te leszel a szabványügyi hivatal, akkor a te véleményedet fogom figyelembe venni :-)

Egyelőre maradok a W3C-nél:

DIV, SPAN: generic style/language container.

Tehát a div és a span mindenféle megjelenítési problémák megoldására való. A div pl. arra, hogy különböző tartalmakat az oldalon egy helyre csoportosítsunk. Lásd a Weblabor nyitólapján a jobb oszlopot:

-felhasználói profil
-szavazás
-könyvajánló
-archívum

Ezeknek az égvilágon semmi köze egymáshoz - leszámítva, hogy mindegyik elfér egy keskeny álló téglalapban. Ezért kerültek egy helyre.
31

Ezt olvasd el:

Jano · 2005. Dec. 8. (Cs), 11.13
Ajánlom ezt a bővebb leírást olvasd el: DIV

A DIV és SPAN jelentés nélküli általános elemek melyek arra szolgálnak, hogy a kóder a saját kedve szerinti strukturális(!) elemeket hozzon létre. Vagyis előre definiált jelentésük nincsen, a programozó ruházhatja fel őket jelentéssel.

Végül persze "finomhangolhatja" CSS segítségével az újonnan bevezett elemek kinézetét - a már definált többihez hasonlóan. De ebben van egy előidejűség: ha már megvan az eleme annak a kinézetét változtathatom és nem fordítva!
32

Oké...

Edit · 2005. Dec. 8. (Cs), 12.01
...akkor viszont ne használjuk a div-et több hasábos szerkezet kialakítására.

<div>
-felhasználói profil
-szavazás
-könyvajánló
-archívum
</div>

Hol itt a struktúra? Egyébként én 3 esetben szoktam extra címkét használni:

1. Float problémák.
Oldalanként 1 db plusz div-vel megoldható.

2. Többhasábos elrendezés margói
Erre kizárólag az IE dobozmodell-probléma miatt lehet szükség. Három hasábnál 1 db plusz div.

3. Inline stílus
Ha nincs logo img, és egy kicsit fel akarom dobni:
<h1>WEB<span>labor</span></h1>

Tehát oldalanként mondjuk 3 plusz elem. (És ez már egy elég összetett oldal, általában nem kell ennyi.) Ha ez burjánzás, akkor vállalom.

:-)
34

Struktúra

attlad · 2005. Dec. 8. (Cs), 12.21
Pl. lehet másodlagos tartalomnak hívni azokat az oldalrészeket és akkor összetartoznak.

Attila
35

Egyetértünk

Jano · 2005. Dec. 8. (Cs), 12.22
Jójó ez rendben van :) Ahogy másik bejegyzésben írtam gyakorlatban muszáj használni. Csak nem kell leszólni másikat ha arra törekszik, hogy minimalizálja a "felesleges" elemek számát. Abszolút igazad van abban, hogy egy idő után a tovább minimalizálás már esetleg nem éri meg, mert máshol van kár belőle: pl csúnya CSS hack és tetszett a kép méretes példád is!
36

Ki szól le kit?

Edit · 2005. Dec. 8. (Cs), 13.06
Szerintem csak beszélgetünk... Gondolom, a pápa verte ki a biztosítékot. Bocs Jano, nem tudtam, hogy ilyen törékeny vagy. Máskor majd jobban vigyázok.

:-)
37

2 szó 1 sor

Jano · 2005. Dec. 8. (Cs), 16.29
Ez a keskenyedő dizájn pont figyelmeztett arra, hogy elég lesz. Nem, a pápán nem akadtam ki :), arra gondoltam, hogy a "felesleges" DIV nélküli kodólásra mondtad, hogy felesleges annyit erőlködni, mert a DIV nem bűn. Szerintem zárjuk a szálat.
38

<Nincs cím>

noocx · 2005. Dec. 9. (P), 23.27
sorry ezeket megsem szeretnem beirni..