Üdv mindenkinek!

Elkezdtem az első, táblázat nélküli honlapomat készíteni, amelyben minden pozícionálást CSS-ben valósítok meg.
Jól haladok, de egy apró esztétikai hibára lettem figyelmes:

Ha két input-mező van egymás alatt (jelen esetben két text-típusú), akkor az IE a kettő közt mindig kb. 2px-lel nagyobb helyet hagy, mint a Firefox és az Opera. Próbáltam már margin-t, paddinget, mindent.
Arra emlékszem, hogy ez mindig is gond volt, de táblázatokkal sikerült kiküszöbölni a megjelenítése eltérést.

A kódom:


És a CSS:

Amúgy, ha nem szeretnél táblázatot itt van a dobozolás:


CSS Weblabor/Dobozolás

Igen, köszi, természetesen már olvastam....
Nincs is semmi gondom, csak ez...

Próbáld meg, hogy nem rakod bekezdésekbe (mert nem oda vakló), hanem mondjuk egy egyszerű sortöréssel teszed új sorba. Ezután pusztán az input mezőket manipuláld a css-el. Nem tudom, hogy mi lesz az eredménye, de próba...

Azt hiszem, már próbáltam.
Adjak neki margin-t, paddinget?

Persze. Azt mindenképpen változtasd, hiszen az okozhatja csak a távolságot. Elsősorban margót változtasd, mivel padding az az input mező belső kitöltését kell szabályozza, tehát, hogy a bele írt szöveg milyen távolságra legyen a mező keretétől. A margó pedig a mező körülötti részt jelöli, ahová más elem nem "férkőzhet" be.

Sajnos a különbség ugyanúgy megmaradt.

Mérget veszek, hogy már Ti is találkoztatok a következő problémával.
Megint az IE.

Szóval azt csinálja, hogy a bekezdések között (p) egy többpixeles helyet hagy, amit nem tudok eltűntetni. Margin, padding mind 0px függőleges irányban, ennek ellenére a kihagyás megvan.

Mozilla és Opera nem csinál ilyet. Biztos meg lehet oldani ezt is valahogy, de hogyan?

A között mit jelent? Felette, alatta, mellette? Milyen tagben vannak a bekezdések?

A bekezdések (tehát a <p></p> közötti szövegek) egymáshoz viszonyított helyzete az IE-ben több pixellel tágabb, mint a többi böngészőben. Azaz csinál oda egy rést.
Azt hiszem, alattuk.

Van egy divem, azon belül pedig a már említett bekezdések, szóval semmi extra.

Itt a kód szóban forgó részlete:



Esetleg a line-height kavarhat be?
u.i.: Megnéztem, és nem az.

Ha jól értem, akkor a letter-spacing és/vagy a word-spacing tulajdonságot akarod megváltoztatni. Bár nem tudom, hogy az IE hogyan reagál rá.

Nem érted jól.
Mindkettő egyébként jól működik IE alatt.

A bajom az, hogy a bekezdésekbe rakott szövegek helyzete egymástól viszonyítva több pixellel nagyobb távolságra esik IE-ben, mint a többiben Függőleges irányban. Tehát a szövegrészek - bekezdések (tehát nem a betűk, nem a szavak) között nagyobb a távolság, mint kellene. Mintha padding vagy margin lenne ott, de nincs.
Most kb. tíz pixel távolság van közöttük, IE-ben meg 14, vagy valami ilyesmi.

Akkor annak marginnak kell lennie. Nézd meg, hogy nincs-e felüldefiniálva valahol. Változtasd meg a margó értékét úgy, hogy biztosan látható legyen, hogy hat-e rá a tulajdonság.

Most már falra mászom.

Semmi margin nincs függőlegesen beállítva. Hatszor ellenőriztem végig.
Ezután megpróbáltam egy képet betenni az egyik bekezdés helyett. Ez már a végső elkeseredésemben történt meg.

És olyat láttam, amit még soha:
Az IE szépen egymás alá rendezte őket, semmi rés, ugyanúgy, mint a Mozillában.
Kivéve az utolsót: ott megvolt a rés. Tehát négy normális egy alatt, legalul pedig egy réses.

És a legelképesztőbb az egészben az, hogy a kódjuk olyannyira ugyanaz, hogy az egész oldal adatbázisból van ciklussal kiíratva. Tehát nem is értem, mi alapján azonosítja az utolsó bekezdést, amit 9 pixellel lejjebb helyez el, mint kellene. (De ezt nagyon következetesen, minden oldalon így csinálja.)

Mi ez, ha nem X-Akta?
(ja, és megjegyzem, páratlan számmal nem is szoktam pozícionálni, tehát ezt a 9-et sem értem, honnan veszi...)

Később:
Valamilyen szinten rájöttem, mi a hiba.
Az előző kódban nem látható "szovala" osztályú, 4 pixel magas bekezdést húzza ki az IE 9px magasságúra, azért is kellett bele a no-repeat tulajdonság. Csak nem értem, miért húzza ki. Ha egy max-height-ot rakok bele (4px), akkor visszaugrik 0-ra, de ha belekerül egy min-height is (szintén 4px), akkor újra 9.
Egyértelmű, hogy a magasságot nem szereti. Márpedig azt valahogy meg kell adnom.

Na mégis megoldottam, noha az alapprobléma mindeddig ismeretlen, és vélhetően az is marad.
Kapott az említett bekezdés egy overflow: hiddent, és most minden úgy jelenik meg, ahogy annak meg kell jelennie. IE

Ezt a kódot:



hogyan tudom css-ben megadni? Persze, úgy, hogy működjön is?

Gyakorlatilag úgy, hogy egy-az-egyben átírod css-fájlba.



És a divnek adj egy azonosítót, amivel csak arra hivatkozhatsz.

Köszi. Sejtettem, mert én is erre gondoltam, csak az a baj, hogy nem igazán akaródzik működni ...

A z-index és a left, top mire kell neked? Biztosan menne azok nélkül is...
Persze függően attól, hogy mit szeretnél csinálni. Hátha meg lehet oldani nélkülük is, máshogy.

Még mindig a szöveg elhelyezéssel küzdök. A fenti megoldás, mint kiderült jó lenne, ha a böngészők egyformán értelmeznék. (A rétegeket a Firefox kb. 15 pix-el lejjeb teszi) A floatos megoldás meg eléggé félresikerült ... Valahogy nem jön össze ez a diven belüli jobbra-balra külön szöveg pozícionálás ...

A z-index ahhoz kellett volna, hogy rá lehessen "rétegelni" a div területe fölé a keretet, és így az ebben lévő szöveget ...

Úgy mondanám inkább, hogy az IE teszi 15px-lel feljebb...

Az aljáról: lehet, hogy nem tűnik elsőre túl elegáns megoldásnak, de én megmondom, mit csinálnék: az egyik oldali szöveget (pl. a copyright-ot, ami úgysem változik) betenném a háttérbe. Viccen kívül.

Egyébként a float-os rész miért nem megy? Mit csinál / nem csinál jól?

A hátteres részre én is gondoltam, de mivel 1px széles a háttérkép ... Jó, tudom, szerkesszem át ...

A floatra megbolondul, duplázza az alap divet.

De ha van jó megoldásod erre, azt örömmel venném ...

De mire pontosan?
Az alsó sávra gondolsz? Arra ez.

Na, figyelj. Itt van egy apró részlet a jelenleg fejlesztés alatt álló és szigorúan titkos új odalamból:



A .tart osztályú diven belül van a két másik div, egymás mellett, egyik a bal oldalon, a másik a jobbon.

Köszönöm, kipróbálom.

Ésss igen!
Köszönöm!

Ami hiányzott, az a margin: 0px a p definíciójához, illetve a szélesség, és magasság megadása a lebegő diveknek!

Mégegyszer köszönöm!

A bottommenu egy div, a weboldal alján. Ebbe került egy float div - btmleft (bottommenuleft) - aminek van egy alapértelmezett háttere a-val (link) megadva, illetve ugyanígy a: hover-nek szintén egy háttér. IE-ben, és Firefoxban is működik, de Firefoxban nem a teljes kép látszik, hanem a kép kb. 1-2 pixelnyi széles része. Mitől lehet ez?

A html kód:



A weboldal itt található. Lsd. alja bal oldal.

Hiába nézem, semmilyen linket nem látok.

Nyomd meg az F5-öt Firefoxnál.

Egy boritékot kell látnod alul a verziószám felett. Internet Explorerrel látszik szépen. Csak Firefoxnál nem jó.

Arra viszont rájöttem már, hogyha beteszek összesen 5 db -ot, akkor Firefoxnál is látszani fog, de akkor meg a pozíció csúszik el ...

Az !important sem használt ... próbálkoztam berakni a &nbsp; helyére egy átlátszó 18*11-es gif képet, de úgy meg teljesen eltünt a boriték mindkét böngészőben ...

Ez jó kérdés. Próbálkozz meg egy padding: 0-val.

De láttad a boritékot?

Ahol nem látsz padding, vagy margin 0-t, ott azért nincs, mert a betétele sem okozott pozitív változást. Ezért kivettem, feleslegesen ne legyen ott.

Ja értem. Úgy látom Foxival a borítékot, ahogy mondtad.
CSS-képváltással őszintén szólva még soha nem foglalkoztam, úgyhogy erre nem tudok semmilyen konkrét megoldást adni.

Megoldva: a float div szélességét növelnem kellett 12 px-el, és a margin-right-nak -12 px-et kellett adnom. Ne kérdezd, miért így működik - míg így is van 2 px eltérés a Firefox, és az Internet Explorer között, de még mindig jobb, mint az eddigi 12.

Már csak egy kérdés: melyik az elegánsabb a "térköz" beállítására:
<img src="images/email.gif" alt=""> <- ez, vagy
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <- ez?

Egyik sem elegáns, de én inkább a szöveges verziót használom.
"Nagy" weboldalaknál inkább a gifspaceres megoldásokat láttam. Szerintem felesleges újabb kép, ráadásul sokkal bonyolultabb módosítani, mint a non-breaking space-t.

Na, megoldva. Halgattam rád, space került végül is a html-ben. (Így 24 bájttal kisebb lett a weboldal, és kb. 100 bájttal kisebb lett a css is )

Betettem a letöltés lapba is, ott is szépen megy. Mégegyszer köszi a segítséget.

Nagyon szívesen, örülök, ha segíthettem.

Formokat szeretnék egymás mellé helyezni, természetesen táblázat nélkül. A formok csak gombot és hidden inputokat tartalmaznak, azaz a két gombot szeretném valahogyan egymás mellett látni. Vajon hogy'?

Első körben azt javasolnám, amit Te is nekem:


Csinálni egy div-et, ebbe két div float opcióval és ezekbe a div-ekbe form. Beállítása már az ismert módon css-el.

Látod, ez eszembe sem jutott... mindjárt kiderítem, hogy ér-e annyit egyáltalán az egész.

A probléma adott: van egy divem, amiben két másik div van, float left és right tulajdonságokkal, tehát két oszlopot képeznek. A bal oldali divbe szeretnék tenni még egyet, float right-tal, tehát illeszkedve a jobb széléhez.

A gond az, hogy a float ebben az esetben semmit sem ér. Így maradt a top left pozícionálás, ámde: mivel az egész weblap középre van rendezve, absolute értéket adva a positionnek nem lehet megoldani, hiszen a böngészőablak átméretezésekor más helyre kerül a div. Így position relative-val próbálkozom, ami ugye a szülőobjektumához viszonyítja a helyzetét. Ez már fix - Firefoxban és Operában, de az IE kétszer olyan messze teszi a szélétől, mint kellene (tehát ez sem jöhet így szóba).

Milyen megoldás lehet még?

Semmilyen. Mivel a float egy lebegő tulajdonság, függ a szülő div szélességétől. Innetől ha a böngésző ablak átméreteződik, az is "mozog". Sajnos csak a table megoldást tudom ebben a helyzetben ajánlani a két oszlopnak, és ebbe a diveket. Nekem sem jött össze csak divvel a dolog. Egy teljes napot próbálkoztam különböző megoldásokkal és kereséssel, de megnyugtató, szép, és tökéletes megoldást a table adott. Egy harmadik alternatíva az lehet még, hogy esetleg az IE-re beállítani a css-t (bár ebben az esetben ez nehéz lesz, mivel az IE sajnos valamiért "tolja" a floatolt diven belüli float tulajdonságot (ne kérdezd, miért), vagy még a marginnal lehetne játszani, tehát a bal oldali divbe kerülő divet IE-ben marginnal beállítani, és a kész beállításokat IE hacként menetni egy külön css fájlba.

Áh, akkor inkább table-lel. Köszönöm, így legalább látom, mire nem érdemes pocsékolni az időt. Már megint az IE.

CSS - Weboldal táblázatok nélkül !

Igen, de a jelek szerint még nincs mindenre megoldás.

Kép
Szerintetek egy ilyen szerkezetű honlapot, hogyan tudok csinálni? Nem értek a CSS-hez. Ezzel szerintem lehet. Nem?

Igen, lehet.

Hogyan tudnék nekiállni?

Kezdj el tanulni CSS-t:
Weblabor - CSS alapjai I.-VII.
Weblabor - táblázat nélküli oldalfelépítés

Sziasztok!

Hogyan lehetne egy div-et úgy a böngészőablak aljára pozícionálni, hogy ha átméretezem az ablakot, akkor is ott legyen?

(Nehezebb verzió: Legyen a böngészőablak alján, ha a fölötte levő box nem ér el addig, különben legyen a lap alján).

Köszönöm előre is az ötleteket!