I want to make a responsive menu with only html and css , no Javascript.
I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo">
</div>
<div class="facebook" class="cfx"></div>
<img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook">
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de facebookpagina.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
#media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
It would make more sense to use a responsive framework, such as Bootstrap, or Foundation.
Here is a simplistic example for a responsive navigation menu which utilises bootstrap.
Responsive navigation bar Preview
Responsive navigation bar Download
You have this:
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (i.e. make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...
Related
I have a problem concerning responsitivity. I want this symbol "=" to hold all the menu when the screen is smaller(let say 1000px). I know I have to use responsitivity but I don't know how.
This is my index:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Tagesmutter Kiel</title>
</head>
<body style="background-color: #41430e">
<!--a href="javascript:void(0);" class="icon" onclick="allLinksInOneDiv()">☰</a-->
<div id="menu">
<div class="icon-bar">
<a class="active" href="index.html"><i class="fa fa-home"></i></a>
</div>
<div class="dropdown_wohnen">
<button class="dropbtnWohnen">Wohnen</button>
<div class="wohnen_content">
Eingenwöhnung
Konzeption
</div>
</div>
<div class="dropdown_betreung">
<button class="dropbtnBetreung">Betreungskosten</button>
<div class="betreungskosten_content">
Betreuungskosten
Freie Plätze
Bilder
</div>
</div>
<div class="dropdown_tag">
<button class="dropbtnTag">Tagesablauf</button>
<div class="tag_content">
Tagesablauf
Tageskinder
Gästebuch
</div>
</div>
<div class="dropdown_kontakt">
<button class="dropbtnKontakt">Kontakt</button>
<div class="kontakt-content">
Kontakt
Urlaub
Über mich
</div>
</div>
</div>
<div class="banner">
<img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>
<div class="info">
<h1>Hallo, liebe Eltern! </h1>
<p style="
padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>
Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick
in meine Arbeit als Tagesmutter ermöglichen kann. ☺ </p>
<h5>Tagesmutter Irene</h5>
</div>
</body>
</html>
And now the stylesheet:
#menu
{
background-color: #78409a;
display: flex;
margin-top: -2%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
}
.icon-bar { margin-right: 0.2%;}
.icon-bar a
{
float: right;
color: white;
font-size: 710%;
}
.active {background-color: #4CAF50;}
.dropdown_whohnen
{
position: relative;
display: inline-block;
}
.dropbtnWohnen
{
background-color: #4CAF50 ;
color: white;
padding: 33.25%;
font-size: 100%;
border: none;
cursor: pointer;
}
.wohnen_content
{
display: none;
position: absolute;
background-color: #d5416e;
min-width: 13.2%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.wohnen_content a
{
color: black;
padding: 6% 6%;
text-decoration: none;
display: block;
}
.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}
.dropdown_betreung
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnBetreung
{
background-color: #4CAF50 ;
color: white;
padding: 24.7%;
font-size: 100%;
border: none;
cursor: pointer;
}
.betreungskosten_content
{
display: none;
position: absolute;
background-color: #DAF7A6 ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.betreungskosten_content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}
.dropdown_tag
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnTag
{
background-color: #4CAF50 ;
color: white;
padding: 29.2%;
font-size: 100%;
border: none;
cursor: pointer;
}
.tag_content
{
display: none;
position: absolute;
background-color: #78409a ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.tag_content a
{
color: black;
padding: 5% 5%;
text-decoration: none;
display: block;
}
.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}
.dropdown_kontakt
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnKontakt
{
background-color: #4CAF50 ;
color: white;
padding: 34.09%;
font-size: 100%;
border: none;
cursor: pointer;
}
.kontakt-content
{
display: none;
position: absolute;
background-color: #12d3df;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.kontakt-content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}
.banner
{
height: 270px;
margin-left: 15%;
margin-right: 10%;
width: 68%;
background-color: white;
}
.mySlides {display:none;}
.info h1, h5, h3
{
font-family: 'Tangerine';
font-size: 78px;
text-shadow: 10px 10px 10px #aaa
}
.info
{
background-color: #a6debb;
margin-top: -4%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
font-family: 'Helvetica', serif;
font-size: 40px;
text-shadow: 22px 22px 22px #aaa;
}
.info p
{
padding-left: 10px;
font-family: 'Helvetica', serif;
font-size: 25px;
text-shadow: 22px 22px 22px #aaa;
}
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th
{
border: 1px solid #9a1838 ;
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
#map
{
margin-left: 9%;
width: 80%;
height: 400px;
background-color: grey;
}
Please, can you help me with this? And I also have a display different depending on the browser ( Firefox vs chrome).
Based on your question it seems you want to build a mobile navigation menu that opens when clicking the symbol "=".
You need to do the following:
- HTML: Add a list within an unordered list, to hold the anchor links. This is the navigation text you will see when it is expanded. Attach an onclick functionality that will be used in below javascript.
- CSS: Style your navigation menu.
- Javascript: Create a function that reacts on the HTML onclick. This function will expand your navigation menu. Your function should be able to toggle the menu, meaning that same button should be able to open/close the menu.
...if your need further assistance please create a code snippet.
I have a 3 <a>'s to get the text you want, but it moves with the text that you want to get, it goes up and down with the text:
It keeps resizing with them and i've been trying to change this for a hour.
This is my css:
* {
padding: 0;
margin: 0;
}
#nav {
//background-color: #666;
position: fixed;
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}
#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
height: 140%;
background-color: #e6e6e6;
}
#nav li a:hover {
background-color: #396108;
}
#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -1%;
}
#Text-marge {
margin-left: 30%;
margin-top: 0.2%;
width: 45%;
height: 29.5%;
padding-left: 4px;
background-color: gray;
overflow: hidden;
float: left;
}
#text-marge > p {
margin-left: 5%;
margin-top: 8%;
vertical-align: top;
}
#clicker > p {
display: inline-block;
//position: absolute;
float: left;
vertical-align: top;
}
#clicker {
margin-left: 28%;
margin-top: 12%;
}
#clicker ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#clicker li {
float: left;
}
#clicker li a {
display: block;
font-size: 24px;
padding: 14px 18px;
text-decoration: none;
color: white;
float: left;
}
#text {
}
and this my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Homepage</title>
<script>
function runButton1() {
document.getElementById("text").innerHTML = "";
}
function runButton2() {
document.getElementById("text").innerHTML = "b";
}
function runButton3() {
document.getElementById("text").innerHTML = "c";
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Interreses</li>
<li>Groepsleden</li>
<li>Opleiding</li>
<li>Fotogalerij</li>
<li style="float: right;"><a style="width: 20px; height: 20px;" href="/index.html"><img src="logo.png"></img></a></li>
</ul>
</div>
<div id="container">
<img style="margin-top: 10%; margin-left: 5%; width: 25%;" align="middle" src="geslaagd.png"/>
<h1 style="margin-left: 12%; margin-top: -32%;">Geslaagd!</h1>
<div id="Text-marge">
<p id="text">In 2016 ben ik geslaagd en kon ik mijn droom opleiding volgen <br> en die opleiding heet: "Applicatie Ontwikkelaar" <br> ik hou van programmeren en dus vond ik dat het bij mij past <br> daarom had ik zo hard mogelijk gewerkt om het te halen. <br> Nu zit ik in een leuk project team waar je ook over kan lezen op <br> deze site, Kyran, Luuk, Collin, Dewi, Jeremy en Xander <br> zijn mijn teamleden. <br> Ik ben 17 jaar oud</p>
<div id="clicker">
<ul>
<li><a onclick="runButton1()">*</a></li>
<li><a onclick="runButton2()">*</a></li>
<li><a onclick="runButton3()">*</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CBroe is correct Lucas. Set the div #clicker to position: absolute;. Make sure it's parent #text-marge is set to position: relative;.
You can position elements that are declared as absolute by using top/bottom etc. find out more here.
Also read this as to why its parent should be relatively positioned.
here is part of the CSS code, i cant seem to figure it out.
#About{
height:500px;
background: url("murano.jpg") no-repeat center;
}
I want to decrease the opacity of the imported background image
Add Opacity with your css
#About{
opacity :0.4;
height:500px;
background: url("murano.jpg") no-repeat center;
}
the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity
there is no css rule to provide opacity to background images.
when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4
<div id="about">
<div class="absolute">
</div>
</div>
#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
background:rgba(0,0,0,0.5);
}
Use background-color: rgba(255, 255, 0, 0.3);
The 0.3 being the the alpha(opacity channel).
OR
Add an extra div to hold the background, and change the opacity there.
opacity: 0.4; filter:alpha(opacity=40);
Example :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
.head {
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td,
th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left {
float: left;
margin-right: 14px;
}
img.right {
float: right;
margin-left: 14px;
}
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {
color: #fff;
text-align: center;
}
#power a {
color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li>Inicio
</li>
<li>Sobre a banda
</li>
<li>Membros
</li>
<li>Bilhetes
</li>
<li>Galeria
</li>
<li>Área Pessoal
</li>
</ul>
<h1></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
<p class="readmore">Ver
</p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
<p>
- Best International Band (Melhor Banda Internacional)
<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center>
<img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
</center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.
here is a link to a good article on this.
I've made a dropdown menu, but now it's behind another div. I don't know how this happened and I've never had it before. Please help how I can fix this and that the dropdown menu isn't behind some text.
/* -------------
Header
------------- */
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
margin: 0 auto auto;
width: 100%;
background: #DADADA;
overflow-y: scroll;
}
#header {
background: linear-gradient(#4CAE97, #378171);
width: 100%;
height: 60px;
border-bottom: 1px solid black;
}
#header_text {
background-color: transparent;
font-size: 40px;
color: #e89696;
text-align: center;
text-shadow: -2px 0 #6a7e89, 0 2px #6a7e89, 2px 0 #6a7e89, 0 -2px #6a7e89;
}
/* ------------- */
/* Navigation */
/* ------------- */
#ul-nav {
list-style-type: none;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
width: 600px;
height: 50px;
}
.nav-item {
margin-left: 10px;
margin-right: 10px;
width: 170px;
text-align: center;
float: left;
padding: 0px;
}
.nav-a {
border: 1px solid black;
border-top: 0px;
border-radius: 0px 0px 10px 10px;
color: black;
background: linear-gradient(#FFADAD, #d38787);
text-decoration: none;
height: 100%;
width: 100%;
padding: 7px;
display: block;
}
.nav-a:hover {
background: linear-gradient(#d78e8e, #c67f7f);
height: 100%;
width: 100%;
margin: 0px;
display: block;
}
#nav-main:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-po:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-contact:hover {
border-radius: 10px 10px 10px 10px;
}
/* ------------- */
/* Dropdown menu */
/* ------------- */
#nav-po-ul:hover ul {
display: block;
}
#nav-po-ul ul {
display: none;
position: absolute;
background: #d78e8e;
}
#nav-po-ul ul li {
display: block;
list-style-type: none;
width: 170px;
}
#nav-po-ul ul li a:visited {
color: black;
}
/* ------------- */
/* Container */
/* ------------- */
#container {
/*Vorm*/
height: 600px;
width: 600px;
margin: 50px auto 0px;
/*Border*/
border: 1px solid #000000;
border-radius: 10px;
/*Background*/
background: #f9f9f9;
/*Padding*/
padding-left: 200px;
padding-right: 50px;
padding-top: 10px;
}
#container_header {
position: absolute;
width: 900px;
}
#container_header_text {
width: 500px;
}
#container_header_hr {
width: 500px;
margin-left: -20px;
}
#container_text {
margin-top: 50px;
width: 450px;
}
/*Zet banaan op goede plek en formaat*/
#banaan {
width: 200px;
margin-left: 280px;
}
/*Laat de banaan draaien*/
#banaan:active {
transform: rotate(-180deg);
}
<!DOCTYPE html>
<title>Informatica → Jonathan</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<header id="header">
<h1 id="header_text">Jonathan's website</h1>
</header>
<nav>
<ul id="ul-nav">
<li class="nav-item">
<a class="nav-a" id="nav-main" href="index.html">Home</a>
</li>
<li class="nav-item" id="nav-po-ul">
<a class="nav-a" id="nav-po" href="#">Opdrachten</a>
<!-- Dropdown menu -->
<ul>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<!-- Eind dropdown menu -->
</li>
<!-- End test -->
<li class="nav-item">
<a class="nav-a" id="nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<main>
<div id="container">
<header id="container_header">
<h1 id="container_header_text">Welkom op mijn Website!</h1>
<hr id="container_header_hr"/>
</header>
<div id="container_text">
<p class="text">Ga naar één van mijn po's of ga helemaal niks doen</p>
<p class="text">Als je kiest voor de optie niks doen heb ik nog een banaan hier onder voor je, ga daar maar mee spelen.</p>
</div>
<img id="banaan" src="img/banana.png" title=""/>
</div>
</main>
</body>
Modify the css adjust z index and position It will work.
#ul-nav {
list-style-type: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5);left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
}
This is because you are using absolute positioning for your container.
#container_header {
position: absolute;
width: 900px;
}
If you remove position: absolute you'll see that the drop down behaves as expected.
I know this is a well-known issue in web design. My web site works as expected on Firefox, Opera and Safary but on IE the original design is lost. There is something wrong with the container as you can see in: www.skaldenmet.cjb.net
I'm aware the coding is not that good, but I would like someone to tell me where does exactly the problem lies so I don't have to re-design everything from the scratch.
I hope someone can help. Thanks in advance!
HTML SOURCE
<html>
<head>
<link rel="icon" href="favicon.jpg" type="image/x-icon" />
<link href="skaldenmet-css.css" rel="stylesheet" type="text/css">
<title>Skaldenmet-Folk Metal</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li>Inicio</li>
<li>Historia</li>
<li>Música</li>
<li>Banda</li>
<li>Contacto</li>
<li>Licencia CC</li>
<li>Enlaces</li>
<li>English</li>
<li>Noticias</li>
</ul>
</div>
<div style="text-align: justify; background-image: url('bg55.jpg');">
<h1>Bienvenidos a Skaldenmet,</h1>
<div style="text-indent: 160px;"> un proyecto folk metal desde el norte de Argentina.</div>
<div style="padding: 5px;">
<p>
En este sitio encontrarán información sobre la banda así como la posibilidad de descargar
"Bosque bajo la noche", el primer, y tal vez último, disco lanzado.<br>
</p>
</div>
</div>
<div id="footer">
<p>2010-2011 | www.skaldenmet.cjb.net | Republica Argentina </p>
<p>Content on this site is licensed under a Creative Commons Attribution 3.0 License</p>
<p>Sitio desarrollado con software libre GNU/Linux.</p>
</div>
</div>
</body>
</html>
CSS FILE
#CHARSET "ISO-8859-1";
*
{
padding: 0;
margin: 0;
}
body
{
font-family: Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
font-size: 12px; color: #000;
text-align: center;
padding: 12px 0;
background: #FCFCFC;
}
#container
{
margin: 0 auto;
width: 800px;
background:#fff;
border-width: 2px;
border-style:solid;
}
#header
{
background-image: url(header2.jpg);
background-repeat: repeat;
width:800px;
height: 200px;
}
#header h1
{
text-align:right;
padding-top: 80px;
padding-right: 20px;
}
#navigation
{
float: left;
width: 800px;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:HOVER
{
background: #383;
}
#content-container, #content-container-index
{
clear:left;
background-image: url("bg55.jpg");
height: 400px;
}
/* esto no se si es necesario */
#content-container
{
padding:20px;
}
#content-image{
width: 780px;
text-align: justify;
}
#content-container h2
{
color:#000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
background-image: url(footer.jpg);
background-repeat: repeat;
height: 50px;
}
a:link {
color: #333333;
}
a:visited {
color: #333333;
}
a:hover {
color: #CCCCCC;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #333333;
}
You need to add a doctype as the very first line to trigger Standards Mode:
<!DOCTYPE html>
Without it, IE is rendering your page in Quirks Mode (which emulates IE5.5).
See: http://hsivonen.iki.fi/doctype/
I'm not intimately familiar with your site, but after manually changing the browser mode to IE9 mode just to test (hit F12), it looks "identical" to Chrome.