zdravím a mám dotaz:opět k tomu mému nešťastnému CSS obrázkovému menu
udělal jsem jednoduchý příklad a dal ho na web, kde lze projít adresářovou strukturu:
Index of /doc/menu_obrazkove_hover_problem
potřebuji, aby byl v aktivní záložce v menu vždy aktivní obrázek pozadí. Po celou dobu, kdy tam návštěvník bude a to i když si klikne na nějaký objekt (který tedy není odkazem pruč na jinou stránku)
aby bylo prostě jasně vidět, na které z těch tří stránek se právě nachází.
Toto je v HTML/CSS, ale potřebuji to mít na PHP stránkách (což možná bude zajímavé s ohledem na řešení)
Řešení patrně javascript nebo php script (ani jeden tento script napsat neumím), nebo to třeba lze čistě pomocí css a html tagů ?
struktura těch html stránek:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml">
5
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
8 <title>obrazkove menu hover problem - služby</title>
9 <meta name="author" content="puschpull"/>
10 <link rel="shortcut icon" href="favicon.ico"/>
11 <link href="styles.css" rel="stylesheet" type="text/css"/>
12 </head>
13
14 <body>
15
16 <div id="main">
17
18 <div id="menu">
19
20 <div id="img-nav">
21 <ul>
22 <li id="sluzby"><a href="sluzby.html"><span>služby</span></a></li>
23 <li id="jak_pracujeme"><a href="jak_pracujeme.html"><span>jak pracujeme</span></a></li>
24 <li id="nase_prace"><a href="nase_prace.html"><span>naše práce</span></a></li>
25 </ul>
26 </div> <!-- end img-nav -->
27
28 </div> <!-- end menu -->
29
30 <div id="content">
31 <br /><br />
32 obrazkove menu hover problem - <strong>služby</strong>
33
34 </div> <!-- end content -->
35
36
37 </div> <!-- end main -->
38
39 </body>
40
41 </html>
42
a použitý CSS soubor:
/* CSS Default
---------------------------------- */
*
{
padding: 0px;
margin: 0px;
}
body
{
margin-left: 15%;
margin-right: 15%;
font-family: Arial, Helvetica, sans-serif;
background: #3B3A3B;
}
#main
{
background: #a9a9a9;
margin-left: 15%;
margin-right: 15%;
position: relative;
top: 50px;
width: 600px;
height: 480px;
float: left;
text-align: center;
border: 1px solid orange;
}
/* vodorovné obrázkové menu
---------------------------------- */
#menu
{
clear: left;
margin-left: 15%;
margin-right: 15%;
position: relative;
top: 16px;
width: 415px;
height: 31px;
float: left;
border: 1px solid blue;
}
#img-nav
{
float:left;
width:100%;
overflow:hidden;
}
#img-nav ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
position: relative;
top: 0px;
left: 0px;
}
#img-nav li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#img-nav a
{
margin:0px;
padding:0px;
display: block;
}
#img-nav a span
{
display: none;
}
#sluzby a
{
width:100px;
height:31px;
background:#acacac url(images/menu-sluzby-dis.gif) no-repeat;
}
#sluzby a:hover
{
width:100px;
height:31px;
background:#acacac url(images/menu-sluzby-ena.gif) no-repeat;
}
#jak_pracujeme a
{
width:171px;
height:31px;
background:#acacac url(images/menu-jakprac-dis.gif) no-repeat;
}
#jak_pracujeme a:hover
{
width:171px;
height:31px;
background:#acacac url(images/menu-jakprac-ena.gif) no-repeat;
}
#nase_prace a
{
width:144px;
height:31px;
background:#acacac url(images/menu-naseprac-dis.gif) no-repeat;
}
#nase_prace a:hover
{
width:144px;
height:31px;
background:#acacac url(images/menu-naseprac-ena.gif) no-repeat;
}
/* konec menu
---------------------------------- */
#content
{
clear: left;
background: #ffeeaa;
overflow: auto;
text-align: center;
position: relative;
left: 0px;
top: 40px;
width: 520px;
height: 360px;
}
|
Registrace nového uživatele 
