I can't click on the links because the header takes up all of my site

I can't click on the links because the header takes up all of my site - html

Links inside <div> are not clickable. and for some reason the whole site is covered with <header>, I couldn't figure it out. Links (<a>) inside <nav> working but <header> inside links not working.
how can I solve this problem?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Skyline Beach NBP', sans-serif;
list-style: none;
}
.material-symbols-sharp {
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48
}
html,
body {
margin: 0;
padding: 0;
min-width: 100%;
z-index: 0;
}
.material-symbols-sharp {
color: #dadada;
z-index: 2;
}
.arkaplan {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: -1;
}
.anasayfa {
position: relative;
background-color: transparent;
border: 1px solid #1a1a1a;
margin-top: 90px;
width: 1105px;
height: 1720px;
border-radius: 10px;
z-index: 999;
padding: 10px;
}
.blok {
text-align: center;
width: 50%;
padding: 10px;
float: left;
display: block;
}
.lock {
width: 100px;
height: 100px;
margin: 0;
outline: 1px solid #252525;
}
.kurallar {
position: relative;
z-index: 999;
}
em {
font-size: 20px;
letter-spacing: 1px;
font-style: normal;
/* Removes italics */
text-decoration: 1.5px underline #dadada;
/* Makes underline */
}
p {
font-family: 'Skyline Beach NBP', sans-serif;
color: #dadada;
font-size: 20px;
letter-spacing: 0.2px;
}
.baslik {
margin: 0;
margin-bottom: 10px;
color: #dadada;
font-size: 24px;
position: relative;
}
a,
a:link,
a:visited {
font-family: 'Skyline Beach NBP', sans-serif;
font-size: 20px;
color: #dadada;
text-decoration: 1.5px underline #3c3c3c;
z-index: 22;
}
input[type="text"]:focus {
border: none!important;
outline: none!important;
}
<html>
<body>
<header>
<div class="arkaplan">
<div class="anasayfa">
<div class="blok">
<img class="lock" src="goruntuler/img.png">
<p class="baslik">thehamam nedir?</p>
<a id="kurallar" href="https://thehamam.com/kurallar" target="_blank"><span>kurallarımız</span></a>
<p>eğer 3 kelime ile özetleyecek olursak "özgür sosyal ağ" olacaktır. genişçe tanımlarsak günümüz platformlarındaki kısıtlamaların bulunmadığı isteyen kişilerin anonim kalabileceği yegane ağ. unutmayın, thehamam verilenizi canı gibi korur!</p>
</div>
<div class="blok">
<img class="lock" href="/" src="goruntuler/pepe.png">
<p class="baslik">peki bu ağda ne yapılıyor?</p>
<p>onlarca konudan birini seçip gönderi oluşturabilir, dosya yükleyebilir, ruh halinizi yansıtacak wojağınızı seçebilir ve gönderilere cevap verebilirsiniz. kurallarımız baskıcı değildir. fikirlerinizi özgürce ifade edebilirsiniz.</p>
</div>
<p sid="son" bu sayfanın sonu olsa gerek!></p>
</div>
</div>
</header>
</body>
</html>

Try setting z-index for .arkaplan to 1000:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Skyline Beach NBP', sans-serif;
list-style: none;
}
.material-symbols-sharp {
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48
}
html,
body {
margin: 0;
padding: 0;
min-width: 100%;
z-index: 0;
}
.material-symbols-sharp {
color: #dadada;
z-index: 2;
}
.arkaplan {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: 1000;
}
.anasayfa {
position: relative;
background-color: transparent;
border: 1px solid #1a1a1a;
margin-top: 90px;
width: 1105px;
height: 1720px;
border-radius: 10px;
z-index: 999;
padding: 10px;
}
.blok {
text-align: center;
width: 50%;
padding: 10px;
float: left;
display: block;
}
.lock {
width: 100px;
height: 100px;
margin: 0;
outline: 1px solid #252525;
}
.kurallar {
position: relative;
z-index: 999;
}
em {
font-size: 20px;
letter-spacing: 1px;
font-style: normal;
/* Removes italics */
text-decoration: 1.5px underline #dadada;
/* Makes underline */
}
p {
font-family: 'Skyline Beach NBP', sans-serif;
color: #dadada;
font-size: 20px;
letter-spacing: 0.2px;
}
.baslik {
margin: 0;
margin-bottom: 10px;
color: #dadada;
font-size: 24px;
position: relative;
}
a,
a:link,
a:visited {
font-family: 'Skyline Beach NBP', sans-serif;
font-size: 20px;
color: #dadada;
text-decoration: 1.5px underline #3c3c3c;
z-index: 22;
}
input[type="text"]:focus {
border: none!important;
outline: none!important;
}
<html>
<body>
<header>
<div class="arkaplan">
<div class="anasayfa">
<div class="blok">
<img class="lock" src="goruntuler/img.png">
<p class="baslik">thehamam nedir?</p>
<a id="kurallar" href="https://thehamam.com/kurallar" target="_blank"><span>kurallarımız</span></a>
<p>eğer 3 kelime ile özetleyecek olursak "özgür sosyal ağ" olacaktır. genişçe tanımlarsak günümüz platformlarındaki kısıtlamaların bulunmadığı isteyen kişilerin anonim kalabileceği yegane ağ. unutmayın, thehamam verilenizi canı gibi korur!</p>
</div>
<div class="blok">
<img class="lock" href="/" src="goruntuler/pepe.png">
<p class="baslik">peki bu ağda ne yapılıyor?</p>
<p>onlarca konudan birini seçip gönderi oluşturabilir, dosya yükleyebilir, ruh halinizi yansıtacak wojağınızı seçebilir ve gönderilere cevap verebilirsiniz. kurallarımız baskıcı değildir. fikirlerinizi özgürce ifade edebilirsiniz.</p>
</div>
<p sid="son" bu sayfanın sonu olsa gerek!></p>
</div>
</div>
</header>
</body>
</html>

Related

How to remove unwanted gap between <ul> tag and a div

I am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.
Here's my code:
<%-- Nav Bar --%>
<ul>
<li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li class="dropdown">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</li>
</ul>
<%-- Iframe --%>
<div class="h_iframe">
<iframe src="inicio.aspx" name="ventana" ></iframe>
</div>
This is the CSS I'm using:
body
{
font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
overflow-y: hidden;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.h_iframe iframe {
width: 100%;
height: 100%;
margin-top: 0;
}
.h_iframe {
height: 100%;
width: 100%;
margin-top: 0;
top: 0;
z-index: -1;
padding-left: 159px;
position: fixed absolute
}
.welcometitle {
float: left;
display: block;
color: white;
text-align: center;
padding: 1px 16px;
padding-top: 12px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #006cb4;
padding-left: 163px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
img {
width: 92%;
padding-left: 8px;
margin: 0;
top: 0;
}
.dropbtn {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d4d4d4;
color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;
position: fixed;
}
.active {
background-color: #4CAF50;
}
I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?

You can add some little CSS to the iframe class.
Here is the code:
.h_iframe {
margin-top: -20px;
}

My footer is not aligning to the bottom of the page

I have my page with a div class called footer. It's set to position:absolute; with bottom: 0;, but it doesn't align with the bottom of the page like a footer should. Instead, it sticks to the bottom of the browser window, and moves along with the page when I scroll.
I want it to stay at the bottom of the page, out of site, until the user scrolls to the bottom. How do I fix this, and what exactly is preventing it from going to the bottom?
Thanks in advance!
body {
font-size: 62.5%;
}
#main {
height: 100%;
}
/* a href corrections */
.nav, .nav:visited {
text-decoration: none;
color: #f5f3f5;
}
.aga, .aga:visited {
text-decoration: none;
color: #000913;
}
/* stop */
.half {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 45em;
}
.bottomHalf {
background-color: #69b4b2;
position: absolute;
margin: 0;
width: 100%;
top: 45em;
left: 0;
height: 50em;
z-index: -1;
border-top: solid 0.5em #000913;
border-bottom: solid 0.3em #000913;
}
.footer {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
}
.footer2 {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
border-top: solid 0.3em #000913;
}
.footerText {
font-family: "Rubik";
color: #000913;
font-size: 1.6em;
vertical-align: middle;
margin-left: 10em;
}
#ag1, #ag2 {
position: absolute;
}
#ag1 {
right: 41em;
}
#ag2 {
right: 32em;
}
.half2 {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 13.1em;
}
#head {
position: relative;
left: 15em;
top: 10em;
max-width: 80%;
}
#subContainer {
position: relative;
left: 14em;
top: 7em;
max-width: 127.5em;
margin-bottom: 10em;
font-family: "Rubik";
}
#logo {
width: 10em;
height: 10em;
margin: 0;
position: relative;
top: 1.5em;
left: 1.9em;
cursor: pointer;
}
#headHeader {
display: flex;
}
#menu {
list-style-type: none;
display: flex;
margin-left: 4.2em;
position: relative;
top: 1.7em;
padding: 0;
}
.menuItem {
margin-top: auto;
margin-bottom: auto;
}
.menuItem a {
font-family: "Rubik";
font-size: 2.1em;
color: #f5f3f5;
background-color: #233039;
padding: 0.9em 1.1em;
/* max-height: 1.15em; */
}
.menuItem a:hover {
background-color: #f5f3f5;
color: #000913;
}
#headText {
font-family: "Rubik";
font-weight: bold;
font-size: 5.0em;
color: #233039;
}
#headText2 {
font-family: "Rubik";
font-weight: bold;
font-size: 4.5em;
color: #233039;
text-align: center;
margin: 0;
padding: 0;
}
#headSubText {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
}
.ruleHeader {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
font-weight: bold;
}
.ruleList {
color: #233039;
font-size: 2.2em;
}
#widget {
margin-top: 3em;
margin-right: auto;
margin-left: auto;
display: block;
}
#btnRow {
margin-top: 1em;
}
.btnHead, .btnHead2 {
font-family: "Rubik";
font-size: 2.0em;
font-weight: bold;
padding: 0.6em 0.6em;
background-color: #233039;
border: none;
color: #f5f3f5;
margin-right: 1em;
margin-top: 1em;
margin-left: 0.4em;
border-radius: 0.4em;
border: solid 0.2em #233039;
cursor: pointer;
}
.btnHead2 {
margin-right: auto;
margin-left: auto;
display: block;
}
.btnHead2:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #233039;
}
.btnHead:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #f5f3f5;
}
/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/
* {
outline: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>draft</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main">
<div class="half">
<div id="headHeader">
<img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
<ul id="menu">
<li class="menuItem">Home</li>
<li class="menuItem">Discord</li>
<li class="menuItem">Rules</li>
<li class="menuItem">Forum</li>
<li class="menuItem">Mods</li>
<li class="menuItem">Admin</li>
<li class="menuItem">Apply</li>
<li class="menuItem">Donate</li>
<li class="menuItem">Complaint</li>
<li class="menuItem">About</li>
<li class="menuItem">Contact</li>
</ul>
</div>
<div id="head">
<span id="headText">Opening Title</span>
<div id="btnRow">
<button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
<button class="btnHead">DOWNLOAD MODS</button>
</div>
</div>
</div>
<div class="bottomHalf">
</div>
<div class="footer">
<p class="footerText">© 2018 All rights reserved.</p>
<p class="footerText" id="ag1">Terms of Service</p>
<p class="footerText" id="ag2">Privacy Policy</p>
</div>
</div>
</body>
</html>

Footer in position fixed is not a good solution to what you are looking for because you want to see it only once you scroll down.
The main idea behind that is to use position absolute as you have done, but it is important to define the right parent with position relative and its dimensions. In your example, the main container has 100% but it is not an actual size, if you try to use dev tools in your browser and hover the main element you will see that its height is 0.
Please take a look at the changes I have done in your css code so that the footer is in the bottom:
body {
font-size: 62.5%;
margin: 0;
}
#main {
height: 100em;
position: relative;
}
/* a href corrections */
.nav, .nav:visited {
text-decoration: none;
color: #f5f3f5;
}
.aga, .aga:visited {
text-decoration: none;
color: #000913;
}
/* stop */
.half {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 45em;
}
.bottomHalf {
background-color: #69b4b2;
position: absolute;
margin: 0;
width: 100%;
top: 45em;
left: 0;
height: 50em;
z-index: -1;
border-top: solid 0.5em #000913;
border-bottom: solid 0.3em #000913;
}
.footer {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
}
.footer2 {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
border-top: solid 0.3em #000913;
}
.footerText {
font-family: "Rubik";
color: #000913;
font-size: 1.6em;
vertical-align: middle;
margin-left: 10em;
}
#ag1, #ag2 {
position: absolute;
}
#ag1 {
right: 41em;
}
#ag2 {
right: 32em;
}
.half2 {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 13.1em;
}
#head {
position: relative;
left: 15em;
top: 10em;
max-width: 80%;
}
#subContainer {
position: relative;
left: 14em;
top: 7em;
max-width: 127.5em;
margin-bottom: 10em;
font-family: "Rubik";
}
#logo {
width: 10em;
height: 10em;
margin: 0;
position: relative;
top: 1.5em;
left: 1.9em;
cursor: pointer;
}
#headHeader {
display: flex;
}
#menu {
list-style-type: none;
display: flex;
margin-left: 4.2em;
position: relative;
top: 1.7em;
padding: 0;
}
.menuItem {
margin-top: auto;
margin-bottom: auto;
}
.menuItem a {
font-family: "Rubik";
font-size: 2.1em;
color: #f5f3f5;
background-color: #233039;
padding: 0.9em 1.1em;
/* max-height: 1.15em; */
}
.menuItem a:hover {
background-color: #f5f3f5;
color: #000913;
}
#headText {
font-family: "Rubik";
font-weight: bold;
font-size: 5.0em;
color: #233039;
}
#headText2 {
font-family: "Rubik";
font-weight: bold;
font-size: 4.5em;
color: #233039;
text-align: center;
margin: 0;
padding: 0;
}
#headSubText {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
}
.ruleHeader {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
font-weight: bold;
}
.ruleList {
color: #233039;
font-size: 2.2em;
}
#widget {
margin-top: 3em;
margin-right: auto;
margin-left: auto;
display: block;
}
#btnRow {
margin-top: 1em;
}
.btnHead, .btnHead2 {
font-family: "Rubik";
font-size: 2.0em;
font-weight: bold;
padding: 0.6em 0.6em;
background-color: #233039;
border: none;
color: #f5f3f5;
margin-right: 1em;
margin-top: 1em;
margin-left: 0.4em;
border-radius: 0.4em;
border: solid 0.2em #233039;
cursor: pointer;
}
.btnHead2 {
margin-right: auto;
margin-left: auto;
display: block;
}
.btnHead2:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #233039;
}
.btnHead:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #f5f3f5;
}
/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/
* {
outline: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>draft</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main">
<div class="half">
<div id="headHeader">
<img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
<ul id="menu">
<li class="menuItem">Home</li>
<li class="menuItem">Discord</li>
<li class="menuItem">Rules</li>
<li class="menuItem">Forum</li>
<li class="menuItem">Mods</li>
<li class="menuItem">Admin</li>
<li class="menuItem">Apply</li>
<li class="menuItem">Donate</li>
<li class="menuItem">Complaint</li>
<li class="menuItem">About</li>
<li class="menuItem">Contact</li>
</ul>
</div>
<div id="head">
<span id="headText">Opening Title</span>
<div id="btnRow">
<button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
<button class="btnHead">DOWNLOAD MODS</button>
</div>
</div>
</div>
<div class="bottomHalf">
</div>
<div class="footer">
<p class="footerText">© 2018 All rights reserved.</p>
<p class="footerText" id="ag1">Terms of Service</p>
<p class="footerText" id="ag2">Privacy Policy</p>
</div>
</div>
</body>
</html>

You just need to position:fixed; instead of position:absolute; like below:-
body {
font-size: 62.5%;
}
#main {
height: 100%;
}
/* a href corrections */
.nav, .nav:visited {
text-decoration: none;
color: #f5f3f5;
}
.aga, .aga:visited {
text-decoration: none;
color: #000913;
}
/* stop */
.half {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 45em;
}
.bottomHalf {
background-color: #69b4b2;
position: absolute;
margin: 0;
width: 100%;
top: 45em;
left: 0;
height: 50em;
z-index: -1;
border-top: solid 0.5em #000913;
border-bottom: solid 0.3em #000913;
}
.footer {
background-color: #f5f3f5;
position: fixed;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
}
.footer2 {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
border-top: solid 0.3em #000913;
}
.footerText {
font-family: "Rubik";
color: #000913;
font-size: 1.6em;
vertical-align: middle;
margin-left: 10em;
}
#ag1, #ag2 {
position: absolute;
}
#ag1 {
right: 41em;
}
#ag2 {
right: 32em;
}
.half2 {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 13.1em;
}
#head {
position: relative;
left: 15em;
top: 10em;
max-width: 80%;
}
#subContainer {
position: relative;
left: 14em;
top: 7em;
max-width: 127.5em;
margin-bottom: 10em;
font-family: "Rubik";
}
#logo {
width: 10em;
height: 10em;
margin: 0;
position: relative;
top: 1.5em;
left: 1.9em;
cursor: pointer;
}
#headHeader {
display: flex;
}
#menu {
list-style-type: none;
display: flex;
margin-left: 4.2em;
position: relative;
top: 1.7em;
padding: 0;
}
.menuItem {
margin-top: auto;
margin-bottom: auto;
}
.menuItem a {
font-family: "Rubik";
font-size: 2.1em;
color: #f5f3f5;
background-color: #233039;
padding: 0.9em 1.1em;
/* max-height: 1.15em; */
}
.menuItem a:hover {
background-color: #f5f3f5;
color: #000913;
}
#headText {
font-family: "Rubik";
font-weight: bold;
font-size: 5.0em;
color: #233039;
}
#headText2 {
font-family: "Rubik";
font-weight: bold;
font-size: 4.5em;
color: #233039;
text-align: center;
margin: 0;
padding: 0;
}
#headSubText {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
}
.ruleHeader {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
font-weight: bold;
}
.ruleList {
color: #233039;
font-size: 2.2em;
}
#widget {
margin-top: 3em;
margin-right: auto;
margin-left: auto;
display: block;
}
#btnRow {
margin-top: 1em;
}
.btnHead, .btnHead2 {
font-family: "Rubik";
font-size: 2.0em;
font-weight: bold;
padding: 0.6em 0.6em;
background-color: #233039;
border: none;
color: #f5f3f5;
margin-right: 1em;
margin-top: 1em;
margin-left: 0.4em;
border-radius: 0.4em;
border: solid 0.2em #233039;
cursor: pointer;
}
.btnHead2 {
margin-right: auto;
margin-left: auto;
display: block;
}
.btnHead2:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #233039;
}
.btnHead:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #f5f3f5;
}
/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/
* {
outline: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>draft</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main">
<div class="half">
<div id="headHeader">
<img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
<ul id="menu">
<li class="menuItem">Home</li>
<li class="menuItem">Discord</li>
<li class="menuItem">Rules</li>
<li class="menuItem">Forum</li>
<li class="menuItem">Mods</li>
<li class="menuItem">Admin</li>
<li class="menuItem">Apply</li>
<li class="menuItem">Donate</li>
<li class="menuItem">Complaint</li>
<li class="menuItem">About</li>
<li class="menuItem">Contact</li>
</ul>
</div>
<div id="head">
<span id="headText">Opening Title</span>
<div id="btnRow">
<button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
<button class="btnHead">DOWNLOAD MODS</button>
</div>
</div>
</div>
<div class="bottomHalf">
</div>
<div class="footer">
<p class="footerText">© 2018 All rights reserved.</p>
<p class="footerText" id="ag1">Terms of Service</p>
<p class="footerText" id="ag2">Privacy Policy</p>
</div>
</div>
</body>
</html>

You can use footer position fixed
body {
font-size: 62.5%;
}
#main {
height: 100%;
}
/* a href corrections */
.nav, .nav:visited {
text-decoration: none;
color: #f5f3f5;
}
.aga, .aga:visited {
text-decoration: none;
color: #000913;
}
/* stop */
.half {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 45em;
}
.bottomHalf {
background-color: #69b4b2;
position: absolute;
margin: 0;
width: 100%;
top: 45em;
left: 0;
height: 50em;
z-index: -1;
border-top: solid 0.5em #000913;
border-bottom: solid 0.3em #000913;
}
.footer {
background-color: #f5f3f5;
position: fixed;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
}
.footer2 {
background-color: #f5f3f5;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
height: 5em;
display: flex;
border-top: solid 0.3em #000913;
}
.footerText {
font-family: "Rubik";
color: #000913;
font-size: 1.6em;
vertical-align: middle;
margin-left: 10em;
}
#ag1, #ag2 {
position: absolute;
}
#ag1 {
right: 41em;
}
#ag2 {
right: 32em;
}
.half2 {
background-color: #2ac15d;
position: absolute;
margin: 0;
width: 100%;
top: 0;
left: 0;
height: 13.1em;
}
#head {
position: relative;
left: 15em;
top: 10em;
max-width: 80%;
}
#subContainer {
position: relative;
left: 14em;
top: 7em;
max-width: 127.5em;
margin-bottom: 10em;
font-family: "Rubik";
}
#logo {
width: 10em;
height: 10em;
margin: 0;
position: relative;
top: 1.5em;
left: 1.9em;
cursor: pointer;
}
#headHeader {
display: flex;
}
#menu {
list-style-type: none;
display: flex;
margin-left: 4.2em;
position: relative;
top: 1.7em;
padding: 0;
}
.menuItem {
margin-top: auto;
margin-bottom: auto;
}
.menuItem a {
font-family: "Rubik";
font-size: 2.1em;
color: #f5f3f5;
background-color: #233039;
padding: 0.9em 1.1em;
/* max-height: 1.15em; */
}
.menuItem a:hover {
background-color: #f5f3f5;
color: #000913;
}
#headText {
font-family: "Rubik";
font-weight: bold;
font-size: 5.0em;
color: #233039;
}
#headText2 {
font-family: "Rubik";
font-weight: bold;
font-size: 4.5em;
color: #233039;
text-align: center;
margin: 0;
padding: 0;
}
#headSubText {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
}
.ruleHeader {
font-family: "Rubik";
color: #233039;
font-size: 2.3em;
margin: 0;
padding-top: 0.5em;
font-weight: bold;
}
.ruleList {
color: #233039;
font-size: 2.2em;
}
#widget {
margin-top: 3em;
margin-right: auto;
margin-left: auto;
display: block;
}
#btnRow {
margin-top: 1em;
}
.btnHead, .btnHead2 {
font-family: "Rubik";
font-size: 2.0em;
font-weight: bold;
padding: 0.6em 0.6em;
background-color: #233039;
border: none;
color: #f5f3f5;
margin-right: 1em;
margin-top: 1em;
margin-left: 0.4em;
border-radius: 0.4em;
border: solid 0.2em #233039;
cursor: pointer;
}
.btnHead2 {
margin-right: auto;
margin-left: auto;
display: block;
}
.btnHead2:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #233039;
}
.btnHead:hover {
background-color: #f5f3f5;
color: #233039;
border: solid 0.2em #f5f3f5;
}
/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/
* {
outline: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>draft</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main">
<div class="half">
<div id="headHeader">
<img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
<ul id="menu">
<li class="menuItem">Home</li>
<li class="menuItem">Discord</li>
<li class="menuItem">Rules</li>
<li class="menuItem">Forum</li>
<li class="menuItem">Mods</li>
<li class="menuItem">Admin</li>
<li class="menuItem">Apply</li>
<li class="menuItem">Donate</li>
<li class="menuItem">Complaint</li>
<li class="menuItem">About</li>
<li class="menuItem">Contact</li>
</ul>
</div>
<div id="head">
<span id="headText">Opening Title</span>
<div id="btnRow">
<button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
<button class="btnHead">DOWNLOAD MODS</button>
</div>
</div>
</div>
<div class="bottomHalf">
</div>
<div class="footer">
<p class="footerText">© 2018 All rights reserved.</p>
<p class="footerText" id="ag1">Terms of Service</p>
<p class="footerText" id="ag2">Privacy Policy</p>
</div>
</div>
</body>
</html>

header, main and footer positioning

My page is divided in to 3 pieces. The header the main and the footer. The header is fixed to the top and is 109px with its 6px border high so the main has a 109px margin to the top. I want the main to extend over the entire page below the header and to the footer that should, if no content that is available to push it down, rest on the bottom of the screen. The footer is 86px high because it is 80px and 6px for a border at the top. How can I achieve all this. I have no Idea
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
margin: 0;
padding-bottom: 9rem;
min-height: 100%;
}
/* ---------------------------------------------------------------- */
main {
margin-top: 109px;
text-align: center;
min-height: 100%;
min-width: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
z-index: 99;
}
#heading {
font-family: "Arial";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
/* ---------------------------------------------------------------- */
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}
<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>

You just need to remove the padding-bottom from the body and replace the margin-top by padding-top & padding-bottom:
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
min-height: 100%;
}
/* ---------------------------------------------------------------- */
main {
padding-top: 109px;
padding-bottom: 86px;
text-align: center;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
z-index: 99;
}
#heading {
font-family: "Arial";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
#navigation {
margin: 0px;
margin-bottom: 20px;
padding: 0px;
}
.navigationlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 11px;
height: 52px;
letter-spacing: 1px;
margin: 0 10px;
padding-left: 0px;
padding-right: 0px;
position: relative;
text-transform: uppercase;
transition: color 0.3s;
}
.navigationlink:hover {
color: #c1b497;
}
.activelink:hover {
border-bottom-color: #c1b497;
}
.activelink {
border-bottom: 2px solid #ffffff;
transition: color 0.3s;
}
/* ---------------------------------------------------------------- */
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}
<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
<nav id="navigation">
<a class="navigationlink activelink" href="index.html">Home</a>
<a class="navigationlink" href="page1.html">Page1</a>
<a class="navigationlink" href="page2.html">Page2</a>
<a class="navigationlink" href="page3.html">Page3</a>
<a class="navigationlink" href="page4.html">Page4</a>
</nav>
</header>
<main id="main"></main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>

Please make your question more clear, I'll give it a try though, is this what you want (fixed positions and removed unnecessary margins)?
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
min-height: 100%;
}
/* ---------------------------------------------------------------- */
main {
text-align: center;
min-height: 100%;
min-width: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
width: 100%;
height: 103px;
box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.75);
z-index: 99;
}
#heading {
font-family: "Arial";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
#navigation {
margin: 0px;
margin-bottom: 20px;
padding: 0px;
}
.navigationlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 11px;
height: 52px;
letter-spacing: 1px;
margin: 0 10px;
padding-left: 0px;
padding-right: 0px;
position: relative;
text-transform: uppercase;
transition: color 0.3s;
}
.navigationlink:hover {
color: #c1b497;
}
.activelink:hover {
border-bottom-color: #c1b497;
}
.activelink {
border-bottom: 2px solid #ffffff;
transition: color 0.3s;
}
/* ---------------------------------------------------------------- */
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}
<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
<nav id="navigation">
<a class="navigationlink activelink" href="index.html">Home</a>
<a class="navigationlink" href="page1.html">Page1</a>
<a class="navigationlink" href="page2.html">Page2</a>
<a class="navigationlink" href="page3.html">Page3</a>
<a class="navigationlink" href="page4.html">Page4</a>
</nav>
</header>
<main id="main">
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>

Is there any better way to build this the correct semantic way?

Could anybody help me and have a look at my HTML page, and explain to me if this is a correct semantic way to set-up a HTML page?
I need to learn to build a webpage with as less divs as possible, but you can use them if you want to style something specific right? like I used them in this context.
So are there any any flaws in my HTML code?
.main-club-bar-music-festival {
overflow: auto;
}
.main-club-bar-music-festival h3 {
margin: 0;
}
.img-club-air {
position: relative;
}
.img-club-air img {
width: 100%;
}
.img-club-air a:first-child {
position: absolute;
margin: 10px;
width: 60px;
right: 0;
bottom: 0;
z-index: 1;
}
.img-club-air h2 {
position: absolute;
bottom: 0;
font-size: 20px;
width: 100%;
padding: 10px;
color: white;
font-family: "LemonMilk"
}
#paragraph-p {
padding: 20px;
margin: 0;
}
.rent-a-bike {
width: 200px;
margin: 20px auto;
text-align: center;
background-color: #eb6c74;
}
.rent-a-bike p {
margin: 0;
padding: 10px;
color: white;
text-transform: capitalize;
transform: translateX(-5%);
overflow: hidden;
}
.rent-a-bike img {
margin-top: 10px;
margin-left: 5px;
height: 38px;
float: left;
}
.show-me-the-way {
width: 200px;
margin: 20px auto;
text-align: center;
background-color: #eb6c74;
}
.show-me-the-way p {
margin: 0;
padding: 10px;
color: white;
text-transform: capitalize;
}
.show-me-the-way img {
height: 38px;
float: left;
}
.info-block {
background-color: #eb6c74;
color: white;
padding: 10px 20px;
text-transform: uppercase;
font-family: "NeueHaasGrotesk Light";
}
.address-club {
overflow: auto;
margin-bottom: 16px;
}
.address-club p {
padding: 10px 20px 0 20px;
margin-bottom: 0;
}
.address-club img {
height: 40px;
margin-left: 10px;
float: left;
margin-right: 10px;
}
.address-club a {
line-height: 40PX;
display: block;
color: #3b3b3b;
text-decoration: underline;
}
.address-club a[target=_blank] {
padding-left: 20px;
color: #0000EE;
}
.padding-info-club {
padding: 20px;
}
.regular-info-left {
float: left;
width: 49.5%;
text-align: center;
color: white;
}
.regular-info-left p:nth-child(1) {
margin: 0;
}
.regular-info-left p:nth-child(2) {
margin: 2px 0;
}
.regular-info-left p:nth-child(3) {
margin: 2px 0;
}
.regular-info-left p {
background-color: #3b3b3b;
height: 50px;
line-height: 50px;
text-transform: uppercase;
}
.regular-info-right {
float: right;
width: 49.5%;
text-align: center;
color: white;
}
.regular-info-right p:nth-child(1) {
margin: 0;
}
.regular-info-right p:nth-child(2) {
margin: 2px 0;
}
.regular-info-right p:nth-child(3) {
margin: 2px 0;
}
.regular-info-right p {
background-color: #3b3b3b;
height: 50px;
line-height: 50px;
text-transform: uppercase;
}
#overflow-regular-info {
overflow: auto;
}
.info-feedback-on-page {
margin: 10px 0;
border-top: 1px solid #eb6c74;
border-bottom: 1px solid #eb6c74;
padding: 0px 0px 10px 20px;
}
.info-feedback-on-page button {
border-radius: 40%;
background-color: transparent;
margin-right: 10px;
}
#button-yes {
background-color: white;
border-radius: 28px;
border: 2px solid #44c767;
color: #44c767;
font-size: 15px;
padding: 10px 25px;
outline: 0;
}
#button-yes:active {
position: relative;
top: 2px;
outline: 0;
}
#button-no {
background-color: white;
border-radius: 28px;
border: 2px solid #e35656;
color: #e35656;
font-size: 15px;
padding: 10px 25px;
outline: 0;
}
#button-no:active {
position: relative;
top: 2px;
outline: 0;
}
<main class="main-club-bar-music-festival">
<div class="img-club-air">
<img src="img/favorite-icon-add.svg" alt="add to favourites">
<img src="img/club-panama.jpg" alt="Club Panama">
<h2>panama</h2>
</div>
<h3 class="info-block">regular info</h3>
<section id="overflow-regular-info">
<div class="regular-info-left">
<p>dancing</p>
<p>go out with mates</p>
<p>expensive</p>
</div>
<div class="regular-info-right">
<p>edm</p>
<p>locals/foreigners</p>
<p>groups</p>
</div>
</section>
<p id="paragraph-p">Panama chose a bit of a peculiar spot to open a nightclub. Located outside the city centre, Panama created a diversified nightclub. The nightclub holds a lot of parties varying from electronic tp 80's and 90s parties. Panama also houses HappyHappyJoyJoy, an asian shared dining restaurant</p>
<div class="rent-a-bike">
<a href="http://www.ov-fiets.nl/huurlocaties?locatie=amsterdam&POST_AUTOCOMPLETE=%2Fhuurlocaties.xml" target="_blank">
<img src="img/bicycle-icon.svg" alt="OV-Bicycle">
<p>rent ov-bike
<br>€ 3,85,-/24 hour</p>
</a>
</div>
<div class="show-me-the-way">
<a href="">
<img src="img/location-icon.svg" alt="your location to destination">
<p>show me the way</p>
</a>
</div>
<h3 class="info-block">average price for a drink</h3>
<p class="padding-info-club">- € 2,30,-</p>
<h3 class="info-block">entrance</h3>
<p class="padding-info-club">- € 5,00,-</p>
<h3 class="info-block">address</h3>
<div class="address-club">
<p>Panama
<br> Oostelijke Handelskade 4
</p>
www.panama.nl
020 311 86 86<img src="img/phone-icon.svg" alt="call-icon">
</div>
<h3 class="info-block">opening hours</h3>
<p class="padding-info-club">Fr - Su: 21:00 - 05:00pm</p>
<div class="info-feedback-on-page">
<p>Was this information usefull for you as an international student?</p>
<button id="button-yes">yes</button>
<button id="button-no">no</button>
</div>
</main>

Website Issues - cant find the solutions

First of all i dont know if its permited more than one question in one topic, however i didnt find anything talking about that.
I have been developing a website, but im a bit new to this and my site has some things that need to be worked out, i will be listing the issues bellow and hopefully someone will help me.
1- Slideshow
How i can put the circles (bullet navigation) of the slideshow inside the slideshow ?
Images are not fully the size as the screen, i can see the current slide and a bit of the next slide, what do i do ?
2- Last 2 pages, Mobile & Contacts
If i change
.mobile {
min-width: 1100px;
}
to:
.mobile {
min-width: 1300px;
}
The mobile div will not make text stay on top of the image but the contacts page will not be as responsive as before, just try by yourself.
Thats it, it may simple, but i cant figure it out, i hope theres no problem with this topic, if so tell me.
See it live: http://optential.co.nf/
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
The css of the slideshow is "slider" and "controls".
Hope someone can help.

To answer questions 1
I will be answering the others shortly. To move the button controls first we need to give them a div, however as the controls are being dynamically generated so we have to edit the code which creates them, to do this we go into slider.js and add class="button move" to the
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div class="buttonmove">');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
Now we have something that we can edit, the most easiest way to move them is to use position:relative and give them a -100 top value like so.
.buttonmove {
position: relative;
top: -250px;
}
Question 2
Unfortantly I don't see the issue with your question as changing it 1300px works better as the layer don't overlap, please let me know in more detail;
A- the problem
B- what the result should be like
I hope this helped!
EDIT
Here is the jQuery function;
$(document).ready(function() {
var sliderImgH = $(".sliderimages:first").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
$(window).resize(function() {
var sliderImgH = $(".sliderimages").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
I also added this CSS;
.buttonmove {
position: relative;
}
#slider {
position: absolute;
}
*NOTE**
Adjust your function order so it goes or it won't work on load,
<script src="js/slider.js"></script>
Then the function I just made
<script src="js/fixedbar.js"></script>
EDIT(sorry forgot to add...)
I forgot to tell you to to add a class called sliderimages to your first or all of the images in your slider.
<div id="slider">
<div class="images">
<div class="controls">
<img class="sliderimages" src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

I can't click on the links because the header takes up all of my site - html

Related

How to remove unwanted gap between <ul> tag and a div

My footer is not aligning to the bottom of the page

header, main and footer positioning

Is there any better way to build this the correct semantic way?

Website Issues - cant find the solutions

Categories

Resources