ugrás a tartalomhoz

Footer probléma

lost815 · 2011. Nov. 21. (H), 22.27
Üdv,

Egy footer problémám volna, ha esetleg még nem untátok volna meg... :)
Rákerestem már, de olyat sehol nem láttam, ahol olyan divekkel dolgoztak volna, melyeknek top és left értékei lettek volna... lehet, ezért is nem sikerül nekem :(

Adott ugye egy "content" layer top 800px-el és left 50px-el. Ezen belül két egymás mellet álló div. Ez alá szeretnék egy faltól falig érő "footer"-t.
Most valamiért ott fönt van az egekben, de sikerült már egyszer a piros-kék doboz alá rakni, csak ott nem ért végig...

Légyszi, a tudtok, segítsetek!

Ja, és csak egyszerű nyelven, plíz :D

footer
‹ CHECKBOX kipipálásra legördülő lista JSON via jQuery ›
 ■
1

Mit szeretnél elérni?

Poetro · 2011. Nov. 21. (H), 22.55
Mit szeretnél elérni? Amennyiben nem tudod, mit jelentenek a position tulajdonságok, és hogyan működnek, ajánlom a CSS alapjai 4-et elolvasásra, illetve egy korábbi hozzászólásom.
2

Valami ilyesmit

lost815 · 2011. Nov. 21. (H), 23.02
Frissítettem a fenti linken található oldalt! Valami olyasmit, csak itt a footer még mindig nem ér faltól-falig.

Igen, ezzel az absolute, meg relative dolgokkal sose voltam kibékülve.
3

#footer { left: 0; right:

Poetro · 2011. Nov. 21. (H), 23.10

#footer {
  left: 0;
  right: 0;
  margin-left: -50px;
  width: auto;
}
4

Egy kis tutorial

Blintux · 2011. Nov. 21. (H), 23.15
Szerintem neked ez a cikk hasznos lehet: DIV elemek pozicionálása CSS-el

A példában egy eléggé a tiédhez hasonló layout van elkészítve. Ha követed a leírtakat és a saját méret igényeidet adod meg, akkor remélhetőleg sikerülni fog:)
Nem bonyolult, csak jó ha az alapoktól elkezdet megtanulgatni a CSS-t és akkor nem lesz probléma a pozicionálással sem.
12

Wooow!

lost815 · 2011. Nov. 24. (Cs), 22.55
Köszönöm szépen a tutorialt! Ezt eddig nem is láttam! Na amint végzek a honlappal, belevetem magam a rétegek rétegébe! :)
5

Örök hála

lost815 · 2011. Nov. 21. (H), 23.35
Wáhh!!! Köszönöm szépen!!! Örök hála!
Még nem fogtam fel a dolgot, de tényleg nagyon köszönöm! :)
Csak télleg az zavart engem mindig is, hogy szerettem a top és left variációkat használni. És ezek után a footer sose ott volt, ahol lennie kellett! Ezért folyamodtam mindig a táblázatokhoz... csak azt úgy vettem észre, hogy nem nagyon szeretik. Úgyhogy próbálok egy kicsit a div-ekkel dolgozni, de hát ez magas!

Meg a másik, amit észrevettem, hogy ez a fajta megoldás, az így néz ki:

<div id="wrap">

	<div id="main">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>
De a CSS-ben itt se láttam sehol a top-left-et... mindenhol csak a margin-t. Ez így természetes?
6

Tegyük fel

Blintux · 2011. Nov. 22. (K), 10.13
Tegyük fel, hogy a #wrap DIV-ed kitölti a böngészőt teljes szélességében, és a #main DIV 960px széles, valamint középre van igazítva (margin:0 auto).
Mivel a #footer DIV szintén közvetlenül a BODY-ban helyezkedik el, így ez is kitölti annak szélességét és a #wrap DIV alatt fog megjelenni alapból, mivel nem floatoltuk sem a #wrap, sem a #footer DIV-et.
Tehát jelen esetben nem kellet játszani a marginokkal, sem a floatokkal, csupán a középre igazításhoz kellet használni egy margint.

A #content és a #side DIV-ed össz szélessége legyen 960px (pl. 600+360) és a float értéke mindegyiknek left. Ekkor szépen egymás mellé kerülnek és kitöltik a #main DIV-et az oldal közepén.
7

Ilyen nyelven szerettem volna! :)

lost815 · 2011. Nov. 23. (Sze), 00.40
Köszönöm szépen kimerítő válaszodat! Leköteleztél! :)
Most már a footer probléma megoldódott... Van viszont egy másik: Tegyük fel, hogy a #content és #side fölött van egy #header, ami pl. egy 960px széles kép. Erre jönne rá egy szöveg alapú menüsor, mondjuk nem középre, hanem közel a jobb oldali képzeletbeli margóhoz. Ez eddig semmi problémát nem okozott, mivel nem voltak középre igazítva a div-ek, így mindent oda pakoltam, ahol annak lennie kellett! De most, hogy középen van minden, ablakméretezésnél szépen "marad minden középen".
Magyarán, hogy lehet egy középre igazított rétegre egy másik réteget pakolni, jobb margótól 20, ill. felső margótól szintén 20px-re rakni?
8

a #header-ben lévő cuccoknak

szabo.b.gabor · 2011. Nov. 23. (Sze), 08.55
a #header-ben lévő cuccoknak az absolute pozíciókat a #header 0,0 pontjától kell számolniuk. ezt úgy tudod elérni, hogy a #header-nél beállítod a position-t relative-ra.

tehát ha valami absolute pozícióval rendelkezik, akkor annak pozíciója mindig a (DOM-ban) legközelebbi szülőhöz - amelynek a pozíciója absolute vagy relative - képest van számolva.

remélem átmegy az infó :) kísérletezgess egyszerű példákon.
9

Esetleg

Blintux · 2011. Nov. 23. (Sze), 12.35
Esetleg:
#menusor {
   margin:20px 20px 0 0;
   float:right
}
Ha más nem kerül bele a #header-be, akkor ez is egy egyszerű megoldás és még a pozíciókkal sem kell vacakolni.
11

Kipróbálom! Köszi szépen! :)

lost815 · 2011. Nov. 23. (Sze), 21.56
Kipróbálom! Köszi szépen! :)
10

Köszönöm szépen! Igen,

lost815 · 2011. Nov. 23. (Sze), 21.53
Köszönöm szépen! Igen, átjött! :)
Hát kísérletezgetésre nem sok idő van (pedig muszáj lesz szánni rá), már sürgetnek, de úgy voltam vele, hogy azért sem csinálom táblázatosan! :D