Css ja div-elementti

CSS ja div-elementti

Div-elementtiä käytetään yleisesti niputtamaan yhteen elementtijoukkoja tai muodostamaan alue sivulle. Elementtijoukon tai alueen ominaisuudet, kuten paikka sivulla voidaan tällöin määritellä sivulla tarkasti.

<STYLE TYPE="text/css">

	#palsta1 {
		position:relative;
		top:20px;
		left:100px;
		width:100px;
		height:200px;
		background-color:#606005;
		border:1px;
		color:#ffffff;		
		font-family:Verdana;
	}

	#palsta2 {
		position:relative;
		top:40px;
		left:0px;
		width:100px;
		height:100px;
		background-color:#606060;
		color:#ffffff;		
		font-family:Verdana;
	}

</STYLE>
	
	<h2>Sivuotsikko</h2>

	<div id="palsta1">Tekstiä ja kuvaa laatikossa, jossa id='palsta1'</div>

	<div id="palsta2">Toisen laatikon tekstit, kuvat jne. (id='palsta2')</div>

Sivuotsikko

Tekstiä ja kuvaa laatikossa, jossa id='palsta1'

Toisen laatikon tekstit, kuvat jne. (id='palsta2')

Div-elementin css-määrityksiä

Div-elementissä tuntuvat toimivan kaikki fontin laatuun vaikuttavat css-määritykset. Lisäksi alla muutamia muita esimerkiksi palstan kokoon ja sijaintiin liittyviä määrityksiä.

Lisää palstoihin ja muihin elementteihin saatavia ominaisuuksia löydä sivulta:
http://www.w3schools.com/cssref/

Sijainti, leveys ja korkeus
position	sijainnin laji	relative tai absolute eli sijainti suhteessa muihin elementteihin sivulla tai sijainti suhteessa sen elementin vasempaan ylänurkkaan, minkä sisällä ollaan
top	sijainti ylhäältä	pikseleinä
left	sijainti vasemmalta	pikseleinä
z-index	tason päällekkäisyys	numeerinen arvo 0,1,2 jne. Jos tasot menevät päällekkäin, niin suuremman arvon saanut on päällä.
height	elementin korkeus	pikseleinä
width	elementin leveys	pikseleinä
Näkyvyys
display	elementin näkyvyys	hidden tai visible
overflow	mitä tehdään, jos sisältö menee reunojen yli	auto, hidden, scroll
overflow-x	mitä tehdään, jos sisältö menee reunojen yli vaakatasossa	auto, hidden, scroll
overflow-y	mitä tehdään, jos sisältö menee reunojen yli pystytasossa	auto, hidden, scroll
Tausta
background-color	taustan väri	esim. heksadesimaalina
background	taustakuva	esim. url("tausta.jpg");
background-repeat	taustakuva toisto	repeat-x, repeat-y, no-repeat
background-position	taustakuva paikka x y	esim. 100px 200px
background-attachment	taustakuva pysyminen paikallaan	esim. scroll, fixed, local
Marginaaleja
margin-left	vasen marginaali	koko esimerkiksi 12px
margin-right	oikea marginaali	koko esimerkiksi 12px
margin-top	ylämarginaali	koko esimerkiksi 12px
margin-bottom	alamarginaali	koko esimerkiksi 12px
margin	koskee jokaista marginaalia	koko esimerkiksi 12px
padding	sisämarginaali	koko esimerkiksi 12px
padding-top	yläsisämarginaali	koko esimerkiksi 12px
padding-bottom	alasisämarginaali	koko esimerkiksi 12px
padding-left	vasen sisämarginaali	koko esimerkiksi 12px
padding-right	oikea sisämarginaali	koko esimerkiksi 12px
Fonttiin vaikuttavia
font-family	kirjasinlaji	tyylin nimi
font-weight	tekstin tyyli	bold, bolder, normal, lighter
font-style	kirjaisimen tyyli	esimerkiksi normal, italic
font-size	tekstin koko	koko esimerkiksi 12px
color	fontin väri	värin nimi tai RGB-arvo heksadesimaalina
line-height	tekstirivin korkeus	koko esimerkiksi 12px
text-decoration	tekstin 'koristelu'	none, underline, overline, line-through
letter-spacing	kirjainten väli	koko esimerkiksi 12px
background-color	tekstin taustaväri	värin nimi tai RGB-arvo heksadesimaalina
text-align	tekstin tasaaminen	left, right, center tai justify
text-indent	tekstin ensimmäisen rivin sisentäminen	sisennys esimerkiksi 12px
float	tekstin kierrätys	pikseleinä
clear	tekstin kierrätyksen lopetus	pikseleinä
Reunan ominaisuuksia
border-color	reunan väri	esim. heksadesimaaleina
border-width	reunan paksuus	pikseleinä
border-style	reunan tyyli	solid, dotted, dashed, double, groove, ridge, inset, outset
border-radius	reunan kulmien pyöristyminen	esim. 10px

Esimerkki

Tehdään esimerkki, jossa rakennetaan koko nettisivu pelkästään div-elementtien varaan. Etuna tässä on se, että nettisivun tekeminen pelkistyy vain css-määrityksien tekemiseen. Itse body-osaan ei tarvitse laittaa juurikaan ulkonäköön vaikuttavia parametrejä.

Huomaa, että palstojen position-arvot on laitettu absolute-mukaisesti. Koska div-elementit sijaitsevat bodyn sisällä lasketaan sijainti koko sivun eli body-elementin vasemmasta ylänurkasta lukien.

Esimerkkisivu


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>


<head>

	<title>
		Div-esimerkki
	</title>


<style type="text/css">

body {
	background: url('../kuvat/beige-tausta.jpg');
}

a.linkki:link {
		text-decoration: none;
		color:#ff0000;
}

a.linkki:visited {
		text-decoration: none;
		color:#00ff00;
}

a.linkki:hover {
		text-decoration: underline;
		color:#0000ff;
}

a.linkki:active {
		text-decoration: none;
		color:#000055;
}

#linkkilista{	
		position:absolute;
		top:50px;
		left:10px;
		width:200px;
		background-color:#f3e2e2;
		font-family:arial;
		font-size:18px;
}

#otsikkokentta{	
		position:absolute;
		top:30px;
		left:250px;
		width:800px;
		background-color:#f3f2f2;
		font-family:arial;
		font-size:28px;
		text-align:center;
}

#keskiteksti{	
		position:absolute;
		top:70px;
		left:250px;
		width:800;
		height:400;
		background:url(tausta.jpg);
		font-family:arial;
		color:#020211;
		font-size:16;
		text-indent:20;
		line-height:20px;
}


</style>

</head>

<body>


<div id="linkkilista">

Linkkini:<br /><br />
	<a href="http://www.google.fi" class="linkki">Google</a><br />
	<a href="http://www.facebook.com" class="linkki">Facebook</a><br />
	<a href="http://www.youtube.com" class="linkki">Youtube</a><br />
	<a href="http://www.vesay.edu.hel.fi" class="linkki">Koulu</a><br />

</div>


<div id="otsikkokentta">
Sivuni otsikko
</div>



<div id="keskiteksti">
<img src="../kuvat/anim.gif" width="200" align="left" /><br />
Tässä voisi olla kuvaa ja tekstiä koskien jotain sivun asioita.
<br />

</div>

</body>

</html>

Valikko: