phpBB2 by Przemo

DR HOUSE · **Pomógł:** 5 razy Posty: 73

Witam,

Potrzebuję pomocy ponieważ chciałem sobie zrobić dla zabawy (potem do udostępnienia) stronę z różnymi rzeczami do gry, niestety nie dość, że HTML średnio a właściwie w ogóle nie znam to jeszcze pozapominałem wszystko.

Do rzeczy:

Najważniejsze co potrzebuję to jakiś sposób dzięki któremu mogę za pomocą jednego kodu powtarzać menu do innych podstronach (najlepiej aby menu było w innymi pliku i zmiana w nim zmieni na każdej stronie) oraz sam kod na menu które ma cztery kolumny, nad każdą nazwa kolumny, jest wyśrodkowane na stronie pod headerem, jest wypunktowane ale ani się nie chowa, ani nie rozwija, jest ono cały czas.

Mam coś takiego:

HTML:

Kod:

<!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" />
<meta name="Description" content="Tu wpisz opis zawartości strony" />
<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
<link rel="Stylesheet" type="text/css" href="style.css" />
<title>tu wpisz tytul</title>
</head>

<body bgcolor="black">
<body>
<center><img src="header.png" width="977" height="70" alt="top" align="center" /></center>

<ol id="menu">
<li><a href="#">Przedmioty</a>
<ul>
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">to jest jakiś długi link - 3</a></li>
<li><a href="#">link - 4</a></li>
<li><a href="#">link - 5</a></li>
</ul>
</li>

<li><a href="#">Zestawy</a>
<ul class="czesc_srodkowa">
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">to jest jakiś inny długi link - 3</a></li>
</ul>
</li>

<li><a href="#">Inne</a>
<ul id="czesc_ostatnia">
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">inny link - 3</a></li>
<li><a href="#">link - 4</a></li>
</ul>
</li>

<li><a href="#">dział - 4</a>
<ul id="czesc_ostatnia">
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">inny link - 3</a></li>
<li><a href="#">link - 4</a></li>
</ul>
</li>
</ol>


dfasfffasfadsfdsfsfd


</body>
</body>
</html>

CSS:

Kod:

/* ------------------------CZĘŚĆ GÓRNA MENU------------------------ */

/* wygląd elementu - ol */
#menu {
list-style-type:none;
padding:0;
margin:0 auto;
width:800px;
font-size:16px;
height:2em;
}

/* wygląd elementu - li - potomka elementu - ol */
#menu li {
float:left;
position:relative; /* dla IE 7 */
width:200px;
text-align:center;
}

/* wygląd elementu - a - potomka elementu - li - oraz - ol */
#menu li a {
display:block;
color:#33CC33;
background-color:#990000;
text-decoration:none;
margin-left:1px;
line-height:2em;
border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}

/* wygląd elementu - a - potomka elementu - li - oraz - ol (po najechaniu kursorem myszki
na element - a) */
#menu li a:hover {
color:#09C;
}

/* ------------------------CZĘŚĆ ROZWIJANA MENU------------------------ */

/* wygląd elementu - ul */
#menu ul {
display:none;
position:absolute;
left:0; /* dla IE 7 */
list-style-type:none;
padding:0;
margin:1;
}

/* wygląd elementu - li - potomka elementu - ul */
#menu ul li {
float:none;
width:200px;
}

/* wygląd elementu - li - potomka oraz pierwszego dziecka elementu - ul */
#menu ul li:first-child {
margin-top:1px;
}

/* wygląd elementu - a - potomka elementu - li - oraz - ul */
#menu ul li a {
background-color:#990000;
line-height:normal;
height:1%; /* dla IE 7 */
padding:3px 5px;
border:1px solid #330000;
margin-top:0px;
border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;

}

/* wygląd elementu - a - potomka elementu - li - oraz - ul (po najechaniu kursorem myszki
na element - a) */
#menu ul li a:hover {
background-color:#FFF;
border:1px solid #DDD;
box-shadow:inset 0 0 4px #DDD;
}

/* wygląd elementu - ul - potomka elementu - li - oraz - ol (po najechaniu kursorem myszki
na element - li) */
#menu li:hover ul {
display:block;
}

/* margines dla środkowej rozwijanej części */
#menu .czesc_srodkowa li {
margin-left:0px;
}

/* margines dla ostatniej rozwijanej części */
#menu #czesc_ostatnia li {
margin-left:0px;
}

p { margin:0px auto 0px auto; padding:10px; font:12px Verdana; color:#8F5050; width:800px; text-align:justify; }
p.center { text-align:center; }
p.light { color:#9F9F9F; } p.medium { color:#BFBFBF; } p.strong { color:#DFDFDF; }
p.half { width:420px; font:10px Verdana; text-align:left; }

I niestety, nie mogę sobie poradzić ale siedzę nad tym już drugi dzień i zaczyna mi się to nudzić i obrzydzać...

Gadatliwa Kasia