https://www.tunturisusi.com/jaakarhu/menu1.jpg
Kun isolla näytöllä tulee sivulle, näkyy kuva menu1 - eli sivun yläreunassa näkyy rivissä menun linkkejä.
https://www.tunturisusi.com/jaakarhu/menu2.jpg
Miten voisi asettaa ja säätää niin, että kun tulee isollakin näytöllä sivulle, näkyisi vain kuvan menu2 tilanne, jossa klikkaamalla kuvakkeeseen saa vasta menun näkymään?
Tätä menua ohjastaa tyylitiedosto:
https://www.tunturisusi.com/jaakarhu/responsive-menu.css
ja mukana on myös:
https://www.tunturisusi.com/jaakarhu/responsive-menu.min.css
------------------------------------
Kaikkia tyylitiedostoista löytyviä lukuja olen kokeeksi muutellut, enkä ole saanut aikaan muutoksia. Muutos tapahtuu vasta, kun menu on skaalautunut aivan kapeaksi.
Lisäys:
Poistan tämän kysymykseni, koskapa tässä näyttäisi olevan hieman väsymystä loputtomiin kyselyihini. ;)
Poistun tältä foorumilta, kiitän saamistani vastauksista ja ohjeista ja toivotan kaikille hyvää jatkoa.
Itse ongelma on nyt siinä, että valikkoa ei ole toteutettu vain CSS:llä vaan suurelta osin JavaScriptilla, ja siis myös muutosleveys löytyy JavaScriptista. Olettaisin, että esimerkiksi minWidth voisi liittyä asiaan. Kuitenkin, jos et löydä oikeaa kohtaa koodista itse, kannattaa varmaan palata tuon responsive menu -koodin kotisivuille katsomaan, miten koodia kuuluisi käyttää. Yleensä kannattaa itse edes tietää, mitä koodeja sivuilleen laittaa, koska sokea kopiointi on varma tie ongelmiin.
Lisäksi voisit korjata sivuiltasi edes perusasiat: voisit laittaa jokaisen CSS-tiedoston sivulle vain yhden kerran ja loogisessa järjestyksessä ja laittaa myös CSS-tiedostoon ne tyylit, jotka nyt ovat style-tageissa irrallaan. Esimerkiksi nyt laitat kahteen kertaan responsive-menu.css:n ja lisäksi vielä tuon minifioidun version, jossa yleensä on täsmälleen sama sisältö tiivistetyssä muodossa. Jo tästä päällekkäisyydestä voi tulla ongelmia, jos yrität muokata yhtä versiota tiedostosta.
Kuten Grez jo ehdotti aiemmassa keskustelussa, kannattaisi käyttää joitakin päiviä CSS:n (ja ehkä myös JavaScriptin) perusasioiden järjestelmälliseen opetteluun vaikka MDN:stä, niin voisit jatkossa säästää vielä paljon enemmän päiviä, kun jokaista ongelmaa ei tarvitsisi ratkaista kantapään kautta sähläämällä.
Monta ongelmaa sivuiltasi voisi ratketa, kun tarkastaisit koodit HTML- ja CSS-validaattoreilla ja korjaisit kaikki ilmoitetut virheet. Nyt koodisi on aivan uskomattoman täynnä erilaisia virheitä.
Pahaltahan virheiden valtava määrä näyttää. En ole kuviin ja pieniin kuvakkeisiin, joita ko. sivulla on sadoittain linkistön yhteydessä, merkinnyt korkeutta ja leveyttä ja siitä tulee lukumääräisesti valtava määrä virheitä. Tässä olen ollut väärillä jäljillä, luulin, että noita ei enää tarvita vaan selain tietää automaattisesti kuvan koon.
Myös olen vanhakantaisesti vielä otsikoiden fontit ja eräät muut määritteet merkinnyt html-tietoihin, ei ole näköjään hyväksyttävää.
Korjasin kielen suomeksi, mutta kun laitoin <meta charset="UTF-8">, validointiautomaatti ei suostunut enää ollenkaan tarkistamaan sivua ja myös menun kirjaimista tuli kysymysmerkkejä ja muuta sotkua. Varmaan siksi en sitä alunalkaenkaan ole käyttänyt.
Aivan sokea kopiontihan ei menunkaan kanssa onnistu ollenkaan, koska sitä joutuu monin tavoin pyörittelemään, jotta näkee, miten se toimii. Asettelen ja tutustun menuun päiväkausia, kun sellaisen joskus uuden laitan. Hyvin harvoin kylläkin, käytän vanhoja.
Tutustun kritiikkiisi ja teen parannuksia. Kiitokset Metabolix.
Tunturisusi kirjoitti:
En ole kuviin – – merkinnyt korkeutta ja leveyttä
Ei tarvitsekaan, eikä näistä tule virheilmoitusta. Virheilmoituksia tulee siitä, että olet laittanut tyhjiä attribuutteja kuten width="". Jos attribuutti on annettu, siinä pitää olla oikea arvo. Ihan sama koskee CSS-koodiasi: et voi kirjoittaa ”background-color: ;”, vaan siinä täytyy olla kelvollinen arvo tai sitten riviä ei pidä olla ollenkaan.
Tunturisusi kirjoitti:
Myös olen vanhakantaisesti vielä otsikoiden fontit ja eräät muut määritteet merkinnyt html-tietoihin, ei ole näköjään hyväksyttävää.
Ei ole font-tagia olemassa. Jos jotain HTML:n seassa muuttaisitkin, tämä pitäisi tehdä CSS:llä style-attribuutissa (kuten <h3 style="...">), mutta kyllä oikeat CSS-luokat ovat parempi tapa.
Tunturisusi kirjoitti:
Korjasin kielen suomeksi
Vielä kun html-tagi olisi koodin alussa heti DOCTYPE-rivin jälkeen, validaattori suostuisi edes käsittelemään sivun. Juuri tällaiset perusasiat mielestäni osoittavat, että et ole ikinä opetellut oikeasti nettisivun tekemistä: jokaiselle nettisivun tekijälle pitäisi olla selvää, että html-tagi on nettisivun ensimmäinen tagi.
Tunturisusi kirjoitti:
mutta kun laitoin <meta charset="UTF-8">, validointiautomaatti ei suostunut enää ollenkaan tarkistamaan sivua
Tietenkin tiedosto pitää silloin myös tallentaa tekstieditorilla UTF-8-muodossa. Ei pelkkä tällaisen tekstin lisääminen muuta tiedoston muotoa. Netistä löydät varmasti ohjeita, miten käyttämälläsi editorilla tallennetaan UTF-8-muotoisia tiedostoja (ilman BOMia eli byte order markia).
Tyhjä palkki on huonoa suunnittelua, joten älä toteuta tyhmää ideaa vaan turvaudu erilliseen pudotusvalikkoon vain silloin, kun tila ei riitä linkkien näyttämiseen ilman sitä. Ongelmana voi olla myös linkkien liiallinen määrä, mikä myös on huonoa suunnittelua. Käyttäjät eivät pysty käsittelemään suuria tietomääriä uudella ja oudolla nettisivustolla navigoidessaan. Tämä pätee myös sivun varsinaiseen sisältöön. Monta ruudullista suhteellisen sekalaista tekstiä ilman järkevää jaottelua on huonoa suunnittelua.
Sanomalehden tyylinen palstajaottelu ei minun mielestäni toimi netissä, koska se ei mahdu kokonaan lukulaitteen näytölle ja sisällöstä oikeasti kiinnostunut käyttäjä joutuu rullaamaan ylös-alas-ylös-alas pystyäkseen lukemaan kaiken tekstin.
Tilanteeseen paneuduttuani sain tulla ymmärtämään, että jos tämä ei ole katastrofi, niin eipä paljon muutakaan.
Korjailen kokeeksi virheitä jääkarhusta, se on pudonnut noin tuhannesta runsaaseen kuuteenkymmeneen, ja lopuistakin lähtee helposti muutama kymmen pois. Tämä on opettavaista.
Kun aloitin nettisivujen teon vuonna 2001, eka oppi oli, että kaikki on html ja body-tagien välillä. Ja kun tag aloitetaan, se myös aina lopetetaan. Ja että sisältö on bodyssa. Ja ennen bodya on head-osio. Onpa sitten vuosikymmenten mittaan vahingossa kadonnut alusta tuo html - mikä on tietenkin törkeää.
Olen opetellut hallitsemaan CSS:llä mm. linkkejä ja niiden värejä, otsikoita sekä tehnyt omiksi tarpeiksi divejä erilaisiin tilanteisiin.
Html-editorillani notepad teen sivuistani helposti UTF-sivut ilman BOMIa. Siellä on valmis työkalu.
Linkkiryteiköt sivuillani javoineen ovat kauhistuttavia. Poistan kokonaan käyttämäni kaksi menua ja käytän kaikilla sivuillani tulevaisuudessa ennen joulua hyvin yksinkertaista, responsiivista css-menua ilman javaa. Se aukeaa sekunnin murto-osassa ja toiminee kaikilla koneilla. Ja pyrin minimoimaan linkkien määrän erilaisilla keinoilla. Esimerkiksi jääkarhuun jäi kolme linkkiä omille sivuilleni, kun siellä aiemmin oli satoja.
---------------------------------------------
Olen tehnyt peruskorjauksia (ilman kaikkien pikkuerroreiden korjaamista) jo monille sivuilleni, esim kissasivuille. Kun siellä on kielenä suomi, koodistona UTF-8, linkkirydöt on poistettu ja kaiken aloittaa html, niin seuraukset ovat dramaattiset. Kaikki sivuni ovat tätä ennen miettineet valkoisella lakanalla noin 7 - 8 sekuntia, ennen kuin ovat suunnitelleetkaan avautumista. Nyt kissasivut alkavat aueta samalla sekunnilla kuin sinne klikkaan. Tämä salpaa hengen. ;)
Vaikka nikottelin aluksi, niin olen hyvin kiitollinen siitä, että minullakin saamani palautteen ja ohjeistuksen myötä on vielä mahdollisuus kehittyä ja tunturisusi.com on matkalla kohti loistavaa tulevaisuutta.
Editorin korvaajaksi suosittelen Visual Studio Codea (ilmainen). Ohjelma on ilmainen, ja myös antaa sinulle varoituksen jos sivustosi sisältää virheitä.
Lataus
https://code.visualstudio.com/
Lisäosa html-tarkastukseen (voi ladata myös sovelluksen sisältä)
https://marketplace.visualstudio.com/items?
groovyb kirjoitti:
Editorin korvaajaksi suosittelen Visual Studio Codea (ilmainen). Ohjelma on ilmainen, ja myös antaa sinulle varoituksen jos sivustosi sisältää virheitä.
Minusta VS Code on ihan hyvä, mutta en käyttäisi sitä, koska se kerää käyttäjädataa. Itse käytän yleensä VSCodiumia, https://itsfoss.com/vscodium/ tai Atomia, https://atom.io/ . Kumpaankin saa ohjelmointia helpottavia lisäosia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.
