google 0 Share Posted June 9, 2005 Ü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: Azonosító: <input type="text"></p> <p>Jelszó: <input type="password"></p> És a CSS: .inbox p { margin: 5px; font-size: 10px; cursor: default; } .inbox input { width: 120px; height: 16px; background-color: #09548C; font-family: Verdana, Helvetica, Sans-serif; font-size: 9px; color: #FFFFFF; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000033; border-right-color: #000033; border-bottom-color: #000033; border-left-color: #000033; } Link to comment Share on other sites More sharing options...
Gigah3rtz 0 Share Posted June 9, 2005 Amúgy, ha nem szeretnél táblázatot itt van a dobozolás: CSS Weblabor/Dobozolás Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 9, 2005 Igen, köszi, természetesen már olvastam.... Nincs is semmi gondom, csak ez... Link to comment Share on other sites More sharing options...
Ajnász 0 Share Posted June 9, 2005 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... Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 9, 2005 Ezután pusztán az input mezõket manipuláld a css-el. Azt hiszem, már próbáltam. Adjak neki margin-t, paddinget? Link to comment Share on other sites More sharing options...
Ajnász 0 Share Posted June 9, 2005 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. Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 9, 2005 ír: Sajnos a különbség ugyanúgy megmaradt. Link to comment Share on other sites More sharing options...
tzoli 0 Share Posted June 13, 2005 Szisztok! Hogyan tegyem odébb kb. egy tab pozícióval a kiírást, mint a szövegszerkeztõkben? A sor elején van egy szöveg, és utána némi kihagyással szeretnék írni. Valahogy így: Szöveg1 Szöveg2 Ha lehet mellõzném a táblázatot. Link to comment Share on other sites More sharing options...
tzoli 0 Share Posted June 13, 2005 Css, margin. Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 17, 2005 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? Link to comment Share on other sites More sharing options...
Ajnász 0 Share Posted June 17, 2005 A között mit jelent? Felette, alatta, mellette? Milyen tagben vannak a bekezdések? Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 17, 2005 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: .bodleft { float: left; margin: 0px; padding: 0px; width: 450px; } .bodleft p { margin: 0px; text-align: left; padding: 0px 16px 0px 16px; font-size: 11px; color: #000033; line-height: 18px; text-indent: 11px; cursor: default; background-image: url(images/pback.jpg); } Esetleg a line-height kavarhat be? u.i.: Megnéztem, és nem az. Link to comment Share on other sites More sharing options...
Ajnász 0 Share Posted June 17, 2005 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á. Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 17, 2005 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. Link to comment Share on other sites More sharing options...
Ajnász 0 Share Posted June 18, 2005 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. Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 18, 2005 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? ír: (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. Link to comment Share on other sites More sharing options...
google 0 Author Share Posted June 18, 2005 :olé: :bibibí: 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. íl: IE Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 16, 2005 Ezt a kódot: <div style="position: absolute; width: 150px; height: 19px; z-index: 1; left: 107px; top: 804px" hogyan tudom css-ben megadni? Persze, úgy, hogy mûködjön is? Link to comment Share on other sites More sharing options...
google 0 Author Share Posted July 16, 2005 Gyakorlatilag úgy, hogy egy-az-egyben átírod css-fájlba. div { position: absolute; width: 150px; height: 19px; z-index: 1; left: 107px; top: 804px; } És a divnek adj egy azonosítót, amivel csak arra hivatkozhatsz. Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 16, 2005 Köszi. Sejtettem, mert én is erre gondoltam, csak az a baj, hogy nem igazán akaródzik mûködni ... Link to comment Share on other sites More sharing options...
google 0 Author Share Posted July 16, 2005 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. Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 16, 2005 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 ... Link to comment Share on other sites More sharing options...
google 0 Author Share Posted July 16, 2005 Ú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? Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 16, 2005 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 ... Link to comment Share on other sites More sharing options...
google 0 Author Share Posted July 16, 2005 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: .tart { width: 600px; } // Ez a fõ keret, ami mindent tartalmaz. .left { float: left; width: 480px; } // Ez a bal oldali szövegdoboz. .right { float: right; width: 120px; } // Ez a jobb oldali szövegdoboz. 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now