mám drobný problém
zkouším horizontální obrázkové menu
něco jako:
Kód: Vybrať všetko
#menu
{ position: relative;
left: 0px;
top: 0px;
width: 639px;
height: 31px;
float: left;
}
#home-nav
{ width:95px;
height:31px;
margin:0 auto;
background:#acacac url(images/menu-home-dis.jpg) no-repeat;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#sluzby-nav
{ width:100px;
height:31px;
margin:0 auto;
background:#acacac url(images/menu-sluzby-dis.jpg) no-repeat;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#prace-nav
{ width:171px;
height:31px;
margin:0 auto;
background:#acacac url(images/menu-prace-dis.jpg) no-repeat;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#home-nav ul, #sluzby-nav ul, #prace-nav ul
{ border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
position: relative;
top: 0px;
left: 0px;
}
#home-nav ul li, #sluzby-nav ul li, #prace-nav ul li
{ display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#home-nav ul li a span, #sluzby-nav ul li a span, #prace-nav ul li a span
{ display: none;
}
#home-nav ul li a
{ width:95px;
height:31px;
margin:0px;
padding:0px;
display: block;
}
#sluzby-nav ul li a
{ width:100px;
height:31px;
margin:0px;
padding:0px;
display: block;
}
#prace-nav ul li a
{ width:171px;
height:31px;
margin:0px;
padding:0px;
display: block;
}
/* -- Hovers -- */
#home-nav ul li a.home:hover
{ background: url(images/menu-home-ena.gif);
}
#sluzby-nav ul li a.sluzby:hover
{ background: url(images/menu-sluzby-ena.gif);
}
#prace-nav ul li a.prace:hover
{ background: url(images/menu-prace-ena.gif);
}
/* -- Active -- */
#home-nav ul li a.home:active
{ background: url(images/menu-home-ena.gif);
}
#sluzby-nav ul li a.sluzby:active
{ background: url(images/menu-sluzby-ena.gif);
}
#prace-nav ul li a.prace:active
{ background: url(images/menu-prace-ena.gif);
}
Kód: Vybrať všetko
<div id="menu">
<div id="home-nav">
<ul>
<li><a href="homepage" class="home"><span>home</span></a></li>
</ul>
</div>
<div id="sluzby-nav">
<ul>
<li><a href="sluzby" class="sluzby"><span>sluzby</span></a></li>
</ul>
</div>
<div id="prace-nav">
<ul>
<li><a href="prace" class="prace"><span>prace</span></a></li>
</ul>
</div>
</div> <!-- end menu -->
a potřeboval bych, aby po kliknutí na vybranou stránky zústal obrázek "aktivná" a měl tedy tmavé pozadí po celou domu, kdy návštěvník bude na této stránce
nyní mi ta tmavá barva pozadí zmizí jamile z ní zmizí ukazovátko myši
??
lámu si s tím hlavu a nějak se nedaří
nemáte někdo nějaký nápad jak toto řešit ?
celá šablona stránky má tuto podobu:
Kód: Vybrať všetko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[!MetaTagsExtra!]
<link rel="stylesheet" type="text/css" href="./templates/aimon/main.css" />
<link rel="shortcut icon" href="./favicon.ico" />
{{highslidegal}}
</head>
<body>
<div id="page">
<div id="picture_left">
</div> <!-- end picture_left -->
<div id="picture_oddel">
</div> <!-- end picture_oddel -->
<div id="main_left">
<div id="header">
<div id="picture_header">
</div> <!-- end picture_header-->
<div id="search_header">
</div> <!-- end search_header-->
</div> <!-- end header -->
<div id="main">
<div id="menu">
<div id="aimon-nav">
<ul>
<li><a href="aimon-homepage" class="aimon"><span>aimon</span></a></li>
</ul>
</div>
<div id="sluzby-nav">
<ul>
<li><a href="sluzby" class="sluzby"><span>sluzby</span></a></li>
</ul>
</div>
<div id="jak_prac-nav">
<ul>
<li><a href="jak-pracujeme" class="jak_prac"><span>jak_prac</span></a></li>
</ul>
</div>
<div id="nase_prace-nav">
<ul>
<li><a href="nase-prace" class="nase_prace"><span>nase_prace</span></a></li>
</ul>
</div>
<div id="kontakty-nav">
<ul>
<li><a href="kontakty" class="kontakty"><span>kontakty</span></a></li>
</ul>
</div>
</div> <!-- end menu -->
<div id="content">
[*content*]
</div> <!-- end content -->
</div> <!-- end main -->
<div id="footer">
</div> <!-- end footer -->
</div> <!-- end main_left -->
</div> <!-- end page -->
</body>
</html>