Lähtötilanne: Mulla on html-sivu jossa on yläbanneri kuvana joka on asemoitu css koodilla fixed sivun ylälaitaan. Bannerin korkeus on 200px. Sivusto on ns. yhden sivun sivusto, vierittämällä toimiva eli navipalkista linkkiä klikkaamalla pääsee oikeaan kohtaan sivulla.
Kysymys: Onko mahdollista määritellä linkkiä sivulla siten että se ankkuri ei nouse selaimen yläreunaan (eli tässä tapauksessa se jää yläbannerin taakse piiloon) vaan että se jää sen 200px yläreunasta juuri bannerin alapuolelle.
Osasinkohan nyt selittää ymmärrettävästi asian....
etkö voi tehdä ankkurilinkkiä joka kohdistuu bannerin jälkeen tulevaan elementtiin?
groovyb kirjoitti:
etkö voi tehdä ankkurilinkkiä joka kohdistuu bannerin jälkeen tulevaan elementtiin?
Selittäisitkö mitä tarkoitat?
<a href="#foobar">Siirry tästä foobar-kohtaan</a> ... pitkä html-sivu <h2 id="foobar">Foobar</h2> ...
Lebe80:lle: Tällä tavoin kun linkittää niin linkkiä painamalla tämä Foobar kohta siirtyy selaimen yläreunaan. Nyt kuitenkin selaimen yläreunan peittää tuo kiinteäksi asetettu banneri joka on 200px korkea, joten Foobar kohta jää tuon bannerin alle piiloon.
Sinulla ei ole clearaavaa elementtiä bannerisi jälkeen, jonka vuoksi syystä tai toisesta ankkuri sijoittuu bannerin yläreunaan.
Tosiaan, näissä tapauksissa selkeämpää olisi vain laittaa ongelman linkki tänne sivustolle, ettei auttajien tarvitse arpoa ongelman syytä, se kun voi johtua melkeinpä mistä syystä tahansa.
www.tsfysiikka.com
Tässä linkki sivuille. Lähdekoodi on kokonaan nähtävissä. Tässä olen kikkaillut siten että olen lisäillyt ankkureita eri kohtiin siten että olen arvioinut ankkuroinnin paikan noin 200px korkeammalle kuin se kohta jonka haluan näkyvän heti bannerin jälkeen.
...ja kuten kuvasta näkyy olen vasta aloittelija näissä nettisivujen rakentelussa mikä näkyy koodissa ja ulkoasussa....antakaa anteeksi :)
Mitä nyt testasin, niin kyllä chromessa ainakin tuo ensimmäinen linkki scrollaa "oikeaan" kohtaan, jättäen bannerin piiloon. Sekä Yritys, että Palvelut linkki taasen jättää osioiden otsikot piiloon. Suosittelen että tutustut myös vaikka Bootstrappiin, koska tällä hetkellä nuo sivut ovat mobiililaitteella käyttökelvottomat (linkit eivät näy kokonaisuudessaan, eivätkä myös tule näkyviin sisältöä sivulle scrollatessa).
No niin, eli tämähän oli täysin erilainen ongelma kuin oletin.
Tässä tosiaan kannattaisi miettiä toteutusta uusiksi. Tarvitseeko yläosion olla noin iso, kun käyttäjä lähtee vierittämään sivua alaspäin. Nykyäänhän usein yläosio kutistuu vain ohueksi kaistaleeksi.
Myös bootstrappiä suosittelen itsekin, vaikkei se tätä ongelmaa itsessään korjaakaan.
Nykyiseen ongelmaan suosittelen, että lasket javascriptillä oikean sijainnin, ja tämän avulla scrollaat käyttäjän selaimen oikeaan kohtaan.
Kiitoksia vastauksista. Pitää tutustua tohon bootstrapiin. Olenko nyt ymmärtänyt että html ja css:ää käyttäen ongelmaa ei voi ratkaista tällaisenaan vaan vaatii joko javascriptiä tai kokonaan uudenlaisen rakenteen??
Rakennetta tulee muuttaa. Saa sen toki javascriptilläkin tehtyä.
Suosittelen myös että käytät kuvia järkevämmin, älä tee valmiita kuvia jotka sisältävät myös varsinaista sisältöä. Sen sijaan, tee elementit html + css combolla (esim ylänavigointi ja footer), ja lisää niihin tarvittavat erilliskuvat erikseen.
Tekstisisältöä sisältävät kuvat skaalautuessaan muuttavat luonnollisesti myös kuvan sisältämän fontin kokoa (tai no ei se fontti muutu, kuvan koko muuttuu), joten sivusto menee sekavaksi - Osa sisällöstä on vakiofontilla, kuvissa olevat tekstit vaihtaa kokoa kuvien skaalautuessa.
En jaksanut vääntää pidemmälle (ja poistin nuo mäppäykset), mutta idea varmasti tästä aukeaa: Bootply
Miten toi kannattais rakentaa jos haluaa suurinpiirtein tuon näköisen sivun ja niin että linkkipalkki ei vieri piiloon vaan pysyy sivun yläreunassa.
Esim tähän tapaan (bootstrap käytössä): Bootply
En jaksanut vääntää css:ää tuohon navigoinnin mobiilinäkymän toggleen (enkä muutenkaan panostanut css puoleen :) ), mutta tuohon suuntaan. Voit testata eri näkymiä klikkaamalla koodiosan ylälaidasta joko näytön tai kännykän kuvaa. Ja kun tuo näkymä -ikkuna aukeaa, voit katsoa miten sivu käyttäytyy leventämällä ja pienentämällä ikkunaa.
groovyb kirjoitti:
(05.11.2015 12:00:02): Esim tähän tapaan (bootstrap käytössä): ...
Tässä ei nyt toteutunu vaatimus siitä että navipalkki pysyisi ruudulla scrollatessa.
niin haluat sen fixedinä myös desktop näkymässä?
Kyllä mutta siten että, ensin on kiinteä yläbanneri missä on yrityksen logo ja sen semmoista ja sen alle tulee kiinteänä toi navipalkki. Loput sisällöstä saa vieriä vapaasti. Ihan niinkuin tuossa mun alkuperäisessä räpellyksessä.
No sinun tulee tehdä sellainen, annoin vain esimerkkejä.
No siihenhän tässä kyselin neuvoja että miten...Ongelma ei ollut se etten saa jotain elementtiä asetettua fixedillä sivun yläreunaan, vaan miten saada linkattua samalle sivulle siten että linkin kohta ei mene piiloon fixedillä asetetun elementin alle.
Javascriptillä lasket elementin korkeuden (sikäli mikäli sen korkeus saattaa vaihdella eri päätelaitteilla), ja lasket ankkurin sijainnin sivustolla, siirrät käyttäjän ankkurin kohdan yläpuolelle lasketun yläelementin korkeuden verran.
jQueryllä muutaman rivin koodi.
Imho sitä logoa ei välttämättä tarvitse pitää ylälaidassa tilaa viemässä:
Esimerkki
Ja tämä on se mitä sanoin jo aikaisemmin, yläpalkki "kutistuisi", kun käyttäjä selaa tarpeeksi alas.
Viilaskelin sulle pienen mallin bootstrapillä tehdystä kokonaisuudesta, jossa sisältö on erotettu kuvista.
groovyb kirjoitti:
(05.11.2015 19:29:11): Viilaskelin sulle pienen mallin bootstrapillä...
Kiitoksia vaivannäöstä. Semmonen pieni bugi tuossa vielä on että kun sivu on ns. alkuasennossa jossa linkipalkki ei ole sivun yläreunassa niin klikkaamalla linkkiä jää linkattava kohta palkin alle. Silloin kun sivua on vieritetty siten että linkkipalkki on sivun yläreunassa kiinni ei kyseistä ongelmaa esiinny.
Hanva kirjoitti:
(06.11.2015 10:29:51): ”– –” Kiitoksia vaivannäöstä. Semmonen pieni bugi...
Siinähän on sinulle pieni puuhastelutuokio perjantaille.
Itseasiassa olen puuhastellut koko eilisen illan ja päätynyt tämän näköiseen ratkaisuun TS-Fysiikka. Tää on huomattavasti helpompi tapa kun navipalkki on ylhäällä päällimmäisenä. Nyt vierii toi yrityksen logobanneri ja mainostekstibannerikin piiloon että jää tekstille enemmän tilaa.
Edelleen mua ketuttaa että toi chrome ei ymmärrä samalla tavalla tuota ankkurointia kuin firefox vaan toi valmennusfilosofia jää hiukan ton navipalkin alle. Tämän kun sais ratkastua, että sivut toimis kohtuullisesti normi pc:n näytöllä niin voisin alkaa tutustumaan tohon responsiivisuuteen.
Minä laittaisin nuo kaikki eri osiot joihin navista mennään omien <a name=""> elementtien sisään jotenkin näin:
<a name="yritys" class="osio"> <H3>Toni</H3> <p>...</p> </a>
Ja sitten css:ssä navipalkin korkeuden verran paddingiä yläreunaan:
.osio {
padding-top: 50px;
display: block;
}Edit: Lisäsin vielä tuonne tuon display: block
Edit2: Ja nuo alaosan yhteystiedot kannattaisi tehdä ihan tekstinä, nyt niitä ei voi kopioida mitenkään. Myös hakukoneet löytäs paremmin.
Kiitoksia TuomasK:lle !!...toimii.
TuomasK kirjoitti:
Minä laittaisin nuo kaikki eri osiot joihin navista mennään omien <a name=""> elementtien sisään jotenkin näin:
<a name="yritys" class="osio"> <H3>Toni</H3> <p>...</p> </a>
Toi sun viritelmäsi ei ole edes validia html:ää, eikä noita name-ankkureita pitäisi enää käyttää ollenkaan. Sen sijaan pitäisi käyttää jotain valmiiksi olemassa olevaa elementtiä, jolle määritetään id-attribuutti.
The Alchemist kirjoitti:
(07.11.2015 09:38:40): ”– –” Toi sun viritelmäsi ei ole edes validia html:ää...
Haluatko opastaa miten homman voisi hoitaa paremmin. Näin aloittelijana kaikki neuvot ovat tervetulleita.
The Alchemist on toisiaan sittenkin ihan oikeassa. Pahoittelen vääristä ohjeista. Tässä oikeassa tavassa ei käytetäkään noita <a name="ankkuri"> juttuja ollenkaan, vaan elementeille asetetaan id johon selain sitten rullaa.
<H3 id="yritys">Toni</H3> <p>...</p> <p>...</p>
Sitten vielä CSS:llä määritetään kaikille otsikoille yläpalkin verran tyhjää ylös (+vähän yli):
h3 {
padding-top: 60px;
}Navipalkin linkit ovat siis tässä täsmälleen samanlaiset, niitä ei tarvitse muuttaa.
Kiitoksia paljon neuvoista.
Aihe on jo aika vanha, joten et voi enää vastata siihen.