#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);
body
{
}
.topbar
{
position: fixed;
top: 0px;
width: 100%;
right: 0px;
background-color: tomato;
text-align: right;
height: 50px;
z-index: 100;
}
.texti
{
margin-right: 15px;
}
.linkur
{
border: 1px solid black;
padding: 8.5px;
margin-right: 10px;
text-decoration: none;
border-color: transparent;
font-size: 1.3em;
color: darkred;
}
.linkur:hover
{
background-color: lightblue;
}
label
{
position: fixed;
top: -2000px;
}
.mynd
{
position: fixed;
top: -50px;
left:20px;
}
.navigation
{
height: 96%;
width: 20%;
background-color: tomato;
}
.logo
{
position: fixed;
top: -100px;
}
.hlid
{
position: fixed;
left: -2000px;
width: 700px;
height: 90%;
z-index: 100;
}
.main
{
position: fixed;
top: 20%;
background-color: white;
left: 20%;
right: 20%;
height: 3000px;
width: 60%;
}
.leikjatexti
{
border: 1px solid black;
text-decoration: none;
text-align: center;
margin-bottom: 10px;
}
.text2
{
text-decoration: none;
color: darkred;
}
#media screen and (max-width: 48em){
.topbar
{
text-align: left;
}
.linkur
{
position: fixed;
top: -100px;
}
input {
display: none;
}
label,
label {
position: fixed;
top: -27px;
left: 5px;
color: #0087cc;
cursor: pointer;
display: inline-block;
font-size: 18px;
transition: all .15s ease;
font-size: 30px;
z-index: 100;
}
label:hover {
color: #ff7b29;
}
input:checked ~ .hlid {
position: fixed;
left: -50px;
height: 100%;
transition: all .15s ease;
}
li
{
list-style-type: none;
}
.hlidlinkur
{
margin-bottom: 20px;
margin-top: 20px;
margin-left: 10px;
}
.hlidlinkura
{
border: 1px solid black;
padding: 7px;
text-align: center;
border-color: transparent;
text-decoration: none;
color: darkred;
font-size: 1.1em;
font-family: "Sans serif";
}
.hlidlinkura:hover
{
background-color: lightblue;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Main site</title>
<link rel="stylesheet" href="Gru_main.css" type="text/css" charset="utf-8" />
</head>
<body>
<nav class="topbar">
<img class="mynd" src="project.png">
<ul class="texti">
Games
Profile
My Cart
</ul>
</nav>
<input type="checkbox" id="toggle">
<label for="toggle"><p>☰</p></label>
<nav class="hlid">
<ul class="navigation">
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img href="" class="mynd2" src="portal2.jpg" alt="portal" height="170" width="120">
<h1>Portal 2</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
<h1>The Walking Dead</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
<h1>The Walking Dead</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
<h1>The Walking Dead</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
</body>
strong text
i need help with this code it doesn't seem to work when i try to scroll, i tried to put a height on the website, but then the site didn't scroll down it just staid in the same place, some words in the code are icelandic BTW.
Your main div is fixed you should change it to relative in order to make the website able to scroll.
.main {
position: relative;
}
All your content seems to have a position:fixed applied.
From w3.org - "An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled."
You should only use this on elements that you don't want to scroll, such as the menu.
thats because you put position: fixed; on your main div. fixed means that it stays with the top of your view, so you cant scroll it away.
change it to position: relative and then you can scroll
Related
I need all the links on my page to ONLY underline when hoovered over and I cannot work out how to implement that in my CSS file. Side note - this is for a class project where I had to use absolute positioning in case anyone recommends I use grid. Also I am not clear on whether I should be using id or class attributes if anyone could shine some light on that it would be much appreciated.
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman"", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
#museumimageone {
position: absolute;
left: 24px;
top: 200px;
}
#museumimagetwo {
position: absolute;
left: 280px;
top: 200px;
}
#museumimagethree {
position: absolute;
left: 536px;
top: 200px;
}
#museumimagefour {
position: absolute;
left: 24px;
top: 400px;
}
#museumimagefive {
position: absolute;
left: 280px;
top: 400px;
}
#museumimagesix {
position: absolute;
left: 536px;
top: 400px;
}
#news {
position: absolute;
left: 792px;
top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
<nav class="navigation">
<p>
Museum of Odds & Ends
Visit Us
Shop
Our History
</p>
</nav>
<div class="heading">
<h1>Museum of Odds & Ends</h1>
<div class="subheading">
<h2>Walton Hall, Milton Keynes</h2>
<div id="museumimageone">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div id="museumimagetwo">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div id="museumimagethree">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div id="museumimagefour">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div id="museumimagefive">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div id="museumimagesix">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
Use text-decoration. Set it to none for all links and set it to underline for all links that are :hovered:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
test
Working example: (with your code)
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman"", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
#museumimageone {
position: absolute;
left: 24px;
top: 200px;
}
#museumimagetwo {
position: absolute;
left: 280px;
top: 200px;
}
#museumimagethree {
position: absolute;
left: 536px;
top: 200px;
}
#museumimagefour {
position: absolute;
left: 24px;
top: 400px;
}
#museumimagefive {
position: absolute;
left: 280px;
top: 400px;
}
#museumimagesix {
position: absolute;
left: 536px;
top: 400px;
}
#news {
position: absolute;
left: 792px;
top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
<nav class="navigation">
<p>
Museum of Odds & Ends
Visit Us
Shop
Our History
</p>
</nav>
<div class="heading">
<h1>Museum of Odds & Ends</h1>
<div class="subheading">
<h2>Walton Hall, Milton Keynes</h2>
<div id="museumimageone">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div id="museumimagetwo">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div id="museumimagethree">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div id="museumimagefour">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div id="museumimagefive">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div id="museumimagesix">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
You don't seem to have any hover styles applied at the moment. First clear any styles you don't want using:
a {
text-decoration: none;
}
Then add the underline with:
a:hover {
text-decoration: underline;
}
This should apply to every link.
I have made a header and below that a sticky navigation bar with a drop down menu.
When I activate the drop down menu it fits perfectly with the navigation bar. But if I scroll down on the website it no longer fits, I get a distance between the navigation bar and the drop down menu equal to the height of my header.
Is the header pushing down my drop down menu when scrolling down? Or is it the distance from the top of the website down to the drop down menu that keeps existing when scrolling down on the website?
I have tried to fix it for days but I can't get it to work.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
overflow: hidden;
background-color: rgb(2, 31, 70);
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
Drop down menu looks good
Drop down menu is no longer connected to navigation bar after scrolling
The position: fixed; on .dropdown-content causes that element to be relative to the browser window and disregards any parent or grandparent it is in, which is why it's staying in the same place the entire time. If your page had a lot of content making the page taller, you would scroll and that element would stay in the same place.
Switching it to position: absolute; will position it relative to it's parent.
Then, remove overflow: hidden; from .topnav and .dropdown as this cut's it off.
Then on .topnav, add width: 100%; and float: left;.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
/* overflow: hidden; */
background-color: rgb(2, 31, 70);
float: left;
width: 100%;
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
/* overflow: hidden; */
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
There are two problem's in your code. Fix those two CSS and your will get your expected behavior.
First, position: fixed in .dropdown-content. Since position: fixed element is positioned relative to the browser window.
Change it to position: absolute.
.dropdown-content {
display: none;
//position: fixed;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Second, overflow: hidden in .topnav. I guess you are using this for creating Block-level formatting context. So instead of using overflow: hidden for Block-level formatting add display: flow-root in .topnav css.
.topnav {
position: sticky;
top: 0px;
//overflow: hidden;
background-color: rgb(2, 31, 70);
display: floot-root;
}
I have a menubar in the top left corner, but the hover and the active element does not cover the whole text. I'm very new to this, and the page is not done, so no need to point out how bad it looks haha. The whole page is in norwegian, so it can be a little confusing. It is supposed to be a type of movie register, and I know its probably alot of mistakes in my code, but the problem I'm trying to figure out right now is the hover and active:)
Here is my html:
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>
<!-- end snippet -->
And css:
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top:0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
font-size: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #808080;
}
.first li {
display: inline-block;
}
li a {
display:block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor:pointer;
font-size: 16px;
}
li a:hover {
background-color:#333333;
}
.active {
background-color:#333333;
}
/* LOG IN*/
form {
float:right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input{
font-size: 90%;
}
You should delete space between li elements like this
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li><li>Mine lån
</li><li>Min liste</li>
</ul>
it's something like bug with space between li elements and also div if they are typed on new line.(I am sorry if explained something wrongly).
html
/*FLEXBOX*/
{
font-family: "Arsenal", "Times New Roman";
}
body {
background: #333333;
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background: #999999;
height: 50px;
padding-right: 100px;
}
/*SISTE LÅNTE*/
main {
display: flex;
justify-content: space-around;
align-items: center;
}
.main {
background: #999999;
flex-grow: 1;
order: 2;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.main h5 {
padding-left: 10px;
}
/*TILGJENGELIGE FILMER*/
.left {
background: #999999;
flex-grow: 1;
order: 1;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left h5 {
padding-left: 10px;
}
/*ANBEFALINGER*/
.right {
background: #999999;
flex-grow: 1;
order: 3;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left,
.right,
.main {
margin: 20px 20px;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
.right h5 {
padding-left: 10px;
}
/*RUTINER*/
footer {
background: #999999;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 155px;
margin: 20px;
margin-top: 0px;
padding: 10px;
color: white;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top: 0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
.first li {
display: inline-block;
}
li a {
display: inline-block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor: pointer;
}
li a:hover {
background-color: #ddd;
}
li a:active {
background-color: #ccc;
}
/* LOG IN*/
form {
float: right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input {
font-size: 90%;
}
/*ALLE FILMER*/
.movie1 {
display: flex;
}
.movie1 img {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
<link rel="stylesheet" href="Startside.css" type="text/css">
<title>Filmregister</title>
</head>
<body>
<header>
<h2>Filmregister</h2>
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!--SISTE LÅNTE-->
<main>
<div class="main">
<h5>Siste lånte</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/MinorityReport.html">
<img src="MinorityReport3.jpg" width="100" height="140" alt="MinorityReport">
</a>
<small>
<br>
Utgitt: 2002
<br>
Steven Spielberg
<br>
Sci-fi
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--TILGJENGELIGE FILMER-->
<div class="left">
<h5>Tilgjengelige filmer</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Lunchbox.html?E-postadresse=">
<img src="TheLunchbox1.jpg" width="100" height="140" alt="The-Lunchbox">
</a>
<small>
<br>
Utgitt: 2013
<br>
Ritesh Batra
<br>
Romanse, komedie
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--ANBEFALINGER-->
<div class="right">
<h5>Anbefalinger</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
</main>
<!--RUTINER-->
<footer>
<strong>Rutiner</strong>
<ul id="rutiner">
<br>
<li> <small> 1. Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt.</small>
</li>
<li> <small> 2. Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.</small>
</li>
<li><small> 3. Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.</small>
</li>
<li> <small> 4. For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. </small>
</li>
<li> <small> 5. Film skal leveres tilbake i posthyllen merket retur av film.</small>
</li>
</ul>
</footer>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>
Adding a width and a height property to the anchor element should fix it:
li a { width: auto; height: auto; }
Hover effect:
li a:hover { color: #999; }
Note: the active effect is triggered whenever you click on the element. So, it won't produce any effect after the page has been reloaded.
I am making a manual with html/css/js and to go through the manual I made two buttons.
This is what it looks like:
The strange this is, the first previewed menu-item 'introductie' has the same css code as the fourth previewed menu-item 'hart meten'. But why is there a gap between the paragraph and the buttons in the previewed 'introductie' ?
my code:
HTML
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'">
<img src="img/logo.png" alt="logo" />
<h1 >Hartmeting voor fitte mensen</h1>
</div>
</header>
<!-- Stappenplan Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
<li> Het Probleem </li>
<li> Stappenplan </li>
<li> Hartmeting </li>
</ul>
</nav>
<!-- HET STAPPENPLAN -->
<div id="content">
<!-- Intro Slide -->
<article id="menu_a">
<h2>Introductie</h2><br>
<figure>
<img src="img/intro1.jpeg" alt="Intro Afbeelding"/>
</figure>
<p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p>
</article>
<!-- Slide 1 -->
<article id="menu_b">
<h2>Het Probleem</h2><br>
<figure>
<img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding"/>
</figure>
<p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p>
</article>
<!-- Slide 2 -->
<article id="menu_c">
<h2>Hoe kan mijn hartslag meten?</h2><br>
<figure>
<img src="img/polsmeten.png" alt="Tweede Afbeelding"/>
</figure>
<ol id="stappen">
<li>Ga gerust zitten.</li>
<li>Houd je wijsvinger en middelvinger tegen elkaar.</li>
<li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li>
<li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li>
<li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li>
<li>De pop-up laat je gemiddelde hartslag per minuut zien.</li>
</ol>
</article>
<!-- Slide 3 -->
<article id="menu_d">
<h2>Hart Meten</h2><br>
<figure>
<!-- Hartmeet tool -->
<div id="klik_Hart" class="heart">
</div>
<br>
<br>
<br>
<!-- Einde hartmeet tool-->
</figure>
<ol id="stappen">
<li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li>
<li>Boven de 100 is slecht.</li>
<li>Richting de 40 is goed.</li>
</ol>
</article>
<!-- ABOUT -->
<!-- <div id="about">
<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>
</div> -->
<!-- vorige/volgende buttons -->
<table id="volgorde">
<th><button class="button" id="previous">Previous</button></th>
<th><button class="button" id="next">Next</button></th>
<th>
<!-- Checkbox Auto Slider -->
<div class="auto_menu">
<input type="checkbox" id="checkbox">
<label for="checkbox">Auto Handleiding</label>
</div>
<!-- -->
</th>
</table>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<p> Wij zijn ....</p>
</div>
</div>
</div>
<div id="buffer"></div>
<footer>
<a id="footer_" href="#" onclick="openNav()">☰ Over ons </a>
</footer>
</div>
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts1.js" type='text/javascript'></script>
</body>
</html>
CSS
#titel{ color: #B0C4DE; text-align: center;}
/*Verstop alle artikelen binnen content*/
article {
display:none;
}
body{
background-color: #333333;
color: grey;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 12pt;
width: 100%%
}
#wrapper{
background-color: #ADD8E6;
width: 90%;
margin-left: auto;
margin-right: auto;
/*background-image: url("../img/bg.jpg");*/
background-size: cover;
background-position: left top;
border: 2px groove #001f3f;
overflow: auto;
}
#content{
margin-left: auto;
margin-right: auto;
float: left;
width: 70%;
}
#content img{
height: 250px;
width: 450px;
}
#menu{
font-weight: thin;
color: #424242;
float: left;
width: 15%;
text-align: center;
margin-left: 5%;
margin-top: 6.7%;
font-size: 10pt;
}
ul{list-style-type: none;}
h1{ text-shadow: 1px 1px 3px #00008B;}
a{
display: block;
text-decoration: none;
color: #0074D9;
background-color: #001f3f;
border: 1px solid #B0C4DE;
padding: 5px;
}
a:hover{
background-color: #FFD900;
color: #001f3f;
}
footer{
overflow: hidden;
clear: both;
}
#volgorde{
font-weight: thin;
color: grey;
width: 10%;
text-align: center;
clear: both;
margin-left: 3%;
margin-bottom: 2%;
}
.button {
background-color: #001f3f;
color: #FFDC00;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
}
.button:hover{
background-color: #FFD900;
color: #001f3f;
}
.heart{
color:#FBF9FF;
background-image: url("../img/hart4.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
}
.heart:hoover{
color: #FFA07A;
background-color: grey;
}
#uitleg p {
color: #FA8072;
}
#logo img {
float: left;
width: 60px;
height: 60px;
margin-left: 2%;
}
#logo h1 {
position: relative;
top: 15px;
left: 10px;
}
#klik_ {
text-align: center;
}
article p {
height: 200px;
width: 450px;
font-size: 10pt;
color: grey;
font-weight: bold;
overflow: scroll;
margin-left: 4%;
margin-bottom: 5%;
text-align: justify;
text-justify: inter-word;
}
#buffer{
clear: both;
height: 10%;
}
#stappen{
font-weight: bold;
font-size: 10pt;
}
.auto_menu {
position: relative;
margin: 5px auto;
width: 160px;
font-size: 14px;
}
/*OVER ONS OVERLAY*/
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
EDIT: Web Inspector Shows:
Screenshot showing findings
So I think it might be:
margin-bottom: 5%;
when I deleted this, nothing happened..
You defined the height of your p. That means that your element will always stay at the height of 200px, no matter the content inside the element.
In order to change that to a dynamic height change it to:
display: inline-block;
height: auto;
The code is pretty straight forward, you display what is within the block. The height is automatically adjusted depending on the inline of that block.
I am trying to setup a frame for my new website but I have a problem on some screen resolutions. It seems like my image banner-logo.png is too big at some times (regarding the users screen resolution).
I am trying to figure out a way that my whole top banner would resize so it would fit based on the user's screen resolution.
I would also like to center align my menu to the center of the div (which is 100% width).
Here is what I have to so far:
body {
background-color: #000000;
color: white;
}
img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
li {
margin-left:0px;
float:left;
/*pour IE*/
}
ul li a {
display: inline;
color:white;
text-decoration:none;
text-align:center;
padding:15px;
}
ul li a:hover {
color: yellow;
}
div#header {
position: absolute;
background-image: url("../images/banner-bg.jpg");
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
}
div#top-banner {
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
height: 453px;
}
div#gars-gauche {
float: left;
width: 333px;
height: 100%;
background-image: url("../images/gars-gauche.png");
background-repeat: no-repeat;
display: inline;
}
div#banner-centre {
height: 453px;
max-width: 100%;
text-align: center;
vertical-align:middle;
display: inline;
}
div#gars-droite {
float: right;
width: 333px;
height: 100%;
background-image: url("../images/gars-droite.png");
background-repeat: no-repeat;
display: inline;
}
div#top-menu {
position:relative;
top: 20px;
left: 80px;
}
div#content {
width: 100%;
text-align: center;
color: white;
padding-top: 35px;
}
h1 {
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">
<div id="top-banner">
<div id="gars-gauche"></div>
<div id="banner-centre">
<img src="images/banner-logo.png" alt="banner" />
</div>
<div id="gars-droite"></div>
</div>
<div id="top-menu">
<ul>
<li>ACCUEIL</li>
<li>MODÈLES</li>
<li>SERVICES</li>
<li>TARIFS</li>
<li>POLITIQUE</li>
<li>PARTENAIRES</li>
<li>RECRUTEMENT</li>
<li>WEBCAM</li>
<li>CONTACT</li>
<li>FACEBOOK</li>
</ul>
</div>
<div id="content">
<h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
<hr />
<h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
<p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
<p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
<p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
<img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/>
<br />
<br />
<img src="images/Banner-Osez-les-gentlemens.jpg" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you want a fully variable height on your banner, I suggest you use the viewport width unit assigned to your font size, and then scale everything else using EM. As to your question about centering, you can center inline items with text-align: center;
The em unit is the same as your font size, so you can also size any images you would like to use with em and they will scale with the font-size: 1.3vw;.
#top-menu {
font-size: 1.3vw;
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
display: inline;
padding: 0 1em;
}
#dog {
width: 12em;
}
<div id="top-menu">
<img id="dog" src="http://images.clipartpanda.com/dog-clipart-pT5qj6ETB.png">
<ul>
<li>ACCUEIL
</li>
<li>MODÈLES
</li>
<li>SERVICES
</li>
<li>TARIFS
</li>
<li>POLITIQUE
</li>
<li>PARTENAIRES
</li>
<li>RECRUTEMENT
</li>
<li>WEBCAM
</li>
<li>CONTACT
</li>
<li>FACEBOOK
</li>
</ul>
</div>
If you would only like to resize images and not text, you can just set their width as a percentage of the screen width using width: 10vw; for 10% of the viewport width.
For centering the menu try this:
CSS:
ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}
For making the banner full size it is hard to say without seeing it in action. I would recommend starting with using background-size:cover;
body {
background-color: #000000;
color: white;
}
img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
/*pour IE*/
}
ul li a {
display: inline;
color:white;
text-decoration:none;
text-align:center;
padding:15px;
}
ul li a:hover {
color: yellow;
}
div#header {
position: absolute;
background-image: url("../images/banner-bg.jpg");
background-repeat: repeat-x;
top: 0;
left: 0;
right:0;
width: 100%;
}
div#top-banner {
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
height: 453px;
}
div#gars-gauche {
float: left;
width: 333px;
height: 100%;
background-image: url("../images/gars-gauche.png");
background-repeat: no-repeat;
display: inline;
}
div#banner-centre {
height: 453px;
max-width: 100%;
text-align: center;
vertical-align:middle;
display: inline;
}
div#gars-droite {
float: right;
width: 333px;
height: 100%;
background-image: url("../images/gars-droite.png");
background-repeat: no-repeat;
display: inline;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}
div#content {
text-align: center;
color: white;
padding-top: 35px;
}
h1 {
color: white;
}
<div id="header">
<div id="top-banner">
<div id="gars-gauche"></div>
<div id="banner-centre">
<img src="images/banner-logo.png" alt="banner" />
</div>
<div id="gars-droite"></div>
</div>
<div id="top-menu">
<ul>
<li>ACCUEIL</li>
<li>MODÈLES</li>
<li>SERVICES</li>
<li>TARIFS</li>
<li>POLITIQUE</li>
<li>PARTENAIRES</li>
<li>RECRUTEMENT</li>
<li>WEBCAM</li>
<li>CONTACT</li>
<li>FACEBOOK</li>
</ul>
</div>
<div id="content">
<h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
<hr />
<h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
<p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
<p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
<p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
<img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/>
<br />
<br />
<img src="images/Banner-Osez-les-gentlemens.jpg" />
</div>
<div id="footer"></div>
</div>
DEMO