I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}
A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.
Related
I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
https://jsfiddle.net/b0gdpmjw/
image with caption
image with caption and pop up description
Position: Absolute; and flexbox structure, will do what you want.
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_positioning.asp
the solution is to specify the position from left for .text.
(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)
figcaption {
color: white;
font-style: oblique;
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.column1 {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
p {
color: black; /* changed to black, so you can see the text */
font: 25px Sulphur Point, sans-serif;
}
.text {
position: absolute;
bottom: 0;
/* right: 0;*/
left: 0; /* here */
width: 200px;
height: 0;
text-align: center;
transition: height 0.7s ease-out;
}
.column1:hover>.text {
height: 150px;
}
.column1 {
float: left;
width: 33.33%;
padding: 5px;
margin-bottom: 50px;
}
/* Clearfix (clear floats) */
.row1::after {
content: "";
clear: both;
display: table;
margin-bottom: 50px;
}
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.
This is how it should look like
.wrapper {
width: 100%;
display: flex;
}
.card{
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
}
.image {
margin-top: 20px;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>
You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.
Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks
.wrapper {
width: 100%;
display: flex;
}
.card {
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
display: flex;
flex-direction: column;
}
.title {
flex: 1;
}
.image {
margin-top: auto;
}
.head {
display: flex;
flex: 1;
flex-direction: column;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>
I am using the minimal template in Shopify and would like to recreate this image attached. I have tried researching for similar examples but can't seem to find anything. How do I go about creating this image? How do I get an image behind a menu?
Any links or documents to achieving image would really help.
Try to break down the design to work out it's constituent parts. You want a background image and an overlay with product cards. You want to position the overlay on top of the picture you do this by applying position:relative to the parent and position:absolute to the child so it will be positioned within it's parent. Then apply transform: translate() to translate the overlay dependant on it's size to achieve the offset on the right hand side.
Here's a pen : https://codepen.io/NeilWkz/pen/qgRMyW
<div class="img-hero-with-menu-overlay">
<div class="left-img">
</div>
<div class="overlay">
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 1</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 2</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</div>
</div>
The CSS
img-hero-with-menu-overlay {
position: relative;
background-color: #bcbdc0;
width: 100%;
display: block;
}
.left-img {
height: 100vh;
display: block;
width: 75%;
background: url("https://www.llialighting.com/Content/files/ProductImages/v_06f3_angled448253599.png")
no-repeat center center;
background-size: cover;
}
.overlay {
position: absolute;
right: 0;
top: 50%;
transform: translate(-12.5%, -50%);
width: 40%;
}
.product-card {
display: flex;
margin-bottom: 1.5rem;
}
.info {
padding: 1.5rem;
}
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.