Chciałem nauczyć się w końcu html. Napisałem prostą stronę podpierając się internetowym kursem. Teraz mam problem, jak dodać do mojej strony wielopoziomowe menu (kod również pochcodzi ze strony). Nie wiem co robię źle, ale nic mi nie wychodzi. Proszę o pomoc:)
plik html:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>.: NOEMI - z nami się wyśpisz! :.</title>
<link rel="Stylesheet" type="text/css" href="styl_stron.css" />
<link rel="Stylesheet" type="text/css" href="styl_menu.css" />
</head>
<body>
<div id="top">
<div id="BODY">
<div id="LOGO"><!--LOGO--><img src="Grafika/Grafika_strony/logo.jpg"/><!--/LOGO--></div>
<div id="LINKI">
<!--LINKI-->
<ul>
<li><a href="index.html">O mnie</a></li>
<li><dl id="menu0">
<dt>Kurs</dt>
<dd>
<dl>
<dt><a href="...">HTML</a></dt>
<dd>
<dl>
<dt><a href="...">Dla zielonych</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">BODY i META</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">Tekst</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
</dl>
</dd>
<dd>
<dl>
<dt><a href="...">CSS</a></dt>
<dd><a href="...">...</a></dd>
<dd><a href="...">...</a></dd>
</dl>
</dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>
</li>
<li><a href="aktualnosci.html">Aktualności</a></li>
<li><a href="galeria.html">Galeria</a></li>
<li><a href="linki.html">Linki</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<!--/LINKI-->
</div>
<div id="MENU">
<!--MENU-->
<div class="MENU">
</div>
<!--/MENU-->
</div>
<div id="TRESC">
<div class="ZAWARTOSC">
<!--TRESC-->
coś o mnie
<!--/TRESC-->
</div>
</div>
<div id="STOPKA"><!--STOPKA-->©Moja strona<!--/STOPKA--></div>
</div>
</div>
</body>
</html>
</html>
styl_menu.css:
#menu0, #menu0 dl {
font-size: 12px;
position: absolute;
width: 150px;
margin: 0;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #eee #aaa #aaa #eee;
}
#menu0 dt {
cursor: pointer;
margin: 0;
padding: 0;
background-color: #888;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #aaa #666 #666 #aaa;
padding: 4px 5px;
}
#menu0 dl dt {
background-color: #ccc;
color: #000;
text-align: left;
font-weight: normal;
font-size: 12px;
border: 0;
padding: 0;
}
#menu0 dd {
background-color: #ccc;
color: #000;
margin: 0;
padding: 0;
width: 150px;
height: 22px;
}
#menu0 dd.active {
font-weight: bold;
}
#menu0 dt a {
background: url("submenu.gif") no-repeat 140px 8px;
padding-right: 20px;
}
#menu0 a:link, #menu0 a:visited {
display: block;
color: #000;
text-decoration: none;
padding: 4px 5px;
}
#menu0 a:hover {
color: #fff;
background-color: #008;
}
#menu0 dl {
position: absolute;
border: 0;
}
#menu0 dl dd {
position: relative;
left: 151px;
bottom: 22px;
border-left: 1px solid #eee;
border-right: 1px solid #aaa;
}
styl_stron.css:
/*STRONA*/
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #B1C903;
text-align: center;
margin: 0;
padding: 0;
}
a img {
border: 0;
}
/*/STRONA*/
/*RAMKA*/
#top {
background-color: #FFFFFF;
margin: 0 auto;
width: 770px;
}
/*/RAMKA*/
/*WNETRZE*/
#BODY {
background-color: #FFFFFF;
text-align: left;
margin: 0 10px;
width: 750px;
}
/*/WNETRZE*/
/*LOGO*/
#LOGO {
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #C0C0C0;
background-image: url(logo.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
font-weight: bold;
}
/*/LOGO*/
/*LINKI*/
#LINKI {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #B1C903;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: center;
}
#LINKI a:link {
color: #000000;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
#LINKI a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
#LINKI a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
font-weight: bold;
font-style: normal;
}
#LINKI ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
#LINKI ul li {
display: inline;
list-style-type: none;
margin: 0 5px;
padding: 0;
}
/*/LINKI*/
/*TRESC*/
#TRESC {
width: 750px;
overflow: hidden;
float: left;
}
#TRESC .ZAWARTOSC {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
}
#TRESC .ZAWARTOSC a:link {
color: #0000FF;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
#TRESC .ZAWARTOSC a:visited {
color: #800080;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
#TRESC .ZAWARTOSC a:hover {
color: #FF0000;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
/*/TRESC*/
/*STOPKA*/
#STOPKA {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
text-align: center;
clear: both;
}
#STOPKA a:link, #STOPKA a:visited {
color: #000000;
text-decoration: underline;
}
#STOPKA a:hover {
color: #000000;
text-decoration: none;
}
/*/STOPKA*/
img{
position: relative;
float: left;
}