Forumet - CSS-meny krånglar

CSS-meny krånglar

274 0 30
Hej

När jag försöker ändra min CSS-meny från vanlig till en med undermeny går det inte som jag vill. Jag har fixat fram så att undermenyn syns hela tiden(vill bara att den ska synas när man hovrar på huvudmeny vilket jag fixar sen.)

Det första problemet är att flash elementet under hela menyn lägger sig fult långt till höger vilket jag inte riktigt kan få bukt på. Jag vill ju att den ska ligga centrerat och snygg med huvudinnehållet. Vill/behöver du se hur sidan ser ut just nu kan jag länka i PM.

HTML
<body>

<div id="page-wrap">

<ul id="nav">
<li class="current"><a href="#">HEM</a>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
</ul>
</li>
<li><a href="#">NYHETER</a>
<ul>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
<li><a href="#">AUKTIONER</a>
<ul>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
<li><a href="#">VILLKOR</a>
<ul>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub4</a></li>
</ul>
</li>
<li><a href="#">OM</a>
<ul>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub5</a></li>
</li>
</ul>

<object width="980" height="120" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://kampanj.tradera.com/widget/20100702/widget.swf"/>
<param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://kampanj.tradera.com/widget/20100702/widget.swf" width="980" height="120">
<param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/>
<!--<![endif]-->
<p><a href="http://www.tradera.com/category/category.aspx?ftgnr=2176828">Auktioner på Tradera</a></p>
<p><a href="http://widget.tradera.com/">Skapa din egen Tradera-widget</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</ul>

<div id="Widget">

<div id ="content"></div>
</div>

<div id="main-content">


<div id="left-col">

CSS
div#page-wrap {
width:980px;
margin: 0 auto;
}
#nav {
list-style:none;
height: 236px;
width:980px;
position:relative;
line-height:1.4em;

}
#nav li {
width: 136px;
float:left;
font-size: 1.4em
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:#deeef2;
margin-top: 110px;
margin-bottom: 15px;
color: black;
padding-top: 2px;
font-weight: bold;
position: center;
}
#nav a:active, #nav a:focus, #nav a:hover {
color: red;
background:#deeef2;
}
/* --------- Sub Nav --------- */

#nav li.current ul {
left:0;
}

#nav ul {
position:center;
left: 0em;
width:980px;
list-style:none;
padding:.5em 0 0;
margin-right: 100px;


}
#nav ul li {
width:auto;
margin:0 15px 0 0;
}
#nav ul a {
font-size:80%;
height:0x;
padding:1px;
margin:1px;
}
#nav li:active ul, #nav li:hover ul {
color:red;
left:0;
background:#deeef2;
}

div#widget {
width: 980px;
height: 120px;
margin-right: 50px;

Spana också in:

Enfeeble:

Hmm, problemet för min del är hur man skriver html koden. Jag kan kolla runt lite och testa själv, så återkommer jag. [bigcheers]


Jag kanske bör posta den senaste versionen av CSS:en.

div#page-wrap {
width:980px;
margin: 0 auto;
}
#nav {
list-style:none;
height: 75px;
width:980px;
position:relative;
line-height:1.4em;


}
#nav li {
height: 15px;
width: 100px;
float:left;
font-size: 1.4em;
text-align:center;
padding: center;


}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:
margin-top: 110px;
margin-bottom: 15px;
color: black;
padding-top: 2px;
font-weight: bold;
position: center;
background:green;
}
#nav a:active, #nav a:focus, #nav a:hover {
color: red;
background:#deeef2;
}
/* --------- Sub Nav --------- */

#nav li.current ul {
left:0px;

}

#nav ul {
display: none;
position:center;
left: 0em;
height:0px;
width:980px;
list-style:none;
padding:center;
margin-right: 100px;

padding-top:-100px;


}
#nav li:hover > ul {
display:inline;
position: absolute;
width:auto;
margin: 0px;


}

#nav ul a {
font-size:60%;
width: 100px;
height:0px;
padding:10px;
margin:-10px;
background: green;

}
#nav li:active ul, #nav li:hover ul {
color:red;
left:0;

}


div#widget {
width: 980px;
height: 12px;