Pudotusvalikko

Nyt kaivataan apuja ja vinkkejä pudotusvalikon tekoon FRAMELLE? olen kääntänyt ja vääntänyt ja silti tämä ei toimi vain.
121164
Äänestä

Muut lukivat myös

Vastaukset 12

Vanhimmat

Se nyt vaan on edelleenkin niin, että niitä frameja ei ole mitään syytä käyttää. Ellei halua välttämättä ongelmia.

Tarkoitatko pudotusvalikolla nyt tälläistä normaalia html-lomakkeen "pudotusvalikkoa" vai sellaista mitä joidenkin sivujen navigoinnissa käytetään?
Muutenkaan lisätieto/esimerkkikoodit ei olisi pahitteeksi.

Äänestä
  • Ongelmitta toimii (ja toiminut jo monta vuotta), valikko yhdessä framessa ja avaa sisällön toiseen frameen -> valikko pysyy kokoajan näkyvissä vaikka scrollaa sivua alaspäin. Monella sivulla vi****aa scrollata takaisin ylös etsimään valikkoa jos on pidempi sivu (nojuu... voinhan sinne ripotella niitä "palaa ylös" linkkejä mutta.....).

    Äänestä

  • muka ? kirjoitti:

    Ongelmitta toimii (ja toiminut jo monta vuotta), valikko yhdessä framessa ja avaa sisällön toiseen frameen -> valikko pysyy kokoajan näkyvissä vaikka scrollaa sivua alaspäin. Monella sivulla vi****aa scrollata takaisin ylös etsimään valikkoa jos on pidempi sivu (nojuu... voinhan sinne ripotella niitä "palaa ylös" linkkejä mutta.....).

    No vaikka siksi että jos joku haluaa linkittää suoraan jollekkin tietylle sivulle, niin tuo sinun navigointisi häviää kokonaan.

    Googlella esim. monesti päätyy tälläisille sivuille.

    CSS:llä pystyy tekemään täsmälleen samanlaisen valikon, mikä pysyy kokoajan vaikka sivun vasemmassa reunassa. Jos joku sellaista välttämättä haluaa. Todella pitkät tekstit kannattaisi tosin mielummin jakaa pienempiin osiin, kun kerran tuota käytettävyyttä mietitään.

    Sanopa sinä yksi hyvä syy, miksi frameja pitäisi käyttää?

    Äänestä

  • trolliolli kirjoitti:

    No vaikka siksi että jos joku haluaa linkittää suoraan jollekkin tietylle sivulle, niin tuo sinun navigointisi häviää kokonaan.

    Googlella esim. monesti päätyy tälläisille sivuille.

    CSS:llä pystyy tekemään täsmälleen samanlaisen valikon, mikä pysyy kokoajan vaikka sivun vasemmassa reunassa. Jos joku sellaista välttämättä haluaa. Todella pitkät tekstit kannattaisi tosin mielummin jakaa pienempiin osiin, kun kerran tuota käytettävyyttä mietitään.

    Sanopa sinä yksi hyvä syy, miksi frameja pitäisi käyttää?

    Olen monelta CSS "osaajalta" kysynyt miten tuollainen valikko toteutetaan, toistaiseksi kukaan ei ole osannut kertoa miten se tehdään.... ehkä sinä osaat ? Käyttöä olisi, esim. yhdistyksen historiikki ja muutama muu osio ovat aika pitkää tekstiä ja hankala jakaa pienempiin osiin järkevästi (eikä sen tarvitse olla kuin parin ruudullisen verran niin se "ylimääräinen" scrollaus takaisin ylös on turhaa valikon löytämiseksi).

    Nykyisin tosin käytössä floating_layer eli valikko "kelluu" javascriptillä mutta paikallaan pysyvä olisi parempi (tuo kelluva scrollautuu mukana ja palaa sitten paikalleen "liukuen", nollaviiveillä se pysyisi paikallaan mutta vilkkuu sillon ikävästi).

    PS. noita "CSS on ratkaisu kaikkeen" tekstejä löytyy mutta kummasti kirjoittajat hiljenevät kun kysyy että miten joku asia CSS:llä tehdään.....

    Äänestä

  • tuo tehdään.. kirjoitti:

    Olen monelta CSS "osaajalta" kysynyt miten tuollainen valikko toteutetaan, toistaiseksi kukaan ei ole osannut kertoa miten se tehdään.... ehkä sinä osaat ? Käyttöä olisi, esim. yhdistyksen historiikki ja muutama muu osio ovat aika pitkää tekstiä ja hankala jakaa pienempiin osiin järkevästi (eikä sen tarvitse olla kuin parin ruudullisen verran niin se "ylimääräinen" scrollaus takaisin ylös on turhaa valikon löytämiseksi).

    Nykyisin tosin käytössä floating_layer eli valikko "kelluu" javascriptillä mutta paikallaan pysyvä olisi parempi (tuo kelluva scrollautuu mukana ja palaa sitten paikalleen "liukuen", nollaviiveillä se pysyisi paikallaan mutta vilkkuu sillon ikävästi).

    PS. noita "CSS on ratkaisu kaikkeen" tekstejä löytyy mutta kummasti kirjoittajat hiljenevät kun kysyy että miten joku asia CSS:llä tehdään.....

    ..tuossa vähän alempana samaa keskustelua. Mutta tässä nyt vaikka yksi konsti puhtaalla css:llä

    http://www.cssplay.co.uk/layouts/body4.html

    Äänestä

todella erikoista tai sitten en ymmärtänyt
kysymystä.
Nimittäin kaikki tavat tehdä pudotusvalikko
toimivat ihan samalla tavalla on käytössä
framet tai ei.

Äänestä
  • Eli siis tarkennan... olen tehnyt ulkoasua ja koodauksia framelle ja tablelle. Kaikki mennyt aina hyvin ja tablelle osaan tehdä ihan sellaisen peruspudotus valikon vaikka Dynamic Drive jutuilla.

    Mutta nyt sitten eräs tilaustöistäni haluasi sivunsa nimenomaan frame pohjalle ja pudotusvalikon.

    Olen tehnyt Pudotusvalikon ylimpään frame ikkunaan, eli tässätapauksessa Otsikkoon ja se näkyy siellä. Kuitenkin kun katson koko sivua, ei pudotusvalikko toimi normaalisit ns. siinä päällä, niinkuin pitäisi (olen hyvä selittämään, sori), vaan jää ikäänkuin sinne otsikon sisään.

    Muistelen, että olisi olemassa jokin koodi, joka laitetaan sitten niihin muihin framen ikkunoihin, jotta pudotusvalikko näkyisi, muitta en muista sitä, enkä ole löytänyt yhtään mitään mallisivuja. Siksi kaipaisin apua :)

    Äänestä

  • Aloittaja kirjoitti:

    Eli siis tarkennan... olen tehnyt ulkoasua ja koodauksia framelle ja tablelle. Kaikki mennyt aina hyvin ja tablelle osaan tehdä ihan sellaisen peruspudotus valikon vaikka Dynamic Drive jutuilla.

    Mutta nyt sitten eräs tilaustöistäni haluasi sivunsa nimenomaan frame pohjalle ja pudotusvalikon.

    Olen tehnyt Pudotusvalikon ylimpään frame ikkunaan, eli tässätapauksessa Otsikkoon ja se näkyy siellä. Kuitenkin kun katson koko sivua, ei pudotusvalikko toimi normaalisit ns. siinä päällä, niinkuin pitäisi (olen hyvä selittämään, sori), vaan jää ikäänkuin sinne otsikon sisään.

    Muistelen, että olisi olemassa jokin koodi, joka laitetaan sitten niihin muihin framen ikkunoihin, jotta pudotusvalikko näkyisi, muitta en muista sitä, enkä ole löytänyt yhtään mitään mallisivuja. Siksi kaipaisin apua :)

    ..VAATII frameja sivuille.

    Tee pudotusvalikko normaalisti (mutta ei JS-viritelmillä) ja "framet" css:llä.

    Ohjeita on netissä pilvin pimein:

    http://meyerweb.com/eric/css/edge/menus/demo.html
    http://www.cssplay.co.uk/menus/dropdownfun.html
    http://www.seoconsultants.com/css/menus/horizontal/
    http://alistapart.com/articles/horizdropdowns


    http://www.fu2k.org/alex/css/frames/
    http://www.456bereastreet.com/lab/cssframes/
    http://www.cssplay.co.uk/layouts/frame.html

    http://www.htmlhelp.com/design/frames/whatswrong.html
    http://web.mit.edu/cwis/frames/
    http://www.useit.com/alertbox/9612.html
    http://www.cs.tut.fi/~jkorpela/webjulk/3.8.html#kehysongelmat

    Äänestä

  • Höpö. kirjoitti:

    Samalla asialla olen liikkeellä, niin laitan kysymyken tähän samaan ketjuun.
    Olen siis se sama tumpelo, jota autoit viikonloppuna.

    Koko koodi on muuttunut oleellisesti, kun en saanut toimimaan sivuja kunnolla ja tein koko höskän uusiksi.
    Nyt on menupalkissa ja varsinaisessa pääsivussa linkkejä ja pääsivun linkkeihin täytyisi saada alavalikot toimimaan.
    Jotkut toimivat suoraan, mutta joissakin esim. kaksi alatiedostoa joiden pitäis pudottautua alas automatic.
    Nyt koodissa on vain yksi tiedosto/linkki (no kyllä varmaan taas kästiät mitä höpötän)

    Ja kysymys kuuluu: Voiko tällaista alavalikkoa tehdä ilman javasciptiä, kun en osaa sitä ollenkaan.
    http://www.htmldog.com/articles/suckerfish/bones/
    Olisko jotakin vinkkiä antaa?

    Ja tässä vielä koko nykyinen koodi




    nimi


    body {   background-color: #800000;
       margin-left: 10%;
       margin-right: 10%;
       margin-top: 2%;
       margin-bottom: 2%;
       padding: 0;
       border: 0px;
       height: 100%;
       }
    body, h1{ font: small "Trebuchet MS", Arial, sans-serif; }
    p {font: 16px Arial, Helvetica, sans-serif;}

    h1    { color: #800000; }
    h1    {
       font-size: 2em;
       font-weight: bold;
       }
    a    {
       color: #000000;
       text-decoration: none;
       }
    a:hover {
       color: #800000;
       border-bottom: 1px solid #DDD;
       }
    #kokosivu {
       margin: 0;
       padding: 0 0 40px 0;
       width: 800px;
       background: url(tausta.jpg) repeat-y;
       height: 100%;
       overflow: auto;
       }
    #ylaosa {
       background: url(tausta.jpg) repeat-y;
       height: 50px;
       margin: 0;
       padding: 0 0 40px 0;
       border-bottom: 4px solid #800000;
       }
       #ylaosa h1{ text-align: center; }
    #menu {
       width: 160px;
       float: left;
       font-size: 1.2em;
       font-weight: bold;
       padding: 20px 10px 40px 20px;
       }
       #navi {
          list-style-type: none;
          margin: 0;
          padding: 0;
          }
       #navi a {
          hover: border-bottom: 1px solid #DDD;
          display: block;
          width: 140px;
          border-bottom: 1px solid #FFF;
          }
    #navi li {
    background: silver;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid maroon}

    #sisalto {
       width: 510px;
       padding: 20px 30px 10px 0;
       float: right;
       height: 100%;
       }
       #sisalto h1, p { text-align: left; }
       #sisalto img { margin: 5px; float: left; }
       #sisalto h1, p{ margin-top: 0; }







       otsikko
       tekstiä
       

    Linkin nimi
    ESIMERKIKSI TÄSSÄ OLISI VAIN OTSIKKO, MISTÄ TIPPUISI ALAVALIKKO JA SIINÄ LINKIT PARILLE .XLS TIEDOSTOLLE

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

       
       
          

             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi

          
       

    Äänestä

  • Tumpelo kirjoitti:

    Samalla asialla olen liikkeellä, niin laitan kysymyken tähän samaan ketjuun.
    Olen siis se sama tumpelo, jota autoit viikonloppuna.

    Koko koodi on muuttunut oleellisesti, kun en saanut toimimaan sivuja kunnolla ja tein koko höskän uusiksi.
    Nyt on menupalkissa ja varsinaisessa pääsivussa linkkejä ja pääsivun linkkeihin täytyisi saada alavalikot toimimaan.
    Jotkut toimivat suoraan, mutta joissakin esim. kaksi alatiedostoa joiden pitäis pudottautua alas automatic.
    Nyt koodissa on vain yksi tiedosto/linkki (no kyllä varmaan taas kästiät mitä höpötän)

    Ja kysymys kuuluu: Voiko tällaista alavalikkoa tehdä ilman javasciptiä, kun en osaa sitä ollenkaan.
    http://www.htmldog.com/articles/suckerfish/bones/
    Olisko jotakin vinkkiä antaa?

    Ja tässä vielä koko nykyinen koodi




    nimi


    body {   background-color: #800000;
       margin-left: 10%;
       margin-right: 10%;
       margin-top: 2%;
       margin-bottom: 2%;
       padding: 0;
       border: 0px;
       height: 100%;
       }
    body, h1{ font: small "Trebuchet MS", Arial, sans-serif; }
    p {font: 16px Arial, Helvetica, sans-serif;}

    h1    { color: #800000; }
    h1    {
       font-size: 2em;
       font-weight: bold;
       }
    a    {
       color: #000000;
       text-decoration: none;
       }
    a:hover {
       color: #800000;
       border-bottom: 1px solid #DDD;
       }
    #kokosivu {
       margin: 0;
       padding: 0 0 40px 0;
       width: 800px;
       background: url(tausta.jpg) repeat-y;
       height: 100%;
       overflow: auto;
       }
    #ylaosa {
       background: url(tausta.jpg) repeat-y;
       height: 50px;
       margin: 0;
       padding: 0 0 40px 0;
       border-bottom: 4px solid #800000;
       }
       #ylaosa h1{ text-align: center; }
    #menu {
       width: 160px;
       float: left;
       font-size: 1.2em;
       font-weight: bold;
       padding: 20px 10px 40px 20px;
       }
       #navi {
          list-style-type: none;
          margin: 0;
          padding: 0;
          }
       #navi a {
          hover: border-bottom: 1px solid #DDD;
          display: block;
          width: 140px;
          border-bottom: 1px solid #FFF;
          }
    #navi li {
    background: silver;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid maroon}

    #sisalto {
       width: 510px;
       padding: 20px 30px 10px 0;
       float: right;
       height: 100%;
       }
       #sisalto h1, p { text-align: left; }
       #sisalto img { margin: 5px; float: left; }
       #sisalto h1, p{ margin-top: 0; }







       otsikko
       tekstiä
       

    Linkin nimi
    ESIMERKIKSI TÄSSÄ OLISI VAIN OTSIKKO, MISTÄ TIPPUISI ALAVALIKKO JA SIINÄ LINKIT PARILLE .XLS TIEDOSTOLLE

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

    Linkin nimi

       
       
          

             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi
             Linkin nimi

          
       

    Nuo html-dogin menut taitavat käyttää JS:ää IE-bugien korjaamiseksi. JS:ää ei tuossa tapauksessa tarvi osata, riittää kun kopsaat sen JS-koodin.

    Stu Nicholsin menut taas ovat puhtaasti css:llä toteutettuja:
    http://www.cssplay.co.uk/menus/index.html

    Katso vaikka kohtia Menus - Definition List ja Menus - Multi-Level CSS Only

    Äänestä

  • Höpö. kirjoitti:

    Nuo html-dogin menut taitavat käyttää JS:ää IE-bugien korjaamiseksi. JS:ää ei tuossa tapauksessa tarvi osata, riittää kun kopsaat sen JS-koodin.

    Stu Nicholsin menut taas ovat puhtaasti css:llä toteutettuja:
    http://www.cssplay.co.uk/menus/index.html

    Katso vaikka kohtia Menus - Definition List ja Menus - Multi-Level CSS Only

    löysin kaksikin, mitä yritän nyt soveltaa.
    Ongelmaksi muodostui nyt, että taustakuva häipyy näkyvistä kun saa valikon tehtyä.
    Aina jotakin, mutta yritän jatkaa harjotuksia, Kiitos.

    Äänestä

  • Höpö. kirjoitti:

    Nuo html-dogin menut taitavat käyttää JS:ää IE-bugien korjaamiseksi. JS:ää ei tuossa tapauksessa tarvi osata, riittää kun kopsaat sen JS-koodin.

    Stu Nicholsin menut taas ovat puhtaasti css:llä toteutettuja:
    http://www.cssplay.co.uk/menus/index.html

    Katso vaikka kohtia Menus - Definition List ja Menus - Multi-Level CSS Only

    sitten lupaan jättää teidät fiksummat rauhaan.
    Jos tämän saa toimimaan, on sivut vihdoin viimein valmiit.
    Ei mitään loistokoodia varmaan, mutta taitaa kelvata mulle.

    Tässä olisi siis nykyinen koodisekamelska ja firefoxilla toimii kun unelma, mutta ei IE:llä, arrgghhh.

    Kadottaa pudotusvalikosta kaikki muut linkit, paitsi ensimmäisen kun kerran pyyhkäisee hiirellä ylitse.
    Päivittämällä sivun, valikon muutkin linkit tulevat näkyviin, mutta olishan se hienoa jos toimisi koko ajan.
    Tuossahan sanotaankin jotakin tuosta IE6 ja IE7 vaihtoehdoista, mutta en ymmärrä.
    IE7:lla kokeilin.
    Kaava on otettu linkittämästäsi sivusta.
    Olisiko ideoita?





    nimi


    body { background-color: #800000;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 0;
    border: 0px;
    height: 100%;
    }
    body, h1, h2{ font: small "Trebuchet MS", Arial, sans-serif; }
    p {font: 16px Arial, Helvetica, sans-serif; font-weight: bold;}

    h1,h2 { color: #800000; }
    h1 {
    font-size: 2em;
    font-weight: bold;
    }
    h2 {
    font-size: 20px;
    font-weight: bold;
    }
    a {
    color: #000000;
    text-decoration: none;
    }
    a:hover {
    color: #800000;
    border-bottom: 1px solid #DDD;
    }
    #kokosivu {
    margin: 0;
    padding: 0 0 40px 0;
    width: 800px;
    background: url(tausta.jpg) repeat-y;
    height: 100%;
    overflow: auto;
    }
    #ylaosa {
    background: url(tausta.jpg) repeat-y;
    height: 50px;
    margin: 0;
    padding: 0 0 40px 0;
    border-bottom: 4px solid #800000;
    }
    #ylaosa h1{ text-align: center; }
    #menu {
    width: 160px;
    float: left;
    font-size: 1.2em;
    font-weight: bold;
    padding: 20px 10px 40px 20px;
    }
    #navi {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #navi a {
    hover: border-bottom: 1px solid #DDD;
    display: block;
    width: 140px;
    border-bottom: 1px solid #FFF;
    }
    #navi li {
    background: silver;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid maroon}

    #sisalto {
    width: 510px;
    padding: 20px 30px 10px 0;
    float: right;
    height: 100%;
    }
    #sisalto h1, p { text-align: left; }
    #sisalto img { margin: 5px; position: center; }
    #sisalto h1, p{ margin-top: 0; }

    ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:140px; text-align:left; color:#fff; border:1px solid #800000;}
    ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;}
    ul.menu1 ul {margin-left:1em;}
    ul.menu1 li {text-indent:0.5em;}
    ul.menu1 li.drop {margin-bottom:-2px;}
    ul.menu1 li a,
    ul.menu1 li a:visited {display:block; width:auto; height:auto; line-height:1.9em; text-decoration:none; color:#800000;}
    ul.menu1 li a.last,
    ul.menu1 li a.last:visited {display:block; width:auto; height:auto; line-height:2em;}
    ul.menu1 li ul {display:none;}

    ul.menu1 li:hover a,
    ul.menu1 li a:hover {border:0; color:#800000; font-weight:bold;}
    ul.menu1 li:hover ul,
    ul.menu1 li a:hover ul {display:block; height:auto; width:100px; margin-top:-1px; border:1px solid #000;}
    ul.menu1 li:hover ul li a,
    ul.menu1 li a:hover ul li a {height:2em; background:#F5F5F5; color:#800000; font-weight:normal;}
    ul.menu1 li:hover ul li:hover a,
    ul.menu1 li a:hover ul li a:hover {background:#800000; color:#fff;}







    Otsikko1
    Otsikko2



    Aihe

    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi




    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi



    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi



    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi








    Aihe

    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi




    Linkki

    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi




    Linkki

    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi




    Linkki

    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi






    Aihe

    Linkki

    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi





    Linkki


    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi











    Etusivu
    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi
    Linkkinimi

    Äänestä

Kommentoi aloitusta


SuzyQuu kirjoitti:

Nyt kaivataan apuja ja vinkkejä pudotusvalikon tekoon FRAMELLE? olen kääntänyt ja vääntänyt ja silti tämä ei toimi vain.

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu