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>
Related
I'm trying to enlarge my footer so it can take the all page and stick to the bottom (not following when scrolling), but I have no idea how to do it...
here's the result I have on my website : my result
Here's my code : https://codepen.io/Softee/pen/RwLaJye
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
}
div .Question {
font-size: 18px;
text-align: right;
}
div .Question a {
font-size: 14px;
margin-right: 10px;
color: #e5e5e5;
}
div .Logo img{
max-width: 100%;
min-width: 18%;
box-shadow: none;
}
div .Copyright {
font-size: 13px;
text-align: center;
}
<footer>
<div class="Logo">
<img src="https://i.postimg.cc/Bn1t4Nc9/Game-Star-Blanc.png">
</div>
<br>
<div class="Question">
<p>Une question ?<br> Contactez-nous!
</p>
</div>
<br>
<div class="Copyright">© 2021 Copyright: GameStar - La Star des références gaming.</div>
</footer>
Thanks in advance for your help!
This should do the trick.
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
width: 100vw;
position: absolute;
bottom: 0px;
}
Just add:
body {
margin: 0;
}
See here:
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
}
div .Question {
font-size: 18px;
text-align: right;
}
div .Question a {
font-size: 14px;
margin-right: 10px;
color: #e5e5e5;
}
div .Logo img{
max-width: 100%;
min-width: 18%;
box-shadow: none;
}
div .Copyright {
font-size: 13px;
text-align: center;
}
body {
margin: 0;
}
<footer>
<div class="Logo">
<img src="https://i.postimg.cc/Bn1t4Nc9/Game-Star-Blanc.png">
</div>
<br>
<div class="Question">
<p>Une question ?<br> Contactez-nous!
</p>
</div>
<br>
<div class="Copyright">© 2021 Copyright: GameStar - La Star des références gaming.</div>
</footer>
You made your logo size to be 100% of your footer, you need to resize the logo smaller and float it left, then clearing the float to show the centered the text.
tldr; I am trying to put the aside-section to the left of the article-section (like a sidebar/sidecolumn however my "float" does not seem to work at all. How do I do this without editing the HTML-code? I only want to edit it in the CSS-file. I am a beginner so I appreciate the help!
* {
box-sizing: border-box;
}
section {background-color: cornsilk;overflow:auto;float: right;}
article {color: black;float: right;}
article footer {font-style: italic;font-size: 15px;color: black; background-color: cornsilk;text-align: left;}
#wrapper {width: 960px;
margin: 0 auto;}
h1 {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
}
footer {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
float: right;
}
aside {
float: left;
}
<div id="wrapper">
<header><h1>text</h1></header>
<article>
<section>
<header><h2>Om CSS</h2></header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om CSS på Wikipedia</p>
<footer>text</footer>
</section>
<section>
<header><h2>Om märkspråk</h2></header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om HTML5 på Wikipedia</p>
<footer>text</footer>
</section>
</article>
<aside>
<h1>Bildgalleri</h1>
<img src="images/html5.png " alt="html5">
<img src="images/css.png" alt="css3">
</aside>
<footer>©</footer>
</div>
Here's a solution where your HTML is completely unchanged (which I actually would not recommend at all, since the order of elements in there isn't ideal, and neither is the HTML structure in general).
The main thing is that I used display: flex with flex-direction: row-reverse on the #wrapper and applied position: absolute to the header and footer, plus some paddings and margins on other elements to create space for that header and footer. I also deleted all floats. Other details/settings see below.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
#wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
position: relative;
}
section {
background-color: cornsilk;
padding-bottom: 50px;
}
article {
color: black;
padding: 60px 0;
}
article footer {
font-style: italic;
font-size: 15px;
color: black;
background-color: cornsilk;
text-align: left;
}
header h1 {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
margin: 0;
}
aside h1 {
margin-top: 60px;
margin-right: 20px;
}
#wrapper > header {
position: absolute;
width: 100%;
height: 40px;
margin-right: 20px;
}
section:first-of-type > header {
margin-top: 40px;
}
footer {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
<div id="wrapper">
<header>
<h1>text</h1>
</header>
<article>
<section>
<header>
<h2>Om CSS</h2>
</header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om CSS på Wikipedia</p>
<footer>text</footer>
</section>
<section>
<header>
<h2>Om märkspråk</h2>
</header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om HTML5 på Wikipedia</p>
<footer>text</footer>
</section>
</article>
<aside>
<h1>Bildgalleri</h1>
<img src="images/html5.png " alt="html5">
<img src="images/css.png" alt="css3">
</aside>
<footer>©</footer>
</div>
I removed all your CSS to simplify it. Of course you can start to re-style everything.
The best overall solution in terms of compability will be the sue of flex-box. CSS-Grid would do the trick too but has limited support for IE11 & 13.
First at all, your main issue is the use of float which should not be sued for styling purpose. float is only intended to be used to float images within a paragraph (simliar to word or newspapers). Unfortunatly it still is repeatly tought as it was a hack befor HTML5 and the development of flexbox and css-grid in 2012. Since 2015 both flexbox and css-grid are a well established technique and there is no further reason to mis-use the float-hack.
Next issue is, your HTML structure. You have multiple footer and headerelements and nested them within the structure. This requires the of the > selector to call only a specific footer or header element and not all of them.
The enxt structure issue is the ordering. Semantically you will display the elements either from top to bottom or from left to right. However your <aside> element is supposed to come befor the <article> element while it comes last within the structure. This requires the use of order(flex-order) within the CSS to change the order.
So what I did was to use #wrapper { display: flex; flex-wrap: wrap } this applies flexbox to the container and tells the elements to wrap instead of nowrap (initial value). The intention is, that the ehaderr gets a width of 100% and the other elements should then be displayed below it instead of overflowing to the right.
Then you see, that the <header>, <footer>, <aside> and <article> elements got order property and value which allows me to reorder the structure within CSS as explained above.
If you need further explantion or information, feel free to ask.
* {
box-sizing: border-box;
}
#wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#wrapper > header {
width: 100%;
border: 1px solid red;
order: 1;
}
#wrapper > aside {
width: 30%;
border: 1px solid green;
order: 2;
}
#wrapper > article {
width: 70%;
border: 1px solid blue;
order: 3;
}
#wrapper > footer {
width: 100%;
border: 1px solid yellow;
order: 4;
}
<div id="wrapper">
<header>
<h1>text</h1>
</header>
<article>
<section>
<header>
<h2>Om CSS</h2>
</header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om CSS på Wikipedia</p>
<footer>text</footer>
</section>
<section>
<header>
<h2>Om märkspråk</h2>
</header>
<p>text</p>
<p>text</p>
<p class="linktext">Här är en artikel om HTML5 på Wikipedia</p>
<footer>text</footer>
</section>
</article>
<aside>
<h1>Bildgalleri</h1>
<img src="images/html5.png " alt="html5">
<img src="images/css.png" alt="css3">
</aside>
<footer>©</footer>
</div>
I think you want to do like this
* {
box-sizing: border-box;
}
section {
background-color: cornsilk;
overflow: auto;
float: right;
}
article {
color: black;
float: right;
}
article footer {
font-style: italic;
font-size: 15px;
color: black;
background-color: cornsilk;
text-align: left;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
h1 {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
}
footer {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
float: right;
}
aside {
position: absolute;
top: 0;
float: left;
}
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*//
}
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.