This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 9 months ago.
I currently have two divs in each other and I want to center the parent div on the page so that no matter if I zoom in/out the parent div will always be in the center of the page.
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
margin-top: 50px;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
margin-bottom: 350px;
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
margin-top: 230px;
}
<div class="marioHeader"><h1 class="title">Super Mario</h1><div class="headermario"><div class="topnav">AboutHistory</div></div></div>
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
It looks like this now:
But I want it to look like this:
Added everything to a single html file. Commented some of the existing css which defined margin for the container. And added
width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;
to make it center. The basic idea is to containe the the div and move the div to the center of the container.
Happy hacking. Cheers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Super Mario</title>
<style type="text/css">
#charset "utf-8";
/* CSS Document */
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.nav a {
padding: 8px 8px 30px 65px;
text-decoration: none;
font-size: 35px;
color: #818181;
display: block;
transition: 0.3s;
font-weight: 500;
}
.nav a:hover {
color: #f1f1f1;
}
.nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.menu {
font-size: 1.8vw;
position: absolute;
font-weight: bolder;
}
#main {
transition: margin-left .5s;
/* padding: 10px; */
}
#media screen and (max-height: 450px) {
.nav {
padding-top: 15px;
}
.nav a {
font-size: 18px;
}
}
.headerText {
text-align: center;
}
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
/* height: 450px; */
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
margin-top: 50px;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
/* margin-bottom: 350px; */
max-width: 1800px;
/* margin-left: auto;
margin-right: auto; */
}
.title {
font-size: 50px;
font-weight: bolder;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
min-width: 70%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
margin-top: 230px;
}
.topnav a {
float: left;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 23px;
border-left: 1px solid;
border-right: 1px solid;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.menu {
cursor: pointer;
}
.aboutp {
width: 1000px;
text-align: center;
display: block;
margin: auto;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
max-width: 700px;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px;
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
min-height: 50%;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
max-width: 1800px;
margin: auto;
}
body {
background-color: saddlebrown;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("nav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</head>
<body>
<div id="nav" class="nav">
×
Home
About
History
</div>
<span class="menu" onclick="openNav()">☰ Menu</span>
<div id="main" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<div class="marioHeader" style="width: 70%">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
</div>
</body>
</html>
Remove margins on .marioHeader then nest the code in a .container. with a min-height: 100vh;. Then you can set display: flex; on this new parent container with align-items: center; and justify-content: center; to get it centered.
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
width: 100%;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
max-width: 1800px;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
</div>
Related
/* GLOBAL STYLES */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
Font-Family: 'Ovo', Serif;
font-size: 90px;
}
h2,h3,h4,h5,h6,p{
Font-Family: 'Quattrocento Sans', Sans-Serif;
}
:root{
--bg1: #E8E0D2;
--bg2: #9B9FAE;
--green: #5F6D45;
--font: #F5F1F1;
}
body{
width: 1920px;
max-width: 1920px;
background-color: var(--bg1);
}
.separator{
width: 80%;
margin: auto;
padding: 150px 0;
}
.line{
border-top: 1px solid var(--bg2);
}
html{
max-width: 1920px;
}
/* HEADER */
header{
width: 1920px;
height: 100px;
position: relative;
}
.header-container{
margin: auto;
width: 1520px;
height: inherit;
display: flex;
border-bottom: 1px solid black;
}
.header-container nav{
width: 50%;
height: inherit;
}
.logo{
position: relative;
bottom: 32px;
}
.nav-right{
display: flex;
justify-content: flex-end;
}
.nav-right ul{
width: 75%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#nav-link{
display: flex;
display: inline-block;
}
#nav-link a{
float: right;
text-decoration: none;
color: black;
}
.nav-right h2{
font-size: 19px;
}
/* MAIN */
main{
display: flex;
flex-direction: column;
height: 800px;
width: 1920px;
margin: auto;
}
/* HERO */
.hero{
width: inherit;
height: inherit;
/* background-color: teal; */
}
.hero-container{
height: inherit;
display: flex;
justify-content: center;
}
#hero-half{
width: 100%;
/* border: 1px solid red; */
}
.hero-left{
display: flex;
justify-content: end;
}
.hero-left .container{
width: 79%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.name-intro h2{
color: var(--green);
font-size: 18px;
}
.name-intro h2{
}
.info-box{
position: relative;
top: 100px;
width: 50%;
background-color: var(--green);
padding: 15px;
border-radius: 3px;
box-shadow:-20px -10px var(--bg2);
}
.slogan{
color: white;
font-size: 20px;
letter-spacing: 1.1px;
line-height: 1.3;
text-align: center;
}
.hero-right{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
background-color: var(--green);
width: 650px;
height: 650px;
border-radius: 3px;
background-image: url('./bg texture3.jpg');
background-blend-mode: multiply;
}
.me-img{
position: relative;
right: 75px;
width: 400px;
height: 560px;
}
.me-img img{
width: inherit;
height: inherit;
}
I Use a separator to add space and a horizontal line between the different sections of my webpage so they aren't touching, but whenever I either add margin or padding to the bottom of it the entire width of the page grows a tiny bit and now there's the sidescroll option. The extra width also appears when I add bottom margin directly to the sections themselves. Any help would be appreciated!
I've tried adding max-width to the page, but it still expands.
In your body and header, try changing width: 1920px; to max-width: 100%;. Also, in "hero-left", you may want to change that to "max-width" as well. In most cases, you wouldn't want to use width: 100%;
I have been developing a product landing page to practice & enhance my skills in responsive web designs. Here is what I have achieved so far. https://jsfiddle.net/Ghazi360/qj8zLp16/1/
I am having issues with the width of my divs. I can not figure out why are they not occupying full screen width & leaving a white empty border on the right side like this:
I have set
* {
box-sizing: border-box
}
& the width of Container div is also set to 100%. Kindly help me out with this. I hope I have been able to explain my problem.
Just do an overflow:hidden; on Container and you are good to go.
Note: These bugs are a bit difficult to catch. Always start debugging in developer window first ( A small tip)
CODEPEN LINK: https://codepen.io/emmeiWhite/pen/dypQqYz
#Container {
width: 100%;
background-color: #f5f5f5;
overflow: hidden; /*Add this */
}
FULL CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
#Container {
width: 100%;
background-color: #f5f5f5;
overflow:hidden;
}
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 70%;
grid-gap: 10px;
position: fixed;
}
#headerImg {
width: 100%;
height: 50px;
background-image: url("https://freesvg.org/img/optical.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#header-img {
display: none;
}
#nav-bar {
width: 100%;
height: 50px;
background-color: rgb(126, 126, 31);
text-align: center;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link {
font-size: 18px;
font-family: poppins;
text-decoration: none;
color: white;
border-bottom: 2px solid black;
}
.nav-link:hover {
transition: .8s;
color: black;
border-bottom: 2px solid white;
}
#About {
width: 100%;
height: 300px;
background-color: chocolate;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#About h1 {
font-size: 42px;
font-family: poppins;
margin-top: 40px;
padding: 5px;
}
#About p {
font-size: 18px;
font-family: poppins;
padding: 10px;
}
#media only screen and (max-width: 425px) {
.nav-link {
font-size: 12px;
}
#About {
height: 430px;
}
#About h1 {
font-size: 32px;
}
#About p {
font-size: 14px;
}
}
#Features {
width: 100%;
height: 500px;
background-color: brown;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 10px;
}
.premiumIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/2997/2997131.svg?token=exp=1610648143~hmac=0e319e924a0a195adb6360e2ea9596c8");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.fastIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/1792/1792671.svg?token=exp=1610648298~hmac=ae66efe447d060ac530f58333ef179f6");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.qualityIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/2649/2649798.svg?token=exp=1610646201~hmac=12c57329928c0f4774f73b68b9359a54");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.desc {
padding: 15px 5px 0px 5px;
}
.desc h2 {
font-size: 22px;
font-family: poppins;
padding: 10px;
}
.desc p {
font-size: 14px;
font-family: poppins;
padding: 10px;
}
#media only screen and (max-width: 425px) {
#Features {
height: 500px;
}
.grid {
height: 100px;
}
.premiumIcon,
.fastIcon,
.qualityIcon {
width: 52px;
}
.desc {
padding: 0;
}
.desc h2 {
font-size: 16px;
}
.desc p {
font-size: 12px;
}
}
#Video {
width: 100%;
height: 400px;
background-color: chartreuse;
display: flex;
justify-content: center;
align-items: center;
}
#Video iframe {
max-width: 560px;
}
#Products {
width: 100%;
height: 300px;
background-color: darkorchid;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
flex-wrap: wrap;
}
#media only screen and (max-width: 425px) {
#Products {
height: 700px;
}
}
.card {
max-width: 200px;
height: 215px;
background: rgb(163, 86, 86);
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
transition: 0.3s ease-in-out;
}
.imgBx {
width: 200px;
height: 215px;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img2 {
background-image: url("https://images.unsplash.com/photo-1509695507497-903c140c43b0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img3 {
background-image: url("https://lh3.googleusercontent.com/proxy/3lUUwuh-2MSiNDoxUeLIhenDfsd5c5OXJ71uG16L8_ciXyQG-9tKphBYpx4Z6oHqiWQWP_i7tvbvlX0DABn6jv6xsUkEvEOIdbStL22RSV9AFqBzHi2Dqnpi05_h8kmqWqLacaWDv5_lWpVvsVQ");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.card:hover {
height: 250px;
}
.card .content {
position: relative;
margin-top: -140px;
padding: 10px 15px;
text-align: center;
color: #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.card:hover .content {
visibility: visible;
opacity: 1;
margin-top: -10px;
transition-delay: 0.3s;
}
.content h2 {
color: black;
font-size:30px;
font-family: poppins;
}
#form {
width: 100%;
height: 200px;
background-color: dodgerblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
#form h2 {
font-family: poppins;
padding-bottom: 30px;
text-align: center;
}
#email {
width: 50%;
height: 50px;
border-radius: 30px;
padding-left: 10px;
border: none;
outline: none;
font-size: 18px;
font-family: poppins;
box-sizing: border-box;
}
#submit {
width: 100px;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-family: poppins;
border: none;
border-radius: 6px;
outline: none;
cursor: pointer;
text-align: center;
}
#media only screen and (max-width: 425px) {
#form {
height: 300px;
}
#email {
width: 250px;
}
}
#footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
list-style: none;
}
#footer li {
padding: 0 10px;
}
#footer a {
font-size: 14px;
font-family: poppins;
color: #000;
text-decoration: none;
}
#footer span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
font-size: 14px;
font-family: poppins;
}
<div id="Container">
<header id="header">
<div id="headerImg">
<img id="header-img" src="https://freesvg.org/img/optical.png" alt="Logo" id="header-img">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#About">About</a>
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#Products">Pricing</a>
</nav>
</header>
<div id="About">
<h1>Ghazi Eyewear</h1>
<p> Pakistan's Leading Online Sunglasses Shop Established 2004
Ghazi Eyewear stands out for its exclusive eyewear, glamorous frames
and colors to match your confidence.
Ghazi Eyewear provide you with the most complete eye care possible.
In our online store, you can choose from an excellent selection of
named brands. Ghazi Eyewear is offering
exceptional range of Men's Original Sunglasses at amazing
prices in Pakistan, accompanied with free home delivery to your
door step. We guarantee for providing best and reliable perfect frames.
We also provide the best prescription eyewear.
</p>
</div>
<div id="Features">
<div class="grid">
<div class="premiumIcon"></div>
<div class="desc">
<h2>Premium Materials</h2>
<p> Our frames use the finest material which is sourced locally.
This will increase the longevity of your purchase.
</p>
</div>
</div>
<div class="grid">
<div class="fastIcon"></div>
<div class="desc">
<h2>Fast Shipping</h2>
<p> We make sure you recieve your glasses as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="grid">
<div class="qualityIcon"></div>
<div class="desc">
<h2>Quality Assurance</h2>
<p> For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your purchase.
</p>
</div>
</div>
</div>
<div id="Video">
<iframe id="video" height="315px" width="560px" src="https://www.youtube.com/embed/wwM9mnw4v4s" allowfullscreen="true"></iframe>
</div>
<div id="Products">
<div class="card">
<div class="imgBx img1"></div>
<div class="content">
<h2>Men Sunglasses</h2>
</div>
</div>
<div class="card">
<div class="imgBx img2"></div>
<div class="content">
<h2>Women Sunglasses</h2>
</div>
</div>
<div class="card">
<div class="imgBx img3"></div>
<div class="content">
<h2>Eye Care Products</h2>
</div>
</div>
</div>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h2>Subscribe to our Newsletter!</h2>
<input name="email" id="email" type="email" placeholder="Enter your email" required>
<input name="submit" id="submit" type="submit" value="subscribe">
</form>
<footer id="footer">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<span>Copyright 2021, Ghazi 360</span>
</footer>
</div>
What is causing the overflow is the grid-gap property in #header and .grid, they are not counted towards the percentage values you've added, you should remove that and use padding to create the desired spacing.
Edit:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 70%;
/* grid-gap: 10px; remove this */
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 75%;
/* grid-gap: 10px; and this */
}
Edit 2:
Alternatively you can also use the fr unit to occupy the remaining space and still use the grid-gap property:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
grid-gap: 10px;
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
grid-gap: 10px;
}
Others have pointed out that your grid doesn't take the grid-gap in to a count.
But the real issue to fix is that I found out your grid-template inside Features div that the one doesn't count the grid-gap.
If you still want to keep the grid-gap try lower the value of grid-template-columns to be 23% 75% respectively. So you allow that 10px from the grid-gap to take space.
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 23% 75%;
grid-gap: 10px;
}
Adjust the value as you see fit of course and make sure you take count of the grid-gap.
did this for my homepage and wanted to background image content to be the middle of the image as the display size decreases (right now it slides the content of the image to the left). Thought of media query but Client only allows for one add-on of CSS, not different stylesheet files.
Also, although stated * margin= 0; padding=0 a margin appears on my smartphone (Iphone 6) and want it to be clear full screen as in desktop. Make browser pretty small to see if from laptop/desktop.
It has to be CSS ONLY since my client (Smugmug) only allows for blocks of css and html on it, no javascript or whatsoever. Also adds its own CSS to the page so I can post the link if needed.
Any idea for the dynamic positioning of the images and the margins? Thanks!
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding; 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
);
background-size:cover;
}
#business-button {
transition: all 1s;
-webkit-transition: all 1s;
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
text-align:center;
}
#logo-separator {
text-align: center;
top: calc( 50%-height_of_separator)px;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
z-index:1;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
height:50vh;
align-items: center;
justify-content: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
);
background-size:cover;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
transition: 1s;
min-height: 200px;
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
you need to use background-position if you want to position a background image.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-position: center center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
);
background-size:cover;
}
#business-button {
transition: all 1s;
-webkit-transition: all 1s;
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
text-align:center;
}
#logo-separator {
text-align: center;
top: calc( 50%-height_of_separator)px;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
z-index:1;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
height:50vh;
align-items: center;
justify-content: center;
background-position: center center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
);
background-size:cover;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
transition: 1s;
min-height: 200px;
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
add this css property to your both divs
background-position: center;
as example like this
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg);
background-position: center;
}
do like this for your other div and try.
The problem is that my header has a fixed width of 150px, but in browser it gets displayed as 134.984px and I can't figure out why. I've tried everthing that I could think of but nothing worked. The only thing I've managed to figure out is that it's the content-wrap flex item that is pushing on the headerand making it smaller.
Here's the HTML:
/*======= Container =======*/
#container{
display: flex;
flex-direction: row;
min-height: 100vh;
}
#content-wrap {
width: 100%;
}
/*======= Sāna izvēlne / header =======*/
header {
min-height: 100vh;
width: 150px;
margin: 0;
}
.header-position {
width: inherit;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav {
background-color: #ffffff;
}
nav ul{
padding: 0;
margin: 0;
}
nav li, a {
text-decoration: none;
list-style-type: none;
text-align: right;
font-size: 1em;
color: black;
}
.logo {
background: url("../images/AG.svg");
background-size: contain;
background-repeat: no-repeat;
width: 80px;
}
/*======= Banneris =======*/
.banner-container {
background-image: url("../images/lp-background.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
clear: right;
}
.banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.banner h1 {
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.4em;
border: solid 10px white;
padding: 20px 30px;
}
/*======= Par mums =======*/
#about {
width: 100%;
height: 300px;
background-color: pink;
}
#about .first, .second {
width: 50%;
height: 100%;
display: inline-block;
}
#about .first {
}
#about .second {
float: right;
}
.about-picture {
height: 200px;
width: 200px;
margin: 50px 50px;
border-radius: 150px;
border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
float: right;
}
img.right {
float: right;
}
<div id="container">
<header>
<div class="header-position">
<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>
<nav>
<ul>
<li>Sākums</li>
<li>Attēli</li>
<li>Kontakti</li>
<li>Par mums</li>
</ul>
</nav>
Sazinies ar mums
</div>
</header>
<div id="content-wrap">
<div class="banner-container">
<span class="banner"><h1>Whatever</h1></span>
</div>
<div id="about">
<div class="first">
<img class="about-picture left" src="./images/lp-background.jpg" alt="" />
</div>
<div class="second">
<img class="about-picture right" src="./images/lp-background.jpg" alt="" />
</div>
</div>
</div>
How do I get the 'header' to be displayed correctly?
As it's a flex-item you need to set it's flex properties accordingly.
header {
min-height: 100vh;
width: 150px;
margin: 0;
background-color: red;
flex: 0 0 150px; /* don't grow, don't shrink, be 150px wide */
}
/*======= Container =======*/
#container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#content-wrap {
width: 100%;
}
/*======= Sāna izvēlne / header =======*/
header {
min-height: 100vh;
width: 150px;
margin: 0;
background-color: red;
flex: 0 0 150px;
}
.header-position {
width: inherit;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav {
background-color: #ffffff;
}
nav ul {
padding: 0;
margin: 0;
}
nav li,
a {
text-decoration: none;
list-style-type: none;
text-align: right;
font-size: 1em;
color: black;
}
.logo {
background: url("../images/AG.svg");
background-size: contain;
background-repeat: no-repeat;
width: 80px;
}
/*======= Banneris =======*/
.banner-container {
background-image: url("../images/lp-background.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
clear: right;
}
.banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.banner h1 {
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.4em;
border: solid 10px white;
padding: 20px 30px;
}
/*======= Par mums =======*/
#about {
width: 100%;
height: 300px;
background-color: pink;
}
#about .first,
.second {
width: 50%;
height: 100%;
display: inline-block;
}
#about .first {} #about .second {
float: right;
}
.about-picture {
height: 200px;
width: 200px;
margin: 50px 50px;
border-radius: 150px;
border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
float: right;
}
img.right {
float: right;
}
<div id="container">
<header>
<div class="header-position">
<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>
<nav>
<ul>
<li>Sākums
</li>
<li>Attēli
</li>
<li>Kontakti
</li>
<li>Par mums
</li>
</ul>
</nav>
Sazinies ar mums
</div>
</header>
<div id="content-wrap">
<div class="banner-container">
<span class="banner"><h1>Whatever</h1></span>
</div>
<div id="about">
<div class="first">
<img class="about-picture left" src="./images/lp-background.jpg" alt="" />
</div>
<div class="second">
<img class="about-picture right" src="./images/lp-background.jpg" alt="" />
</div>
</div>
</div>
Just wondering if anyone can help me to get 1st half and 2nd half on this codepen to display on the same line? I have tried display:inline; however this did not fix the issue.
http://codepen.io/EuanR/pen/BNEBvE
HTML:
<HTML>
<HEAD>
<title>Homepage</title>
</HEAD>
<HEADER>
<H1 id="landingpagelg">Header</H1>
<H2 id="landingpagesm">Sub Header</H2>
</HEADER>
<BODY>
<div class="footerwrapper">
<div class="BFS">
<P>1st half</P>
</div>
<div class="BLFS">
<P>2nd half</P>
</div>
</div>
</script>
</html>
CSS:
a {
text-decoration: none;
}
body {
background-color: #161616;
}
header {
height: 100%;
background-image: url(http://i.imgur.com/11nVLmd.jpg);
background-size: cover;
background-position: center;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
#landingpagelg {
font-family: Caviar Dreams;
font-size: 42px;
color: #FFF;
letter-spacing: 1px
}
#landingpagesm {
font-family: Caviar Dreams;
font-size: 21px;
color: #FFF
}
#CMSub {
min-width: 75px;
}
a {
color: #000;
}
a.hover {
color: 0000EE;
}
::selection {
background: #FFB870;
/*#CCCCCC*/
}
::-moz-selection {
background: #FFB870;
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
input {
width: 150px;
border: 1px solid;
border-radius: 6px;
height: 25px;
padding: 4px;
}
textarea {
border: 1px solid;
max-width: 500px;
max-height: 250px;
border-radius: 5px;
width: 250px;
height: 125px;
}
#github {
padding-right: 5px;
}
.footerwrapper {
width: 100%;
}
.BFS {
height: 150px;
width: 50%;
background-color: #161616;
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
}
.footerwrapper {
width: 100%;
display:flex;
}
Display Flex solves the issue
.footerwrapper {
width: 100%;
border: 1px solid black;
overflow: hidden;
}
.BFS {
height: 150px;
background-color: #161616;
width: 50%;
float:left; /* add this */
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
float:left; /* add this */
}
Hope this helps
If you don't want to edit your CSS, then simply add the following lines
.footerwrapper {
font-size: 0; /*Removes white space in inline-block elements*/
}
.BFS {
box-sizing: border-box;
display: inline-block;
}
.BLFS {
box-sizing: border-box;
display: inline-block;
}
Make sure you set the font-size in every element that is a child of .footerwrapper
Use
.BFS {float:left;}
.BLFS {float:right;}
Alternatively put the BLFS element first in your HTML and float it to the right. Then the .BFS{float:left;} is unnecessary since it will fill on the left anyway.