Weblap

[KGigi]

Üdv!

 

Adott egy oldal, aminek az alján egymás mellett van két div (menü és tartalom). A problémám az, hogy a legtöbb oldalon a szöveg rövidebb, mint a teljes képernyő, ilyenkor viszont a div nem ér le az oldal aljáig, így kilátszik mögüle az oldal háttérszíne, amit nem szeretnék. Próbáltam már 100%-os magasságot vagy 0px-es lenti margót megadni, de tesz rá magasról. Most úgy van megoldva, hogy az oldal betöltődése után lefut egy JS kód, ami ha a div nem magasabb, mint az ablak, akkor megnöveli a div méretét úgy, hogy pont kitöltse. Nincs ennél elegánsabb megoldás?

[Garono]

Nem teljesen értem, de ha jól gondolom, akkor van megoldás (ráadásul elég egyszerû).

[KGigi]

Hmm értem, kösz. Annyi a lényeg, hogy adott egy div fix szélességgel, de nem beállított magassággal, és azt szeretném elérni, hogy mindenképpen az oldal aljáig tartson.

[Garono]

Az eljárás nagyon egyszerû, de IE6 alatt természetesen nem mûködik.

#divneve {
   position: absolute;
   bottom: 0px;
}

Ha középre is akarod helyezni, akkor már trükközni kell, pl.:

#divneve {
   height: 50px;
   position: absolute;
   bottom: 0px;
   width: 500px;
   color: red;
   margin: 0 0 0 50%;
   left: -250px;
}

Ez egy 500 pixel széles, 50 pixel magasságú DIV-et minden esetben az oldal alján tart, vízszintesen középre igazítva.

 

--

 

Bár még egyszer értelmezve elsõ írásodat, úgy tûnik nem erre gondoltál. Bocs. Azért még ez is jól jöhet egyszer.

 

Amire gondolsz, azt szerintem kizárólag JavaScripttel lehet megoldani.

[KGigi]

Tényleg jól jöhet majd, köszi. Akkor marad a JS.

[Garono]

Hmm, visszavonom, lehet JS nélkül is. Akkor mégiscsak jól emlékeztem, kb. 2 éve használtam, kristálytiszta CSS.

#tartalom, #tartalom:hover {
   outline: none;
   padding: 7px;
   background: #FAF0C8;
   bottom: 30px;
   height: auto;
   position: absolute;
   top: 50px;
   width: 586px;
   color: #003280;
   overflow: auto;
   font-family: Verdana;
   font-size: 17px;
   text-align: justify;
   margin: 0 0 0 50%;
   left: -300px;
}

Én konkrétan így használtam, és biztos, hogy mûködik.

 

Ugye a lényeg ebbõl ez:

#tartalom, #tartalom:hover {
   position: absolute;
   overflow: auto;
   top: 50px;
   bottom: 30px;
   height: auto;
   width: 586px;
   margin: 0 0 0 50%;
   left: -300px;
}

Ki kell centizni, hogy mi mekkora legyen, ha középre akarod igazítani (innen a hülye számok, pl. 586px, mert ehhez nálam hozzájött a 2x7px padding is).

[KGigi]

Köszi, holnap kipróbálom. A left -300px az micsoda?

[Garono]

Mert alapból nem a DIV közepét teszi középre a margin: 0 0 0 50%;, hanem az elsõ pixeleket. Így egy 600 pixeles DIV pont 300 pixellel van eltolódva jobbra, de ha megadod, hogy balra ne 0-nál kezdje, hanem -300-nál, akkor pont középen lesz a DIV (mármint vízszintesen).

[KGigi]

Jogos, értem. Ezért nem ma próbálom ki, ilyeneket benézek. Köszi mindent.

[Garono]

Közben rájöttem, hogy mégsem erre gondoltál, de mindenképpen próbáld ki, mert érdemes. Ha nem is teljesen az, amit te akartál, de hasonló.

[KGigi]

Nem, de kicsit átalakítva szerintem működni fog. Egyébként nagyon szép megoldás arra, hogy az absolute ellenére mégis jó helyen legyen minden. Este nekiállok.

[payskin]

Bár még egyszer értelmezve első írásodat, úgy tűnik nem erre gondoltál.

Közben rájöttem, hogy mégsem erre gondoltál, de mindenképpen próbáld ki, mert érdemes.

Garono mindenáron segít...

 

Egyébként ez az egyik legismertebb megoldás. A tudomány mai állása szerint korrekt, trükközés nélküli megoldása nincs. Mindenki a CSS3-tól várja a megoldást!

 

Persze, ha nem erre gondoltál...

[KGigi]

Erre gondoltam. Lehet, hogy mégis JS lesz belõle. Amit Garono CSS-e alapján csináltam, az teljesen jó, egészen addig, amíg a divben lévõ szöveg nem hosszabb, mint ami a képernyõre kifér. Ekkor ugyanis a div szélén jelenik meg a scrollbar, nem tudom a böngészõ oldalán lévõt használni.

[Garono]

Végül megtaláltam az igazi megoldást (tényleg! ), bár nem túl szép.

 

A lényeg, hogy csinálni kell egy olyan DIV-et, ami mindent magába foglal, majd az alábbi tulajdonságokat kell adni neki:

#theultimatediv {
   outline: none;
   padding: 7px;
   background: #FAF0C8;
   bottom: 0px;
   height: auto;
   position: absolute;
   top: 0px;
   width: 586px;
   margin: 0 0 0 50%;
   left: -300px;
   z-index: -1;
}

Az értékek nyilván lehetnek mások, ez csak példa, de a lényeg a top: 0px;, a bottom: 0px;, és a z-index: -1;.

 

E mellé kell még a tartalom DIV, aminek az alábbi értékeket adod (vagy módisítod):

#tartalom, #tartalom:hover {
   outline: none;
   padding: 7px;
   background: #FAF0C8;
   height: auto;
   position: relative;
   width: 586px;
   margin: 0 0 0 50%;
   left: -300px;
}

Itt az a lényeg, hogy a korábbi position: absolute; helyett position: relative;-ot használunk, valamint az overflow: auto; sortól megszabadulunk.

 

Szerintem sokkal "tisztább" megoldás, mint egy képpel kitölteni a hátteret. Bár a funkciója ugyanaz.

 

És ez most tényleg az, amit te is akartál! Tökéletesen mûködik, tesztelve.

 

Edit:

Célszerû továbbá egy köztes DIV-et rakni a tartalom elé, ami pontosan akkora, mint a fejléc.

 

Feldobtam ide: http://data.hu/get/1292886/kgigi.html.html

[payskin]

Ja, ez már majdnem az! És hol a menü?

[Garono]

Könnyedén lehet módosítani, hogy két hasáb legyen, az egyik a menü, a másik a tartalom. Tudom, hogy csak majdnem az, de írtam is, hogy nem túl szép.

[papírkutya]

Sziasztok!

 

Megalkottam a saját honlapomat html-estül css-tül és most olyan szolgáltatót keresek, ahol

- nem kell elõre gyártott sablonokat használni a honlapokhoz

- nincsenek felül idegesítõ, villogó hirdetések, mert az igencsak rontja az oldal hangulatát és a látogatók tûrõképességét is próbára teszi

- ingyenes, vagy elenyészõ a díja

 

Eddigi próbálkozásaim: atw: villog, uw: villog, gportál: mindenáron sablonokat akar velem használtatni (vagy csak nem jöttem rá, hogy kerüljem ezt ki), extra: a regisztráció szünetel.

 

Kérlek, adjatok ötleteket!

 

Köszönettel: Papírkutya

[KGigi]

Alakul, köszi. Vizsga után megnézem alaposabban.

 

(Amúgy nem jó a link.)

[papírkutya]

Azóta meg is találtam a megoldást: xoo.hu

Nem villog, 1 GB tárhely. Zsír.

[[OP]Destroy-man]

Én a Newhosting oldalt ajánlanám.

Minimális díj: Domain díj, amire bárhol előfizethetsz, cserébe kapsz, egyedi e-mail címet, 3GB tárhelyet, és teljessen reklám mentes, azaz csak domain-el kell rendelkezned. Eddig jónak tűnik a szolgáltatás, már több, mint 1 hónapja használom. (remélem ez nem minősűl reklának, mivel ingyen adnak mindent, a domaint kivéve, de az meg mindenhol fizetős. )

[quentaromaester]

Vagy olyan a tartalma, és annyian linkelnek is rá, hogy azt a Google elõre rangsorolja, vagy fizetsz érte (Google AdWords.)

 

Szia! Két kérdésem lenne ezzel kapcsolatban: az, hogy a PC-World-höz adott kuponkód dec 31-ig jó, attól még a már aktivált összeg bármikor felhasználható?

A fontosabb: ha van egy olyan téma, amivel külön specializált weblap szinten csak 2 oldal foglalkozik, és az oldalam pagerank értéke egy hónap után 2-es (csak linkek elhelyezése, és találatok miatt - reklám, ajánlás még nem volt), akkor kb. mennyire kell tenni a napi költséget, hogy SÁRGÁVAL, a találati lista legelején jelenjen meg? (Konkurens hirdetõ nincs.)

 

[pelikan86]

Sziasztok!!

 

Az lenne a problémám, hogy majdnem készen vagyok egy honlappal amit FF alatt szerkesztettem, és sajnos nem néztem meg IE alatt. Így ott elcsúszva jelenik meg minden, csak azt nem értem miért. A CSS és XHTML szabványt használom és az oldal valid, csak 1 warningot kaptam. A helyzet kicsit javul ha ie 6 helyett ie 8-at használok, de a lényeg az az hogy nem úgy néz ki ahogy kéne.

 

Lenne még egy kérdésem: Van 1-2 ikonom amire tettem linket, de az ie nem jeleníti meg, ez miért lehet???

 

Válaszotokat elõre is köszönöm!

[Pjotr]

Oké, és ha esetleg feltöltenéd valahova, tudod, mutiba, akkor kicsit talán könnyebb lenne.

 

Ha nem múlik rajta nagy pénz, ne foglalkozz az IE6-tal.

[pelikan86]

Feltöltöttem, link:

http://data.hu/get/1861626/Weblap.zip.html

 

Becsomagoltam így biztosabb.

 

Pénz egyáltalán nem múlik rajta, iskolai honlap. Ráadásul ingyen csinálom... de azért szeretném hogy valahogy kinézzen!!!

Ezért esetleg ötleteket is várok...

 

Köszi

Edited November 8, 2009 by KGigi

[kléni]

IE8al nézve ugyanolyannak láttam mindent, ha esetleg leírnád, mi is különbözik, jó lenne