Ongelma no. 6 ; js tabien muokkaus



  • En nyt poista noita aijempia josko jollekin sattuu olemaan näistä jotain hyötyä. Nyt olisi kuitennii uusi probleema!

    Mua kiinnostaisi minkähänlaisella koodipätkällä ois mahdollista (tai onko?) saada tämänkaltainen tabisysteemi toimimaan niin, että sivua päivittäessä tai vaikka palatessa sivulle se avautuisi samaan contentiin josta lähdettiin? Mulla ei oo mikäänlaista osaamista JavaScriptin suhteen, oon vain käyttänyt tuota valmista pohjaa.

    Sain siis nuo #sisalto ja ul -elementit toimimaan tuon aiemman ongelman suhteen, mutta nyt on uusi ongelma; jouduin poistamaan sivupalkista fixed -määritelmän (aiheutti elementtien päällekäisyyden) ja vaihtamaan sen absoluteksi jotta saan laatikon taas venymään koko sivun pituudelta. Ongelma on nyt se, että mun sielu jäätyy ja silmät itkee verta kun tuo sivupalkki on nyt pidemmillä sivuilla pelkkä tyhjä palkki sisällön jäädessä ylös.
    Onko siis mitään ratkaisua jolla saisin tuon hemmetin palkin toimimaan kuten aiemmin?

    Tää ongelma nyt on ollu iät ja ajat, mutta nyt haluaisin sen uusille sivuille korjata. Eli Jeilin ulkka vammaa sillä tavoin, että toi #sisalto -divi liukuu ul -laatikon alle. Oon pyöritelly tuota vaikka mitenkä päin, mutta alkaa omat keinot olla loppu. 😄 (uudet sivut)

    Mikä olisi helpoin tapa tehdä progress bar joka esittäisi hevosen edistymistä esimerkiksi sen kilpailutasoilla? Kokeilin niin, että asetin tablen solulle background-colorin ja asetin kyseiselle solulle background-size: 50% 100%; mutta tällä ei ollut minkäänlaista vaikutusta. Olisiko divien käyttö tässä helpompi? Eli jos latoisi päällekkäin vaikka kolme suorakulmion muotoista diviä joilla on tietty pituus ja säätäisi niiden backgroundin äsken mainitulla tavalla?
    Vai joku muu kikka? 😄


    Eli, sivuston html, body, sekä kaksi kappaletta “pohjaa” määrittäviä divejä on tyylitetty “height: 100%” jotta etusivun muuten vajaaksi jäävä tausta (tuo valkea, on css:ssä #sisalto) ulottuisi koko sivun korkeudelta kuten sivupalkkikin.
    Ongelmia tästä näemmä tulee hevossivulla (ja luultavasti muillakin sivuilla joissa sisältö venyy) jossa tuo kyseinen #sisalto käytännössä jää tasan näytön korkuiseksi. Mikä neuvoks?


    Etusivun ulkka näyttää tältä https://i.imgur.com/1GjgnjO.png (http://jeili.likesyou.org/)

    Miksi tuo sivupalkki katkeaa tuolta ylhäältä kun sen pitäisi olla ihan sivun yläreunassa kiinni? Korkeus on 100% ja mitään margineita ei pitäisi siellä olla, tai sitten en vain keksi missä ne piileksii.

    Samaisen sivupalkin tekstiosiossa olevat copyt ym. maininnat saisivat olla tuolla palkin ihan alalaidassa, miten saan ne sinne?

    Ja nuo kaksi pikkulaatikkoa! Oon tapellu niitten kanssa jo pari päivää, eivät vaan suostu asettumaan tuohon isomman laatikon alle. Paitsi käyttämällä marginia eikä niitä sillonkaan tahdo saaha ihan täysin kohdakkain (plus veikkaan, että erikokoisella näytöllä ovat sitten missä sattuu).

    Sitten vielä sellainen juttu, että kun oon IE:llä kokeillut tuota niin sehän näyttää ihan sanonko miltä (Mozillasta ym. en tiedä kun mulla on vain Chrome, jos joku haluu testata niin kiva). Tuo sivupalkki siis häviää kokonaan ja kaikki sen sisältö leviää pitkin sivua. Mikähän siihen mahtais auttaa?


  • Kouluratsastajat

    Inspect Elementistä voi olla apua tuon kanssa säätelyyn. Oletko fiksaillut sen kanssa?



  • @yersinio en oo kokeillut, pitää ottaa illempana työn alle.


  • Kouluratsastajat

    Miinusmarginaalilla saa ainakin yläosan pakotettua paikoilleen
    bodyyn: margin-top: -sopivalukutähänpx;

    Pikkulaatikot varmaan laittaisin niin, että saisin molemmille tehtyä yksilöllisesti paikkamääritykset. Sitten on helpompi säädellä oikeaa ja vasenta reunaa ilman, että toinenkin liikkuu.



  • @yersinio Mie oon väännelly noita pikkulaatikoita silläkin tyylillä, että molempia erikseen, mutta siinäkin taisi tulla ongelmana se, että haluaisin niiden olevan tuon ison laatikon reunalinjojen mukaisesti.
    Sitä mietin, että jos keskityksen sijaan määrittäisikin isomman laatikon sijainnin vasemman marginaalin mukaan ja laittaisi sitten vasemman puoleiselle pikkulaatikolle saman määrityksen (oikeanpuoleinen siinä luonnollisesti siirtyy mukana).


  • ♞ Puoliveriharrastajat

    Tuo reuna ylhäältä lähtee ehkä kun laitat bodyyn margin: 0 auto;

    Noi muut sun kannattais laittaa yhen divin sisään, sitten noitten vierekkäin oleville laatikoille laitoit omat määrittelyt, toiseen float:right; ja toiseen float:left; ja niiden jälkeen tulevaan elementtiin clear:both;



  • Mä laittaisin ison laatikon ja pikkulaatikot yhden pelkästään niiden sijainnin määrittävän divin sisään niin kuin @nekota vinkkas.

    Copymerkinnät pitäusi saada alas laittamalla ne divin sisään ja määrittämällä position:absolute; ja bottom:0;



  • No niin, nyt siellä on ongelma no. 1 ratkaistu ja sivupalkki nököttää siellä missä pitääkin.

    Copymerkinnät mänivät alas, jeij! Tosin se näyttäisi nyt, ettei ota tuota tekstin keskitystä enää kuuleviin korviinsa, vai?

    Laatikot nyt sitten sain asettummaan niin, että laitoin tuonne sijaintia määrittelevään diviin seuraavanlaiset asetukset:

    #laatikot {
    margin-left: 500px;
    display: inline-block;
    }

    Mitä ootte mieltä?


  • ♞ Puoliveriharrastajat

    Pienemmällä näytöllä nuo laatikot on aivan oikeessa reunassa eivätkä näy kokonaan

    // edit, näyttää tältä



  • Mikäs siihen auttas?
    Olisiko fiksua muutella noi kriittiset mitat prosenteiks?


  • ♞ Puoliveriharrastajat

    Suosittelen käyttämään prosentteja, tosin ite en tykkää siitä jos tekstilaatikon leveys vaihtelee niin sen oon määritellyt itse pikseleinä, makukysymys tietenkin. Itse olisin tehnyt tuon varmaan jotenkin silleen että keskittänyt koko systeemin margin:auto; hommilla, niin että pysyy keskellä ihan sama mikä näytön resoluutio on.


  • Virtuaalikoirat

    Yritin käydä kurkkaamassa sivuja, mutta F-Secure esti pääsyn kokonaan. 😂 Kuulemma vaikuttaa haitalliselta.


  • Piirrosharrastajat

    Mulla näyttää tältä 😄 ja apuahan musta ei ole



  • No siis mie kokeilin laittaa ensiksi tuon samaisen laatikoiden sijainnin määräävän divin määritykseksi margin: auto, ja sillä ei ollut mihinkään minkään valtakunnan vaikutusta. Joko kaikki lootat nököttivät tuolla vasemmassa reunassa tai sitten kun määritin pienilli laatikoille floatit niin toinen ampaisi oikeaan reunaan.

    @Kioja said in Ulkoasussa tökkii rankasti:

    Mulla näyttää tältä 😄 ja apuahan musta ei ole

    Tuolta sen kuuluukin näyttää 🙂
    edit// mikä selain sulla on?


  • Piirrosharrastajat

    @serena Mulla on uusimpaan versioon päivitetty Chrome 😄


  • ♞ Puoliveriharrastajat

    Koko sivun sais ehkä keskitettyä silleen, että laittais ton navigaatiopalkinkin jonkun divin sisään ja sille määrittelee margin:auto; :thinking: tosin nytkin jos tossa navigaatiopalkin ja laatikkojen välissä ei olis noin isoa väliä, se mahtuisi ruutuun ja näyttäis ihan hyvältä.



  • @serena said in Ulkoasussa tökkii rankasti:

    Copymerkinnät mänivät alas, jeij! Tosin se näyttäisi nyt, ettei ota tuota tekstin keskitystä enää kuuleviin korviinsa, vai?

    Kokeile auttaisiko jos laitat määrittelyihin myös left:0; ja right:0; ?



  • @Sakkura said in Ulkoasussa tökkii rankasti:

    @serena said in Ulkoasussa tökkii rankasti:

    Copymerkinnät mänivät alas, jeij! Tosin se näyttäisi nyt, ettei ota tuota tekstin keskitystä enää kuuleviin korviinsa, vai?

    Kokeile auttaisiko jos laitat määrittelyihin myös left:0; ja right:0; ?

    Auttoi, kiitos sulle!

    @nekota said in Ulkoasussa tökkii rankasti:

    Koko sivun sais ehkä keskitettyä silleen, että laittais ton navigaatiopalkinkin jonkun divin sisään ja sille määrittelee margin:auto; :thinking: tosin nytkin jos tossa navigaatiopalkin ja laatikkojen välissä ei olis noin isoa väliä, se mahtuisi ruutuun ja näyttäis ihan hyvältä.

    Kokkeilin nyt silleen ja tulos sama kuin aijemmin. Siirsin siis vain tuon divin kattamaan myös sivupalkin. Sivuilta voi käydä katsomassa tuloksen. 😄


  • ♞ Puoliveriharrastajat

    Siellä lukee nyt margin: 0 auto; kun sen pitäisi olla vaan margin:auto; + ota navigaatiosta tuo margin-left kokonaan pois 🙂



  • @nekota ei vaikutusta (muuta kuin navigaatio painu reunaan).


 

14
Online

877
Users

11.6k
Topics

213.1k
Posts

Kysyttävää, kommentoitavaa tai palautetta? Ota yhteyttä suoraan ylläpitäjään (Tilli): maatila.pemberley@gmail.com.

Looks like your connection to Keskusta was lost, please wait while we try to reconnect.