Witam.
Stworzyłem schemat stronki na div:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<link rel="stylesheet" href="style.css" type="text/css">
<div class="menu_css" id="menu1"> <p>Menu
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div class="menu_css" id="menu2"> <p>Menu 2
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li>
Divy z klasy menu_css po najechaniu na nie rozszerzają się dając opcje menu. I tu zaczyna się problem, gdyż div "content" nie jest doklejony do div "menu" tylko ucieka na dół i klei się do prawego dolnego rogu div menu.
Plik style.css wygląda następująco:
/*Wygląd dla kontenera głównego*/
div#page {
background-color: silver;
width : 100%;
height : 100%;
}
/*Wygląd nagłówka strony*/
div#header {
background-color: black;
margin : 0px;
border : 0px;
padding : 0px;
width : 100%;
height : 15%;
}
/*Wygląd menu strony*/
div#menu {
background-color: blue;
margin : 0px;
border : 0px;
padding : 0px;
width : 20%;
height : auto;
min-height : 80%;
min-width : 200px;
float : left;
}
/*Wygląd kontenera zawartości strony*/
div#content {
background-color: red;
margin : 0px;
border : 0px;
padding : 0px;
width : 80%;
height : auto;
min-height : 80%;
min-width : 400px;
float : right;
}
/*Kolumny lewą (menu) i prawą(content) umieszczamy z lewej i z prawej strony za pomocą atrybutów float*/
/*Wygląd stopki strony*/
div#stopka {
background-color: yellow;
margin : 0px;
border : 0px;
padding : 0px;
width : 100%;
height : 5%;
clear : both;
}
/*Stopkę przesuwamy pod spód kolumn lewej i prawej atrybutem clear*/
/*
WYGLĄD ELEMENTÓW MENU
*/
div.menu_css { /* div "menu" */
width: 150px; /* szerokość */
border: 1px solid #D3D3D3; /* obrazmowanie */
height: 30px; /* wysokość */
overflow: hidden; } /* przycinanie */
div.menu_css:hover { /* najechane menu */
width: 150px; /* szerokość */
height: auto; } /* wysokość (wartość musi być 100% lub "auto" */
ul { /* ul */
margin: 0px; /* margines */
padding: 0px; } /* odstęp */
li { /* li */
list-style-type: none; /* rodzaj wykazu */
width: 150px;} /* szerokość */
li a { /* linki */
text-decoration: none; /* dekoracja linka */
display: block; /* rodzaj wyświetlenia elementów */
width: 150px; /* szerokość */
padding: 5px; /* odległości */
color: #3B3B3B; } /* kolor linka */
li a:hover { /* najechany link */
text-decoration: none; /* dekoracja tekstu */
color: #3B3B3B; /* kolor linka */
width: 150px; /* szerokość */
padding: 5px; /* odległości pomiedzy linkami */
background-color: #F0F0F0 } /* tło */
text-align: center; }/* tekst wyśrodkowany */
Nie wiem czemu tak się dzieje, schemat robiłem wg tutoriala ale tam nie uwzględniono zmiennej wysokości divów :/. Proszę o pomoc.
PS. Jakby ktoś jeszcze napisał jak podlinkować kolejne strony do div content (tak, aby w nim się ładowały po kiknięciu z menu) byłbym bardzo wdzięczny. (chodzi o coś takiego jak w ramkach był znacznik target).
Pozdrawiam
[CSS] Rozjeżdżające się divy
