Tworząc rozwijane menu zgodnie z kursem napotkałem na ciekawy problem , menu które napisałem wyświetla się w Aptanie Studio w poglądzie prawidłowo , natomiast nie działa w żadnej przeglądarce .
Dodam że stronę pisze równo z oglądaniem kursu , style wczytywane są z osobnego pliku . Adres strony to http://www.cs-promod.strefa.pl , poniżej dołączam jeszcze kod strony i style. Z góry dzięki za wszystkie odpowiedzi.
Kod www:
- Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- jakiego typu jest dokument -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-language" content="pl" />
<meta http-equiv="content-language" content="text/html; charset=utf-8" />
<meta name="author" content="autor" />
<meta name="robots" content="index, follow" />
<title>WEKTUS</title>
<meta name="description" content="o czym jest" />
<meta name="keywords" content="slowa kluczowe" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="banner">
<a href="index.html"><img class="logo" align="right" height="250" src="banner.jpg" alt="wektus"/></a>
<div class="menu">
<ul id="gorne_menu">
<li style="border-left: 1px solid #000e9e;"><a href="#">O firmie </a></li>
<li><a href="#">Nasz produkty </a></li>
<li><a href="#">Allegro </a></li>
<li><a href="#">Bleah </a></li>
</ul>
</div><!-- koniec div menu-->
<div class="kontakt">
<table cellpadding="0" >
<tr><th>Kontakt:</th></tr>
<tr><td>bleah</td></tr>
<tr><tdbleah</td></tr>
<tr><td><a class="kontakt_box" href="GG:123456" title="Moj numer gg"><img border="0" src="http://status.gadu-gadu.pl/users/status.asp?id=7277925&styl=1" alt="nr.gg"/>GG:123456</a></td></tr>
<tr><td>e-mail: <a class="kontakt_box" href="mailto:1234345@gmail.com">1234325@gmail.com</a></td></tr>
</table>
</div><!-- koniec div kontakt-->
</div><!-- koniec div banner-->
<div id="zawartosc">
<div id="menu_sr">
<ul>
<li>--><a href="#">Ziemniaki</a></li>
<ul class="rozwijane_menu">
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczakizmie</a></li>
</ul>
<li>--><a href="#">Ziemniaki</a></li>
<ul class="rozwijane_menu">
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
</ul>
<li>--><a href="#">Ziemniaki</a></li>
<ul class="rozwijane_menu">
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
<li><a href="#">kurczaki</a></li>
</ul>
</ul>
</div><!--koniec div menu środkowe-->
</div><!--koniec div zawartosc-->
</div><!--koniec div kontener-->
</body>
</html>
Kod css:
- Kod: Zaznacz cały
*
{
margin: 0;
padding: 0;
}
body
{
margin: 0px;
padding: 0px;
font-family: Arial ,Verdena ,Times New Roman;
background-color: #effffd;
color: #000e9e;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.2em;
font-size: 20px;
}
.wektus
{
color: #000e9e;
font-size: 20px;
}
#content
{
width:950px;
margin: 0 auto;
position:relative;
}
#banner
{
margin-top: 10px;
border-style:solid;
border-color:#3888ff;
width:100%;
height:250px;
position:relative;
}
img.logo
{
position:absolute;
border:0;
left:20px;
}
.kontakt
{
color: #000e9e;
position:absolute;
right:40px;
top:10px;
font-family: "Trebuchet MS" , Arial;
font-size:11px;
line-height:125%;
}
.kontakt_box
{
color:teal;
text-decoration:none;
cursor:pointer;
border-bottom: 1px dotted #000e9e;
}
a
{
color:#000e9e;
text-decoration:none;
cursor:pointer;
border-bottom: 1px dotted #000e9e;
}
a:hover
{
color:#000e9e;
}
.menu
{
position:absolute; /*pozycjonuje wzglendem baneru czyli bottom:0px - dol baneru*/
left:50px;
bottom:0px;
}
#gorne_menu li /* odnosi se tez do elemntow listy(li)*/
{
list-style-type:none;
float:left; /*tekst plynie w lewo*/
height:20px;
display:inline-block;
border-right: 1px solid #000e9e;
}
#gorne_menu li a
{
background-image: url('images/menu_logo.JPG');
border-bottom:none;
padding:0px 10px;
font-family:Verdana;
}
#gorne_menu li a:hover
{
background-image:none; /*usuwam obraze nastepnie podajemy tlo*/
color:blue;
font-style:italic;
margin:0px;
}
#zawartosc
{
margin:0px;
position:relative;
margin-left:10px;
margin-top:5px;
}
#menu_sr
{
padding:5px;
border-style:solid;
border-color:#3888ff;
position: absolute;
height:auto
}
#menu_sr li
{
list-style-type:none;
}
/*menu rozwijane*/
#menu_sr li .rozwijane_menu
{
display: none;
}
#menu_sr li:hover .rozwijane_menu
{
display: block;
height:auto;
}
