I have this layout when the size of screen is greater than 768px:
But I want the vertical navbar height up to the footer even when resize the screen.
This is what I want:
with the background color obviously.
This is html file and css file!
article {
text-align: left;
}
header {
background: black;
color: white;
padding: 10px;
text-align: center;
}
nav {
background: #eee;
padding: 10px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0; /*Tolgo il padding da ul*/
}
li a{
display: block; /* Separo per riga i padding*/
padding: 8px 16px;
color: #000; /* Rimuovo il classico colore viola del link*/
text-decoration: none; /*rimuovo la sottilineatura del link*/
}
li a:hover { /* Cosa fare quando il mouse si trova sopra*/
background-color: #555;
color: white;
}
footer{
background: #aaa;
color: white;
padding: 0px;
}
img{
padding: 10px;
height: 505px;
width: 829px;
}
/*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
#media all and (min-width: 768px){
nav {
text-align: left;
max-width: 200px;
float: left; /*Sposto il contenuto a destra*/
}
article {
margin-left: 250px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<header>
<h1 id="T">Index</h1>
</header>
<nav>
<ul>
<li><a>Topologie</a></li>
<li><a>Classificazione</a></li>
<li><a>Dizionario terminologico</a></li>
<li>Domini</li>
<li><a>Apparati</a></li>
</ul>
</nav>
<article>
<h2>Definizione di Rete</h2>
Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti
(fisici o logici) che consentono la trasmissione e la ricezione di informazioni di
qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte,
effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici
o ottici.
<br><br><img src="Immagini/ImmagineRete.png">
</article>
<footer>
<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
<p>Torna all'inizio</p>
</footer>
</body>
</html>
I want this behavior:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox
In the example above the navbar height expands to the footer.
I will wrap the nav and the article inside main tag and give it display: flex and it will take the highest height and also remove the float from the nav you don't need it as long as you are using dispaly:flex by default its flex-direction:row they will be next to each other
<main>
<nav></nav>
<article></article>
</main>
p { margin: 0; }
article {
text-align: left;
}
header {
background: black;
color: white;
padding: 10px;
text-align: center;
}
nav {
background: #eee;
padding: 10px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0; /*Tolgo il padding da ul*/
}
li a{
display: block; /* Separo per riga i padding*/
padding: 8px 16px;
color: #000; /* Rimuovo il classico colore viola del link*/
text-decoration: none; /*rimuovo la sottilineatura del link*/
}
li a:hover { /* Cosa fare quando il mouse si trova sopra*/
background-color: #555;
color: white;
}
footer{
background: #aaa;
color: white;
padding: 0px;
}
img{
padding: 10px;
height: 505px;
width: 829px;
}
/*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
#media all and (min-width: 768px){
main {
display: flex;
}
nav {
text-align: left;
max-width: 200px;
margin-right: 50px;
}
}
<header>
<h1 id="T">Index</h1>
</header>
<main>
<nav>
<ul>
<li><a>Topologie</a></li>
<li><a>Classificazione</a></li>
<li><a>Dizionario terminologico</a></li>
<li>Domini</li>
<li><a>Apparati</a></li>
</ul>
</nav>
<article>
<h2>Definizione di Rete</h2>
Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti
(fisici o logici) che consentono la trasmissione e la ricezione di informazioni di
qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte,
effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici
o ottici.
<br><br><img src="Immagini/ImmagineRete.png">
</article>
</main>
<footer>
<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
<p>Torna all'inizio</p>
</footer>
</body>
</html>
Set the height of your nav to the height of the current screen size, I'm pretty sure this will do the job.
nav {
background: #eee;
padding: 10px;
text-align: center;
height: 100vh;
}
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>
I'm working on my Django website and I get some unclear points according to my responsive website design.
My environment :
Django 2.0.1
HTML 5
CSS
Bootstrap 3.3.7
My issue :
I developped my Django website on my screen with this resolution : 1920*1080. Now I would like to adapt each HTML template to users screens.
I don't really have knowledges about responsive design because I'm mainly Back-End developper.
When I display my website on different screen size, CSS is not good at all. I assume pictures make my display very ugly because it's not totally responsive.
My code :
HTML Script :
<!-- This script lets to define homepage template for "Accueil" -->
{% extends 'Base_Accueil.html' %}
{% load staticfiles %}
{% load static %}
{% block content %}
<div id="content">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='{{photo.Image_upload.url}}'/>
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>{{photo.Nom}} ({{photo.Designation}})</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
<p></p>
{% endblock content %}
CSS script :
#media (min-width: 1900px) {
body {
background-color: #4D4D4D;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#banner {
width:100vw;
}
.navbar-collapse {
text-align:center;
background-color: #1B1B1B;
}
.navbar-nav {
background-color: #1B1B1B;
text-align:center;
display:inline-block;
float:none;
}
ul.nav.navbar-nav > li > a {
color : #00BFFF; /* Orange color*/
padding-top:10px !important;
padding-bottom:0 !important;
height: 35px;
}
.navbar {min-height:35px !important; background-color: #1B1B1B;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background-color: transparent;
}
.dropdown-menu, .dropdown-menu > li > a {
background-color: #1B1B1B;
color: #00BFFF;
}
.dropdown-menu > li > a:hover {
background-color: transparent;
color : white;
}
.dropdown-menu > li.divider {
background: #00BFFF;
}
#content{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 16px;
}
#content-1 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-2 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-messages {
border-radius: 4px;
width: 55%;
margin-left: 14%;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#footer{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #1B1B1B;;
color : white;
margin-bottom: 1%;
padding-bottom: 1%;
-webkit-box-shadow: black 0px 0px 12px;
box-shadow: black 0px 0px 12px;
}
.footer-text, .footer-text-list {
color : #C9C9C3;
font-size: 12px;
text-align: justify;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
ul {
list-style-type: none;
}
p.footer-title {
margin-left:5%;
}
.footer-title {
margin-top: 14%;
color : white;
font-size: 26px;
font-family: 'Noto Serif', Georgia, Times, serif;
}
.col-lg-3 {
margin-left: 6%;
}
#presentation-author, #presentation-title, #presentation-image-récente, #galerie-image{
border-radius: 4px;
margin: 0 auto;
background-color: #00BFFF;
color : white;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-author > p, #presentation-title > p, #presentation-image-récente > p, #galerie-image > p{
margin-left:4%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-description, #presentation-text {
margin-left: 2%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img,
#presentation-image > img {
width: 100%;
margin: auto;
}
figcaption > div > p {
color : #00BFFF;
}
figure.effect-new:hover figcaption::before,figure.effect-new:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.image img {
max-width: 100%;
height: auto;
}
}
Examples from my website :
EDIT :
I removed media (min-width:1900px) and I modified .image img like this :
.image img {
max-width: 100%;
height: auto;
width: auto\9;
}
It seems to be responsive now, but is it the good solution ? Then, How I can do that with text parts ?
You only have one media query line in your code.
The result is that it will not perform any changes.
You need to have minimum 2 media queries, as described below:
#media only screen and (max-width: 1899px) {
body {
background-color: red;
}
}
#media only screen and (min-width: 1900px) {
body {
background-color: blue;
}
}
Apart from above responsiveness, If you want to control the format and position of your text and image, I suggest you implement CSS grid which is a grid system embedded in CSS.
I suggest reading a bootstrap tutorial - for the latest bootstrap (4); I like w3schools and here for images (with example here).
Bootstrap works on a grid system, to get the bare minimum of a responsive image (with bootstrap 3 syntax) add the class="container" parent div and class="img-responsive" to the img tag.
see below, I removed the image tag from your css and took out the django tags:
<!-- This script lets to define homepage template for "Accueil" -->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container" class="container">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='download.jpg' class="img-responsive" width="1900px" />
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>some (text)</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
</body>
</html>
You'll want to play with row and column divs/tags to get your website singing nicely on all devices. Tutorials are great!
Can someone please tell me why the #sidebar doesn't get sticky with this code? When I test the sticky property on main, #searchbar and #localnav it works fine, but not on #sidebar. I have tested adding padding-bottom to sidebar, main to test if that should help but it doesn't.
Please see code snippet.
#charset "UTF-8";
/* CSS Document */
/* ----- Förberedande stilar ----- */
/* Samma utgångsvärde för struktur/layout-elementen för alla webbläsare */
html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
margin: 0;
padding: 0;
}
/* Om äldre webbläsaren inte förstår taggen så visa den som block istället för inline */
header,
nav,
main,
article,
aside,
footer,
section {
display: block;
}
html {
-webkit-text-size-adjust: 100%;
}
/*Så att Safari i iPhone inte skalar om texten */
/* ----- Layout ----- */
body {
background-image: url("pics/leonardo-da-vinci.jpg");
color: #000;
font-family: Verdana, sans-serif;
}
#wrapper {
width: 1000px;
margin: 10px auto;
background-color: #ffffff;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}
/*positionering*/
main {
margin-left: 20%;
}
#localnav {
float: left;
width: 20%;
}
article {
width: 62.8%;
float: left;
background-color: #e7e3e3;
padding: 0.9em;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}
.sidebar {
width: 30%;
float: right;
}
.sidebar section {
background-color: #379013;
color: #fff;
padding: 0.9em;
margin-bottom: 1em;
border-bottom-left-radius: 20px;
box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}
section a {
text-decoration: none;
}
section a {
padding: 0.5em;
}
section a:link,
section a:visited {
color: #fff;
}
section a:hover,
section a:active {
color: #0e2a05;
}
#searchbar {
padding: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}
/* #searchbar form {
display: inline-block;
text-align: center;
} */
#searchbar input {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 1.1em;
}
#searchbar input[type="text"] {
width: 40%;
}
#globalnav {
border-bottom: solid;
padding-bottom: 0.5em;
font-size: 1.5em;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav ul li {
display: inline;
}
#globalnav a {
text-decoration: none;
padding: 0.5em;
color: #267d0c;
}
#localnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#localnav ul li {
display: block;
position: relative;
margin-top: 1em;
margin-right: 110px;
}
#localnav a {
text-decoration: none;
padding: 0.5em;
padding-right: 1em;
font-size: 1.5em;
}
#localnav a:link,
#localnav a:visited {
color: #666;
}
#localnav a:hover,
#localnav a:active {
background-color: #267d0c;
color: #ffffff;
}
.thisSection {
background-color: #b9f0aa;
color: #000;
border-top-right-radius: 25px;
}
#localnav ul li ul {
background-color: #b9f0aa;
border: 1px solid #333;
box-shadow: 3px 3px 3px #666;
position: absolute;
top: -0.7em;
left: 5em;
visibility: hidden;
}
#localnav ul li:hover ul {
visibility: visible;
}
#localnav ul li ul li {
display: block;
width: 100%;
white-space: nowrap;
margin-top: auto;
}
#localnav ul li ul li a {
display: block;
padding: 0.5em;
}
#localnav ul li ul li a:hover {
background-color: #267d0c;
color: #FFF;
}
#localnav #thisPage:before {
content: "> ";
}
#localnav {
padding-bottom: 0.5em;
}
main p {
text-align: justify;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
main {
overflow: visible;
}
img {
max-width: 100%;
height: auto;
}
/*flexibla bilder som justeras efter skärmstorlek, höjden justeras efter bredden för att behålla proportionerna */
article img {
float: right;
}
header img {
width: 200px;
float: left;
border-radius: 50%;
}
header {
height: 133px;
padding-bottom: 2em;
padding-top: 2em;
margin-left: 1em;
position: relative;
}
header h1 {
position: absolute;
top: 1em;
right: 12em;
}
header h2 {
position: absolute;
top: 4em;
right: 6em;
}
header h1,
header h2 {
font-style: italic;
font-weight: bold;
text-shadow: 3px 3px 5px green;
}
footer {
border-top: solid;
padding: 1em;
clear: both;
}
<div id="wrapper">
<header>
<img src="pics/logo.jpg" alt="logo">
<h1>Fysiohjälpen</h1>
<h2>Snabbt och enkelt att hitta informationen du söker</h2>
</header>
<div id="searchbar">
<form class="" action="" method="post">
<input type="text" name="search" placeholder="Hitta information om symtom, behandling..."><input type="button" name="" value="Sök">
</form>
</div>
<nav id="globalnav">
<ul>
<li>Handbok</li>
<li>Länkar</li>
<li>Kontakt</li>
</ul>
</nav>
<nav id="localnav">
<ul>
<li>Rygg
<ul>
<li>Diskbråck</li>
<li>Spinal stenos</li>
<li>Skolios</li>
</ul>
</li>
<li>Knä
<ul>
<li>Artros</li>
<li>Korsbandsskada</li>
</ul>
</li>
<li>Axel
<ul>
<li>Impingement</li>
<li>Instabila axeln</li>
</ul>
</li>
</ul>
</nav>
<main>
<article>
<h2>Om diskbråck</h2>
<img src="pics/disc.png" alt="ryggraden">
<h3 id="symtom">Symtom</h3>
<p>Ett cervikalt diskbråck är en utbuktning av nucleus puposus genom ett brott i anulus fibrosus i en disk i nacken. Cervikal radikulopati är ett neurologiskt tillstånd som kännetecknas av dysfunktion av en cervikal spinalnerv, rötterna till nerven,
eller båda. Flertalet patienter med symtomgivande cervikalt diskbråck har smärtor och/eller domningar som följer berörda myotom respektive dermatom. </p>
<h3 id="behandling">Behandling</h3>
<p>Undvik aktiviteter som ökar trycket i disken, det vill säga undvik aktiviteter som utlöser smärtor: Löpning, hoppning och liknande avrådes ifrån. Ensidiga ställningar av nacke och rygg bör undvikas</p>
<p>Övningar i form av rörelseträning, styrkeövningar och aerobiska övningar används ofta vid cervikal radikulopati.</p>
<h3 id="patientinformation">Patientinformation</h3>
<p>Slitage eller skada på diskarna i nacken kan leda till ett diskbråck som trycker mot nerver som utgår från halsryggraden. Konsekvensen kan bli utstrålande smärtor i en arm och/eller nedsatt kraft i armen. I de flesta fall går bråcket tillbaka.</p>
<p>De flesta som har diskbråck i nacken blir bra utan behandling. Visserligen kan besvären komma och gå, men hos många är obehaget plågsamt under en period för att senare aldrig komma tillbaka.</p>
<p>Många klarar sig bra med milda smärtstillande läkemedel vid besvär. Ibland kan det vara aktuellt att använda starkare smärtstillande eller inflammationshämmande läkemedel (NSAID), som dämpar irritationen runt diskbråcket. Svullnaden går ned och
det blir mer utrymme runt vävnaden. Diskbråcket trycker mindre på andra strukturer. Nackdelen med NSAID är att många får magbesvär av dem.</p>
<p>Behandlingen beror på hur stort diskbråcket är. För de flesta gäller det att behandla sig själv genom att till exempel undvika aktiviteter som belastar nacken mycket. En bra regel är att inte göra saker som ger smärtor. Löpning, hoppning och liknande
är det bra att vara försiktig med i början. Detsamma gäller ensidiga ställningar i nacke och rygg.</p>
<h3 id="referenser">Referenser</h3>
<p>Carette S and Fehlings MG. Cervical radiculopathy. N Engl J Med 2005; 353: 392-9.</p>
<p>Eubanks JD. Cervical radiculopathy: Nonoperative management of neck pain and radicular symptoms. Am Fam Physician 2010; 81: 33-40.</p>
</article>
<div class="sidebar sticky">
<section>
<h2>Genväg till innehåll</h2>
<nav id="articlemenu">
<ul>
<li>Symtom</li>
<li>Behandling</li>
<li>Patientinformation</li>
<li>Referenser</li>
</ul>
</nav>
</section>
</div>
</main>
<footer>
© Tobias Andersson 2018-03-04
</footer>
</div>
<!-- End wrapper -->
Well position: sticky works within its parent element's height and your sticky positioned div's parent main does not have any height because of the inner floated divs, thats why position:sticky not working...
So try to put a in-flow element just after floated div using :after pseudo element
main:after {
content: "";
display: table;
clear: both;
}
html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
margin: 0;
padding: 0;
}
header,
nav,
main,
article,
aside,
footer,
section {
display: block;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
background-image: url("pics/leonardo-da-vinci.jpg");
color: #000;
font-family: Verdana, sans-serif;
}
#wrapper {
width: 1000px;
margin: 10px auto;
background-color: #ffffff;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}
main {
margin-left: 20%;
}
#localnav {
float: left;
width: 20%;
}
article {
width: 62.8%;
float: left;
background-color: #e7e3e3;
padding: 0.9em;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}
.sidebar {
width: 30%;
float: right;
}
.sidebar section {
background-color: #379013;
color: #fff;
padding: 0.9em;
margin-bottom: 1em;
border-bottom-left-radius: 20px;
box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}
section a {
text-decoration: none;
}
section a {
padding: 0.5em;
}
section a:link,
section a:visited {
color: #fff;
}
section a:hover,
section a:active {
color: #0e2a05;
}
#searchbar {
padding: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}
#searchbar input {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 1.1em;
}
#searchbar input[type="text"] {
width: 40%;
}
#globalnav {
border-bottom: solid;
padding-bottom: 0.5em;
font-size: 1.5em;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav ul li {
display: inline;
}
#globalnav a {
text-decoration: none;
padding: 0.5em;
color: #267d0c;
}
#localnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#localnav ul li {
display: block;
position: relative;
margin-top: 1em;
margin-right: 110px;
}
#localnav a {
text-decoration: none;
padding: 0.5em;
padding-right: 1em;
font-size: 1.5em;
}
#localnav a:link,
#localnav a:visited {
color: #666;
}
#localnav a:hover,
#localnav a:active {
background-color: #267d0c;
color: #ffffff;
}
.thisSection {
background-color: #b9f0aa;
color: #000;
border-top-right-radius: 25px;
}
#localnav ul li ul {
background-color: #b9f0aa;
border: 1px solid #333;
box-shadow: 3px 3px 3px #666;
position: absolute;
top: -0.7em;
left: 5em;
visibility: hidden;
}
#localnav ul li:hover ul {
visibility: visible;
}
#localnav ul li ul li {
display: block;
width: 100%;
white-space: nowrap;
margin-top: auto;
}
#localnav ul li ul li a {
display: block;
padding: 0.5em;
}
#localnav ul li ul li a:hover {
background-color: #267d0c;
color: #FFF;
}
#localnav #thisPage:before {
content: "> ";
}
#localnav {
padding-bottom: 0.5em;
}
main p {
text-align: justify;
}
div.sticky {
position: sticky;
top: 0;
}
main:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
article img {
float: right;
}
header img {
width: 200px;
float: left;
border-radius: 50%;
}
header {
height: 133px;
padding-bottom: 2em;
padding-top: 2em;
margin-left: 1em;
position: relative;
}
header h1 {
position: absolute;
top: 1em;
right: 12em;
}
header h2 {
position: absolute;
top: 4em;
right: 6em;
}
header h1,
header h2 {
font-style: italic;
font-weight: bold;
text-shadow: 3px 3px 5px green;
}
footer {
border-top: solid;
padding: 1em;
clear: both;
}
<div id="wrapper">
<header>
<img src="http://lorempixel.com/50/50/sports" alt="logo">
<h1>Fysiohjälpen</h1>
<h2>Snabbt och enkelt att hitta informationen du söker</h2>
</header>
<div id="searchbar">
<form class="" action="" method="post">
<input type="text" name="search" placeholder="Hitta information om symtom, behandling..."><input type="button" name="" value="Sök">
</form>
</div>
<nav id="globalnav">
<ul>
<li>Handbok</li>
<li>Länkar</li>
<li>Kontakt</li>
</ul>
</nav>
<nav id="localnav">
<ul>
<li>Rygg
<ul>
<li>Diskbråck</li>
<li>Spinal stenos</li>
<li>Skolios</li>
</ul>
</li>
<li>Knä
<ul>
<li>Artros</li>
<li>Korsbandsskada</li>
</ul>
</li>
<li>Axel
<ul>
<li>Impingement</li>
<li>Instabila axeln</li>
</ul>
</li>
</ul>
</nav>
<main>
<article>
<h2>Om diskbråck</h2>
<img src="pics/disc.png" alt="ryggraden">
<h3 id="symtom">Symtom</h3>
<p>Ett cervikalt diskbråck är en utbuktning av nucleus puposus genom ett brott i anulus fibrosus i en disk i nacken. Cervikal radikulopati är ett neurologiskt tillstånd som kännetecknas av dysfunktion av en cervikal spinalnerv, rötterna till nerven,
eller båda. Flertalet patienter med symtomgivande cervikalt diskbråck har smärtor och/eller domningar som följer berörda myotom respektive dermatom. </p>
<h3 id="behandling">Behandling</h3>
<p>Undvik aktiviteter som ökar trycket i disken, det vill säga undvik aktiviteter som utlöser smärtor: Löpning, hoppning och liknande avrådes ifrån. Ensidiga ställningar av nacke och rygg bör undvikas</p>
<p>Övningar i form av rörelseträning, styrkeövningar och aerobiska övningar används ofta vid cervikal radikulopati.</p>
<h3 id="patientinformation">Patientinformation</h3>
<p>Slitage eller skada på diskarna i nacken kan leda till ett diskbråck som trycker mot nerver som utgår från halsryggraden. Konsekvensen kan bli utstrålande smärtor i en arm och/eller nedsatt kraft i armen. I de flesta fall går bråcket tillbaka.</p>
<p>De flesta som har diskbråck i nacken blir bra utan behandling. Visserligen kan besvären komma och gå, men hos många är obehaget plågsamt under en period för att senare aldrig komma tillbaka.</p>
<p>Många klarar sig bra med milda smärtstillande läkemedel vid besvär. Ibland kan det vara aktuellt att använda starkare smärtstillande eller inflammationshämmande läkemedel (NSAID), som dämpar irritationen runt diskbråcket. Svullnaden går ned och
det blir mer utrymme runt vävnaden. Diskbråcket trycker mindre på andra strukturer. Nackdelen med NSAID är att många får magbesvär av dem.</p>
<p>Behandlingen beror på hur stort diskbråcket är. För de flesta gäller det att behandla sig själv genom att till exempel undvika aktiviteter som belastar nacken mycket. En bra regel är att inte göra saker som ger smärtor. Löpning, hoppning och liknande
är det bra att vara försiktig med i början. Detsamma gäller ensidiga ställningar i nacke och rygg.</p>
<h3 id="referenser">Referenser</h3>
<p>Carette S and Fehlings MG. Cervical radiculopathy. N Engl J Med 2005; 353: 392-9.</p>
<p>Eubanks JD. Cervical radiculopathy: Nonoperative management of neck pain and radicular symptoms. Am Fam Physician 2010; 81: 33-40.</p>
</article>
<div class="sidebar sticky">
<section>
<h2>Genväg till innehåll</h2>
<nav id="articlemenu">
<ul>
<li>Symtom</li>
<li>Behandling</li>
<li>Patientinformation</li>
<li>Referenser</li>
</ul>
</nav>
</section>
</div>
</main>
<footer>
© Tobias Andersson 2018-03-04
</footer>
</div>
I have an horizontal menu and I can't find the way to make it fit with the 100% of my centered container page (from left side to right side).
Also I want every html main lists to get at the left side of the horizontal menu.
I think it's something related to my CSS code...
Right now my website looks like this: Link to image
body {
background-color: #2A2A2A;
}
h1 {
color: #FCFCFC;
padding-left: 8px;
background-color: 494949;
width: 100%;
height: 50px;
margin: 0px 0px 7px 0px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
border-bottom: 2.5px solid #C69AD3;
/*sombra color del solido*/
font-family: 'Oswald', sans-serif;
text-shadow: 3px 3px #353535;
font-size: 200%;
}
.center {
margin: auto;
width: 100%;
padding: 10px;
text-align: left;
text-align: bottom;
}
p {
color: white;
font-family: 'Oswald', sans-serif;
text-shadow: 0, 5px 0, 5px #343434
}
* {
margin: 0px;
/* colocacion del header en los id="header" */
padding: 0px;
/* colocacion del header en los id="header" */
}
#container {
width: 80%;
margin: 0 auto;
text-align: left;
}
#header {
background: #545;
margin: 3px 5px 3px 0x;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
color: white;
font-family: 'Oswald', sans-serif, Helvetica, sans-serif;
text-shadow: 1px 1px #494949;
}
ul,
ol {
text-align: center;
list-style: none;
/* con el "list-style:none" hacemos que no se vean puntos ni otras formas en las listas, de modo que las palabras quedan solas en forma de lista. */
overflow: hidden;
}
.nav > li {
float: left;
/*posicion del menu horizontal*/
}
.nav li a {
background-color: 494949;
/*Color botones menú sin seleccion*/
color: #fff;
text-decoration: none;
/* quitamos el subrallado */
padding: 10px 100px;
/* altura y anchura del menu */
display: block;
margin: 0px 0px 1px 1px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
}
.nav li a:hover {
/* "hover" es cuando tienes el mouse encima*/
background-color: #6B6B6B;
}
.nav li ul {
display: none;
position: absolute;
/* posicion en cuando se despliega el menu, absolute=se abre y no mueve nada, relative=se desplaza todo objeto que este debajo */
white-space: nowrap;
text-align: left;
}
.nav li:hover > ul {
display: block;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
<html>
<head>
<title>Practica A3</title>
<link rel="stylesheet" type="text/css" href="estilo1.css" />
</head>
<div id="container">
<h1 class="center">Hello this is the website</h1>
<body>
<div id="header">
<nav class="menu-fixed">
<!-- Iniciamos la etiqueta del menu -->
<ul class="nav">
<!-- Inicio TODO -->
<li>Inicio
</li>
<!-- Principal -->
<li>Servicios
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Compra de entradas
</li>
<!-- Secundaria -->
<li>Consulta de conciertos
</li>
<!-- Secundaria -->
<li>Salas privadas
</li>
<!-- Secundaria -->
<li>Reserva de mesas
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Acerca de
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Submenu1
</li>
<!-- Secundaria -->
<li>Submenu2
</li>
<!-- Secundaria -->
<li>Submenu3
</li>
<!-- Secundaria -->
<li>Submenu4
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Contacto
</li>
<!-- Principal -->
</ul>
<!-- Final TODO -->
</nav>
<!-- Cerramos el menu con la nav -->
</div>
</br>
</br>
</br>
</br>
</br>
<p>Este es contenido de la pagina web. Simplemente se trata de un texto laaaaaaargo para ver como se posiciona y que tal quedaria con el resultado final.</br>
Esto es todo, gracias por la atencion.</p>
</body>
</div>
</html>
Also Live on fiddleYour navbar is get the full-width(80%) of container. Now the problem is you set the h1 and .center class width 100% with border-bottom. If you remove the width of h1 and .center class it will get inside the container width.
And the menu text center issue set the .nav li a {padding: 10px 100px 10px 10px;} like this. Also in your css some useless property which I comment out in css part and also try to give a short description with comment.
If you have any question regarding this . you can ask me in comment section. Thanks
body {
background-color: #2A2A2A;
}
h1 {
color: #FCFCFC;
padding-left: 8px;
background-color: #494949;
/*In here you don't set # so the color not showing */
height: 50px;
margin: 0px 0px 7px 0px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
border-bottom: 2.5px solid #C69AD3;
/*sombra color del solido*/
font-family: 'Oswald', sans-serif;
text-shadow: 3px 3px #353535;
/* font-size: 200%; [By default h1 font-size 2em means 200% so I don't think you need to use it again ] */
}
.center {
margin: auto;
padding: 10px;
text-align: left;
/*text-align: bottom; [This css is invalid. Three types is valid text-align: left/center/right]*/
}
p {
color: white;
font-family: 'Oswald', sans-serif;
text-shadow: 0, 5px 0, 5px #343434
}
* {
margin: 0px;
/* colocacion del header en los id="header" */
padding: 0px;
/* colocacion del header en los id="header" */
}
#container {
width: 80%;
margin: 0 auto;
/*text-align: left; [it means inside all text element will be align left. Don't use it here. User where you need. ] */
}
#header {
background: #545;
/* margin: 3px 5px 3px 0x; [This margin will be invalid coz you missed the "P" from last 0px] */
/* margen arriba , margen dercha, margen abajo, margen izquierda */
color: white;
font-family: 'Oswald', sans-serif, Helvetica, sans-serif;
text-shadow: 1px 1px #494949;
}
/*Change ul,ol class like this other wise if you have any other list item in your body section will be effected. This is also a example of valid css selctor. */
ul.nav,
.nav li ul {
list-style: none;
/* con el "list-style:none" hacemos que no se vean puntos ni otras formas en las listas, de modo que las palabras quedan solas en forma de lista. */
overflow: hidden;
}
.nav > li {
float: left;
/*posicion del menu horizontal*/
}
.nav li a {
background-color: #494949;
/*Again in here you don't set # so the color not showing */
/*Color botones menú sin seleccion*/
color: #fff;
text-decoration: none;
/* quitamos el subrallado */
padding: 10px 100px 10px 10px;
/*This is for the left to right menu*/
/* altura y anchura del menu */
display: block;
/*margin: 0px 0px 1px 1px; [This is margin create the gap between every li a tag if you want that gap you can use this.*/
/* margen arriba , margen dercha, margen abajo, margen izquierda */
}
.nav li a:hover {
/* "hover" es cuando tienes el mouse encima*/
background-color: #6B6B6B;
}
.nav li ul {
display: none;
position: absolute;
/* posicion en cuando se despliega el menu, absolute=se abre y no mueve nada, relative=se desplaza todo objeto que este debajo */
white-space: nowrap;
text-align: left;
}
.nav li:hover > ul {
display: block;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Practica A3</title>
<link rel="stylesheet" type="text/css" href="estilo1.css" />
</head>
<body>
<div id="container">
<h1 class="center">Hello this is the website</h1>
<div id="header">
<nav class="menu-fixed">
<!-- Iniciamos la etiqueta del menu -->
<ul class="nav">
<!-- Inicio TODO -->
<li>Inicio
</li>
<!-- Principal -->
<li>Servicios
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Compra de entradas
</li>
<!-- Secundaria -->
<li>Consulta de conciertos
</li>
<!-- Secundaria -->
<li>Salas privadas
</li>
<!-- Secundaria -->
<li>Reserva de mesas
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Acerca de
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Submenu1
</li>
<!-- Secundaria -->
<li>Submenu2
</li>
<!-- Secundaria -->
<li>Submenu3
</li>
<!-- Secundaria -->
<li>Submenu4
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Contacto
</li>
<!-- Principal -->
</ul>
<!-- Final TODO -->
</nav>
<!-- Cerramos el menu con la nav -->
</div>
<br>
<br>
<br>
<br>
<br>
<p>Este es contenido de la pagina web. Simplemente se trata de un texto laaaaaaargo para ver como se posiciona y que tal quedaria con el resultado final.<br>Esto es todo, gracias por la atencion.</p>
</div><!--End #Container DIV -->
</body>
</html>
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*//
}