0
Chciałem wstawić na swoją stronkę rozwijane menu, wiec znalazłem sobie w googlach tę stronkę i zrobiłem wszystko wg. instrukcji:
http://www.kurshtml.boo.pl/skrypty/wyglad,..._rozwijane.html
Lecz menu nie działa, nie zwija się ani nie rozwija.
Mówię o tym pierwszym menu.
Czy w kodzie trzeba coś jeszcze dodać? No nie wiem, ja nie mam pojęcia jak usprawnić to menu.
Mój kod wygląda następująco:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZSZ by kamilZet beta: 0.0.2</title>
<style type="text/css">
<!--
#menu0 {
width: 200px;
margin: 10px;
padding: 0;
}
#menu0 dt {
background-color: #888;
color: #fff;
font-weight: bold;
text-align: center;
cursor: pointer;
margin: 10px 0 0 0;
padding: 2px;
}
#menu0 dd {
background-color: #eee;
color: #000;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #888;
margin: 0;
padding: 1px 5px;
}
#menu0 dd.active {
font-weight: bold;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #30cb37;
margin: 0; /* zaleca się wyzerowanie dopełnienia i marginesu elementu body, tak aby mogły być uwzględniane różne domyślne ustawienia przeglądarki */
padding: 0;
text-align: center; /* kontener zostaje wyśrodkowany w oknach przeglądarek IE 5*. Następnie tekst określony przez selektor #container jest wyrównywany domyślnie do lewej */
color: #000000;
}
.twoColHybLtHdr #container {
width: 75%; /* szerokość kontenera będzie stanowić 80% szerokości okna przeglądarki */
background: #FFFFFF;
margin: 0 auto; /* automatyczne marginesy (w połączeniu z szerokością) powodują wyśrodkowanie strony */
border: 1px solid #000000;
text-align: left; /* ustawienie to przesłania domyślne ustawienie wyrównania tekstu: środkowanie w elemencie body. */
}
.twoColHybLtHdr #header {
background: #DDDDDD;
background-image:url(../logo.png)
}
.twoColHybLtHdr #header h1 {
margin: 0; /* wyzerowanie marginesu w ostatnim elemencie nagłówka #header pozwoli uniknąć skrócenia marginesów – tj. dodania niepotrzebnych spacji między elementami div. Jeśli element div ma obramowanie, czynność ta jest niepotrzebna, ponieważ obramowanie również zapobiega skróceniu marginesów */
padding: 30px 0; /* użycie dopełnienia, a nie marginesu, pozwoli utrzymać odpowiednią odległość między elementem a krawędziami elementu div */
}
/* Wskazówki dotyczące paska bocznego sidebar1:
1. Ponieważ są używane jednostki względne, najlepiej nie stosować do paska bocznego dopełnienia. Dopełnienie będzie powiększało szerokość paska w typowych przeglądarkach, a w konsekwencji rzeczywista szerokość paska będzie nieprzewidywalna.
2. Ponieważ pasek jest zdefiniowany przy użyciu jednostek em, należy mieć na uwadze, że jego szerokość będzie różna dla różnych domyślnych rozmiarów tekstu.
3. Odstępy między bocznymi krawędziami elementu div a jego elementami wewnętrznymi można utworzyć, określając wielkości lewych i prawych marginesów elementów wewnętrznych (tak jak w przykładowej regule „.twoColHybLtHdr #sidebar1 p”).
*/
.twoColHybLtHdr #sidebar1 {
float: left;
width: 13em; /* ponieważ jest to element pływający, należy określić szerokość */
background: #ffffff; /* kolor tła będzie widoczny tylko w wypełnionym obszarze kolumny, nie dalej */
padding: 15px 0; /* dopełnienie górne i dolne pozwalają uzyskać odpowiednie odstępy wewnątrz elementu div */
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px; /* wielkości lewych i prawych marginesów należy określić w przypadku wszystkich elementów, które będą umieszczane w kolumnach bocznych */
margin-right: 10px;
}
/* Wskazówki dotyczące elementu mainContent:
1. Odstęp między elementem mainContent i paskiem bocznym sidebar1 jest określany z uwzględnieniem lewego marginesu elementu mainContent. Niezależnie od liczby elementów na pasku bocznym sidebar1 odstęp kolumnowy pozostanie. Lewy margines można usunąć. Wtedy tekst skojarzony z elementem #mainContent będzie wypełniał element #sidebar1, począwszy od końca zawartości elementu #sidebar1.
2. Należy mieć na uwadze, że jeśli element jest szerszy niż jego pojemność, określona wewnątrz znacznika div mainContent, to może wystąpić efekt opadania elementu pływającego (opadnięcie zwykłego obszaru mainContent poniżej paska bocznego). W przypadku układu hybrydowego (szerokość określona procentowo, a pasek boczny zdefiniowany w jednostkach em) nie zawsze będzie można obliczyć dokładną, dostępną szerokość. Jeśli rozmiar tekstu użytkownika przewyższy rozmiar średni, to pasek boczny będzie szerszy, a w konsekwencji pozostanie mniej miejsca w elemencie mainContent. Należy pamiętać o tym ograniczeniu – zwłaszcza, jeśli klient dodaje zawartość za pomocą programu Contribute.
3. W poniższym warunkowym komentarzu dla przeglądarki Internet Explorer użyto właściwości zoom (powiększenie) i nadano jej wartość „hasLayout”. Wartość ta pozwala uniknąć szeregu błędów typowych dla przeglądarki IE.
*/
.twoColHybLtHdr #mainContent {
margin: 0 20px 0 13em; /* prawy margines można określić w procentach lub w pikselach. Margines ten zapewnia puste miejsce przy prawej krawędzi strony. */
text-align: center;
}
.twoColHybLtHdr #footer {
padding: 0 10px; /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą powyżej. */
background:#ace74f;
text-align: center;
}
.twoColHybLtHdr #footer p {
margin: 0; /* wyzerowanie marginesów pierwszego elementu w stopce pozwoli uniknąć ewentualnego skrócenia marginesów - tj. dodania niepotrzebnych spacji między elementami div */
padding: 10px 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
}
/* Różne użyteczne klasy */
.fltrt { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w prawo. Przesuwany element musi poprzedzać element, który ma następować na stronie po nim. */
float: right;
margin-left: 8px;
}
.fltlft { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w lewo. */
float: left;
margin-right: 8px;
}
.clearfloat { /* tę klasę należy umieścić w elemencie div lub break, powinna ona stanowić ostatni element kontenera zawierającego element pływający */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p.left {text-align: left;}
p.right {text-align: right;}
p.center {text-align: center;}
p.full {text-align: justify;}
p.style {text-decoration: blink;}
p.redtext { color: #C00;}
p.fioletowytext {color: #339;}
p.bluetext {
-->
</style><!--[if IE]> <style type="text/css">
/* w tym komentarzu warunkowym należy umieścić poprawki css, dotyczące wszystkich wersji programu IE */ .twoColHybLtHdr #sidebar1 { padding-top: 30px; } .twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; } /* powyższa właściwość zoom (powiększenie) ma wartość „hasLayout”, co pozwala uniknąć wielu błędów typowych dla przeglądarki IE */</style> <![endif]--></head>
<body class="twoColHybLtHdr">
<div id="container">
<div id="header">
<h1> </h1>
<!-- end #header --></div>
<div id="sidebar1">
<dl id="menu0">
<dt>O nas</dt>
<dd><a href="http://google.pl"> O szkole </a></dd>
<dd><a href="#"> Nasz patron </a></dd>
<dd><a href="#"> Sztandar Szkoły </a></dd>
<dd><a href="#"> Hymn szkoły </a></dd>
<dd><a href="#"> Nauczyciele </a></dd>
<dd><a href="#"> Pedagog szkolny </a></dd>
<dd><a href="#"> Biblioteka szkolna </a></dd>
<dd><a href="#"> Publikacje nauczycieli </a></dd>
<dd><a href="#"> Uczniowie SP </a></dd>
<dd><a href="#"> Uczniowie PG </a></dd>
<dd><a href="#"> Samorząd uczniowski </a></dd>
<dd><a href="#"> Osiągnięcia uczniów </a></dd>
</dl>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1><span class="tekstwitamy">
<p class="bluetext">Witamy !</p></span></h1>
<p class="left">
<p class="redtext">Serdecznie witamy na oficjalnej witrynie Zespołu Szkół w Zagoździu ! Znajdziecie na niej wszystkie informacje na temat szkoły i nie tylko. W galerii mamy wiele zdjęć z różnych uroczystości, które nie można przegapić. Gorąco pozdrawiamy i życzymy miłego pobytu z nami;)</p>
<p class="redtext"> </p>
<p class="redtext"><img src="Galeria/logozs.jpg" width="300" height="233" /></p>
<h2><p class="bluetext"> </p>
<p class="bluetext">Szybki kontakt </p>
</h2>
<p><img src="Galeria/szkola.jpg" width="360" height="240" /></p>
<p class="redtext">Nasz adres:</p> <p class="fioletowytext">ZESPÓŁ SZKÓŁ W ZAGOŹDZIU <br />
LIPNIAK 5<br />
21 - 421 TUCHOWICZ<br />
tel./fax (025) 7961812<br />
E-mail: <a href="mailto:zagozdzie@op.pl">zagozdzie@op.pl</a></p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --> <br class="clearfloat" />
<div id="footer">
<p>© 2010 by <a href="mailto:kamilz1994@gmail.com">kamilZet</a> < beta 0.0.2 ></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Od razu mówię, że jestem początkującym ;P
Dzięki z góry ;]
