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!

Iratkozz fel, hogy elsőnek értesülj új bejegyzésekről:

17 responses to “több hasábos sidebar/footer”

  1. Dávid Avatar
    Dávid

    a ketoszlop.css-t a style.css végére kell odabigyezteni?

  2. kobak Avatar

    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!

  3. Dávid Avatar
    Dávid

    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á:(

  4. kobak Avatar

    Tudsz adni linket az oldalra?

  5. kobak Avatar

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

  6. Dávid Avatar
    Dávid

    tudok. bdp.extra.hu

  7. Dávid Avatar
    Dávid

    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?

  8. Dávid Avatar
    Dávid

    a sidebar.php-ben gy nézz ki:

  9. Dávid Avatar
    Dávid

    bocs,de nem akarja kiírni amit beírtam 🙁 na,mindegy

  10. kobak Avatar

    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!

  11. Dávid Avatar
    Dávid

    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 🙂

  12. kobak Avatar

    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!

  13. OldMan Avatar

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

  14. arsen Avatar

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

  15. kobak Avatar

    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.

  16. oxigen Avatar

    é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ó 😉

  17. kobak Avatar

    Javitva.

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)