Frågan 10 juni 2010 10:33 #1 Jo...
Jag sitter och bygger en sajt till joomla. Problemet är att min meny vägrar hamna ovanför innehållet. Har ändrat Z-index på alla menyelement till ett högre än alla innehåll. Men fortfarande vägrar menyn hamna över.
Någon som har en aning om vad jag kan ha missat?
Danne V Medlem sedan aug. 2006 8 090 inlägg z-index kan väl bara köras på absolut positionerade divvar tror jag? Har du det?
Det är nog det jag missat i sådana fall. I så fall är det ju intressant att veta hur fasen jag ska få meny att ligga ovanför. Det går nämligen inte att köra absoluta divar i detta fall.
kör relative då, fungera det också.
mikaelsooh skrev:
Ska testa.
Funkade inte :(
Bifogar koder.
1. Sidstrukturen:
* {
z-index: 2;
padding: 0;
margin: 0;
}
img {
z-index: 2;
border: 0; }
body {
color: black;
line-height: 1.3em;
font-size: 13px;
font-family: verdana, arial;
background-color: silver;
z-index: 2;
overflow: none; }
a:link, a:visited {
font-weight: normal;
color: #000;
text-decoration: none;
outline: none medium;
text-align: left;
z-index: 2; }
.float {
z-index: 2; }
.clear {
z-index: 2; }
.overall {
background-color: #fff; z-index: 1; }
div.center {
text-align: center;
margin: 0 auto;
padding: 0;
width: 950px;
background: #ffffff;
z-index: 2; }
#container {
background-color: white;
align: left;
width:1000px;
text-align: left;
height: 680px;
z-index: 1;
overflow: none;
float: none;
margin-right: auto;
margin-left: auto;
border-style: none; }
#header {
background-image: url(../img/header2.png);
background-repeat: no-repeat;
text-align: center;
position: relative;
left: 20px;
width: 400px;
height: 45px;
z-index: 11;
float: left;
margin-top: 20px; }
#menu {
color: black;
text-align: center;
position: relative;
top: 33px;
right: 45px;
width: 500px;
z-index: 2;
float: right;
margin: 0;
padding: 0; }
#content {
color: white;
width: 690px;
text-align: left;
height: 480px;
z-index: 0;
overflow: hidden;
float: left;
margin-right: 10px;
margin-bottom: 50px;
margin-left: 40px;
padding: 10px; }
#right {
background-color: #d6d6d6;
text-align: left;
position: relative;
width: 205px;
height: 480px;
z-index: 0;
overflow: auto;
float: left;
padding: 10px; }
#footer {
color: black;
background-image: none;
text-align:center;
position: relative;
bottom: 10px;
width: 690px;
height: 35px;
z-index: 2;
float: left;
margin-right: 20px;
margin-left: 40px;
padding: 5px;
border-bottom: 1px solid #e2e2e2; }
#start {
background-color: purple;
position: relative;
bottom: 10px;
width: 205px;
height: 45px;
float: left; }
h2 {
font-size: 12pt;
font-weight: bold;
text-align: center; }
Menyn:
Recommended only to change the Div Tag Id name"#hxdmoomenu" and menus parent ul class ".menuhxdmenu" ***/
.menuhxdmenu,.menuhxdmenu *{
margin:0;
padding:0; }
div#hxdmoomenu{
background-color: white;
z-index:100; }
#hxdmoomenu li li{
z-index: 100;
margin:0; }
.menuhxdmenu {
line-height:1;
float:left;
margin-bottom:1.5em;
position:relative;
z-index:101 }
.menuhxdmenu ul{
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
z-index: 100;
padding:0; }
.menuhxdmenu li{
float:left;
list-style:none;
position:relative;
z-index: 100; }
div#hxdmoomenu li li a, div#hxdmoomenu li.active li a{
display:block;
padding:0;
margin:0;
text-decoration:none;
float:none;
width:98%;
z-index: 100; }
.menuhxdmenu li ul{
float:none;
left:-999em;
position:absolute;
width:170px;
z-index:102; }
.menuhxdmenu li:hover ul,
.menuhxdmenu li.sfHover ul{
color: #d6d6d6;
left:0;
top:25px;
z-index: 100; }
.menuhxdmenu li:hover li ul,
.menuhxdmenu li.sfHover li ul,
.menuhxdmenu li li:hover li ul,
.menuhxdmenu li li.sfHover li ul,
.menuhxdmenu li li li:hover li ul,
.menuhxdmenu li li li.sfHover li ul{
color: #d6d6d6;
top:-999em;
z-index: 100; }
.menuhxdmenu li li:hover ul,
.menuhxdmenu li li.sfHover ul,
.menuhxdmenu li li li:hover ul,
.menuhxdmenu li li li.sfHover ul,
.menuhxdmenu li li li li:hover ul,
.menuhxdmenu li li li li.sfHover ul{
color: #d6d6d6;
left:170px;
top:0;
z-index: 100; }
.menuhxdmenu li li{
position:relative;
float:none;
width:100%;
z-index: 100; }
/*** EDIT THESE CSS CODES WITH CARE: ENDS ***/
#hxdmoomenu{
color: black;
z-index: 100; }
#hxdmoomenu ul{
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
margin: 0;
padding: 0;
width: 500px;
z-index: 100; }
#hxdmoomenu ul li{
line-height: 25px;
text-align: center;
width: 100px;
height: 25px;
z-index: 100;
float: left;
margin:0;
padding: 0;
display:block; }
#hxdmoomenu ul li a{
margin:0;
display:block;
float: left;
height: 25px;
line-height: 25px;
text-align: center;
width: 100px;
z-index: 100;
padding: 0; }
#hxdmoomenu ul li a:hover{
color: #d6d6d6;
width: 100px;
height: 25px;
z-index: 100;
float: left;
display:block; }
#hxdmoomenu li.active a {
z-index: 100;
display:block; }
#hxdmoomenu li ul {
background-color: yellow;
width: 100px;
z-index: 100;
border-bottom: 1px dotted black; }
#hxdmoomenu ul ul ul {
width: 100px;
z-index: 100;
border-bottom: 1px solid black; }
#hxdmoomenu ul ul li{
display:block;
text-align:left;
width: 90px;
z-index: 100;
padding: 0; }
#hxdmoomenu ul ul li a{
left: 50px;
width: 100px;
z-index: 100;
float: left;
display:block; }
#hxdmoomenu li.active li a {
width: 100px;
z-index: 100; }
#hxdmoomenu ul ul li a:hover,
#hxdmoomenu ul li.active.parent ul a:hover {
color: #d6d6d6;
z-index: 100;
display:block; }