Jump to content
GSForum - Segélyvonal

Pozícionálási megoldások


google
 Share

Recommended Posts

google

Ü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

Gigah3rtz

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

google

Igen, köszi, természetesen már olvastam....

Nincs is semmi gondom, csak ez... 8)

Link to comment
Share on other sites

Ajnász

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

google
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? :hááát:

Link to comment
Share on other sites

Ajnász

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

google
:Sír: Sajnos a különbség ugyanúgy megmaradt.
Link to comment
Share on other sites

tzoli
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

tzoli
Css, margin.
Link to comment
Share on other sites

google

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

Megint az IE. :démonikacaj:

 

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. :hááát:

 

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

Link to comment
Share on other sites

Ajnász

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

Link to comment
Share on other sites

google

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. :hááát:

 

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

 

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? :hááát:

u.i.: Megnéztem, és nem az.

Link to comment
Share on other sites

google

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. :hááát:

Link to comment
Share on other sites

Ajnász

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

google

Most már falra mászom. :mérges:

 

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. :démonikacaj:

 

É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.) :pislog:

 

Mi ez, ha nem X-Akta? :(:Sí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. :dühös:

Egyértelmû, hogy a magasságot nem szereti. Márpedig azt valahogy meg kell adnom. :S

Link to comment
Share on other sites

google

:) :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. :P:nyíl: IE

Link to comment
Share on other sites

  • 4 weeks later...
Kovács Gyula (MiniDisk)

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

google

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

 

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

Kovács Gyula (MiniDisk)

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

Link to comment
Share on other sites

google

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

Kovács Gyula (MiniDisk)

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

google

Úgy mondanám inkább, hogy az IE teszi 15px-lel feljebb... :démonikacaj::P

 

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. :D 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

Kovács Gyula (MiniDisk)

A hátteres részre én is gondoltam, de mivel 1px széles a háttérkép ... :D 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

google

De mire pontosan? :)

Az alsó sávra gondolsz? Arra ez. :démonikacaj:

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...