Witam robię stronę o tematyce pokemon. I mam problem. Chodzi o to ,że zrobiłem stronę z menu na górze. A spis pokemonów jest spory i chciał bym go umieścić po lewej stronie ekranu ,żeby użytkownik miał luźny dostęp bez cofania strony. :)
I mój problem polega na tym ,że wgl nie wiem jak sie do tego zabrać ponieważ jak dodam do głównego stylu css to doda mi sie w każdym pliku.
Po sporej ilości prób dodawania w głównym css i html dalej nic... :(
Dodaje kody z moimi zmianami (tymi nie udanymi)
css:
body
{
background-color: #00ff33;
color: #00009C;
margin: 0;
width:100%;
}
.duzepudlo
{
width: 100%;
}
.naglowek
{
width: 100%;
padding-top: 10px 0;
padding-bottom: 20px 0;
}
.logo
{
width: 800px;
font-size: 48px;
margin-left: auto;
margin-right: auto;
}
.menu
{
width: 100%;
padding: 8px 0px 8px 0px;
background-color: #ffff33;
text-align: center;
border-top: 1px solid #336600;
border-bottom: 1px solid #336600;
border-top; 2px;
font-family: 'Shadows Into Light Two', cursive;
}
.pudlo
{
width: 800px;
height: 100%;
margin-left:auto;
margin-right: auto;
background-color: #99ff66;
padding-top: 10px;
padding-bottom: 10px;
text-align: justify;
}
.lewe_menu
{
width: 200px;
height: 100%;
margin: left;
background-color: black;
}
.stopka
{
text-align: center;
background-color: #ffff33;
color: black;
padding-bottom: 10px;
font-size: 16px;
left: 0;
bottom: 0;
width: 100%;
position:fixed;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a
{
color; white;
text-decoration: none;
display; block;
}
ol > li
{
float: left;
width: 150px;
height: 38px;
border-right: 1px dashed #FFC030;
}
ol > li:first-child
{
border-left: 1px dashed #FFC030;
}
ol > li:hover
{
background-color: #FFF200;
}
ol > li:hover > a
{
color:#80C020;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol > li:hover > ul
{
display: block;
}
ol >li > ul > li
{
background-color: #ffff33;
position: relative;
z-index: 100;
border-top: 1px dashed #FFC030;
}
ol >li > ul > li :hover
{
background-color: #FFF200;
}
HTML:
<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Kanto</title>
<meta name="description" content="Serwis poświęcony pokemonom dokładniej grze pokexgames."/>
<meta name="keywords" content="poki, tutorial, pokemony, rodzaje, pomoc, pokexgames tutorial, pokexgames poradnik"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="duzepudlo">
<div class="naglowek">
<div class="logo"><img src="pokemon.png">
<div style="clear:both;"></div>
</div>
</div>
<div class="menu">
<ol>
<li><a href="index.html">Strona główna</a></li>
<li><a href="#">Pokemony</a>
<ul>
<li><a href="kanto.html">Ogniste</a></li>
<li><a href="#">Jotho</a></li>
<li><a href="#">Hoenn</a></li>
</ul>
</li>
<li><a href="#">Przedmioty</a></li>
<li><a href="#">NPC</a></li>
<li><a href="#">Sale</a></li>
<li><a href="#">Pomoc</a></li>
<li><a href="#">Instalacja</a></li>
<li><a href="#">O autorze</a></li>
</ol>
</div>
<div class="pudlo"> <div class="lewe_menu">
<center>
<table border="1" width="400px">
<tr>
<td> Bulbasaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Ivysaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Venusaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Squirtle</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Wartoltle</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Blaistoise</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Charmander</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Charmeleon</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Chalizard</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Caterpie</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Metapod</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Butterfree</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Weedl</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Kakuna</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Beedrill</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pidgey</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pidgeotto</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pigeot</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Rattata</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Raticate</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Spearow</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Fearow</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
</table>
</center>
</div>
</div>
<div class="stopka">PokeCity "Piiii Pikachuuuu" © 2016</div>
</div>
</body>
</html>
Oraz czysty kod bez zmian.
Css:
body
{
background-color: #00ff33;
color: #00009C;
margin: 0;
width:100%;
}
.duzepudlo
{
width: 100%;
}
.naglowek
{
width: 100%;
padding-top: 10px 0;
padding-bottom: 20px 0;
}
.logo
{
width: 800px;
font-size: 48px;
margin-left: auto;
margin-right: auto;
}
.menu
{
width: 100%;
padding: 8px 0px 8px 0px;
background-color: #ffff33;
text-align: center;
border-top: 1px solid #336600;
border-bottom: 1px solid #336600;
border-top; 2px;
font-family: 'Shadows Into Light Two', cursive;
}
.pudlo
{
width: 1000px;
height: 100%;
margin-left:auto;
margin-right: auto;
background-color: #99ff66;
padding-top: 10px;
padding-bottom: 10px;
text-align: justify;
}
.stopka
{
text-align: center;
background-color: #ffff33;
color: black;
padding-bottom: 10px;
font-size: 16px;
left: 0;
bottom: 0;
width: 100%;
position:fixed;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a
{
color; white;
text-decoration: none;
display; block;
}
ol > li
{
float: left;
width: 150px;
height: 38px;
border-right: 1px dashed #FFC030;
}
ol > li:first-child
{
border-left: 1px dashed #FFC030;
}
ol > li:hover
{
background-color: #FFF200;
}
ol > li:hover > a
{
color:#80C020;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol > li:hover > ul
{
display: block;
}
ol >li > ul > li
{
background-color: #ffff33;
position: relative;
z-index: 100;
border-top: 1px dashed #FFC030;
}
ol >li > ul > li :hover
{
background-color: #FFF200;
}
HTML:
<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Kanto</title>
<meta name="description" content="Serwis poświęcony pokemonom dokładniej grze pokexgames."/>
<meta name="keywords" content="poki, tutorial, pokemony, rodzaje, pomoc, pokexgames tutorial, pokexgames poradnik"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="duzepudlo">
<div class="naglowek">
<div class="logo"><img src="pokemon.png">
<div style="clear:both;"></div>
</div>
</div>
<div class="menu">
<ol>
<li><a href="index.html">Strona główna</a></li>
<li><a href="#">Pokemony</a>
<ul>
<li><a href="kanto.html">Ogniste</a></li>
<li><a href="#">Jotho</a></li>
<li><a href="#">Hoenn</a></li>
</ul>
</li>
<li><a href="#">Przedmioty</a></li>
<li><a href="#">NPC</a></li>
<li><a href="#">Sale</a></li>
<li><a href="#">Pomoc</a></li>
<li><a href="#">Instalacja</a></li>
<li><a href="#">O autorze</a></li>
</ol>
</div>
<div class="pudlo">
<center>
<table border="1" width="400px">
<tr>
<td> Bulbasaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Ivysaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Venusaur</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Squirtle</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Wartoltle</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Blaistoise</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Charmander</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Charmeleon</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Chalizard</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Caterpie</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Metapod</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Butterfree</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Weedl</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Kakuna</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Beedrill</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pidgey</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pidgeotto</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Pigeot</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Rattata</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Raticate</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Spearow</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Fearow</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
<tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr><tr>
<td> Vixa Blachy</td>
<td> Omen Płośnica</td>
</tr>
</table>
</center>
</div>
</div>
<div class="stopka">PokeCity "Piiii Pikachuuuu" © 2016</div>
</div>
</body>
</html>