Dreamweaver- logiikka kadoksissa ohjelman suhteen

zemex · Viesti Kirjoittaja **zemex** » 11.3.2007 klo 21.37

Teenpä pienen esimerkin tuosta css- rollover nappulasta..

Eli ensin tehdään html pohja:


<head>
<title>Esimerkki</title>
<link href="tyyli.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<ul id="valikko">
<li><a href="index.html">Linkki 1</a></li>
<li><a href="index.html">Linkki 2</a></li>
<li><a href="index.html">Linkki 3</a></li>
<li><a href="index.html">Linkki 4</a></li>
</ul>

</body>
</html>

Sitten tehdään erillinen css-tyylitiedosto:

Koodi: Valitse kaikki

#valikko { 
	margin: 0;
	list-style:none;
	background-color:#900000;
	padding:.1px;
	 }
	
#valikko li { 
	display:inline;
	padding:1px; 
	background-color:#000000;
	text-decoration: none;
	}
#valikko li a { 
	color:#FFFFFF;
	text-decoration: none;
	 }
	
#valikko li a:hover { 

	background-color:#666666;
	text-decoration: none;
	 }

Eli nyt on valikko punertava ja nappulat mustat valkoisella tekstillä. Kun hiiren siirtää
napin päälle se muuttuu harmaaksi. Eli ei mikään kauhean vaikea homma tehdä pelkällä css:llä rollover. Tietenkin pystyy tekemään vielä hienompia juttuja mutta se alkaa mennä jo sitten monimutkaisemmaksi.

Toivottavasti olisi jotain apua eikä aiheuttas lisää huolta