Witam, mam plik index.html i w nim elementy menu, później menu jest formatowane w pliku style.css. Czy można używając samego html + css zrobić menu na kolejnych podstronach, ale nie używając kopiuj i wklej, ponieważ później jak będę chciał coś zmienić to będę musiał zmieniać w każdym pliku. Jak to zrobić w jak najprostszy sposób ?
Dodam kod:
<html>
<head>
<!--Informacje o stronie-->
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>RealMadrid</title>
</head>
<body>
<div id="top">
<div id="LOGO">
<img src="images/logo.jpg" alt="Brak logo" align="center"/>
</div>
<div id="NAGLOWEK">Nagłówek</div>
<div id="MENU">
<ul id="menu">
<li><a href="index.html">Aktualności</a></li>
<li id="rozwijany"><a href="#">Statystyki</a>
<ul id="submenu">
<li><a href="terminarz.html">Terminarz</a></li>
<li><a href="tabela.html">Tabela</a></li>
<li><a href="wyniki.html">Wyniki</a></li>
<li><a href="transfery.html">Transfery</a></li>
</ul>
</li>
<li id="rozwijany"><a href="#">Gracze</a>
<ul id="submenu">
<li><a href="sklad.html">Skład</a></li>
<li><a href="wybitni.html">Wybitni</a></li>
</ul>
</li>
<li><a href="trenerzy.html">Trenerzy</a></li>
<li><a href="historia.html">Historia</a></li>
<li><a href="hymn.html">Hymn</a></li>
<li id="rozwijany"><a href="#">Rekordy</a>
<ul id="submenu">
<li><a href="stzelcy.html">Strzelcy</a></li>
<li><a href="wystepy.html">Występy</a></li>
<li><a href="inne.html">Inne</a></li>
</ul>
</li>
<li><a href="galeria.html">Galeria</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="TRESC">
<p>Treść strony: testujemy listę
<ul>
<li>napis 1</li>
<li>napis 2</li>
<li>napis 3</li>
</ul>
</p>
</div>
<div id="STOPKA"><p class="sstopka">Marcin Giec</p></div>
</div>
</html>
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 110px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #fff;
text-align: justify;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}
p.sstopka{
text-align: center;
color: red;
}
/*menu pionowe*/
ul#menu
{
font-family: Verdana;
padding: 0;
margin: 0;
list-style-type: none;
float: left;
height: 100%;
width: 7em;
color: #fff;
background-color: #007d0f;
margin-right:10px;
}
ul#menu li a
{
float: left;
width: 6em;
color: #fff;
background-color: #007d0f;
padding: 0.2em 1em;
text-decoration: none;
border-bottom: 1px solid #fff;
}
/*kolor najechanego przycisku*/
ul#menu li a:hover{
background-color: #34b943; /*kolor po najechaniu na pozycję*/
color: #fff; /*kolor napisu w menu podczas najechania*/
}
ul#submenu{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 7em;
color: #fff;
background-color: #86e391;
margin-right:10px;
}
ul#submenu li a{
float: left;
width: 5em;
color: #007d0f; /*kolor napisu w submenu*/
background-color: #e8ffeb; /*kolor tła w submenu*/
padding: 0.2em 1em;
text-decoration: none;
border-bottom: 1px solid #fff;
}
ul#submenu li a:hover{
background-color: #34b943;
color: #fff;
}
#rozwijany:hover li {
display: block;
}
#rozwijany li {
display: none; /*domyślnie opcje ukryte*/
}
Jak teraz stworzyć plik na przykład wyniki.html żeby było w nim menu bez kopiowania zawartości z pliku index.html ?