Näkyvyys, display-, visibilyty-asetus
Erilaisilla display-asetuksilla voidaan asettaa HTML-elementtiryhmän sijainti peräkkäin tai alekkain mutta voidaan myös tehdä muitakin temppuja.
Näkymätön elementti
Esimerkissä diaplay: none asetuksella piilotettaan h3-otsikkoteksti:
CSS-ohjeet:
h3.piilossa {
display: none;
}
.sinivihrea{
color: CadetBlue;
}
HTML-koodaus:
<div class="sinivihrea">
<h3>H3-elementti jonka teksti näkyy</h3>
<h3 class="piilossa"> Piilotettu H3-elementti </h3>
<p>HTML-elementti voidaan CSS-ohjeella asettaa näkymättömäksikin.</p>
</div>
H3-elementti jonka teksti näkyy
Piilotettu H3-elementti
HTML-elementti voidaan CSS-ohjeella asettaa näkymättömäksikin.
Edellisen esimerkin voi toteuttaa myös visibility: hidden asetuksella.
Seuraavassa esimerkissä piilotetaan, poistetaan ja näytetään HTML-elementtejä käyttäen apuna JavaScript-funktioita.
CSS-ohjeet:
.poksi {
float: left;
text-align: center;
width: 120px;
border: 1px solid GREEN;
margin: 4px;
padding: 6px;
background-color: RGB(204,225,225);
}
.painikeB {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
/*display: inline-block;*>
font-size: 16px;
width: 100%;
}
HTML-koodaus:
<div class="sinivihrea">
<h3>H3-elementti jonka teksti näkyy</h3>
<h3 class="piilossa"> Piilotettu H3-elementti </h3>
<p>HTML-elementti voidaan CSS-ohjeella asettaa näkymättömäksikin.</p>
</div>
Tässä voi olla tekstiä ja kuva
Piilottaminen poistaa HTML-elementin näkyvistä
JavaScript on kätevää
RAKENTEILLA !!!
img-elementti
Taulukossa img-elementin atribuutit ja määritteet:
| Atribuutti | Määritteet | Tarkoitus |
|---|---|---|
align | "top" "bottom" "middle" "left" "right" | Tasaustapa EI HTML5 - käytä CSS |
alt | Esim.<img src="kuva1.gif" alt="Hymynaama" align="middle"> | Oletusteksti, näkyy mikäli kuva ei näy. |
border | Esim.<img src="kuva1.gif" alt="Hymynaama" border="5"> | Kehyksen eli kehysviivan paksuus pikseleinä EI HTML5 - käytä CSS |
crossorigin | ? ? | UUSI HTML5 ? ? |
height | Esim.<img src="kuva1.gif" alt="Hymynaama" height="120" width="260"> | Kiinnitetty korkeus pikseleinä. Käytä harkitusti yhdessä CSS:n kanssa |
hspace | Esim.<img src="kuva1.gif" alt="Hymynaama" hspace="20"> | Vaakasuuntainen tila pikseleinä EI HTML5- käytä CSS |
ismap | Katso opas LINKIT | Palvelinpohjainen karttatiedosto |
longdesc | ? ? | Kehyksen sisällön kuvaus Ei HTML5:ssä |
src | Esim.<img src="../kuvat/kuva1.gif" alt="Hymynaama" align="middle"> | Linkitettävän kuvan osoite. Osoite paikkaan jonne www-sivun kuvat on talletettu. Osoitteella voidaan viitata muulle www-sivustollakin. |
usemap | Katso opas LINKIT | Asiakaskohtainen karttatiedosto |
vspace | | Pystysuuntainen tila EI HTML5 |
width | Esim.<img src="kuva1.gif" alt="Hymynaama" height="120" width="260"> | Kiinnitetty leveys, käytä mielummin CSS |
Esimerkkejä img-elementin atribuuttien ja määritteiden käyttämisestä:
<img src="kaara.jpg"
Alla kuva player:n www-treenaussivustolta, käyttäen em ohjeen viimeistä esimerkkiä:
figure ja figcaption-elementit
Kuva voidaan sijoitetaan img-elementissä figure-elementin sisään sekä kohdistaa figure-elementtiin CSS-ohjeita. Alla kuvaan
on lisäksi liitetty kuvan alle teksti figcaption-elementillä, joka voidaan muotoilla CSS-ohjeilla.
(Esimerkissä käytetty Googlen fonttityyppiä).
<figure>
<img src="Inarinhopea.jpg" alt="Inarinhopea, yrityksen nimikkoperho" width="75%"/>
<figcaption class="lohiperho"> Inarinhopea ja wanha perhosidonta-opas. </figcaption>
</figure>
