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>
Related
I am relatively new to css/html.
I have been browsing about this issue for a while, but did not find a solution.
The issue is that, if I use the below code (that uses Bulma), the clickable area when hovering on img3.jpg is the entire block starting at the first <div class="columns is-multiline">. I suspect the issue might be some clash between Bulma is-column / is-multiline, and the overlay CSS definition I provided?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p align="left" style="font-size:120%;">
some content ...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
try this document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<title>Document</title>
<style>
body {
padding-top: 2em;
}
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
.container {
position: relative;
width: 100%;
}
.columns {
display: flex;
}
.image {
display: block;
width: 100%;
max-width: 320px;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.test {
position: absolute;
left: 0;
border-bottom: green solid;
font-size: .5em;
font-weight: bold;
}
.test-top {
top: 0;
}
.test-bottom {
bottom: 0;
}
</style>
</head>
<body>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p style="font-size:120%; text-align:left">
some content ...
</p>
</div>
<div class="columns is-multiline">
<p class="test test-top">start columns / is-multiline</p>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<div class="container">
<img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
<div class="overlay">
<p class="test test-top">star overlay</p>
<div class="text">Hello World</div>
<p class="test test-bottom">end overlay</p>
</div>
</div>
</div>
<p class="test test-bottom">end columns / is-multiline</p>
</div>
<p style="font-size:120%; text-align:left">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
</body>
</html>
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;
}
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
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/