több hasábos sidebar/footer

Dávid kérdésére úgy döntöttem nem csak ott válaszolok, hanem közzéteszem a dolgot mindenki számára.

A kérdés az, hogy lehet több hasábot tenni a sidebarra. Szerintem a legegyszerűbb módszer erre a következő:
Csinálsz css-ben egy div-et, aztán két másikat azon belül megadott szélességgel. Ezután a sidebar.php -ba beteszed a diveket, s működik az egész.

példa (css):
[syntax,ketoszlop.css,css]

(Értelemszerűen cseréld a szélességeket arra, amire akarod!)

példa (php file-ba illesztendő):

[syntax,ketoszlop.txt,php]

U.I.: php/css guruk javítsatok, ha valahol elrontottam!

By kobak

apa, tanár, geek

17 comments

  1. Oda, vagy, ha k2-őt használsz, akkor lehet ugyebár saját stílus file-od. Ebben az esetben inkább abba írd bele!

  2. hát nekem sehogy sem jönn össze. bemáoltam mint a két helyre. azt csinálja hogy beteszi újra azt a két kategoriát, de ismét csak egymás alá:(

  3. Az oldal alját én így csináltam. Azzal a különbséggel, hogy 3 részre osztottam, nem kettőre.

  4. lehet hoyg nem elég széles a sidebarom. mondjuk szerintem akkor is engedné hogy egymás mellé tegye őket. a css-ben a .ketoszlopbal és a .ketoszlopjobb-at át kell írni a sidebar.php-ben lévő class-okra?

  5. Ahogy nézem a class-ok nincsenek meg. Amit a class=”ketoszlopbal” és a /div közé teszel be, az kerül a baloldali oszlopba. Ezután nyiss egy class=”ketoszlopjobb” divet, s amit azután írsz be, az kerül a jobboldali oszlopba!

  6. azota sikerült megoldanomm,már csak azt kell megoldanom, hogy valahogy normálisan helyezkedjenek el, majd variálok valmit px-ekkel. nagyon szépen köszönöm. és elnézést a késői kérdésekért 🙂

  7. Semmi gond. Mindenkinek vannak kérdései. 🙂 Azokból lehet tanulni.

    A px értékeket variáld, meg nézz utána a css-ben, miket lehet még változtatni! Jó játékot még vele, meg jó éjszakát!

  8. Nekem ezt Oxi nem rég tanitotta.. :).. lehetne néha ilyesmi az oldaladon.. kissebb tuturialok.. nyugodtan…

  9. Hát izé, bocs, de ez így még elég minimál…

    – A 20[szóköz]px nyilván csak typo, de egy tutorialban nem hagynám benne, mert nem fog működni.
    – A konkrét számokkal az a baj, hogy ha valaki megad margint, paddingot (amik azért szoktak kelleni), vagy akár csak egy 1 pixeles bordert, akkor néz, hogy miért ment egymás alá. Azért, mert az hozzáadódik a width-hez, úgy meg már nem fér bele.
    – Ha csak nincs több ilyen oszlop, jobb id-t adni a belső oszlopoknak is, mert az erősebb. Így most hiába specifikál valaki pl. egy fontot csak az egyik oszlopra, ha a #ketoszlop divre is megadott valamit, az fog érvényesülni.
    – Meg kéne még említeni, hogy a float-ot a clear oldja fel, ha valakinek a két oszlop alatti tartalom furán viselkedik, akkor adjon neki clear:both; szabályt a css-ben.
    – Alternatíva, ha a float valamiért bebasz (IE nem mindig szereti):
    #ketoszlop {position:relative}
    .ketoszlopbal {position:absolute; top:0; left:0}
    .ketoszlopjobb {position:absolute; top:0; right:0}

    (Elnézést az okoskodásért, csak azért írtam, mert kérted.:))

  10. Semmi gond, s teljesen igazad van. Alapvetően egy gyors tutorialt akartam, s egy összecsapott lett belőle. 🙂

    Köszönöm a korrekciókat.

  11. én a position: absolute-tól mindenkit csak óvni tudok, rengeteg szopás van vele, főleg ha php van az oldal mögött, mert ezek (ahogy a neve is mutatja) abszolut poziciot kreálnak, szóval ha valami hibaüzenet akarna megjelenni azon a részen, akkor az a két div alatt lesz, és ezért nem fogja látni az illető.

    Másfelől a 20[szóköz]px valóban nem jó, azt javítanám.

    Amúgy jó 😉

Comments are closed.