I am trying to align everything up, making the sections align and so forth. But I can't seem to get each section to line up.
Here is the link: https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Setting margin: auto, removing display: block and setting width to 100% instead of 120% makes it look quite okay. Is this what you were looking for?
https://codepen.io/anon/pen/PdmKWQ
The main issue you are having is because of .sign-up-form width styling. It is currently set to 120%, which is making the content weird. Remove it or change it to 100%.
Second issue I found is related to font-weight. The value of it is never in px. Review doc for more info.
Third issue remove the default margin on the page.
Updated code snippet -
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S. A lot of your tags don't have a closing tag. You should fix them as well.
Related
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
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">
idk why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.
body {
background-image: url(gradient.png);
background-repeat: no-repeat`enter code here`;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width: 280px;
height: 280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 307px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 353px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins';
sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav">Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br> and freshest album is
<br> AVAILABLE NOW on iTunes,
<br>
Spotify and Google Play Music
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>
If you use some inline DIV's that fit exactly into other DIV's this problem can happen. When zooming in/out pixels are being divided. If you give the DIV's one extra pixel of space it's fixed.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
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%;
}