I'm trying to build a website with a sidebar and a right hand side for the main content. Although I've tried numerous methods to get it to work, it isn't behaving as I would like it. Essentially, I would like both of them to scroll when they overflow over the full page div.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Glocal Impacts</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">
<script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/bootstrap.js"></script>
<script type = "text/javascript" src = "js/matchHeight.js"></script>
<script type = "text/javascript" src = "js/app.js"></script>
</head>
<body>
<div class = "fullBG"
style = "background-image: linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url('pic/health.jpg');">
<div class = "homeSide">
<ul>
<li>Home</li>
<li>About Glocal</li>
<li>Team</li>
<li>Itinerary</li>
<li>Service Learning</li>
<li>Upcoming Trips</li>
<li>Ask an Alumni</li>
<li>Blog + Gallery</li>
<li>Apply</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</div>
<div class = "homeMain" style = "display: block">
<div class = "content">
<h1 id = "orphan">Touch an Orphan's Life</h1>
<p>A visit to an orphanage in Fez is an experience that our participants usually list as most memorable and one that has had the most impact on their lives. Students get to interact with mostly abandoned kids that range in age from few days to twelve years old. Participants have donated clothing and cash to help the day to day operation of the orphanage. Some of our students have even donated to the employees of the orphanage in a show of appreciation to their dedication and selflessness. Get your handkerchiefs ready, this has always been a good idea.</p>
<img class = "img-responsive" src = "pic/orphan.jpg">
<h1 id = "school">Maisa's School Supplies</h1>
<p>Students and their parents have come through in a major way when it came to donating school supplies. In fact, this project is named after the mother of one our alumni, Maisa, who has been examplary in this area and has procured countless school supplies. We encourage all participants and their families to follow suit and help us collect these supplies to bring on the trip and hand them directly to a group of needy and well deserving children.</p>
<img class = "img-responsive" src = "pic/school.jpg">
<h1 id = "clothes">Clothing Donations</h1>
<p>Lighten up the load in your overstuffed closet by getting rid of clothes that you have either outgrown or have no use for, and donate them to someone who needs them. Donating new, unworn or gently used clothing helps alleviate the pain of those who are in need and provides participants with an opportunity to affect change in a world plagued with sharp disparities. Pack an extra bag and get ready to donate its content directly to those who are to benefit from it. We have a close working relationship with an orphanage in the city of Fez. We will also make some impromptu stops as you travel through the Atlas Mountains to donate clothes.</p>
<img class = "img-responsive" src = "pic/clothes.jpg">
<h1 id = "soccer">Project Soccer Ball</h1>
<p>Soon after you touch down in Morocco, you will realize that the sport of soccer or football, as it’s known around the world, is not just a sport. Its reconciling powers overcome all. Students are encouraged to bring in a soccer ball to donate to local kids and witness how much love and peace can come from a single soccer ball. Students who are grooming themselves for a career in diplomacy and politics tend to benefit tremendously from this experience.</p>
<img class = "img-responsive" src = "pic/soccer.jpg">
</div>
<div class = "social"><ul>
<li><img src = "icon/twitter.png"></li>
<li><img src = "icon/facebook.png"></li>
<li><img src = "icon/youtube.png"></li>
</ul></div>
</div>
</div>
</body>
</html>
As you can see, there are three scrollbars instead of one scrollbar for the sidebar and the content. It's weird, the right side even seems to exceed the left side. Here's my HTML and LESS. Any ideas?
(P.S. Bootstrap grid elements don't really work in the content pane either)
#import "variables.less";
#text: #303031;
#foot: #373737;
#line: #93999a;
#main: #435573;
#tabs: #222c3c;
#accent: #b52b2c;
#height: 590px;
#font-face
{
font-family: Montserrat;
src: url("../fonts/Montserrat.woff2");
}
#font-face
{
font-family: Selima;
src: url("../fonts/Selima.otf");
}
#font-face
{
font-family: Avenir;
src: url("../fonts/Avenir.woff");
}
#font-face
{
font-family: Proxima;
src: url("../fonts/Proxima.otf");
}
#font-face
{
font-family: Euclid;
src: url("../fonts/Euclid.otf");
}
#font-face
{
font-family: Besom;
src: url("../fonts/Besom.ttf");
}
html, body
{
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0px;
}
.navbar
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
text-decoration: none;
margin-bottom: 0px;
}
.content
{
text-align: left;
background-color: white;
padding: 80px;
h1
{
font-family: Avenir;
font-size: 35px;
line-height: 40px;
color: black;
text-transform: none;
text-decoration: none;
letter-spacing: 1px;
margin-bottom: 5px;
}
ul
{
margin-bottom: 30px;
}
p
{
font-family: Proxima;
font-size: 16px;
line-height: 32px;
color: black;
font-weight: normal;
letter-spacing: 2px;
margin: 20px 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
text-align: justify;
}
li
{
font-family: Proxima;
font-size: 16px;
color: #text;
font-weight: normal;
letter-spacing: 2px;
margin: 15px 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
img
{
width: 100%;
margin: 30px 0;
}
}
.fullBG
{
background-color: #efefef;
background-repeat: no-repeat;
background-size: center center;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
.block
{
display: block;
padding: 75px 10px;
border: 2px solid white;
background: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
font-family: Avenir;
letter-spacing: 3px;
font-size: 25px;
}
.homeMain
{
display: flex;
min-height: 590px;
flex-direction: column;
padding-left: 250px;
max-height: 100%;
overflow-y: scroll;
}
.middle
{
flex: 1;
}
.fancy
{
font-family: Selima;
font-size: 80px;
line-height: 85px;
color: white;
text-transform: none;
text-decoration: none;
letter-spacing: 2px;
margin: 0px auto;
padding-top: 20px;
text-align: center;
}
.homeSide
{
position: absolute;
width: 250px;
height: 100%;
padding: 30px 0px;
background: trasparent;
max-height: 100%;
overflow-y: scroll;
ul
{
list-style-type: none;
margin: 0px auto;
li
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
padding: 15px 10px;
a
{
text-decoration: none;
color: white;
width: 0px;
padding-bottom: 5px !important;
border-bottom: 2px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
&:hover
{
border-bottom: 2px solid white;
width: 100%;
}
}
}
}
}
.footer
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
background-color: #foot;
text-decoration: none;
padding: 20px;
text-align: center;
ul
{
list-style: none;
padding: 0px !important;
margin: 0px auto;
}
a
{
text-decoration: none;
color: white;
}
li
{
display: inline-block;
padding: 10px;
}
}
.social
{
font-family: Proxima;
font-size: 12px;
background-color: white;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
padding: 20px;
text-align: center;
width: 100%;
img
{
-webkit-filter: brightness(100%);
&:hover
{
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
}
ul
{
list-style: none;
padding: 0px !important;
margin: 0px auto;
}
a
{
text-decoration: none;
}
li
{
display: inline-block;
padding: 10px;
}
}
Why not just use hidden overflow on the body..
body
{
overflow: hidden;
}
http://www.codeply.com/go/WEKeQJfWrP
Disable scrollbar with overflow-y:hidden on those two elements.
Related
I am recreating website to practice my html and css skills.
I am doing mobile first, and when i set my device width/height on Iphone 6/7/8 ( 375x667 ) (and of course it may be the case for other widths ) body content spills to the right of viewport border.
I know this may be too much code but i am really stuck on this and i don't really know what is causing this problem.
I am previewing it in Opera Developer Tools.
Thanks in advance .
CSS:
body {
background-color: #fff;
font-family: sans-serif;
overflow: auto;
}
/* NAVIGATION HEADER */
header {
display: flex;
height: 80px;
max-width: 100%;
}
.logo {
flex-basis: 27%;
padding: 14px 5px;
}
.menu {
list-style-type: none;
flex-basis: 70%;
}
.menu li {
display: inline-block;
padding: 20px 3px;
}
.menu a {
text-decoration: none;
color: #595959;
font-size: 20px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
}
h1 {
font-size: 39px;
font-weight: 800;
text-align: center;
line-height: 1;
margin-top: 55px;
}
.hero h3 {
text-align: center;
font-size: 19px;
font-weight: normal;
color: #595959;
word-wrap: normal;
margin: 20px 20px;
}
.button {
/* position: absolute; */
display: inline-block;
background-color: #e54545;
padding: 8px 26px;
padding-top: 13px;
border-radius: 60px;
color: white;
line-height: 1.5;
font-size: 18px;
text-align: center;
font-weight: 400;
}
/*
.seework {
top: 230px;
left: 30%;
}
*/
.bckgrnd {
position: relative;
display: inline-block;
background-image: url("pozadina.png");
background-size: cover;
background-position: center;
width: 100%;
height: 250px;
top: -50px;
z-index: -1;
margin: 0;
}
.strelica {
display: inline-block;
position: relative;
font-size: 30px;
font-weight: bold;
color: #595959;
z-index: 2;
text-align: center;
top: 80%;
border: 2px solid #595959;
box-sizing: border-box;
padding: 1px 12px 6px;
border-radius: 50%;
}
/* SIVI SKROL*/
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
min-width: 100%;
}
#media(min-width: 750px) {
.logomob {
display: none;
}
}
#media(max-width: 750px) {
.logodesk {
display: none;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<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>nLight - User Experiance & User Interface Design Studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logomob.png" alt="nLight logo" class="logomob hidedesk">
<img src="logodesk.png" alt="nLight logo" class="logodesk hidemob">
</div>
<nav>
<ul class="menu">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Independent Interface design studio.</h1>
<h3>We are located in sunny Novi Sad, Europe, and work with people worldwide</h3>
<div class="button seework">See Work</div>
<div class="bckgrnd"> <div class="strelica"> ↓ </div> </div>
</section>
<section class="skrol">
<div class="skrolhed">
<h2> Simple solutions to complex problems. </h2>
<p> User Experience / Interface Design & Front-end Development.
One man studio. 10+ years of experience.
</p>
</div>
<div class="skrolbox1">
<em>DESIGN</em>
<h3>We do Interface design and we are serious about it.</h3>
<p>Web applications, SAAS, marketing web sites. From discovery, prototyping, and design, through iterations to final product.</p>
</div>
<div class="skrolbox2">
<em>DEVELOPMENT</em>
<h3>Front-end Development</h3>
<p>Creating front end strategy that scales. Including living style guide, documentation and methodology to on-board new developers.</p>
</div>
<div class="button about">About Us</div>
</section>
<footer>
<img src="logofut.png" alt="nLight logo" class="logofut">
<p>© 2019 nLight. Hand Made in Europe.</p>
</footer>
</body>
</html>
Not sure if this is the fix you are looking for, but replacing min-width: 100% by max-width: 100% for skrol seems to do it.
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
max-width: 100%; /*instead of min-width*/
}
So i made a responsive website but the website doesnt change when it should.
The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.
And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1
the CSS code
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
margin-left: auto;
margin-right: auto;
}
header {
padding-bottom: 1px;
}
footer {
text-align: center;
}
.logo {
border-radius: 10px;
height: 100px;
margin-top: 15px;
margin-bottom: 5px;
width: 178px;
margin-left: auto;
margin-right: auto;
display: block;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.style-nav ul {
list-style-type: none;
text-align: center;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.style-nav ul li a:hover {
color: black;
text-shadow: 2px 2px 10px #000000;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.hero {
background-image: url(../Images/Background.jpg);
background-size: cover;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
color: #FFFFFF;
text-align: center;
}
.infobox-tan {
background-color: #C29D73;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.infobox-grey {
background-color: #717A84;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
color: #FFFFFF;
text-align: center;
}
h1.small {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h2 {
font-size: 25px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 20px;
padding: 30px
}
h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 35px;
}
p {
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-bottom: 60px;
}
p.footertext {
color: gray;
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-top: 20px;
margin-bottom: 20px;
}
.button {
border-radius: 30px;
border: 2px #FFFFFF solid;
padding: 8px 15px;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 30px;
}
.button:hover {
color: #242424;
border: 2px #242424 solid;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.row:after {
clear: both;
}
.col {
width: 100%;
}
/*Tablet View*/
#media (min-width: 700px) {
.style-logo {
float: center;
}
body {
max-width: 778px;
}
.style-nav ul li {
display: inline-block;
}
h1.normal {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
.row:before,
.row:after {
content: "";
display: table;
padding: 5px;
color: #FFFFFF;
text-align: center;
}
.col-tablet {
width: 50%;
}
.col {
float: left;
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
}
/*Desktop View*/
#media (min-width: 1024px) {
.style-logo {
float: center;
}
.style-nav {
float: center;
}
.col-desktop {
width: 25%;
}
body {
max-width: 1200px;
}
}
<!doctype html>
<html>
<head>
<link href="CSS/Styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="logo" src="Images/Logo company.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Education</li>
<li>Photos</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<div class="hero">
<h3>Editor's Choice</h3>
<h4>Maarten Nauta</h4>
<h1 class="normal small">Webdesign</h1>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet">
<div class="infobox-tan">
<h2>Education</h2>
<p>And a summary of my achievements</p>
Read More
</div>
</div>
<div class="col col-tablet">
<div class="infobox-grey">
<h2>Services</h2>
<p>Graphic/Web design - Video/Photo editing</p>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
</div>
</main>
<footer>
<div class="row">
<div class="col">
<p class="footertext">©2018 Maarten Nauta</p>
</div>
</div>
</footer>
</body>
</html>
Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
With this tag your media queries will operate as though the screen is the standard 72 ppi.
You are missing the viewport meta tag
(...) Apple introduced the "viewport meta tag" in Safari iOS to let
web developers control the viewport's size and scale. Many other
mobile browsers now support this tag, although it is not part of any
web standard. Apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to
figure out exactly how to implement it in Fennec. For example,
Safari's documentation says the content is a "comma-delimited list,"
but existing browsers and web pages use any mix of commas, semicolons,
and spaces as separators.
<meta name="viewport" content="width=device-width, initial-scale=1">
So below is the code for my css file.
#-webkit-keyframes change {
83.3%,95.96% {transform:translate3d(0,-10%,0);}
}
body {
background-color: #3A457C;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #fff;
color: #444;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
h1, h2, p {
font-family: 'Ubuntu', sans-serif;
color: white;
}
h1 {
font-size: 150px;
text-align: center;
-webkit-animation-name: change;
animation-duration: .5s;
line-height: 300px;
}
h2 {
font-size: 50px;
text-align: center;
}
p {
margin-left: 500px;
margin-right: 500px;
font-size: 22px;
}
.header {
cursor: pointer;
background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
background-position: center center;
height: 325px;
line-height:0px;
}
/*
#left {
position: fixed;
top: 392px;
left: 0px;
width: 25%;
height: 100%;
background-color: white;
z-index: 1;
}
#top {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
height:8%;
background-color: white;
}
#hardLeft {
position: fixed;
width: .35%;
top:0px;
left: 0px;
right: 0px;
height: 100%;
background-color: white;
}
#hardRight {
position: right-side;
background-color: white;
}*/
And below right now is the code for the html file
<!DOCTYPE html>
<html>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<head>
<title>Home - Tutor</title>
<link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
</html>
The problem is, as I keep increasing the h1 font size, the header keeps getting farther and farther from the top of the page, I want to keep the h1 font size at 150px, but have the header right at the top of the page. It looks like this but I want it to look like this, except I want the h1 (Trouble? Tutor.) to be 150px.
Add margin: 0; and change line-height to 1. The margin is creating the gap with the background, and the line-height is moving the text down.
#-webkit-keyframes change {
83.3%,95.96% {transform:translate3d(0,-10%,0);}
}
body {
background-color: #3A457C;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #fff;
color: #444;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
h1, h2, p {
font-family: 'Ubuntu', sans-serif;
color: white;
}
h1 {
font-size:150px;
text-align: center;
-webkit-animation-name: change;
animation-duration: .5s;
line-height: 1;
margin: 0;
}
h2 {
font-size: 50px;
text-align: center;
}
p {
margin-left: 500px;
margin-right: 500px;
font-size: 22px;
}
.header {
cursor: pointer;
background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
background-position: center center;
height: 325px;
line-height:0px;
}
<html>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<head>
<title>Home - Tutor</title>
<link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
</html>
That empty space is caused by H1 Tag's default margin.
So add margin:0; to H1's style.
By the way your html code is odd.
HTML Doc should be like this.
<html>
<head></head> <!-- Header for html contains meta, title, link, etc.. -->
<body></body> <!-- Actual contents which would be printed on screen -->
</html>
So your HTML would be better like this.
<!DOCTYPE html>
<head>
<title>Home - Tutor</title>
<link href = "test.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> About</li>
</ul>
</div>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;