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.
Related
that's my first site with html and css. I'm doing a personal website and i have problems:
1) right positioning of words in the header
2) footer positioning
the code is:
<head>
<meta cherset='UTF-8'/>
<title>HOME</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='header'>
<ul class='header__menu animate'>
<li class="header__menu__item">HOME</li>
<li class="header__menu__item">HOBBY E PASSIONI</li>
<li class="header__menu__item">CURRICULUM</li>
<li class="header__menu__item">CONTATTI</li>
</ul>
</header>
<br><br><br><br><br>
<h1>Gabriele Minosa</h1>
<br><br><br>
<div class='img'>
<img src="1111.png">
</div>
<figcaption> text...
</figcaption>
<br><br>
<footer class='footer'>
<p>© 2020 Gabriele Minosa. TUTTI I DIRITTI RISERVATI</p>
</footer>
</div>
</body>
</html>
CSS**********
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: auto;
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #000000; /*colore scritte*/
background: #eee; /*COLORE ESTERNO PAGINA WEB*/
}
a:link,
a:visited {
color: #5D6063; /*COLORE SCRITTE INTESTAZIONE*/
text-decoration: none;
}
a:hover {
background: #fff;
padding: 10px;
}
.header {
position: fixed;
width: 100%;
display: flex;
padding: 30px;
background: #d6d6d2;
}
.header__menu__item {
display: inline-block;
}
h1 {
color:#949da6;
font-size:40;
text-align: center;
}
figcaption, footer {
text-align: center;
}
.img {
text-align: center;
}
.footer {
background: #333;
padding: 20px;
color: #fff;
}
if anyone could tell me, apart from those two questions, what other changes I can make and what other mistakes I made I would be grateful..that's my first time...
In order to align the menu to the right inside a flex container, you can change the justification of the flex items by using justify-content: flex-end; - this positions the elements horizontally at the end of the container.
.header {
position: fixed;
width: 100%;
display: flex;
justify-content: flex-end;
padding: 30px;
background: #d6d6d2;
}
In regards to your second question regarding footer positioning, what are you attempting to achieve?
In the below code snippet, which I believe achieves your desired results, there's a couple of changes I've made;
I wrapped your page content (the stuff in between the header and footer) in a <main> tag. This tag is given a min-height value of 80vh - or 80% of the height of the viewport. This will make sure that your footer is towards the bottom of the page. If you have a page with less content you may want to change this to 90 or even 100.
The display property for header__menu <ul> has been set to flex. Justify content is used here but this time setting the value to space-between.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: auto;
font-size: 18px;
font-family: sans-serif;
color: #000000; /*colore scritte*/
background: #eee; /*COLORE ESTERNO PAGINA WEB*/
}
main{
min-height: 90vh;
}
a:link,
a:visited {
color: #5D6063; /*COLORE SCRITTE INTESTAZIONE*/
text-decoration: none;
}
a:hover {
background: #fff;
padding: 10px;
}
.header {
position: fixed;
width: 100%;
display: flex;
padding: 30px;
background: #d6d6d2;
}
.header__menu {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.header__menu__item {
display: inline-block;
}
h1 {
color:#949da6;
font-size:40;
text-align: center;
}
figcaption, footer {
text-align: center;
}
.img {
text-align: center;
}
.footer {
background: #333;
padding: 20px;
color: #fff;
}
<header class='header'>
<ul class='header__menu animate'>
<li class="header__menu__item">HOME</li>
<li class="header__menu__item">HOBBY E PASSIONI</li>
<li class="header__menu__item">CURRICULUM</li>
<li class="header__menu__item">CONTATTI</li>
</ul>
</header>
<main>
<br><br><br><br><br>
<h1>Gabriele Minosa</h1>
<br><br><br>
<div class='img'>
<img src="1111.png">
</div>
<figcaption> Gabriele Minosa (Taranto, 12 Gennaio 1991) è un perito informatico con la passione per l’informatica fin da bambino.<br>
Dopo aver imparato,da autodidatta, a gestire l'hardware ed il software dei pc, allarga la sua curiosità al mondo dell'innovazione <br>
e della programmazione web. Non essendo particolarmente stimolato dal contenuto troppo generalizzato del percorso universitario, <br>
dopo alcune esperienze lavorative e svariati concorsi, è attualmente uno studente di Front End Development di start2impact, una <br>
startup di Roma che propone percorsi innovativi sulla programmazione e sulle nuove tecnologie e rende potenzialmente più immediato <br>
e diretto l'inserimento nel mondo del lavoro.
</figcaption>
</main>
<br><br>
<footer class='footer'>
<p>© 2020 Gabriele Minosa. TUTTI I DIRITTI RISERVATI</p>
</footer>
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 been using mediaqueries for a while now and never had the problem that on the top and left of my website, there's a very small whitespace I can't find using " find elements ".
#font-face {
font-family: 'Aller Bold';
src: url('FontFace/Aller_Bd.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Aller Display';
src: url('FontFace/AllerDisplay.ttf');
font-weight: normal;
font-style: normal;
}
main {
margin: 0 auto;
width: 480px;
}
/*NAV*/
#logo {
display: none;
}
#navigation {
font-family: 'Aller Bold';
padding: 20px;
background-color: #f07c00;
color: #fff;
text-align: center;
}
#navigation ul {
display: none;
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
}
#navigation ul.expanded {
display: block;
}
#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 15px;
color: black;
text-decoration: none;
}
.menu_button {
margin-right: 22px;
display: block;
text-align: right;
color: #ffc;
text-decoration: none;
}
/*slideshow*/
.fadein { position:relative; width:480px; height:140px; }
.fadein img { position:absolute; left:0; width:480px; height:140px; }
/*table nieuwsoverzicht*/
table tr th.tgth {
font-family: 'Aller Display';
color: #f07c00;
font-size: 16px;
padding-left: 0;
margin-left: 0;
clear: both;
float: left;
}
table tr td.tgtd {
font-family: 'Aller Bold';
font-size: 10px;
padding-left: 42px;
}
table tr td.tg-datum {
font-family: 'Aller Bold';
font-size: 6px;
padding-top: 5px;
color: #f07c00;
padding-left: 42px;
}
table tr td.tg-leesmeer {
font-family: 'Aller Bold';
font-size: 6px;
padding-top: 5px;
color: #f07c00;
float: left;
width: 100px;
}
table tr td.tg-image {
float: right;
}
hr {
border-style: solid;
color: black;
border-width: 1px;
}
img.smallimg {
float: right;
width: 164px;
height: 96px;
}
/*links*/
h1.links {
font-family: 'Aller Bold';
color: #f07c00;
font-size: 24px;
}
a.links {
font-family: 'Aller Bold';
margin-left: 42px;
font-size: 18px;
}
/*footer*/
footer {
font-family: 'Aller Bold';
margin-top: 15px;
font-size: 13px;
height: 55px;
background-color: #f07c00;
color: black;
line-height: 55px;
width: 100%;
}
#test {
float: right;
display: inline-block;
}
#linkcontact {
margin-right: 32px;
}
#linklinks {
margin-right: 40px;
}
#linkbronnen {
margin-right: 40px;
}
a:-webkit-any-link {
color: black;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" media="screen and (min-width: 480px)" />
<link rel="stylesheet" href="stylesheet480.css" type="text/css" charset="utf-8" media="screen and (max-width: 480px)" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script>
var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}
</script>
<body>
<main>
<nav id="navigation">
<img src="logo.jpg" id="logo">
<a id="mobilemenu" class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">☰ MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>Nieuws</a></li>
<li><a href=#>Info</a></li>
<li><a href=#>Bezienswaardigheden</a></li>
<li><a href=#>Keuken</a></li>
<li id="rightnav"><a href=#>Steden</a></li>
</ul>
</nav>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
4000);
});
</script>
<br> <br>
<div class="fadein">
<img src="sld1.jpg">
<img src="sld2.jpg">
<img src="sld3.jpg">
</div>
<br>
<hr>
<table class="tg">
<tr>
<th class="tgth">De prachtige stad Rotterdam</th>
</tr>
<tr>
<td class="tgtd">Rotterdam is een havenstad gelegen in het westen van Nederland, in de provincie Zuid-Holland. De stad is gelegen aan de Nieuwe Maas,
een van de rivieren in de delta die gevormd wordt door de Rijn en de Maas.
De haven van Rotterdam, lange tijd de grootste ter wereld, is de grootste en belangrijkste van Europa. Het havengebied strekt zich uit over een lengte van 40 kilometer.</td>
<td class="tg-image"><img class="smallimg" src="rotterdamsmall.jpg"></td>
</tr>
<tr>
<td class="tg-datum">Datum: 09/07/2015</td>
<td class="tg-leesmeer">Lees meer -></td>
</tr>
</table>
<hr>
<br> <br><br> <br><br> <br><br> <br>
<footer>
<div id="test">
Bronnen
Links
Contact
</div>
</footer>
</main>
</body>
</html>
When you make sure the width of your browser is 480px wide, you'll see that on both left and top, there's a very small whitespace, which I'm looking to get rid of. Help is very much appreciated!
try adding to your CSS the following:
body {
margin: 0px;
}
That should get rid of the white space.
Simply it's by the browsers, I don't know why! Simply do this:
/*
(*) mean All Elements , this code remove all margin and padding from all element include html and body also ^_^
*/
*{
margin:0;
padding:0;
}
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...
I'm trying to position my sidebar on the right side of my content, but I still want it in the same 'box'. See:
As you can see in the picture it's on the right side, but it is not in the 'content' box, and I would like it to be almost directly under my menu. Please help.
My code looks like this (just ignore the danish commentary, that's just notes):
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!doctype html>
<head>
<!-- Titel -->
<title>IT-hjælp til ældre</title>
<meta charset="utf-8">
<link href="CSS sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header">
</div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
</div>
</div>
</body>
</html>
One quick solution is to change your html structure and move sidebar as first child of div wih id #tekst:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<div id="sidebar">
<!-- move it here -->
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
</body>
Swapping your #tekskt and #sidebar around should be your main change. I've also adding a bit of margin for aesthetics.
Here is a Live Demo of it in action. :)
It will then look like:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
position: absolute;
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
position: relative;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
z-index: 5;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
margin: 1em;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
What browser are you using? Working fine for me on firefox 33 and chrome 38.
JSFiddle
Try clearing your float.
#tekst {
background:#98c8d7;
color:#000;
opacity: 0.8;
margin:5px 0 5px 0;
padding:0.5em 1em 1em 1em;
text-align:left;
overflow: hidden; //*clears float*//
}