Jag har ett problem med min meny, (se bifogad bild),när jag sätter muspilen över så får inte hela rutan en mouseover effekt, jag vill ha den till vänster.
kör jag den bara så här så funkar det,men det är när jag lägger in den på min sida det blir fel.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Lektioon 16. Steg 4 - Lägg till en hovringseffekt</title>
<style type="text/css" media="screen">
ul#navigation
{
padding-left: 0;
margin-left: 0;
list-style-type: none;
background: #036;
float: left;
width: 100%;
}
ul#navigation li { display: inline; }
ul#navigation li a
{
display: block;
float: left;
padding: 0.2em 1em;
text-decoration: none;
background: #036;
color: #fff;
border-right: 1px solid #fff;
}
ul#navigation li a:hover
{
color: #000;
background: #69C;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="#">Hem</a></li>
<li><a href="#">Om</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Medarbetare</a></li>
<li><a href="#">Portfölj</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</body>
</html>
cayaMedlem sedan aug. 20051 448 inlägg ul#navigation li a {
display:block; float: left; padding: 0.2em 1em; text-decoration: none;
background: #036; color: #fff; border-right: 1px solid #fff;
height: ; width: ;
}
ul#navigation li a:hover {
display:block; height: ; width: ;
color:#000; background: #69C;
}
du får fylla i höjden och bredden själv ;)
tantenMedlem sedan nov. 20051 596 inlägg Vet inte om jag cyklar nu, men din meny ligger ju i ett td, och den ser ut att ha centrerat sitt innehåll. För som det ser ut på din bild så har du lika mycket utrymme över åt andra hållet. Kan du testa med att text-aligna td på något sätt...och se om det fungerar? Vet inte om du föredrar att göra det i html eller i css.
tantenMedlem sedan nov. 20051 596 inlägg cyklade nog dessvärre i går. Tänkte bara halva vägen. Det är nog så att eftersom listan ligger i en tabell så bör du sätta värden på ul också. Prova med ul{margin:0;}
Nix får inte till det riktigt,jag har en egen css fil som jag länkar till,och när jag klistar in bara koden till menyn på sidorna få funkar det,så felet måste ligga i den filen.
Jag klistar in hela css koden här.
<style type="text/css" media="screen">
ul#navigation
{
padding-left: 0;
margin-left: 0;
list-style-type: none;
background: #669999;
float: left;
width: 100%;
}
ul#navigation li { display: inline; }
ul#navigation li a
{
display: block;
float: left;
padding: 1em 1em;
text-decoration: none;
background: #669999;
color: #fff;
border-right: 2px solid #fff;
}
ul#navigation li a:hover
{
color: #000;
background: #D1E5EF;
}
body {
background-color: #FFFFFF; font-family: Verdana; font-size: 11px; color: #666666}
p {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666;
padding:1em ;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666}
tr {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #2F7EC4}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #CCCCCC}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666}
a:link {
text-decoration: none; color: #2F7EC4}
a:visited {
text-decoration: none; color: #2F7EC4}
a:active {
text-decoration: none; color: #2F7EC4 }
a:hover {
text-decoration: underline; color: #2F7EC4}
.knapp {
background:#FF9933; color: white; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px;}
.kantlinje {
border: 1px solid #003366; }
.box {
margin: 1em;
padding: 1em;
}
</style>
tantenMedlem sedan nov. 20051 596 inlägg I den externa filen får du inte ha med detta <style type="text/css" media="screen"></style> ser att du har det just nu på hemsidan... så ta bort det.
Hur såg det ut när du la in den med ul som jag skrev förut?
det funkade med att ta bort "<style type="text/css" media="screen"></style>" tack ska du ha.
