Home › Forums › CSS › Fixed menu problem › Re: Fixed menu problem
October 29, 2011 at 11:38 pm
#89916
AntarikshParticipant
I can write the code for the menu if you want
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}
img, nav, section, article, header {
display: block;
}
a:active {
outline:none;
}
/* LAYOUT*/
nav {
width: 447px;
height: 100%;
position: fixed;
left: 0;
overflow: hidden;
}
.content {
width: 930px;
height: 100%;
padding-left: 40px;
top: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 447px;
}
section {
display: block;
height: 1200px;
}
#matter{
margin-left:447px;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 40px;
}
/* Menu */
#nav-logo {
display: block;
width: 116px;
height: 116px;
float: left;
margin: 76px 0 0 189px;
}
nav ul {
position: absolute;
top: 274px;
left: 0;
display: block;
height: 333px;
background: url('../images/bg-1.png') 53px bottom no-repeat;
width: 436px;
}
nav li {
display: block;
width: 435px;
position: relative;
z-index: 2;
left: 0;
}
nav li div.first {
position: relative;
z-index: 2;
}
li div.first span {
display: block;
width: 232px;
background:url(../images/navtxt.png);
position: absolute;
left: 52px;
text-indent: -9999px;
}
li div.second {
position: absolute;
top: 0;
left: 240px;
display: block;
width: 200px;
height: 49px;
text-indent: -9999px;
z-index: 1;
}
nav a {
display: block;
outline: none;
cursor: pointer;
}
#nav-1 div.first {
height: 52px;
}
#nav-1 div.first {
background-position: 0 0;
}
#nav-1 span {
background-position: 0 0;
height: 52px;
}
#nav-2 div.first {
height: 52px;
}
#nav-2 div.first {
background-position: 0 -49px;
}
#nav-2 span {
background-position: 0 -49px;
height: 52px;
}
#nav-3 div.first {
height: 52px;
}
#nav-3 div.first {
background-position: 0 -98px;
}
#nav-3 span {
background-position: 0 -98px;
height: 52px;
}
#nav-4 div.first {
height: 52px;
}
#nav-4 div.first {
background-position: 0 -148px;
}
#nav-4 span {
background-position: 0 -148px;
height: 52px;
}
#nav-5 div.first {
height: 52px;
}
#nav-5 div.first {
background-position: 0 -205px;
}
#nav-5 span {
background-position: 0 -205px;
height: 52px;
}
#nav-1 div.second {
background-position: 0 0;
}
#nav-2 div.second {
background-position: 0 -49px;
}
#nav-3 div.second {
background-position: 0 -98px;
}
#nav-4 div.second {
background-position: 0 -148px;
}
#nav-5 div.second {
background-position: 0 -205px;
height: 52px;
}
/* Hello content*/
#hello {
padding-top: 117px;
display:none;
}
#hello header {
height: 430px;
}
#hello h1 {
color:#000;
width: 440px;
height: 115px;
position: absolute;
top: 152px;
left: 68px;
}
#hello p {
width: 320px;
height: 240px;
text-indent: -9999px;
position: absolute;
top: 253px;
left: 59px;
}I have another style sheet in my project
html {
height:100%;
}
body {
background-attachment: fixed;
background-color: #FFF;
background-image: url(../images/bg2.jpg);
background-repeat: repeat;
background-position: 0 0;
}
nav {
background-image: url(../images/bg2l.png);
}