Witam, chciał bym stworzyć o takie coś:
(IMG:
http://img815.imageshack.us/img815/212/cssc.png)
i wystąpił błąd którego nie jestem w stanie przeskoczyć:
mam taki kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="style.css" /> <!-- header -->
<!-- menu i logo -->
<h1><a href="?body=main"><img src="images/logo.png"></a></h1> <li><a href="#" class="active"><span class="active2">Link
</span></a></li> <!-- menu na srodku -->
<div class="menu bubplastic horizontal aqua"> <li class="highlight"><span class="menu_r"><a href=""><span class="menu_ar"><img src="images/home.png"></span></a></li> <!-- srodek strony -->
<div id="left">Menu nawigacyjne
</div> <div id="right">Dodatkowe informacje
</div> Treść strony
<div id="fotter">Stopka serwisu
</div>
html, body {
background-color: #e8e8db;
color: #000;
margin: 0;
padding: 0;
font-family: arial;
}
div.logo {
margin: 0;
}
/* Główne ustawienia */
#top_bar {
height: 5px;
background: #2b4e54;
}
#top {
width: 960px;
background: white;
margin-left: auto;
margin-right: auto;
}
#head {
height: 120px;
background: white;
position: relative;
top: -21px;
}
#menu {
height: 27px;
position: relative;
top: -49px;
}
#left {
width: 170px;
float: left;
overflow: hidden;
background-color: #fea;
}
#right {
width: 170px;
float: right;
overflow: hidden;
background-color: #bea;
}
#center {
width: 585px;
float: left;
overflow: hidden;
background-color: #f66;
}
#fotter {
clear: both;
width: 100%;
background-color: #888;
}
/* Menu Head */
#headmenu {
height: 21px;
width: 650px;
position: relative;
top: -47px;
left: 260px;
font-size: 11px;
font-weight: bold;
}
#headmenu ul {
margin:0;
list-style:none;
}
#headmenu li {
display:inline;
margin: 0;
padding:0;
}
#headmenu a {
float: right;
background:url('images/tableftF.png') no-repeat left top;
margin-left: 3px;
padding:0 0 0 4px;
text-decoration:none;
}
#headmenu a span {
float: right;
display:block;
background:url('images/tabrightF.png') no-repeat right top;
padding: 2px 10px 2px 10px;
color: #2b4e54;
}
#headmenu a.active {
float: right;
background:url('images/tableftF.png') no-repeat left top;
background-position:0% -21px;
margin-left: 3px;
padding:0 0 0 4px;
text-decoration:none;
}
#headmenu a span.active2 {
float: right;
display:block;
background:url('images/tabrightF.png') no-repeat right top;
background-position:100% -21px;
padding: 2px 10px 2px 10px;
color:#FFFFFF;
float:none;
}
/* Commented Backslash Hack hides rule from IE5-Maccolor: #2b4e54; \*/
#headmenu a span {float:none;}
/* End IE5-Mac hack */
#headmenu a:hover span {color:#FFFFFF;}
#headmenu a:hover {background-position:0% -21px;}
#headmenu a:hover span {background-position:100% -21px;}
#headmenu a.active:hover {background-position:0% 0px; }
#headmenu a:hover span.active2 {background-position:100% 0px; color: #2b4e54;}
/* Main Menu */
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 960px;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(images/bg-bubplastic.png) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.png) top left no-repeat;
}
.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 15px;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}
.bubplastic.horizontal ul li a span.menu_ar {
display: block;
height: 22px;
padding-top: 5px;
padding-right: 15px;
background: transparent url(images/bg-bubplastic-button.png) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-aqua.png) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-aqua.png) top right no-repeat;
}
a wszystko wygląda tak:
(IMG:
http://img600.imageshack.us/img600/6315/widok.png)
Paczka z kodem i zdjęciami:
http://www.speedyshare.com/files/29187901/kod.rarProszę o wskazówki
Pozdrawiam Krzysztof Marcinowski