Problem z dopasowaniem gotowego kodu menu wielopoziomowego do strony

0

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-->&copy;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;
}

0

Nie chce mi się sprawdzać tego kodu ale nie napisałeś co konkretnie nie wychodzi. Na początek to brakuje funkcji w js prawdopodobnie do obsługi tego menu.

<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true);
// ]]>
</script>

Masz jej wywołanie powyżej a nie masz kodu albo podpiętego pliku ze skryptem.

0

Chodzi mi o to, że to rozsuwane menu chcę "wkleić" do już istniejącego menu poziomego .. żeby jedna jego pozycja była menu rozsuwanym. Da się to tak zrobić?

0

Dostaję coś takiego: http://i40.tinypic.com/2qb635z.jpg, a chciałbym, żeby ta komórka 'kurs' znalazła się w tym menu poziomym, gdzie są aktualności, galeria, kontakt ...

0

Robię, czy to coś złego? Wydawało mi się, że tak jest wszystko dobrze opisane

0

Teoretycznie jak zmienisz

#menu0, #menu0 dl {
 ...
        position: absolute;
 ...
}

na

#menu0, #menu0 dl {
 ...
        position: relative;
 ...
}

to menu powino się znaleźć w tym miejscu w którym chcesz. Zostaje jeszcze poustawiania reszty parametrów, usunięcie ramki, stałej szerokości, tła itd ale z tym już powinieneś dać radę.

0

Niestety, to nie to - nie działa :( Efekt jest podobny do tego co dałem, tylko lekko się przesunęło, ale dalej tak samo prawie;(

0

Masz tą testową stronę postawioną na jakimś serwerze? Wtedy w 5 minut by się załatwiło sprawę. Dzisiaj jestem padnięty żeby się tym bawić. Jak do jutra nie znajdzie się nikt inny żeby pomóc to wstawię pod wieczór poprawy kod. A jeśli miałbyś gotową stronę na serwerze to i w ciągu dnia dałoby darę to poprawić.

0

ok wstawiłem: http://moja-pierwsza-strona-internetowa.strefa.pl/, ale co dalej?

0

Próbowałem opanować ten bałagan ale po wielu próbach w html-u od jakiegoś czasu wybieram wygodne wyjścia :)
http://anfo.pl/blog/rozwijane_menu/
Tutaj masz dużo ładniejszy przykład menu z opcjami na których Ci zależy. Nie powinno byc problemu z dostosowaniem tego to Twoich potrzeb - zmiana kolorów itp. W razie problemów możesz pytać. Tamten kod dużo łatwiej opanować niż łączyć 2 różne koncepcje. Albo trzeba by było zapisać to rozwijane menu pod ul li, albo przebudować całość tak jak jest zrobiona ta 'rozwijana' cześć na dl dt dd. W dodatku opcja którą sobie wybrałaś chyba nie działa bo menu jest cały czas 'rozwinięte' pomimo podpiętych js. Zaproponowane przeze mnie rozwiązanie jest wolne od takich kombinacji i opiera się jedynie na css - chyba dużo wygodniejsze rozwiązanie. Więc jeśli da się coś zrobić łatwiej to nie warto komplikowac sobie życia :)
Kod który przesłałeś da się przerobić ale na moje oko to za dużo roboty.
Pozdrawiam

0

Slicznie dziekuje, że w ogóle zaineresowałeś sie tematem!:) Juz mam prawie wszystko, nie mogę poradzić sobie jeszcze tylko z 2 rzeczami:

jak najadę na menu, które ma sie dalej rozwinąć, to jego tło ma być czarne, a tekst biały, jednak na menu, które już się rozwinie tak jest, a to, z którego się rozwija, jest czarne tło i czarny tekst, tak, że nic nie widać
jak te linki przenieść na środek tego zielonego paska? Bo teraz są na lewo, a ja chciałbym je wyśrodkować

Wrzuciłem tą inną wersję z którą mam te 2 problemy, jakbyś był tak miły i jeszcze mógł spojrzeć, to będę baardzo wdzięczny!:)

0

Do wyśrodkowania menu musisz narzucić szerokość tego paska nawigacyjnego i dać automatyczne marginesy.

div#sMenu {
margin-right: auto;  //zmienione
margin-left: auto;  //zmienione
width: 450px;   //dodane
}

Rozwiązania pierwszego problemu nie mogę do końca znaleźć, nie wiem czy to w ogóle możliwe. Wymyśliłem jedynie takie rozwiązanie (do dodania do kodu):

div#sMenu ul li:hover a {
     color: white;   
}

Powodzenia przy nauce i tworzeniu strony.

Problem z dopasowaniem gotowego kodu menu wielopoziomowego do strony

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami