Jump to content
GSForum - Segélyvonal

Pozícionálási megoldások


Recommended Posts

Posted

Ü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;
     }

Posted

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

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

Posted

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

Posted
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:

Posted

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.

Posted
:Sír: Sajnos a különbség ugyanúgy megmaradt.
Posted
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.

Posted

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?

Posted

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

Posted

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.

Posted

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:

Posted

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.

Posted

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

Posted

:) :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

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

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?

Posted

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.

Kovács Gyula (MiniDisk)
Posted

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

Posted

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.

Kovács Gyula (MiniDisk)
Posted

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

Posted

Ú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?

Kovács Gyula (MiniDisk)
Posted

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 ... ;)

Posted

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.

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
×
×
  • Create New...