Pozícionálási megoldások

[Kovács Gyula (MiniDisk)]

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

[Kovács Gyula (MiniDisk)]

É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!

[Kovács Gyula (MiniDisk)]

#bottommenu {
width: 100%;
height: 30px;
background: url(images/tbmenu.gif);
margin: 0px;
text-align: center;
vertical-align: middle;
}

 #btmleft {
 float: left;
 width: 18px;
 height: 11px;
 margin: 9px 0px 0px 8px;
 padding: 0px;
 border: 0px;
 }
 
   #btmleft a {
   width: 18px;
   height: 11px;
   background: url(images/emailoff.gif) no-repeat;
   text-decoration: none;
   }
   
   #btmleft a:hover {
   background: url(images/emailon.gif) no-repeat;
   }

 

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:

 

<div id="bottommenu">
    <div id="btmleft"><a href="mailto:minidiscweb@gmail.com?subject=Weboldal" title="E-mail küldése a weboldal tulajdonosának."> </a></div>
  </div>

 

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

[google]

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

[Kovács Gyula (MiniDisk)]

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

[google]

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

[Kovács Gyula (MiniDisk)]

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.

[google]

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. ír:

[Kovács Gyula (MiniDisk)]

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

      <- ez?

[google]

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.

[Kovács Gyula (MiniDisk)]

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.

[google]

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

[google]

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

[Kovács Gyula (MiniDisk)]

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.

[google]

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

[google]

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?

[Charizard]

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.

[google]

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

[Kovács Dávid ( Davs )]

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

[google]

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

[Oke]

Kép

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

[Garono]

Igen, lehet.

[Oke]

Hogyan tudnék nekiállni?

[Garono]

Kezdj el tanulni CSS-t:

Weblabor - CSS alapjai I.-VII.

Weblabor - táblázat nélküli oldalfelépítés

 

[atzs]

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!