|
CSS vodiči
|
|
S CSSjem lahko naredite male oblačke z besedilom, katerih namen je na kratko razložiti neznano besedo. Malo bolj znan angleški izraz je tooltip. S priloženo kodo lahko sedaj sami naredite tooltip za željeno neznano besedo na svoji spletni strani.
| HTML in CSS koda |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div{width: 200px; color: #3399ff;}
a.okno {color:#ff0000; text-decoration: none; border-bottom: 1px dotted #ff0000;}
a.okno b {display:none;}
a.okno:hover {border: none; position:relative; z-index:500;}
a.okno:hover b {display:block; position:absolute; top:25px; left:-20px; padding:5px; font-weight:normal; color:#000; border:1px solid #ff0000; background:#fff; width:150px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
/* kljukica */
a.okno:hover b em.kljukica1 {position:absolute; left:20px; top:-8px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #ff0000; overflow:hidden; z-index:100;}
a.okno:hover b em.kljukica2 {position:absolute; left:20px; top:-7px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #fff; overflow:hidden;; z-index:100;}
</style>
</head><body>
<div>
Moje-Mesto.com slovenska spletna stran s slovenskimi vodiči s področij
<a class="okno" href="#">HTMLja<b><em class="kljukica1"></em><em class="kljukica2"></em>Hyper Text Markup Language</b></a>
, CSSja, Windowsov in Photoshopa.
</div>
</body></html>
|
PRIKAZ oblačka z namigom oz. tooltipa
|
