sivut.web

ohjeita web-sivuston tekijälle

HTML-opas: Tyylipohjat

Perusteet
- Filosofia
- Käytännön esimerkki
Tyylimääritysten sijainti
Tyylikomentojen antaminen
SPAN ja DIV
Mittayksiköt
Tekstin ulkoasun määrittäminen
Linkit
Dokumentin tausta
- Taustavärin määrittäminen
- Taustakuvan määrittäminen
Listat
Marginaalit
Esimerkkejä
Lisää tyylipohjista

Perusteet

Tyylipohjat (Cascading Style Sheets, CSS; jäljempänä tyylipohjat) tarjoavat hyvin tehokkaita mahdollisuuksia dokumentin ulkoasun määrittämiseen. Ne ovat myös HTML-kielen uudempia lisäyksiä, ja vasta uusimmat selaimet tukevat niitä. Tässä esiteltävät ominaisuudet toimivat Internet Explorer 4.0- ja Netscape Navigator 4.0-selaimissa, ellei toisin ole mainittu. Myös IE 3.0 näyttää useimmat näistä muotoiluista.

Filosofia

Tyylipohjian idea on mahdollistaa dokumentin ulkoasun määrittäminne tarkasti. Esimerkiksi tekstin korkeus voidaan määritää pikseleinä, kun HTML:ssä ollaan perinteisesti tyydytty epämääräiseen tekstin kokoasteikkoon (1-7).

Tyylipohjilla muotoilumääritykset voidaan sijoittaa ulkoiseen tiedostoon, jolloin kaikki kyseistä pohjaa käyttävät tiedostot voidaan päivittää keskitetysti yhtä tiedostoa muuttamalla. Tyylipohjat tarjoavat siis paitsi tarkkuutta, myös helppoutta ja vaivattomuutta.

Monet muotoilut ovat mahdollisia käyttäen vain tyylipohjia, ne avaavat siis kokonaisuutena uusia mahdollisuuksia WWW-julkaisun tekijälle.

Käytännön esimerkki

Seuraavalla esimerkillä havainnollistetaan tyylipohjien mahtia. Luomme perusdokumentin, joka näyttää varsin tavanomaiselta.

<html>
<head>
<title>CSS</title>
</head>

<body>

<h1>Otsikko</h1>

<p>Tämä teksti on perinteistä leipätekstiä.

<b> Osa siitä on lihavoitu</b>,

mutta silti se näyttää verraten tylsältä.</p>

<ul>
<li>Tämä listakin on perinteisen näköinen
<li>eikö totta?
</ul>

</body>
</html>

esimerkit/css-perus1.html

IE40

NC40

Lisäämme dokumenttiin nyt tyylimäärityksiä:

<html>
<head>
<title>CSS</title>
<style>
<!--
	H1,B	{font-style:	italic}
	P	{font-family:	verdana}
	UL	{list-style-type: lower-alpha}
-->
</style>
</head>

<body>

<h1>Otsikko</h1>

<p>Tämä teksti on perinteistä leipätekstiä.

<b> Osa siitä on lihavoitu</b>,

mutta silti se näyttää verraten tylsältä.</p>

<ul>
<li>Tämä listakin on perinteisen näköinen
<li>eikö totta?
</ul>

</body>
</html>

Huomataan, että tyylimäärityksiä voidaan tehdä muun muassa lisäämällä <STYLE> ja </STYLE> -tagit määrityksineen <HEAD>-osioon.

esimerkit/css-perus2.html

IE40

NC40

Kuten huomataan, muutokset dokumentin ulkoasussa ovat varsin dramaattisia. Nyt tutustutaan tarkemmin tyylipohjien käyttöön ja mahdollisuuksiin.

Tyylimääritysten sijainti

Dokumentin alussa

Tyylikomennot voidaan antaa, kuten edellisen kappaleen esimerkissä, dokumentin alussa, sijoittamlla ne <HEAD>-osioon laitettavien <STYLE> ja </STYLE>-tagien sisään. Tällöin on hyvä käyttää seuraavaa rakennetta:

..
<head>
<title>..</title>
<style>
<!--
	valitsin1
		{
			määritys 1;
			määritys 2;
		}
	valitsin2
		{
			määritys 1;
			määritys 2;
		}
-->
</style>
</head>
..

Kuten huomataan, voi erilaisia tyyliasetuksia olla paljonkin. Tämän takia tyylimääritykset vievät usein paljon tilaa. Siksi tyylimääritykset voidaan sijoittaa erilliseen tiedostoon.

Ulkoisessa tiedostossa

Kun tyylikomennot sijoitetaan erilliseen tiedostoon, saavutettaan lukuisia etuja. Niistä merkittävimmät ovat.

tilan säästö itse dokumentissa (lyhyet latausajat)
helppo päivitettävyys (yhtä ulkoista tiedostoa päivittämällä voidaan muutokset saada aikaan kaikkiin ko. tiedostoa käyttäviin HTML-dokumentteihin).

Ulkoinen tiedosto on päätteeltään .CSS ja sen sisälle kirjoitetaan tyylimääritykset kuten edellä  -tagien väliin. Ulkoiset tyylimääritykset otetaan käyttöön lisäämällä <HEAD> osioon rivi:

<LINK REL="stylesheet" TYPE="text/css" HREF="tiedosto.css">

Suoraan

Tyylimäärityksiä voidaan käyttää myös suoraan esimerkiksi <P>-tagissa:

<p style="color: blue;">Sinistä tekstiä</p>

Yhdistellen

Käyttökelpoisimpaan lopputulokseen päästään usein edellisiä keinoja yhdistellen. Tällöin yleiset asetukset voidaan antaa ulkoisessa tiedostossa, niitä voidaan tarkentaa dokumenttikohtaisesti <STYLE>-alueella ja hienosäätöä voidaan tapauskohtaisesti suorittaa antamalla määrityksiä myös ao. tagissa.

Tyylikomentojen antaminen

Tyylikomentoja voidaan antaa monella tavalla. Voimme joko määrittää HTML-elementtejä (P, H1, B) uudelleen, käyttää erityisiä luokkia tai niiden yhdistelmää.

Elementtien määrittäminen

Kuten edellä kuvatussa esimerkissä, useimmiten tyylikomentoja käytetään esimerkiksi tekstityyppien (P, H1, B) uudelleenmäärittämiseen. Seuraava esimerkki valaisee tilannnetta, jossa otsikkojen kirjaisinlajiksi halutaan Verdana:

<html>
<head>
<title>CSS</title>
<style>
<!--
	H1,H2, H3
	{	font-family:	verdana}
-->
</style>
</head>

<body>

<h1>Otsikko1</h1>
<h2>Otsikko2</h2>
<h3>Otsikko1</h3>

</body>
</html>

HTML-tageja voidaan siis ryhmittää tyylimäärityksiä annettaessa siten, että vaikutukset ulottuvat niihin kaikkiin.

Tällaiset asetukset ovat voimassa tilanteesta riippumatta koko dokumentissa.

esimerkit/css-elementti.html

IE40

NC40

Tilanneriippuvaiset valitsimet

Mikäli annamme tyylimäärityksen seuraavasti:

P I {text-decoration: underline}

On alleviivaus kursiivissa voimassa vain, jos sitä käytetään leipätekstin yhteydessä.

CLASS ja ID

Edellä esiteltyä tapaa voidaan rajoittaa käyttämällä luokkia. Esimerkiksi voimme määritellä:

<html>
<head>
<title>CSS</title>
<style>
<!--
	.class

	{	font-family:	verdana}
	#id

	{	font-family:	arial}
-->
</style>
</head>

<body>

<h1>Otsikko1</h1>
<h2 class="class">Otsikko2</h2>
<h3 id="id">Otsikko1</h3>

</body>
</html>

Huomataan, että oleellisesti sama asia voidaan toteuttaa sekä käyttämällä class, että id-valitsimia. Käyttö eroaa yksityiskohdiltaan vain hieman.

Saatuja luokkia (esimerkissä class) voidaan käyttää riippumatta tagista. Esimerkiksi voisimme määritellä leipätekstin:

<p class=class>..</p>

Käyttämällä samaa luokkaa. CLASS ja ID -valitsimet tuovat huomattavasti lisää joustavuutta tyylipohjien käyttöön.

SPAN ja DIV

Edellisissä esimerkeissä esimerkiksi leipätekstiä määrittävä asetus tai luokka vaikuttaa koko kappaleeseen. Käyttämällä ns. aputagia <SPAN> voidaan osa tekstistä muotoiltua toisin. Seuraava esimerkki valoittaa tilannetta:

<html>
<head>
<title>CSS</title>
<style>
<!--
.verdana		
	{	
		font-family:		verdana;
	}
	
.as
	{	
		color: 		blue;
		text-decoration:	underline;
	}
-->
</style>
</head>

<body>

<h1 class=verdana>Otsikko1</h1>

<p>Tämä on normaalia leipätekstiä,

 josta <span class=verdana>osa on

 tyypiltään verdanaa</span>.

<p class=as>Tästä sinisestä ja 

alleviivatusta tekstistä osa on

 <div class=verdana> myöskin verdanaa, 

mutta hupsis, se muodostaa oman 

kappaleensa</div></p>

</body>
</html>

SPAN ja DIV toimivat pitkälti samalla tavalla, mutta DIV aiheuttaa määrittämänsä alueen muuttumisen omaksi kappaleeksi.

esimerkit/css-span.html

IE40

NC40

Mittayksiköt

Tyylipohjien kanssa käytettävät mittayksiköt ovat moninaiset:

H1 { margin: 0.5in }	  tuumia, 1in = 2.54cm
H2 { line-height: 3cm }	  senttejä
H3 { word-spacing: 4mm }  millimetrejä
H4 { font-size: 12pt }	  pisteitä, 1pt = 1/72 in
H4 { font-size: 1pc }	  picoja, 1pc = 12pt

Käytännössä tekstin kanssa käytetään pisteitä, sillä ne ovat muualta tietotekniikasta kovin tuttuja. Joissain tapauksissa myös prosentteja voidaan käyttää.

Tekstin ulkoasun määrittäminen

Tekstin kirjasinlaji

P {font-family : Arial}

Tämä muuttaa tekstin kirjaisinlajin Arialiksi. Koska samat kirjaisinlajit ei ole käytössä kaikilla käyttäjillä, voidaan määritellä vaihtoehtoisia kirjaisinlajeja, joista ensimmäistä järjestelmästä löytyvää käytetään:

P {font-family : Arial, Verdana}

Tekstin tyyli

P {font-weight : bold}

Sallittuja asetuksia ovat myös normal, bolder ja lighter.

Tämä saa tekstin lihavoiduksi.

P {font-style : italic}

Tekstistä tulee kursivoitua. Normaalia tekstiä saadaan määritteellä normal.

Tekstin koko

P { font-size : 12pt }

Tekstin väri

P { color : #FFFFFF}

P {color : blue}

Tekstirivien korkeus

Vihdoinkin HTML-kielessä on mahdollista määrittää tekstiriveille korkeus:

P {line-height=12 pt}

Mikäli tekstin kooksi on määritelty 12 pt, antaa rivin korkeus 24 pt siis kaksinkertaisen rivinvälin.

Tekstin alleviivaus

P { text-decoration: none / underline }

Kirjaimien välit

P { letter-spacing: 12pt }

Huomaa, että negatiivisetkin arvot sallitaan

Tekstin tausta

Nyt on mahdollista antaa tekstillekin taustaväri:

P { background: blue }

Tekstin tasaaminen

P {text-align: left / right / center / justify}

Huomioi, että normaalikeinoin tekstin tasaaminen molemmista reunoista (justify) ei ole onnistunut aiemmin.

Tekstin sisentäminen

P { text-indent: 12 pt}

Tekstin sisentäminen, myös negatiiviset arvot sallitaan.

Linkit

Valitse none, niin teksti on perinteisesti alleviivaamatonta, tai underline, niin teksti alleviivataan. Todellista hyötyä tästä on vasta linkkien yhteydessä:

A:link, A:visited, A:active, A:hover 
{ text-decoration: none / underline }
link 	=  normaali linkki
visited	=  linkki, jota on käytetty
active	=  linkki, jota painetaan hiirellä
hover	=  linkki, jonka päällä hiiren kursori on

Dokumentin tausta

Taustavärin määrittäminen

Saat helposti taustavärin koko dokumentille:

BODY { background: red }

Taustakuvan määrittäminen

Tyylipohjilla onnistuu myös taustakuvan käyttäminen:

BODY { background: url(kuva1.gif) }

Listat

Voit kätevästi määrittää millaisia kuvioita käytetään missäkin listassa. Esimerkiksi:

UL {list-style: disc}

Muita määritteitä:

circle		=	ympyrä
square		=	neliö
none		=	ei mitään
url (jotain)	= 	kuvatiedoto verkosta

Esimerkki jälkimmäisestä:

UL { list-style: url(kolmioni.gif) square }

Oletuksena käytetään omaa kuvatiedostoa, mutta jos sitä ei ole tarjolla, käytetään neliötä.

Marginaalit

Marginaalien asettamiseen tyylipohjat tuovat valtaisasti uutta:

BODY {margin-left: 12 pt}

Vasen marginaali

BODY {margin-right: 12 pt}

Oikea marginaali

BODY {margin-top: 12 pt}

Ylämarginaali

BODY {margin-bottom: 12 pt}

Alamarginaali

BODY {margin: 12 pt}

Koskettaa kaikkia marginaaleja

Huomaa, että tässä yhteydessä voit käyttää myös negatiivisia arvoja!

Esimerkkejä

Tekstin perusmuotoilu

Seuraavassa dokumentissa annetaan lukuisia muotoilumäärityksiä käytettävälle tekstille:

<html>
<head>
<title>CSS</title>
<style>
<!--
H1, H2, H3
	{	
		font-family:		verdana;
	}
	
P
	{	
		font-family:		verdana;
		font-weigth:		bold;
	}

.harvempi
	{
		letter-spacing:	8pt;
	}
-->
</style>
</head>

<body>

<h1>Otsikko1</h1>

<p>Tämä on normaalia leipätekstiä.</p>
<p class="harvempi">Tässä hieman
harvempaa leipätekstiä.</p>

<h3 class=harvempi>Tässä harvempi
 alaotsikko</h3>

</body>
</html>

esimerkit/css-teksti.html

IE40

NC40

Erilaiset linkit

Tässä esimerkissä käytämme erilaisia linkkejä. Normaalistihan linkit ovat olleet esimerkiksi samanvärisiä koko dokumentissa.

<html>
<head>
<title>CSS</title>
<style>
<!--

A:link, A:visited
	{	text-decoration:  none		}
A:hover
	{	text-decoration:  underline	}

.isolinkki
	{	font-size:	20pt; 
		color:		blue		}
.pienilinkki
	{	font-size:	10pt;
		color:		red		}

-->
</style>
</head>

<body>

<h1>Erilaisia linkkejä</h1>

<p>
<A class=isolinkki
HREF="http://www.microsoft.com">
Microsoft</A>
</p>
<p>
<A class=pienilinkki
HREF="http://www.asia.microsoft.com">
Aasian peilipalvelin</A> -
<A class=pienilinkki
HREF="http://www.eu.microsoft.com">
Euroopan peilipalvelin</A>.
</p>

</body>
</html>

Huomaa, että linkin alleviivaus on näkyvillä vain, kun hiiri on ao. linkin päällä. Netscape Communicator 4.0 ei tue tätä toiminnetta.

esimerkit/css-linkit.html

IE40

NC40

Koko ulkoasun hallinta

Tässä esimerkissä luomme dokumentin muotoilun kokonaan tyylipohjilla. Oheiseen dokumenttiin lisätään vain ulkoista tyylipohjaa kutsuva rivi:

<LINK REL="stylesheet" TYPE="text/css" HREF="perus.css">

Dokumentti on alunperin seuraavan kaltainen:

<html>
<head>
<title>CSS</title>
</head>

<body>

<h1>Perusdokumentti</h1>

<p>Tässä dokumentissa ei ole
 mitään erikoista, eihän?</p>

<h3>Otsikotkin ovat perinteistä kokoa</h3>

<ul>
<li>Tämä listakin on perinteisen näköinen
<li>eikö totta?
</ul>

</body>
</html>

Tyylikomennot sisältävä perus.css-tiedosto:

H1
	{
		font-family:	verdana;
		color:		green;
	}

H3
	{
		font-family:		verdana;
		color:			black;
	}

P
	{
		font-family:		arial;
		color:			green;
	}

UL
	{
		list-style: 		square;
	}

BODY 
	{
		background: 	white;
		margin-left:		40 pt;
		margin-right:	40 pt;
		margin-top:		40 pt;
		margin-bottom:	40 pt;
	}

Alkuperäinen dokumentti:

esimerkit/css-perus3.html

IE40

NC40

Tyylikomennot käyttöönottavan rivin lisääminen muuttaa ulkoasun dramattisesti:

esimerkit/css-perus4.html

IE40

NC40

Lisää tyylipohjista

Tyylipohjat tulevat vielä kehittymään, olenkin tässä esitellyt vain kaikkein merkittävimmät ominaisuudet. Lisätietoa tyylipohjista löydät kätevästi osoitteesta http://www.w3.org/Style/.

W3 on organisaatio, joka huolehtii mm. HTML:n kehityksestä.

Käyttäjien kommentit

13.5.2003 12:16
Suvi

Kiitos paljon hyvästä sivustosta, sain juuri tarvitsemani tiedot. Selkeä esitystapa ja havainnolliset ohjeet tekevät sivustosta helpon ja miellyttävän käyttää. Arvosana: 10+

9.9.2003 14:16
::)

Erittäin hienot ja kätevät sivut! Juuri sellaista tietoa, jota tarvitsen. :)
Sama juttu... 10+ arvosanaksi.

1.10.2003 16:10
alfasusi <alfasusi@alfasusi.net>

Loistavaa! Helppotajuisia ohjeita! Kiitos!

5.11.2003 15:05
FearMTC <mtcfear@suomi24.fi>

Voikos css-stylesheeteillä muunnella tableja?Miten tableihin voisi sitten asetella arvoja kuten valign="top" jne. Lisäksi nämä cellpaddingit ja cellspacingit olisi mukava saada noilla toimimaan. En ole ainakaan aiemmin onnistunut.

9.11.2003 17:14
Juha-Pekka Järvenpää <jp@sivut.org>

Tyylejä voi asettaa mille tahansa elementille, myös TABLE:lle.

Tutustu tyylipohjien dokumentaatioon osoitteessa http://www.w3.org/TR/CSS1.html . Lue sieltä vaikka kohdat 'vertical-align' ja 'text-align'. Nämä vastaavat HTML:n valign- ja align-attribuutteja.

7.1.2004 09:17
Make <mahaapam@kauhajoki.fi>

A:link -valitsimella voi laittaa linkin värin mutta se ei muuta kuvalinkin kehyksen väriä, kuten tapahtuu hoidettaessa homma body-tagin attribuuteilla (link, alink, vlink). Miten tämä tehdään CSS:llä ?

22.1.2004 15:53
Juha-Pekka Järvenpää <jp@sivut.org>

Make: kyllä A:LINK -valitsin vaikuttaa kaikkeen, mikä A-tagin sisään jää, myös kuviin. Kokeilepa eri selaimilla.

20.2.2004 08:06
Stanic

Kiitos näistä loistavista ohjeista =)

21.3.2004 19:12
harri

Kerrankin hyvät suomenkieliset ohje sivustot
10+

27.4.2004 14:27
niko <nikopetter@jippii.fi>

hyvät sivut 10+

12.6.2004 12:47
Ville Pietarinen <villep@mbnet.fi>

"SPAN ja DIV" -esimerkissä on kirjoitusvirhe: alleviivaus ei toimi, koska text-decoration on kirjoitettu väärin.

Todella hyvät sivut olet kokonaisuudessaan väsänyt. Lukaisin "HTML-tekniikoiden mustalista" -kirjoituksen ja huomasin, ettei taulukkoja pitäisi käyttää asetteluun. Olen ennen käyttänyt niitä paljon, mutta nyt olen kiinnostunut tekemään saman tyylipohjilla. Mitä keskeisiä määrittelyjä minun tulisi käyttää elementtien asettelussa? Hmh, ovatkohan ne float, position, display jne... Täytyypä opiskella lisää. :)

12.6.2004 12:49
Ville Pietarinen <villep@mbnet.fi>

Hups, teitähän on monia tekijöitä. Kiitos kaikille.

15.6.2004 08:45
Juha-Pekka Järvenpää <jp@sivut.org>

Korjasin kirjoitusvirheen text-decorationissa.

En lähde tässä erittelemään taittotekniikoita tyylipohjilla, mutta seuraavista saattaa olla apua:

http://www.alistapart.com/articles/journey/
http://glish.com/css/

28.7.2004 15:28
pallopulla

Kuva linkkien ympärille tulee kehys. miten sen sais pois?

28.7.2004 16:00
Juha-Pekka Järvenpää <jp@sivut.org>

Kuvalinkeistä saa linkkiominaisuuden osoittavan reunuksen pois määritteellä border.

<img src="omakuva.jpg" width="100" height="50" alt="Omakuva" border="0">

Border-määriteen käyttö on paheksuttavaa (deprecated), joten reunuksen poisto tulee toteuttaa tyylisäännöllä:

<img src="omakuva.jpg" width="100" height="50" alt="Omakuva" style="border-style: none;">

15.8.2004 08:45
smoke

Miten kuvalinkkiin saa animaation?

9.9.2004 22:40
joum@n

Saisko jotenkin sillei, että kuva venyis toisesta reunasta toiseen?

Eikös linkkikuvaan saisi animaation sillei, että pistää sen GIF muodossa? Tai sit hösläät Flashilla.

10.9.2004 19:18
hahahu

Miten sais venytettyä kuvan toisesta reunasta toiseen? paitsi hösläämällä koolla?

3.10.2004 12:29
JiiPee

Kuinka kykenen muuttamaan taustakuvan kokoa?Asetin erään kuvan sivujeni taustakuvaksi, mutta kuva kun oli hiukan liian pieni, niin kuvaa on sitten vierekkäin muutama kappale.

2.12.2004 09:27
Oskari <ozquli@gmail.com>

Miten saan laitettua taustakuvan vain marginaalien sisä- tai ulkopuolelle? Haluaisin että marginaalien reunan puolella olisi taustakuva ja marginaalien välissä olisi valkoinen pohja.

2.12.2004 12:45
Juha-Pekka Järvenpää <jp@sivut.org>

Vain marginaalien täyttäminen taustakuvalla on varsin helppo toteutus.

Annetaan ensin koko sivulle taustakuva body { background: url('tausta.png'); color: black; }.

Annetaan sitten diville, johon sisältö on kiedottu, taustaväri div#sisalto { background: white; color: black; }

HTML-koodi:

<body>

<div id="sisalto">
<h1>foobar</h1>
<p>foo</p>
<p>bar</p>
</div>

</body>

Muista aina antaa myös tekstille color-määrite kun määrität taustakuvia tai -värejä!

26.12.2004 18:15
COLDEN <faba_virtanen@hotmail.com>

hyödyllistä kamaa ja moni puolista tietoa
ihan jees!!!

8.1.2005 12:38
petteri TAAS kerran <petterizitting@luukku.com>

No nää sivut on 10++ plus 0%-100% 1000%!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!TOSI SELKE¤ET OHJEET&%¤&#%"¤&¤"%&"#)%"¤=&"%(=&%("=& %(&%"="("&=¤(&%"="("((= &regm

27.2.2005 18:06
sasuska

mä nyt en tajuu miten näit koti sivui tehään..

22.3.2005 18:27
jasse

Miten saisi esim. copyright-tekstin pysymään ihan siellä sivun alareunassa, kun itse tekstiä ei kuitenkaan ole kuin puoli sivua?! yritin margin-bottomilla mutta se on ilmeisesti minimimääritys...

27.3.2005 14:48
Juha-Pekka Järvenpää <jp@sivut.org>

Margin-bottom vaikuttaa elementkin omaan alamarginaaliin, eikä sillä ole mitään tekemistä koko sivun asettelun kanssa.

Seuraava koodinpätkä asettanee tekstin alareunaan.

<div style="position: absolute; bottom: 0;">
© Mulla on kaikki oikeudet
</div>

10.4.2005 12:22
Mikko Sulonen <mikko_sulonen@hotmail.com>

Voisiko css:llä ratketa seuraavanlainen ongelma:
Sivujeni oikealla ja vasemmalla laidalla on kuvat omissa soluissaan. Molemmille kuville on annettu määritys tavallisella html:llä "heihgt="100%"". Firefox ymmärtää tämän, ja korottaakin kuvien korkeutta yhtä korkeiksi, kuin sivun sisältökin. Ie sitten taas ei ymmärrä jostain maagisesta syystä, ja jättää kuvat alkuperäiseen kokoonsa (joka on 1pt).

Koodin pätkä:

<td width="112" align="left" height="100%">
<img src="vasen_tausta.gif" height="100%" width="112">
</td>

10.4.2005 12:26
Mikko Sulonen <mikko_sulonen@hotmail.com>

Niin ja vielä lisäten edelliseen, sivujeni ulkoasun olen tehnyt taulukoilla css:n osaamattomuuteni takia, oliko aivan huono idea? Sivut ovat vielä sen verran alussa, että alusta aloittaminen css:n turvin ei tule olemaan mahdotonta.

Kiitokset mahtavista sivuista ja mahdollisesta vastauksesta jo etukäteen!

10.4.2005 20:43
Juha-Pekka Järvenpää <jp@sivut.org>

Mikko on ilmeisesti tekemässä kärpäsestä härkästä. Tässähän halutaan asettaa soluun tausta.

<td style="background-image: url('vasen_tausta.gif');"></td>

Kannattaa ihan tosiaan suunnitella sivut alun alkaen siten, että merkkaa tekstin ensin HTML:llä, sitten vasta ulkoasun CSS:llä.

26.1.2006 08:04
Kai Erik Sellgren <kaisellgren@gmail.com>

Itse pidän myös vaihtoehdosta:
<td background="images/background.jpg">Pöö</td>

12.2.2006 18:26
tipsu <morttiska@luukku.com>

ei millää pahal mut toi teijän tausta väri juttu ei toimi..... mul tulee valkonen tausta mis lukee { background: "väri" }

et jos voitte neuvoo miten saan siihen tulee sen värin????

10.3.2006 00:08
Jespe-Susu <jesse.hilden@luukku.com>

Siis aluksi en tajunnut yhtään mitään HTML stä. Mutta kun löysin nämät sivut niin tiedän KAIKEN tarpeellisen. Näistä sivuista on ollut paljon hyötä minulle, ja varmasti muillekkin.

!! KIITOS !!

14.4.2006 17:40
Vsnkeläin

Hyvät sivut joilla päsee hyvin alkuun, mutta nyt olisi ongelma. Miten saan tekstin alkamaan juuri tietystä kohdasta, marginaaleja en halua käyttää, sillä eri resoluutiolla teksti on jossain aivan muualla kuin pitäisi !?

5.5.2006 00:46
pöppönen

asd asd oon keinyyp

20.5.2006 11:21
Mattu

Hyvät sivut oli opin paljon asiaa

30.6.2006 19:55
Apua

Miten kuvan päälle saa tekstiä?

27.7.2006 09:49
Jani

Mistä johtuu, että (ainakin Mozillalla) linkkien text-decoration aiheuttaa myös muun tekstin esim. <p>:ssä muuttumisen? Voiko tälle mitään?

27.7.2006 10:02
Jani

Selvisikin kun jaksoi aikansa pähkäillä. Mutta kiitos loistavista sivuista!

30.9.2006 13:40
NPe <u-know-who@netti.fi>

<HTML>
<BODY>
<P>Mahtavat sivut!!! Hyvin selvää ja havainnollista. Nyt alankin tästä vähän niinku värkkää sivui... :D</P>
<hr>
<P>Arvosana: 10+</P>
<hr>
<FONT SIZE=1>no copyrights!</FONT>
</BODY>
</HTML>

10.1.2007 14:45
Hannu Ikonen <hannu_ikonen89@hotmail.com>

Terve! Miten saa taustakuvan silleen että se pienenee ikkunan mukana? Eli kun lähtee vetämään selain ikkunan kulmasta nii taustakuva menee mukana?

14.1.2007 16:31
Ansku <anniinas_91@hotmail.com>

Eli siis jos liitän CSS:n ulkoisesti, sen tiedoston on oltava samassa kansiossa muiden kotisivun tiedostojen kanssa, ne?
MUTTA. Pitääkö siihen vain laittaa juuri tuollaiset:
<style>

</style>

..tyyppiset koodit? Vai mitä sinne pitäisi laittaa? Koko sivun koodit yhdessä? En ole tajunnut näitä vieläkään. Entäs se, kun tuossakin esimerkissä nuo välit ovat valtavia. Summissaanko sitä vaan laitetaan jumalattomasti välilyöntejä, vai? Onko noilla väleillä suurikin merkitys ja miten ne tehdään? >____<
Oikeastaan tarvitsisin vain ohjetta, miten saan laatikon tekstiin marginaalit kummallekin puolelle ja tekstin tasautuvan vain vasemmalle reunalle. (Se venyttää sanat itsestään laatikon kummallekin reunalle.)

17.1.2007 16:06
Takkuli

.ala {
font-size: 12px;// fontin koko
color: #C0c0c0; // fontin väri
text-align: left; //fontti tasataan vasem
margin-top: 10px; //yläreunasta on 10px marginaali
}

table.main
{
width: 600;
border: 0;
padding-top: 10px;
}
<style> jututkin voit jättää pois!

Mutta muista laittaa haluamaasi kohtaan esim <td class="ala" ..tai <p class="ala"... varsinaiseen html documenttiin.

12.3.2007 23:21
Löytyykö

Niin löytyykö diveistä jossain enemmän asiaa, kun oli aika suppeasti, esim kuinka teet sivupohjan sun muuta..

Mutta siis kuinka saat tekstiosion keskitettyä, sillain että sivuille jää taustaväri..? Diveillä siis..

23.3.2007 09:00
JOKU

TÄH?
En jaksanut lukee kaikkii mut mulle ei selvinny nää kaks juttuu: maksaaks se? ja missä se tehää!!!??!!

26.3.2007 23:15
minävain

Niin ei tämä sivujen tekeminen maksa, sen julkaiseminen vain saattaa maksaa jos hommaa kunnon domainin. Muistiolla on hyvä lähteä liikkeelle sivuja tehdessä. Niin ja Anskulle vielä kommentti että ei siihen "ulkoiseen" .css tiedostoon tarvite laittaa <style> määrittelyitä. Laitat vain html tiedostoon head tagien sisään linkin siihen tiedostoon.
ESIM.
<HEAD>
<link rel="stylesheet" href="tyylipohjat.css" type:"text/css">
</HEAD>

ja se linkki kirjoitetaan tuon href attribuutin jälkeen. Eikä sen css tiedoston tietääkseni tarvitse olla samassa kansiossa muiden html tiedostojen kanssa, jos vain huomioi sen linkityksesä. esimerkiksi .css tiedosto voisi olla vaikka alikansiossa nimeltä "alikansio". Tällöin linkitys tapahtuisi seuraavasti:

<HEAD>
<link rel="stylesheet" href="alikansio\tyylipohjat.css" type:"text/css">
</HEAD>

26.3.2007 23:23
kuvan päälle tekstiä..

Joku kyseli että miten kuvan päälle saa tekstiä. Siihen on ainakin yksi tapa:

teet aluksi taulukon ja laitat vaikkapa solun taustakuvaksi haluamasi kuvan.(solu ilmaistaan <td> tagilla) Tällöin solun kuuluu olla kuvasi kokoinen.

esim.

<table>
<tr>
<td background="kuva.png" width="200" height="150">
TÄHÄN TEKSTIÄ
</td>
</tr>
</table>

1.4.2007 11:38
Negrito

Osaisiko kukaan neuvoa miten tuonne hakupalkkiin saa oman sivustonsa logon. Esim. Googlessa siellä on googlen logo. ja tätä kirjottaessani siellä näkyy internet explorerin logo.

23.4.2007 16:02
hetkonen..

mitenköhän sivun koon voi määrittää, eli esimerkiksi jos haluaisin että leveys pysyisi vaikkapa tuona 1024px:ä eikä muuttuisi vaikka selainikkunan pienentäisi miten pieneksi tahansa.

13.6.2007 14:38
Mikko (1st-target)

Tossa oli mittayksiköistä... eli voisko tehä jonkin koodin jolla esim vaihtaa "## kiloa = ## paunaa"?
Sitä soveltaa ja laittaa esim. rahayksikönvaihtajan...

21.6.2007 15:12
ei onnistu html:n avulla

Ei se onnistu html-kielen avulla, eikä tietenkään css:ää voi myöskään käyttää siihen tarkoitukseen. Javascriptillä se saattaisi onnistua. Nuo mittayksiköt tarkoittivat esim. otsikon kokoa, se että ne oli selvennetty toisella mittayksiköllä auttaa vain havainnollistamaan sen tietyn mittayksikön kokoa. voit yrittää etsiä haluamaasi scriptiä osoitteesta http://javascript.internet.com

31.7.2007 15:47
olli <ooperi@luukku.com>

sain tarvitsemani tiedot...meni vaan kaua aikaa lukee mut who cares? arvosana 10+

1.11.2007 20:15
Late

Erinomainen sivusto! Sain paljon vinkkejä sivuihini tämän kautta! =D Mutta yksi asia jäi epäselväksi.. Miten voin määrittää sivujen "koon"? Elikkä en halua että sivuni ovat koko näyttöruudun kokoiset. Kiitoksia etukäteen!

10.12.2007 19:02
niko <niko.etelaniemi@luukku.com>

miten mää saan kotisivun näkymään pienemmässä koossa?... ja miten voi kuvien pälle laitta tekstiä?
huiput sivut... ei muuta vois sanoo xD :)

10.12.2007 19:18
niko <niko.etelaniemi@luukku.com>

millä koodilla voin saada hyvän käviä laskurin, joka otta vain kerran päivässä samalta koneelta?

6.1.2008 19:41
Semi-aloittelija

Millä käskyllä, tai miten HTML:llä saan estettyä hiiren oikean näppäimen käytön sivuillani. Muistan koulussa joskus tehneeni niin kotisivuilleni, mutten muista enää miten sen tein. Haluaisin niin, että jos klikkaan oikeaa näppäintä esim tallentaakseen kuvan sivuilla, niin esiin paukahtaa vain teksti esim "copyright" tms. ? Tällöin ei myöskään näe lähdekoodia tms, "oikean näppäimen valikkoa"..

14.1.2008 18:11
Will3

Miten saan taustakuvan liitettyä? Kun yritin laittaa, ja katsoin sen jälkeen, koodi näkyi tekstinä eikä taustakuva tullut sinne.

3.3.2008 14:43
Keijo Pitkänen <keijon.p@suomi26.com>

vittu mitä paskaa ei näistä tajuu anuksenkorvikekkaan mitää imekää anusta. kiitos

3.3.2008 14:55
Toni Törnqvist

Kuules keijjo pitkänen olet täysi luuseri ja voit mennä muualle kertomaan silleen skoijar du anal?

4.3.2008 11:01
???

Niin just!! tarviin äkkii tietoo miten saan taustakuvan näkyviin.. ku näkyy vaan koodi vai suoraan kopioin täältä!! APUA!!

4.3.2008 11:01
????

Korjaus: *vaikka kopioin täältä!

28.3.2008 16:10
penaerkkikalevi

kun on tehny ton nettisivun muistiolla ni mihin se pitää sen jälkeen laittaa??? ku ei oikeen selviä täältä oon talettanu sen ni miten se tulee sinne nettii?

18.4.2008 17:12
wildli

penaerkkikalevi, sun pitää hostata ne sivut jonnekkin, etsi googlella joku sivujen hostaus paikka. Esim freewebsiin saa laittua omaa koodia.

23.4.2008 09:10
asda <sdasd@asdddddddddde.con>

lköj

24.4.2008 10:54
Sarry <smuge9@hotmail.com>

Hei!
Onko HTML:ssä tai CSS:ssä sellaista koodia, että kuvasuhde näyttöön pysyy samana normaalissa tietokoneen näytössä, kuin laajakuvanäytössäkin, kun sivuja katsoo? Ettei laajakuvassa tarvitsisi skrollata.

24.4.2008 17:20
tuntematon

En tiedä koodin pätkästä. Mutta html editorilla kuten nvulla pystyy.

3.9.2008 11:34
LM

tää obn ihan perseestä tee selkeitä ohjeita vitun hintti!!!!!!!! ei tästä tajuu mitään!

Lisää oma kommentti

Tatu Jaakkola
tatu@jaakkola.net
http://tatu.jaakkola.net/