How to make footer stick to the bottom - html

I am having a problem with my footer. I am trying to force it to the bottom, but it always looks ugly.
Here is the code:
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programmer</h4>
<p class="footertext">You can thank all the crazy programming here to this guy.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Artist</h4>
<p class="footertext">All the images here are hand drawn by this man.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Designer</h4>
<p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
</center>
</div>
</div>
<div class="row">
</div>
</div>
I tried to use
<div class="footer navbar-fixed-bottom">
but in that case my text ,which is located over the footer, get overlapped by footer
Here is css I used:
#footer {
padding-top: 100px
position: absolute;
bottom: 0;
width: 100%;
/* Sets the fixed height of the footer here */
height: 280px;
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(222.png);
}
.footertext {
color: #ffffff;
}
Here is what I mean by ugly. I did try to set html and body height as 100% in css

Please show us what you mean by "looks ugly" so we can help you, because we can't really understand your issue.
I'd say the problem could be in what the parent of #footer div.

I think you only have to change position: absolute; to position: relative; or position: fixed; for the div to stay at the bottom (depending on what behaviour you exactly expect).
Side note, don't use the tag <center> because it's now deprecated, use CSS instead (text-align: center).

You are missing a semi-colon after padding-top: 100px . You can also try position:fixed instead of position:absolute. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Its <div class="footer navbar fixed-bottom">
not <div class="footer navbar-fixed-bottom">
you mistypes a -

Related

Overlapping Columns Bootstrap using Container-Fluid

Trying to build a webpage where I have half page image and other half text.
So far this is what I have, I have it working, just when I shrink the page, the text overlaps the photo.
.css file:
.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}
html file:
<div class="container-fluid">
<div class="row">
<div class="span6">
<div class="z-img">
<img src="...." width="732" height="432">
</div>
</div>
<div class="span6 text-center">
<div class="z-content">
<div class="well">
<h2> About Me: </h2>
</div>
<div>
<blockquote>
<p>............</p>
</blockquote>
</div>
</div>
</div>
</div>
I want to ensure when I shrink the page lets say on a mobile, I do not want the text overlapping the image. Also possible to have the image shrink and enlarge according to the screen size instead of having it as a static size? I do want it to cover half the page though
I have figured it out, I just had to add the class="img-responsive" tag to my photo tag.

Fix position of responsive image in responsive header, next to text

The idea of this is to have a responsive header with text and an image element, which sit on a fixed background image.
I've tried to do this with bootstrap columns, which works on desktop to come out the way I want it. On smaller devices however, the bootstrap media queries do exactly what they are supposed to do and break the columns up to be displayed below each other.
I am out of ideas for this. I know I need to fix the image element somehow to stay consistently on the bottom end of the container, but since the entire thing is responsive I have no idea how to accomplish that.
Here is what I have so far, but this is not the solution. I appreciate any suggestions.
<section class="section swatch-black section-text-shadow section-inner-shadow">
<div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left element-normal-top element-normal-bottom">
<h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
<strong>More Text </strong> </h1>
<p class="lead"> Even more text </p>
learn more
contact us </div>
<div class="col-md-6 text-right">
<img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
</div>
</div>
</div>
</section>
you can set up your own column structure. Here's an example that I made for you real quick:
http://jsfiddle.net/97wswqvr/
this will need more work obviously, depending on the rest of your header text/buttons etc... but its a good place to start
html
<header>
<div class='content col col-1-2'>
<div>
text text text
</div>
<div>
text text text
</div>
<div>
text text text
</div>
</div>
<div class='col col-1-2 img'>
<img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
</div>
</header>
css
html,body {
margin: 0;
}
header {
background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
text-align: center;
}
.content {
color: white;
padding: 40px 0;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col-1-2 {
width: 45%;
}
.img {
}
img {
width: 70%;
}

Carousel behind transparent cutout in PNG image

Having issues with what I assumed would be a simple task, maybe just need another set of eyes.
We have a banner image and on the right side is a computer monitor. the "screen" has been cut out so that portion of the banner is transparent (.PNG).
I need to place a carousel behind the cutout image, so that it gives the impression that the carousel is "playing" on the screen.
Right now I am trying to do this with Slick Carousel but if anyone else has a recommendation for a better carousel that is also responsive I'm open.
http://codepen.io/tconroy/pen/ZYRaRd
Above is a codepen of what I have so far -- The main issue I am encountering is that the slides are in front of the image content (overlapping the image), when it should be behind the image content (playing behind the banner, and just visible through the transparent "gap" in the screen).
I've used placeholder images for the slides, however those are the actual dimensions of each image we will be using. The images should be "centered" in their slide, with the background color visible. (basically the images are being overlaid onto the colored slides).
HTML
<div class="inner-wrap">
<header>
<div class="contain-to-grid">
<div class="inner-carousel-wrapper">
<div class="inner-carousel">
<div class="slide yellow">
<img class="" src="http://lorempixel.com/350/347/sports" alt="">
</div>
<div class="slide purple">
<img class="" src="http://lorempixel.com/416/347/abstract" alt="">
</div>
<div class="slide red">
<img class="" src="http://lorempixel.com/381/346/city" alt="">
</div>
<div class="slide blue">
<img class="" src="http://lorempixel.com/338/346/transport" alt="">
</div>
<div class="slide green">
<img class="" src="http://lorempixel.com/343/347/nature" alt="">
</div>
<div class="slide orange">
<img class="" src="http://lorempixel.com/361/347/cats" alt="">
</div>
</div> <!-- .inner-carousel -->
<img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
</div>
</header>
</div>
<section class="container">
Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>
SCSS
$lesson-blue: #33B2E6;
$lesson-green: #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red: #E43533;
$lesson-purple: #616373;
.inner-carousel-wrapper {
background: black;
}
.inner-carousel {
position: absolute;
float: right;
margin-left: 54.3%;
margin-top: 6.0%;
width: 45.7%;
height: 76%;
}
.inner-carousel .slide {
&.blue {background: $lesson-blue; }
&.green {background: $lesson-green;}
&.orange {background: $lesson-orange;}
&.yellow {background: $lesson-yellow;}
&.red {background: $lesson-red;}
&.purple {background: $lesson-purple;}
img {
margin: 0 auto;
padding: 6%;
width: 60%;
}
}
JS
$('.inner-carousel').slick({
accessibility: false,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
draggable: false,
slide: '.slide'
});
I'm not sure if this is an option for you or not, but you can assign an id to your background image, give it absolute positioning and then alter its z-index. Something like this should work:
HTML
<img id="bg" src="http://i.imgur.com/HodKXD4.png">
CSS
#bg {position:absolute;z-index:2;}
http://codepen.io/anon/pen/ZYRaNE
A couple things together fix this:
.contain-to-grid {
/* background: #333; */
}
.inner-carousel-wrapper {
/* background: black; */
}
.inner-carousel {
z-index: -1;
}
Demo
You'll need to adjust sizing/position a bit, but it should work otherwise.

CSS HTML Content fitting at a height between to areas

I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.
In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?

Bootstrap 3 div over responsive image [duplicate]

This question already has answers here:
Image overlay on responsive sized images bootstrap
(5 answers)
Closed 8 years ago.
I'm trying to have a full width <div> over an image, with text inside it, so that the text goes over the image itself. The grid and the image is responsive, and I can't get the <div> to be 100% of the grid.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
As you can see, I want the portfolio_desciption to be over the image, fill the width of the grid col-md-6 and have a white background.
Any suggestions on how my CSS should be composed?
tl;dr
Use position: absolute; with top: 0; on the <div> and don't forget to add position: relative; to their parent <div>s.
Solution
.portfolio_description {
position: absolute;
top: 0;
width: 100%;
background-color: white;
}
You also need a new class that you need to add to the parent elements of the <div>s that have the .portfolio_description class.
.portfolio-block {
position: relative;
}
Explanation
The MDN docs on position: relative; states:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Also, the MDN docs on top states:
When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
So you need absolute positioning and because that is positioned relatively to the nearest non static ancestor, you need to make the parent elements relatively positioned, because that positioning is not static and will keep the element flow intact. Then just make sure the top property is set to 0 so there is no distance between the <div> and its containing block.
Demo
In this example I used a semi-transparent background to prove that it is over the image.
.portfolio_description {
position:absolute;
width:100%;
top:0;
background-color:rgba(255, 255, 255, 0.5);
}
.portfolio-block {
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
Got it working with the following CSS:
.portfolio_description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
You'll have to use absolute positioning, something like this
.col-md-6 {
position: relative;
}
. portfolio_description{
position: absolute;
width: 100%;
bottom: 0px;
hieght: 60px;
}
You should use a background image instead of inline images, adjust your code like below then add your image as a background image in your CSS, this gives you a lot more flexibility. this way you can absolutely position everything inside your #portfolio1 div
<div class="col-md-6">
<div id="portfolio1">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p>
<span class="read_more"></span>
</div>
</div>
</div>
add the style=" padding-left: 0px ; padding-right: 0px;" in the col-md-6 or in whichever column div u are adding your image , the padding will fix the image entirely in the column without any before and after gap