I have a problem with absolute positioning an element with transform: rotate() css.
I have read other posts on SO with similar problem and I used some solutions but still not solve my problem. I tried transform-origin etc.
I want to place my rotated link at the any X position: left, center, right & Y: bottom of a header. I need solution where I don't know width, height of element (different texts).
I think I have a 90% of solution but problem is my link is not placed whre I want. The X position changes with lenght of text.
I have a working code below:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<style>
body {
background: #333333;
font-family: Arial, sans-serif;
}
.header-content {
background: #cccccc;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
height: 712px;
margin: 0 auto;
padding: 0 45px;
position: relative;
width: 1200px;
}
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
bottom: 0;
left: 50%;
padding-left: 30px;
transform: rotate(-90deg) translate(50%, -100%);
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="header-content">
<div>
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
</div>
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
</body>
</html>
Thanks, for any reply.
I changed your HTML to be like this :
<div class="header-content">
<div class="in-header"> <!-- add class in-header here -->
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
I added class to the first child of the div.header-content and put the element that you want to rotate inside this div not outside it as you was doing.
Then, I changed the style for the .link-decor to be
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
top: 100%;
left: 0px;
padding-left: 30px;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
}
and added position relative to the new class .in-header
body {
background: #333333;
font-family: Arial, sans-serif;
}
.header-content {
background: #cccccc;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
height: 712px;
margin: 0 auto;
padding: 0 45px;
position: relative;
width: 1200px;
}
.in-header{
position: relative;
}
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
top: 100%;
left: 0px;
padding-left: 30px;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
}
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="header-content">
<div class="in-header">
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
</div>
</body>
</html>
Related
I am working on web application using Rect JS and I only have beginners knowledge in HTML and CSS.So can you please suggest me to achieve something like the following with a responsive UI that containing button,text and image.How can I write css styles to curve a div and place another one below it without any blank space.
Can someone please suggest any solution? Any help would be really appreciated.I have tried radial-gradient method like following.
<div className="background1">
....
</div>
<div className="background2">
.....
</div>
.background1 {
width: 100%;
background: radial-gradient(120% 800px at 50% -30px, red 75%,
transparent 75%) no-repeat;
z-index: 2;
position:relative;
margin-bottom: 0px;
}
.background2 {
background-color: #202492;
width: 100%;
background: radial-gradient(120% 800px at 50% -30px,blue 75%,
transparent 75%) no-repeat;
position: relative;
z-index: 1;
margin-top: -50px;
}
But I am getting this
Blockquote
I think you need something like this:
.btn1 {
background: #190b0b;
color: #fff;
padding: 1em 2.5em;
box-shadow: 1px 2px 7px -1px #190b0b;
}
.background1 {
width: 100%;
background: red;
z-index: 2;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: center;
}
.background2 {
background-color: #202492;
z-index: 1;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -10em;
color: #fff;
}
.background3 {
background-color: blue;
z-index: 0;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -20em;
color: #fff;
}
.text {
margin-top: 6em;
max-width: 50%;
padding: 0 6em;
}
<div class="background1">
<button class="btn1">Button</button>
</div>
<div class="background2">
<div class="text">
<h2> Text1 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
<div class="background3">
<div class="text">
<h2> Text2 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
Just change in border-radius and padding values to have the perfect curve that you want.
You can use border-bottom-left-radius and border-bottom-lright-radius or border-radius: 0px 0px xxxpx xxpx;
div {
height: 300px;
width: 300px;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
background: black;
}
<div></div>
My two main sections of my website are overlapping and I can't seem to figure out why. I have read a lot about absolute postition etc. Maybe my whole structure is bad? I don't really know. This is my firts ever site i wrote myself. Any help would be welcome! My site can be found on: h16projecten.github.io
body {
margin: 0;
padding: 0;
background: white;
}
.header {
position: relative;
z-index: 100;
margin: 3rem 3rem 3rem 19%;
}
.header img {
height: 65px;
width: auto;
opacity: 1;
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100%;
display: flex;
}
#team {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.layerleft {
position: relative;
width: 48%;
height: 100vh;
background: white;
box-sizing: border-box;
}
.layerright {
width: 52%;
height: 100vh;
box-sizing: border-box;
border-left: 420px solid white;
border-top: 100vh solid transparent;
}
.content {
margin: 40% -5% 2rem 40%;
font-family: Libre Baskerville;
font-size: 20px;
opacity: 0.8;
font-weight: 100;
z-index: 1;
}
.media {
margin: 1rem -3rem 2rem 40%;
font-size: 27px;
cursor: pointer;
opacity: 0.7;
}
.media p ion-icon:hover {
opacity: 1;
color: #1c3c64;
}
#team h2 {
font-family: Libre Baskerville;
margin: 1rem 10rem 2rem 10%;
font-size: 45px;
font-weight: 100;
line-height: 1.8;
}
#team hr {
margin: 1rem 73% 2rem 10%;
color: #1c3c64;
background-color: #1c3c64;
height: 1px;
}
.teamdesc {
margin: 4% 5rem 2rem 12%;
font-family: Libre Baskerville;
font-size: 30px;
opacity: 0.8;
font-weight: 100;
}
footer {
position: relative;
margin: 7rem 2rem 2rem 2rem;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer-desc p {
font-family: Libre Baskerville;
font-size: 18px;
opacity: 0.8;
font-weight: 100;
display: inline-block;
}
.footer-logo {
margin: 0 4% 0 0;
height: 45px;
display: inline-block;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
height: 100%;
}
.fullscreen-bg__video {
position: absolute;
right: 0;
top: 0;
width: auto;
height: 100%;
}
#media screen and (max-width: 767px) {
.content {
margin: 110vh -90% 2rem 25%;
}
.media {
margin: 1rem -3rem 2rem 25%;
}
.header {
margin: 10rem 3rem 1rem 9.5%;
}
.layerright {
border-left: 100px solid white;
border-top: 100vh solid transparent;
}
#team h2 {
margin: 85vh 10rem 1rem 12.5%;
}
#team hr {
margin: 1rem 45% 2rem 12.5%;
}
.teamdesc {
margin: 12% 5rem 2rem 14%;
font-size: 25px;
}
.footer-desc p {
font-size: 15px;
}
.footer-logo {
height: 35px;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H16 Projecten</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/ionicons#4.5.5/dist/ionicons.js"></script>
<link rel='stylesheet' id='googleFonts-css'
href='https://fonts.googleapis.com/css?family=Libre+Baskerville%3A400%2C700' type='text/css' media='all'/>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay playsinline class="fullscreen-bg__video">
<source src="videos/video.mp4" type="video/mp4">
</video>
</div>
<header class="header">
<a class="header-logo"><img src="images/h16logobnw.png" alt="H16"></a>
</header>
<main>
<section id="wrapper">
<div class="layerleft">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit consequat elit non laoreet.
Pellentesque consequat sapien at tellus tempor consequat. Aliquam dictum justo a facilisis tempor.
Duis scelerisque congue aliquam. Sed lacinia, est in sollicitudin egestas, orci diam elementum ex,
ultrices posuere massa urna tincidunt massa. Mauris fermentum luctus lobortis. Morbi tempus neque a
justo mattis, et elementum tellus tincidunt. Vestibulum suscipit nunc at lorem lacinia lobortis.
Suspendisse elementum, neque vel cursus rutrum, odio lacus posuere purus, mattis hendrerit ante orci
porta nisl. Mauris magna tellus, faucibus ut semper.</p>
</div>
<div class="media">
<p>
<ion-icon onclick="location.href='https://www.facebook.com/H16.projecten';"
name="logo-facebook"></ion-icon>
<ion-icon onclick="location.href='https://instagram.com/h16.projecten';"
name="logo-instagram"></ion-icon>
</p>
</div>
</div>
<div class="layerright">
<!-- video -->
</div>
</section>
<section id="team">
<div class="team">
<h2>Team</h2>
<hr>
<div class="teamdesc">
Name's
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper rhoncus odio nec luctus.
Vestibulum
aliquet nunc quis mi pharetra porttitor. Sed eros tortor, tincidunt ut ex ac, tincidunt tempus odio.
Mauris
vulputate magna et urna mollis auctor. Nam nulla.
</div>
</div>
</section>
</main>
<footer class="footer">
<img class="footer-logo" src="images/h16logobnw.png" alt="H16"> <span class="footer-desc"><p>© 2020 H16 - All right reserved</p></span>
</footer>
</body>
</html>
Preview: h16projecten.github.io
Kind of like this:
index view
when scrolled down
Thanks!
What design do you want your website to have? It will be helpful if you clarify your question.
I removed the "position: absolute" from the element with the wrapper id, and it did not overlap anymore.
If you want a layout that is easy to organize and doesn't overlap, I suggest checking CSS flex. You can learn more about it in the freeCodeCamp website.
I'm making a site and using a grid for my body. Now I'm trying to make a footer for my site but my footer is getting placed right of my main body.
I think the problem might be something with my container though I'm not really sure...
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
I really wouldn't know how to fix this. Can somebody please help me?
This is my HTML & CSS:
body,
html {
height: 100%;
margin: 0;
width: 100%;
}
body {
font-family: "Montserrat";
display: grid;
grid-template-columns: 100% auto;
grid-template-rows: 90% auto;
background-color: rgb(27, 27, 27);
color: white;
}
.bg,
.bg2 {
width: 100%;
height: 100%;
position: absolute;
}
.bg {
-webkit-clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
z-index: -1;
background-color: #053970;
}
.bg2 {
z-index: -2;
background-color: #004288;
-webkit-clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
}
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
a {
color: black;
}
a:visited {
color: black;
}
ul {
list-style-type: none;
perspective: 1000px;
}
ul a li {
display: grid;
grid-template-columns: 20% auto;
border-radius: 10px;
padding: 15px;
cursor: pointer;
transform: rotateY(-30deg) rotateX(15deg);
position: absolute;
opacity: 0.8;
border-bottom: 4px solid rgba(0, 0, 0, .2);
mix-blend-mode: multiply;
width: 500px;
}
ul a:nth-child(1) li {
background: #a9cfe2;
top: -105px;
z-index: 2;
}
ul a:nth-child(2) li {
background: #85b890;
z-index: 1;
top: 0px;
}
ul a:nth-child(3) li {
background: #cca6a6;
z-index: 0;
top: 105px;
}
ul a li:hover {
transform: rotateY(-22deg) rotateX(7deg) scale(1.05);
transition: transform .45s ease-out;
z-index: 3;
mix-blend-mode: normal;
}
footer {
height: 10%;
width: 100%;
background-color: #333;
bottom: 0;
left: 0;
display: initial;
float: bottom;
}
img {
margin-top: 5;
width: 70px;
}
h1 {
font-size: 3em;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
}
#left>p {
color: #aaa;
line-height: 1.5em;
}
#right {
margin-left: 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="container">
<div id="left">
<h1>Supercool Website</h1>
<h2>Supercool website for cool kids only</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac quam augue. Suspendisse potenti. Phasellus at vestibulum nunc. Phasellus suscipit elit odio, feugiat varius quam hendrerit sed. Mauris fringilla blandit maximus. Cras magna metus,
imperdiet congue convallis eu, finibus eget urna. In ac porttitor diam, sit amet sagittis tellus. Nullam consequat luctus ornare. Nulla vitae lectus vitae nisi dapibus ultricies. Aenean tempus nisl sit amet augue luctus pulvinar. Phasellus scelerisque
aliquet lorem.</p>
</div>
<div id="right">
<ul>
<a href="#">
<li>
<img src="img/img1.png">
<span>
<strong>Option 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img2.png">
<span>
<strong>Option 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img3.png">
<span>
<strong>Over Ons</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
</ul>
</div>
</div>
</body>
</html>
Maybe Your Forgetting
grid-template-rows: auto 1fr auto;?
Check Out This Article Maybe It Might Help.
https://dev.to/niorad/keeping-the-footer-at-the-bottom-with-css-grid-15mf
I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.