Millähän tekniikalla on yleensä toteutettu sivun ylälaidassa olevat kielekket josta valitaan sitten etualalle siihen kuuluva välilehti?
Onko käytetty layereita?
Onko käytetty layereita?
välilehtikielekkeet
yksi sivuntekijä
8351
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 8
Vanhimmat
ymmärrä. Javascriptiä, kyseessä on ihan normaali valikko. Google knows - hae javascript menu
Juu, täytyypä tutkia tuota Javasciptia lisää.
Layereista vielä, harjoitellessani sivuntekoa (DreamWeaverilla) sillä pystyy tekemään layereita
sivulle ja kokeillessani sekä IE että FF ymmärsivät niitä mainosti.
Dreamweaverista kyllä löytyi kohta jolla layerit sai muutettua kehyksiksi jos selain ei asioita ymmärrä.
»Onko käytetty layereita?»
Eikös kutakuinkin kaikki elementit ole layereita, nehän pystyy asettelemaan (css:llä) ihan minne tahansa kiinteeksi tai kellumaan tai ihan miten tahtoo..
Ei noissa mitään sen kummempaa kikkaa ole kun että kaikissa sivuissa on samanlainen pohja. Jos haluat vaikka että sulla on neljä välilehteä niin teet neljä sivua jotka ovat tuolta välilehtigrafiikan osalta muuten samanlaisia paitti että.. öö.. miten tän nyt selittäis..
No tehdään yksinkertainen esimerkki taulukolla (vaikkemmie taulukoista tällasissa tykkääkään):
---------- sivu1.html ----------
sivu1
sivu2
sivu3
sivu4
Sivun 1 sisältö
---------- sivu2.html ----------
sivu1
sivu2
sivu3
sivu4
Sivun 2 sisältö
---------- sivu3.html ----------
sivu1
sivu2
sivu3
sivu4
Sivun 3 sisältö
---------- sivu4.html ----------
sivu1
sivu2
sivu3
sivu4
Sivun 4 sisältö
-------------------------------
Ja sitten käytät tyylitiedostoa:
---------- tyyli.css ----------
#kielekkeet td {
width: 100px;
background-image: url(kieleke.gif);
}
#kielekkeet td.active {
background-image: url(valittukieleke.gif);
}
-------------------------------
Juu tuossa taulukossahan ei tietenkään käytetä borderia mutta minä nyt pidän yleensä borderit päällä taulukoiden rakentamisen aikana. Se helpottaa.
Kehittele vaikka tuota ellet muuta keksi.
http://www.webcredible.co.uk/
Tuo on tehty ihan ilman taulukoita javaskriptejä.
Hyvin yksinkertainen ratkaisu ja selviää sorsaa katsomalla.
Tai siis selvästi parempi kuin taulukolla tehty (JS-kökkärepurkasta puhumattakaan) ja toimii tosiaan yllättäin jopa IE:llä.
Koodi on tosiaan yksinkertainen:
Site navigation links
Home
Services
Benefits
Clients
Resources
Jobs
About us
Contact us
You are in: Home
css- osuus on tässä:
#topnav {width:100%; text-align:center; margin-top:4em; padding-top:79px; position:absolute; top:0; white-space:nowrap; z-index:3}
#topnav .now {background:#75114f; font-size:1.2em; display:inline}
#topnav .left {background:url(/images/tab-orange-left3.gif) no-repeat 0 0; display:inline}
#topnav .right {background:url(/images/tab-orange-right3.gif) no-repeat 100% 0; display:inline}
#topnav .goto {background:#ffa20e; font-size:1.2em; display:inline}
#topnav .left-now {background:url(/images/tab-blue-left3.gif) no-repeat 0 0; display:inline}
#topnav .right-now {background:url(/images/tab-blue-right3.gif) no-repeat 100% 0; display:inline}
#topnav .navpad {width:6px; height:1px; padding:0}
#topnav a:link, #topnav a:visited, #topnav a:hover, #topnav a:active {color:#000; text-decoration:none; padding:0 4px}
#topnav strong {color:#fff; padding:0 4px}
#topnav #bread {color:#fff; font-size:1.2em; text-align:left; padding:6px 8px 3px; background:#75114f; white-space:nowrap}
#topnav #bread strong {font-size:1em}
#topnav #bread a {font-size:0.9em; padding:0; background:#75114f url("/images/spacer.gif") no-repeat; text-decoration:underline}
#topnav #bread a:link, #topnav #bread a:visited, #topnav #bread a:active {color:#ffa20e; font-weight:bold}
#topnav #bread a:hover {color:#fff}
Kuvat saa väsätä itse :)
Päivällä ei ehtiny etsiä, mutta tässä on selostuksen kanssa toi tabbaus:
http://www.alistapart.com/articles/slidingdoors2/
ja esimerkkisivu
http://www.alistapart.com/d/slidingdoors2/v1/ex9.html#
Väärä linkki. Tuo selostus alkaa tietysti 1. osasta:
http://www.alistapart.com/articles/slidingdoors/
juu, tämä vaikuttaa juuri siltä mitä hain!