Quick question. Does transition work if I hover over a child to target another child, or one separate div with another separate div?
I can only get transition to work if I put the children in a container and hover over the parent. What are the rules to this?
Example 1 (Doesn't work):
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
h2:hover .underline {
width: 165px;
}
<body>
<h2>Hover Over Me</h2>
<div class="underline"></div>
</body>
Example 2 (Doesn't work)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
h2:hover .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
Example 3 (Works)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
.container:hover .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition:0.4s;
}
h2:hover + .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
You can check This for css selectors
Related
I have the task of compose such a block. I could make it using CSS3 position relative position absolute.
And need to compose this block using Flexbox.
What i have got it's in the bottom.If it's possible try to use it and don't write from scratch.
.item {
position: relative;
display: -webkit-flex;
display: flex;
width: 100%;
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(41,51,57,.5);
color: #37454d;
background: #fff;
}
.item_wrapper {
width: 100%;
position: relative;
}
.image-wrapper:before {
content: "";
display: block;
padding-top: 100%;
}
.item_image {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.image-area {
padding: 8px 6px 8px 8px;
width: 22.25%;
float: left;
}
.image-wrapper {
position: relative;
line-height: 0;
overflow: hidden;
}
.image-wrapper:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.image_gallery {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
display: block;
background: 0;
position: absolute;
cursor: pointer;
padding: 0;
border:0;
}
.flex-column {
height: 100%;
display: flex;
align-items: stretch;
}
.item_details {
position: relative;
width: 100%;
border-right: 1px solid #cdd0d2;
margin: 8px 0;
border-bottom: 0;
float: left;
padding: 0 8px 0 4px;
}
.item_name {
margin-bottom: 16px;
font-size: 20px;
display: inline-block;
width: 100%;
}
.name_copytext {
color: #005f81;
margin: 0;
max-width: calc(100% - 38px);
text-overflow: ellipsis;
width: 100%;
float: left;
text-align: left;
direction: ltr;
overflow: hidden;
white-space: nowrap;
}
.item_location {
overflow: hidden;
}
.details_paragraph {
padding-right: 0px;
margin-bottom: 16px;
line-height: 1.30;
overflow: hidden;
}
.item_dynamic-content {
display: block;
font-size: 12px;
padding: 0;
}
.item_deal {
display: flex;
display: -webkit-flex;
align-items: stretch;
-webkit-align-items:stretch;
padding: 8px;
width: 47%;
}
.item_best-details {
display: flex;
display: -webkit-flex;
-webkit-flex-direction:column;
flex-direction: column;
-webkit-justify-content:space-around;
justify-content: space-around;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
flex-grow:2;
-webkit-flex-grow:2;
clear: none;
float: none;
text-align: center;
width: 100%;
-webkit-order:3;
order: 3;
}
<article class="item">
<div class="item_wrapper">
<div class="image-area">
<div class="image-wrapper">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/07/6e/64/52/hyatt-regency-santa-clara.jpg" class="item_image">
<button type="button" class="image_gallery">
</button>
</div>
</div>
<div class="flex-column">
<div class="item_details">
<div class="item_name">
<h3 class="name_copytext" title="Hyatt Regency Santa Clara">Hyatt Regency Santa Clara</h3>
</div>
<div class="item_location">
<p class="details_paragraph">Santa Clara, California, USA </p>
</div>
<div class="item_review">
<div class="details_paragraph">
<em class="rating-number">
<span class="rating-number_value">Very good</span>
</em>
<span class="review_count">(2045 reviews)</span>
</div>
</div>
</div>
<section class="item_deal">
<div class="item-link">
<div class="item_best-details">
<!-- dozen blocks-->
</div>
</div>
</section>
</div>
</div>
</article>
Here is a jsfiddle
This is the box model you must follow to do it with flexbox and with a clear structure. Each area is a container.
.Card,
.Card * {
background-color: rgba(0, 0, 0, 0.05);
margin: 8px;
}
.Card {
display: flex;
min-height: 300px;
}
.Picture {
width: 200px;
display: flex;
flex-direction: column;
}
.Picture img {
flex-grow: 1;
}
.Desc {
height: 20px;
}
.Content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ContentHead {
height: 20px;
}
.ContentDetail {
flex-grow: 1;
display: flex;
}
.Details {
flex-grow: 1;
}
.Side {
flex-basis: 30%;
}
<div class="Card">
<div class="Picture">
<img src="" alt="">
<div class="Desc"></div>
</div>
<div class="Content">
<div class="ContentHead"></div>
<div class="ContentDetail">
<div class="Details"></div>
<div class="Side"></div>
</div>
</div>
</div>
With the code below I created a mobile menu button .container inside my .navigation. All this works fine so far.
However, I want that the .bars inside the mobile menu button to be vertically centered. I tried to go with vertical-align: center; but could not make it work.
What do I have to change in my code so the .bars in the mobile menu button .container get vertically centered?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
vertical-align: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
Because you are already using flexbox, add the following styles to bars:
display: flex;
justify-content: center;
flex-direction: column;
and add margin: 4% 0 for the bar1,bar2 and bar3
See demo below:
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.bar1,
.bar2,
.bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin: 4% 0;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
The easiest way would be to use display: flex; on .bars; Then flex-direction: column; and justify-content: center;
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
This will work, but the bars won't look quite right because .bar1 has a margin-top of 8%. If you only apply margin-top to .bar2 and .bar3 then it will look right.
.bar2, .bar3 {
margin-top: 8%;
}
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
}
.bar2, .bar3 {
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
You can use display:flex
.bars {
display: flex;
align-items: center;
flex-wrap: wrap;
}
I'm having trouble aligning two elements in a flex box:
What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this?
<html>
<head>
<style>
body {
margin:0;
padding:0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position:relative;
border-style: solid;
border-width: 1px;
height:36px;
padding:0;
margin:0;
background-color:black;
}
#menuContainer {
position:relative;
background-color:grey;
border-style: solid;
border-width: 1px;
padding:0;
width:96%;
height:98%;
margin: 0 auto;
display: flex;
}
#hh {
position:relative;
display:flex;
align-self: center;
font-size:14px;
width:80px;
border-style: solid;
border-width: 1px;
height:50%;
margin-left:auto;
}
#pp {
position:relative;
display:flex;
height:70%;
width:36px;
align-self: center;
justify-content: center;
margin-left: auto;
background-color:white;
border-style: solid;
border-width: 1px;
padding:0;
}
</style>
</head>
<body>
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp"> XX</div>
</div>
</body>
</html>
JUSTIFY CONTENT
You are looking for the property value flex-end used in justify-content. Also remove the margin-left: auto; as it is not needed.
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
ORDER
To change the ordering like you ask in the comments, you will use the property order. It's pretty straight forward. The order default value of flex-items is 0. You can either use negative or positive values, such as -1, -2, 1, 2 etc.
You can either set this property in your first or second item, with different values depending which you prefer to change, they will both get the same result.
Declaring it in your first item using a positive value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
order: 1;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Declaring it in the second one using a negative value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
order: -1;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Simple order change interaction:
Note: Clicking the anchor element will change every odd flex item's order to -1.
body {
margin: 0;
}
a {
font-size: 2em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -30%);
background-color: white;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
/* Default Value */
}
.flex-item {
counter-increment: flex-items;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
.flex-container:target .flex-item:nth-child(odd) {
order: -1;
}
Change Order
<section id="flex-container" class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
FURTHER EXPLANATION:
justify-content property accepts 5 different values:
flex-start, which is the default.
flex-end
center
space-between
space-around
flex-start
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-start; /* Default Value */
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
flex-end
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
center
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: center;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-between
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-between;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-around
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
SUMMARY:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
background-color: peachpuff;
display: flex;
height: calc(20vh - .5em);
justify-content: flex-start;
margin-bottom: .5em;
position: relative;
}
.flex-container:nth-child(2) {
justify-content: flex-end;
}
.flex-container:nth-child(3) {
justify-content: center;
}
.flex-container:nth-child(4) {
justify-content: space-around;
}
.flex-container:nth-child(5) {
justify-content: space-between;
}
.flex-container::after {
position: absolute;
display: flex;
content: attr(data-justify-content);
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 3em;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 20%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
color: rgba(0, 0, 0, .3);
}
<section class="flex-container" data-justify-content="flex-start">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="flex-end">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="center">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-around">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-between">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
MORE INFO:
You can find more info in these resources:
Codrops
CSS Tricks
Flexbox Cheatsheet
Stack Overflow Michael_B's Flexbox Post
Playground:
Flexbox Froggy
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.
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.