Teen tuomoista slide-esitykseen pohjautuvaa sivua.
Ongelmana on se että oletuksena näytettävän osion target määrittelyn takia kyseinen osio jää näkyviin, kun siirytään other-osioon.
Jostain syystä samaa ei esiinny siiryttäessä cv-osioon. Tarkoitus olisi tehdä sivu mahdollisimman pitkälle ilman JavaScriptiä, mutta pitäisikö tässä suosiolla unohtaa css:n target-osio (41-47) ja asettaa se JavaScriptillä?
sivun runko:
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<meta charset="UTF-8"/>
<title> kotisivu </title>
<link rel="stylesheet" type="text/css" href="/style/css_kotisivut/tyylit.css"/>
</head>
<body>
<nav>
<a href="/kotisivu/#main">#</a>
<ul id="ala-nav">
<li><a href="#cv">cv</a></li>
<li><a href="#main">me</a></li>
<li><a href="#other">other</a></li>
</ul>
</nav>
<main>
<div class="slider">
<ul class="frames">
<div id="cv" class="slide">
<p>Tähän tulee CV.</p>
</div>
<div id="main" class="slide">
<p>Jotain minusta</p>
</div>
<div id="other" class="slide">
<p>Tähän tulee kaikkee muuta.</p>
</div>
</ul>
</div>
</main>
<footer>
</footer>
</body>
</html>tyylit.css
html, body {
height: 100%;
}
/*body*/
body {
/*border-width: 0.8em;
border-color: black;
border-style: solid;
*/
margin: 0.5em;
font: 14px/1.5 "Roboto", "Verdana";
background-color: white;
background-size: cover;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
float: left;
border: 1px solid;
border-botton-width: 0;
margin: 0 0.5em 0 0;
}
nav li a {
text-decoration: none;
display: block;
padding: 0 1em;
widht: 8em;
text-align: center;
}
/* Slider - kumpi on parempi tämä vai javascript toteutus? */
.slide,.slide:target ~#main {
display: none;
}
#main, .slide:target{
display: block;
}
main {
}
main>div {
clear: both;
/* border: 1px solid;*/
}
img {
width:100%;
}Tämän linkin takana on vähän asiaa CSS-tabeista, joka soveltuu myös tähän samaan asiaan. Lähinnä jos haluaa kattavaa ymmärrystä asiaan ja englanti sujuu. :checked on toimivampi tekniikka puhtaaseen CSS-toteutukseen kuin :target.
Targetin kanssa on se ongelma, että oletusvaihtoehdon tuominen näkyviin on vähän hankalaa (eli se tilanne kun hashia ei ole ollenkaan). Koodihan hoituisi jo pelkästään tällä...
.slide {
display: none;
}
.slide:target {
display: block;
}... mutta sitten ei olisi oletusvalintaa nähtävillä. Ongelma on ettei CSS:ssä vielä yleisesti tueta aiemman lapsen valintaa, ~ valitsee vain myöhemmin tulevan. Ulkomuistista ei heti juolahda oliko tähän :targetin vekslaamiseen jotain varmahkoa ratkaisua muuta kuin että laittaa oletussivun viimeiseksi sivuksi. Sivujen järjestystähän voi kyllä muuttaa ainakin flexboxin avulla.
Radioelementeillä tätä ongelmaa ei ole, koska sinne voi lykätä suoraan checked-attribuutin merkkaamaan oletussivun ja sillä selvä.
Kiitos Merri, selasin tuon juttusi läpi ja taidan muuttaa tuon käyttämään noita radiobuttoneita, kerta ne on varmatoimisempia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.