Hej! referera till bilden:http://i.imgur.com/gJ1Dtwe.png?1?4671
Problemet jag har är att jag har satt en opacity på "header" vilket jag vill ha men problemet uppstår så menyn samt loggan blir transparent den med. Hur ska jag lösa det? kan man på något sätt skapa en class som berör bara så att allt utom texten, bilden blir transparent?
HTML
CSS:
Problemet jag har är att jag har satt en opacity på "header" vilket jag vill ha men problemet uppstår så menyn samt loggan blir transparent den med. Hur ska jag lösa det? kan man på något sätt skapa en class som berör bara så att allt utom texten, bilden blir transparent?
HTML
Citat:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Start - Reset UF </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<div id="position">
<div id="logo">
</div>
<div id="meny">
<br>
<a class="menyfix" href="#"> Start </a>
<a class="menyfix" href="#"> Kontakt </a>
<a class="menyfix" href="#"> Om oss </a>
<a class="menyfix" href="#"> Programbanken </a>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Start - Reset UF </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<div id="position">
<div id="logo">
</div>
<div id="meny">
<br>
<a class="menyfix" href="#"> Start </a>
<a class="menyfix" href="#"> Kontakt </a>
<a class="menyfix" href="#"> Om oss </a>
<a class="menyfix" href="#"> Programbanken </a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Citat:
body{
margin: 0px;
}
#content{
width:100%;
height: 600px;
background-image: url('images/bg.jpg');
background-size: 100%;
}
#header{
width: 100%;
height:150px;
background-color: black;
opacity: 0.4;
}
#position{
width: 1300px;
height: 150px;
margin: 0 auto;
border: 3px solid red;
}
#logo{
float: left;
height: 150px;
width: 400px;
background-image: url('images/logo.png');
}
#meny{
width: auto;
height: 60px;
float: right;
margin-top: 50px;
text-align: center;
}
.menyfix{
text-decoration: none;
}
a.menyfix{
color: #c5c1c1;
font-size: 19px;
padding: 10px;
}
a.menyfix:hover{
color: #5bb3c9;
background-color: purple;
height: 30px;
width: auto;
border-radius: 5px;
}
margin: 0px;
}
#content{
width:100%;
height: 600px;
background-image: url('images/bg.jpg');
background-size: 100%;
}
#header{
width: 100%;
height:150px;
background-color: black;
opacity: 0.4;
}
#position{
width: 1300px;
height: 150px;
margin: 0 auto;
border: 3px solid red;
}
#logo{
float: left;
height: 150px;
width: 400px;
background-image: url('images/logo.png');
}
#meny{
width: auto;
height: 60px;
float: right;
margin-top: 50px;
text-align: center;
}
.menyfix{
text-decoration: none;
}
a.menyfix{
color: #c5c1c1;
font-size: 19px;
padding: 10px;
}
a.menyfix:hover{
color: #5bb3c9;
background-color: purple;
height: 30px;
width: auto;
border-radius: 5px;
}
