I am working to make video section look like something similar to below design
i am facing two design breaks in the right side
thumbnail doesn't fill the "vp-hqdefault-w" it shows part of image and rest of it is hidden.
second i am not able to align video title next to thumbnail as show in image
<div class="container">
<div class="row content">
<div class="col-md-7 col-sm-6">
<div class="active-iframe-wrapper video-embed-container">
<iframe id='activeIFrame' class='active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1" ></iframe>
</div>
<p>Title of the video</p>
</div>
<div class="col-md-5 col-sm-6">
<a class="" href="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/SCRUg5s389Q/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road One</h3>
</div>
</a>
<a class="" href="http://www.youtube.com/embed/QThP5kDUJJ0?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/QThP5kDUJJ0/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road Two</h3>
</div>
</a>
<a class="" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
</div>
</div>
Codepen link
I am trying to make it responsive to it doesnt break
You are having this issue because you didn't add float:left property to the video thumnail div. Try this code.
.vp-video-img-w {
position: relative;
overflow: hidden;
float: left;
margin-right: 10px;
width: 30%;
}
Try below code:
.header {
padding-top: 20px;
padding-bottom: 20px;
}
.video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.video-embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-item-w{
background-color:#ccc;
}
.vp-hqdefault-w {
max-height: 80px;
max-width: 120px;
overflow: hidden;
position: relative;
width:30%;
}
.vp-video-img-w {
position: relative;
width: 30%;
overflow: hidden;
float: left;
}
.vp-video-details{
width:70%;
float:left;
}
.vp-video-img-w img {
max-width: 100%;
}
.video-thumbnail:after {
content: '';
display: block;
clear:both;
}
.footer {
border-top: 1px solid #444;
padding-top: 20px;
margin-top: 20px;
color: #999
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row content">
<div class="col-md-7 col-sm-6">
<div class="active-iframe-wrapper video-embed-container">
<iframe id='activeIFrame' class='active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1" ></iframe>
</div>
<p>Title of the video</p>
</div>
<div class="col-md-5 col-sm-6">
<a class="video-thumbnail" href="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/SCRUg5s389Q/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road One</h3>
</div>
</a>
<a class="video-thumbnail" href="http://www.youtube.com/embed/QThP5kDUJJ0?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/QThP5kDUJJ0/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road Two</h3>
</div>
</a>
<a class="video-thumbnail" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="vp-video-img-w vp-hqdefault-w">
<img src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="vp-video-details">
<h3 class="video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
</div>
</div>
Change
.vp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
}
to
.vp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float: left;
}
Related
Hello,
As you can see from the photo above, I am trying to achieve a grid system. First grid is 3 images, second grid is a column, and third grid is a large image floated to the right of the 2nd grid. You can see this photo on my portfolio website: http://www.irwinlitvak.com
I have three images in the first grid that have a width of 31.33% and the first and second img have a margin-right of 3.005% to full up the container width.
In the next grid (grid-2), I have a two of my images floated left in a column and (grid-2-of-3) is floated right with a width of 65.556%.
I would like the top and bottom of the larger image to take up the full height of the grid, so the bottom of the big image aligns with the self-destructing box.
Here is the HTML & CSS:
.projects-grid {
margin: 100px auto 0;
width: 90%;
}
.projects-grid .title {
margin-bottom: 20px;
text-align: center;
}
.projects-grid h1 {
display: inline-block;
font-family: "Montserrat";
}
.grid-1 {
margin-bottom: 4%;
}
.grid-1-of-3 {
position: relative;
width: 31.33%;
float: left;
overflow: hidden;
}
.grid-2-of-3 {
position: relative;
width: 65.556%;
float: right;
}
.grid-1-of-3:first-child,
.grid-1-of-3:nth-child(2) {
margin-right: 3.005%;
}
.grid-3 {
position: relative;
display: inline-block;
width: 33%;
margin-bottom: 60px;
vertical-align: bottom;
}
.grid-5 {
position: relative;
display: inline-block;
width: 20%;
margin-bottom: 60px;
vertical-align: bottom;
}
.box-1 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-1-of-3:first-child {
margin-left: 0;
}
.grid-1-of-3:last-child {
margin-right: 0;
}
.big-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-2 {
width: 31.33%;
float: left;
}
.grid-2 .box-cont {
width: 100%;
}
.grid-2 .box-cont:first-child {
margin-bottom: 4%;
}
.grid-2 .box-cont {
position: relative;
}
<section class="projects-grid clearfix">
<div class="row title">
<h2>Projects</h2>
</div>
<div class="grid-1 clearfix">
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic">
</a>
<a href="https://budget-app-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Budget-App-X</h3>
<p>Manage your incomes and expenses in a fun and easy app.</p>
</div>
</div>
</a>
</div>
<h3>
Budget-App-X
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/dice-game-x-ps.jpg" alt="dice-game">
</a>
<a href="https://dice-game-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Dice-Game</h3>
<p>Roll the dice. Test your luck and see who racks the most points.</p>
</div>
</div>
</a>
</div>
<h3>
Dice-Game
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer">
</a>
<a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Pomodoro-Timer</h3>
<p>A quick and easy solution to being productive. Set the time and get things done.</p>
</div>
</div>
</a>
</div>
<h3>
Pomodoro-Timer
</h3>
</div>
</div>
<div class="grid-2 clearfix">
<div class="box-cont">
<div class="box-1">
<a href="">
<img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me">
</a>
<a href="http://www.cucumberme.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>CucumberMe</h3>
<p>CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.<br><br> Go and send one today! </p>
</div>
</div>
</a>
</div>
<h3>
CucumberMe
</h3>
</div>
<div class="box-cont">
<div class="box-1">
<a href="#">
<img src="/assets/self-destruct-x-ps.jpg" alt="to do list">
</a>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Self Destructing To-Do-List</h3>
<p>A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
Self Destructing To-Do-List
</a>
</h3>
</div>
</div>
<div class="grid-2-of-3 clearfix">
<div class="box-cont">
<div class="big-box">
<a href="#">
<img src="/assets/omnifood-x-ps.jpg" alt="omnifood">
</a>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
<div class="box-overlay big-overlay">
<div class="text-overlay">
<h3>Omnifood</h3>
<p>My version of the food app Blue Apron. Take a look! </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
Omnifood
</a>
</h3>
</div>
</div>
</section>
What you can do is as I show in the snippet below. You have a container for all your divs you want at the same height, which you give a set height. You then give the items on the left a container (with height: 100%) and make a div for the right item (height: 100%).
By doing this, you have a container for the items on the left, so you can make them, say, 50% each, and you have a right item that's the same height as the container on the left.
In order to make an image fit a div, either use background-size: cover or something similar. height:100%; width: auto also works for responsive images.
Hope it helps.
.outer {
background: blue;
width: 600px;
height: 200px;
}
.leftwrap {
width: 30%;
float: left;
height: 100%;
}
.left1 {
background: purple;
width: 100%;
height: 50%;
}
.left2 {
background: orange;
width: 100%;
height: 50%;
}
.right {
background: teal;
height: 100%;
width: 70%;
float: left;
}
/** New code **/
.image {
height: 80%;
width: auto;
border: 1px solid black;
}
.imagetext {
color: white;
text-align: center;
border: 1px solid black;
}
.left {
box-sizing: border-box;
padding-bottom: 30px;
}
<div class='outer'>
<div class='leftwrap'>
<div class='left left1'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
<div class='left left2'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
</div>
<div class='right'>3</div>
</div>
I have been trying to align four images that are to be displayed as the pic below. But I have been getting spaces after each row. How can I remove them?
Also is there a way that I can add a small thumbnail of the example image in the middle where all four images meet?
Along with this I am also trying to add captions over the images. Currently they are displayed below the images. How can I add them over the images?
<!DOCTYPE html>
<html>
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080">
<div>
<div class="transbox" style="width: 50%; height=50%; float: left;">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" />
<div style=" text-align: center; vertical-align: middle;">
<center>
<font color="Black" size="+2">correct one</font>
</center>
</div>
</div>
</div>
<div>
<div class="transbox" style="width: 50%; height=50%; float: right;">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
</div>
</div>
</div></body>
</html>
JSFiddle link:
https://jsfiddle.net/8bL4qqr8/
body{
background-color:"ffffff";
}
.img-grid{
width: 50%;
float:left;
height:400px;
}
.img-grid img{
width :100%;
height:400px;
}
.caption{
display :none;
}
.img-grid:hover .caption{
text-align: center;
display:block;
background: #000;
color: #fff;
font-size:16px;
font-weight: bold;
margin-top: -100px;
padding: 10px;
}
<div class="transbox img-grid">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="caption">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
You have a lot of deprecated stuff in your HTML. Don't use all this link, text stuff in your body. And not <center> or <font> otherwise. I made a simple snippet of the stuff your wanted with flexbox. I modified your code a bit. You can find browser support for flexbox here: http://caniuse.com/#search=flexbox
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.transbox {
position: relative;
flex: 1 0 50%;
width: 50%;
margin: 0;
padding: 0;
}
.transbox .thumbnail {
display: block;
position: absolute;
width: 100px;
height: 75px;
}
.transbox:nth-of-type(1) .thumbnail {
bottom: 0;
right: 0;
}
.transbox:nth-of-type(2) .thumbnail {
bottom: 0;
left: 0;
}
.transbox:nth-of-type(3) .thumbnail {
top: 0;
right: 0;
}
.transbox:nth-of-type(4) .thumbnail {
top: 0;
left: 0;
}
.transbox img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.transbox .text {
position: absolute;
width: 100%;
text-align: center;
color: #FFFFFF;
}
<div class="wrapper">
<div class="transbox">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="thumbnail">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="thumbnail">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
</div>
<div class="text">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="thumbnail">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="thumbnail">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
</div>
Hope this is what you were looking for
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
border: 1px solid #333;
overflow: hidden;
width: 50%;
height: 50%
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
color: white;
margin: 0;
padding: 20px;
}
html, body { height: 100%; padding: 0; margin: 0; }
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi">
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Construction/Interior Design - Build to Live
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Real Estate - Buy and Sell Potential Properties
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Information Technology - Handling Potential IT Projects
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Venture Capital - Finance for High Growth Potential
</h1>
</div>
</div>
<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
</body>
</html>
I'm trying to create a footer class however it seems to be at the bottom of my .body-wrap class as opposed to the actual page.
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
I'm also using a bootstrap sidebar template. Found here: http://startbootstrap.com/template-overviews/simple-sidebar/
Help would be appreciated.
Please try to add this code:
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
}
Use position:fixed with bottom:0 it will remain stable at bottom of page
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
bottom:0;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
You would need position: fixed and bottom: 0 on your footer-wrap. Check the update below!
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
width:100%;
border: 1px black solid;
position: absolute;
bottom:0px;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
Add width and height to your .body-wrap and width to footer too. Changes footer position as in below codes.
.body-wrap {
width:200px;
height: 200px;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
background:#111;
color:#fff;
}
.footer-wrap {
border: 1px black solid;
z-index: 9;
height: 3em;
text-align: center;
background:#f22;
bottom:0;
position:absolute;
width:100%;
}
How would I make it so the banners along the top and bottom of this page (http://i.imgur.com/SxjbCJV.jpg) are instead at both sides of the page?
I currently have them both fixed to the top and bottom of the page:
#header {
position: fixed;
top: 0;
width: 100%;
height: 66px;
z-index: 999;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 66px;
z-index: 999;
}
And the HTML:
<body>
<div id="wrapper">
<a href="project.html">
<div id="header">
<button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i>
</button>
</div>
</a>
<div id="main">
<div id="splash">
<div id="name">
<h1 class="wow animated flipInX">Max Wilson</h1>
</div>
<div id="profile">
<img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s">
</div>
<div id="subtext">
<h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2>
</div>
</div>
</div>
</div>
<a href="project.html">
<div id="footer">
<button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i>
</button>
</div>
</a>
Have you tried floating the header and footer to the left?
For example:
#header {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#footer {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#wrapper{ text-align: center;
margin-left: auto;
margin-right: auto;
}
#main{ width: 800px;
float:left;
}
Here's a simple and interesting method: giving the body display: flex and the content flex-grow: 1 so it occupies all the available space and pins the other elements to either side.
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
<div id="content">
<p>asdfasdf</p>
</div>
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
body {
display: flex;
}
.side, #content {
padding: 10px;
}
.side {
background: blue;
}
#content {
flex-grow: 1;
background: grey;
}
https://jsfiddle.net/JackHasaKeyboard/rz86xwxh/2/
HTML
<li class="post">
<div class="row">
<div class="col-xs-12 col-sm-6 image">
<div class="details-hover">
Read more
</div>
<div class="image-wrapper">
<img src="images/3245675.jpg" alt="image" />
</div>
</div>
<div class="col-xs-12 col-sm-6 description">
<div class="details">
<div class="date-and-likes">
<div class="date">
<i class="fa fa-caret-down"></i>
<p class="">27 Oct</p>
</div>
<div class="likes vertical-align">
<i class="icon-heart"></i>
<p>12</p>
</div>
</div>
<h3>
Service & Support on the iPhone 6. reviews and guide
</h3>
<div class="author-and-coments">
<div class="author">
<p>By Admin</p>
</div>
<div class="comments">
<i class="icon-bubbles"></i>
<p>2 comments</p>
</div>
</div>
</div>
<div class="preview">
<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray...</p>
<div class="read-more">
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-right"></i>
Read More
</div>
</div>
</div>
</div>
</li>
CSS
.post-section .post {
margin-bottom: 60px;
display: table;
}
.post-section .post .image,
.post-section .post .description {
padding: 0;
float: none;
display: table-cell;
vertical-align: top;
}
.post-section .post .description {
padding-bottom: 60px;
}
.post-section .post .row {
padding: 0 15px;
}
.post-section .post .image {
position: relative;
}
.post-section .image-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
}
.post-section .post .image img {
height: 100%;
}
.post-section .post .image .details-hover:hover {
opacity: 1;
}
.post-section .post .image .details-hover {
z-index: 33;
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
}
I need to create a post list with an image on the left side and the content on the right. The problem is that Chrome, Opera and Firefox are rendering this code as needed but IE does not.
Here are some pictures.
On Your:
<div class="details-hover" style="border: 1px solid blue; border-image:none;"<...</div
You need to set the value of height: 100%; in Internet explorer.