With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers - there is a big difference.
Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.
Ironically, the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.
See this plunkr for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.
Problem:
(Thanks Softlayer - for the graphics)
Desired Solution:
Of course the footer should be responsive and cross-browser friendly as well...
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.
But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.
Style CSS:
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches (where the height of the footer often changes at different break points). The simplest responsive sticky footer solution I've seen involves using display: table on a top-level container, e.g.:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
The best way is to do the following:
HTML:Sticky Footer
CSS: CSS for Sticky Footer
HTML Code Sample:
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS Code Sample:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Another little tweak might make it more perfect (depends on your project), so it will not affect footer on mobile views.
#media (max-width:768px){ .footer{position:absolute;width:100%;} }
#media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
I've been searching for a simple way to make the sticky footer works.
I just applied a class="navbar-fixed-bottom" and it worked instantly
Only thing to keep in mind it's to adjust the settings of the footer for mobile devices.
Cheers!
For those who are searching for a light answer, you can get a simple working example from here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Just play with the body's margin-bottom for adding space between the content and footer.
I will elaborate on what robodo said in one of the comments above, a really quick and good looking and what is more important, responsive (not fixed height) approach that does not involve any hacks is to use flexbox. If you're not limited by browsers support it's a great solution.
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Browser support can be checked here: http://caniuse.com/#feat=flexbox
More common problem solutions using flexbox: https://github.com/philipwalton/solved-by-flexbox
Not sure what you have tried so far, but its pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Since it's in bootstrap 3, the site will be using jQuery. So the solution could also be the following, instead of trying to play with complex CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
A different take on it, hope it helps.
Kind regards.
easily set
position:absolute;
bottom:0;
width:100%;
to your .footer
just do it
In case your html has the (rough) structure:
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
then the simplest css that fixes footer to the bottom of your screen is
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... where the height of the footer is 80px. calc calculates the height of the wrapper to be equal to the window's height minus the height of the footer (80px) which is out of the .wrapper
What worked for me was adding the position relative to the html tag.
html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Related
Finally got my list working and staying together on one line, but now that the solution I found was that I can't use a % for width, I can't make the whole navigation bar shrink when I change the window size. Is this something to do with li/ul that prevents shrinking down?
I thought that adding a div with the same shrinking features as the logo would work, but that doesn't seem to do much at all. I've been working on this project for a little while now, and it's pretty annoying that this one thing is the only issue left. Once this is done, I can start flipping out the images you see that are all the same in the gif and create other pages.
Note that my website is being used to represent an essay I wrote on animal crossing, haha.
Thanks for any help y'all recommend!
See gif example below (logo shrinks fine, list does not.):
css:
body {
background-image: url("repeatbg.gif");
background-repeat: repeat;
}
.taskbarimages {
height: 50px;
margin-right: 10px;
}
#title {
width: 30%;
height: 30%;
margin-left: 20%;
}
.toppage {
margin-left: 20%;
}
.shinktofit {
width: 30%;
height: 30%;
}
ul {
list-style-type: none;
white-space: nowrap;
}
li {
display: inline-block;
margin: 0 -1px;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexcss.css">
<meta charset="utf-8"/>
</head>
<body>
<!-- TOP HEADER -->
<!-- top banner -->
<div class="toppage">
<!-- Animal Crossing Logo DIV -->
<div>
<img src="images/animalcrossinglogo.png" alt="Animal Crossing Logo" id="title"/>
</div>
<div class="shinktofit">
<ul>
<li>
<a href="link1.html">
<img src="images/homepagebutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
There are several ways to do it.
1)Instead of % and pixels, use vw(view width) a unit which is calculated on viewport and add min width to the li.
Eg.
/* Change the unit values as per your project */
.li{
width : 10vh;
min-width : 100px;
}
.taskbarimages{
Width : 100%;
}
2)Use media queries and set height for different screen sizes.
Eg.
#media(700px){
.li{
Width : 150px;
}
}
3)Use frameworks like bootstrap,bulma,skeleton.
you can simply use bootstrap and in bootstrap there are div classes that can use with different window sizes. Ex- There are div classes like "col-lg" for large screens, "col-md" for medium size sccreens and "col-sm" and "col-xs" for small displays. And in your html head you can simply use this line below.
<meta name="viewport" content="width=device-width,initial-scale=1">
You can go through this documentation.
https://getbootstrap.com/docs/4.1/layout/grid/
When you use above things, you dont have to worry about window being responsive.
The problem is that you are using images as your links, and images by default are not responsive. Giving .taskbarimages a width of 100% and a height of auto should solve your problem.
Since you have the height set at 50px that would make it smush weird at smaller sizes. Giving it a max height instead would help prevent this, and keep them from getting too huge.
You might need to play around with spacing and what not, but that will at lease make them scale with their container.
.taskbarimages {
width: 100%;
height: auto;
max-height: 50px;
margin-right: 10px;
}
change to this..
.taskbarimages {
height: auto;
margin-right: 10px;
width: 50%;
}
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:
body
{
margin: 0 0 200px; //Same height of the footer
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
I use:
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?
Try this code....
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
HTML
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
This jsfiddle I am creating based on your html.
This is work as responsive, I am not seen any issue as you tell.
I think may be the issue with height:200px , just remove and check.
Still you have issue , update the jsfiddle.
You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
/*
This height just to show that the footer stays at the
bottom of the page even when scrolling all the way down.
*/
height:2000px;
}
footer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
</style>
</head>
<body>
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
</body>
</html>
Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).
I hope this helps :)
I like flexbox. CSS tricks - Guide to Flexbox
Try this:
main {
height: 95vh;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center; }
header,
footer { flex: 0 1 auto; }
article { flex: 10 1 auto; }
<main>
<header>Title Here</header>
<article>Main Article</article>
<footer>Copyright and Contact Me</footer>
</main>
Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
And the CSS:
html,
body {height: 100%;}
body {display: table; width: 100%;}
.page-row {display: table-row; height: 1px;}
.page-row-expanded {height: 100%;}
Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.
http://jsfiddle.net/RyanHell078/MgcDU/6511/
I am working through my first project using Twitter's Bootsrap. My frontend and CSS skills are fledgling and I am working on understanding CSS and responsive layouts better. I have tried to understand why my H2 classes are not separated when viewing on a smaller display, but they are fine when viewing on a full desktop view.
I like Bootstrap overall, but I am still stuck. I have tried multiple remedies and searched high and low and I am still unable to determine an exact cause or better way to implement the titles for these image divs.
My project is to create a gallery site with 6 image tiles on the homepage (index.html). I will be adding some JavaScript, modals, and tooltips etc later. For now I need to get my layout sharp and working properly.
I decided to use a fluid layout. I created a 'fluid container', then filled it with some rows and spans.My code looks like this:
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Gallery Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- My Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!-- responsive fallbacks for apple and ie -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<!-- Navigation -->
<style type="text/css">
body { background: black; }
</style>
<!-- fluid container start -->
<div class="container-fluid">
<div class="row-fluid">
<!-- horizontal bar top of body -->
<div class="span12"><a class="brand" href="index.html">
<img src="/assets/images/logo.png"></a>
<div class="wrapper"><h1><br><p style="color:white;margin-left:20px;">
Welcome to my Gallery Site</p></h1>
</div>
<!-- navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
</a> My Gallery 2013
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
Artist
</li>
<li>
Art News
</li>
<li>
Commissions
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Gallaries<br></a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider">
</li>
<li class="nav-header">
contact me
</li>
<li>
<div>
email me
<strong>my phone number here</strong>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
resources
</li>
<li class="divider-vertical">
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Galleries
</a>
<ul class="dropdown-menu">
<li>
action
</li>
<li>
another action
</li>
<li>
something else here
</li>
<li class="divider">
</li>
<li>
separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<body>
<!-- Main Body Container →
<div class="container-fluid">
<div class="row-fluid">
<!-- span for music -->
<div class="span4">
<div class="image">
<img src="assets/images/music.jpg" alt="music" />
<h2 class="music">music</h2>
</div>
</div>
<!-- end of span for music -->
<!-- span for bio -->
<div class="span4">
<div class="image">
<img src="assets/images/about.jpg" alt="artist biography" />
<h2 class="music">bio</h2>
</div>
</div>
<!-- end of span for bio -->
<!-- span for new art -->
<div class="span4">
<div class="image">
<img src="assets/images/newart.jpg" alt="new art" />
<h2 class="illuminatedanddecor">new art</h2>
</div>
</div><!-- end of span for new art -->
</div><!-- end row fluid -->
<!-- /////////////////// Second tile content row //////////////////////// -->
<div class="row-fluid">
<!-- span for illuminated & decor -->
<div class="span4">
<div class="image">
<img src="assets/images/illumanddecor.jpg" alt="illuminated and decor art" />
<h2 class="illuminatedanddecor">illuminated & decor</h2>
</div>
</div>
<!-- end of span for illuminated & decor -->
<!-- span for commissions -->
<div class="span4">
<div class="image">
<img src="assets/images/commissions.jpg" alt="commissions" />
<h2 class="illuminatedanddecor">commissions</h2>
</div>
</div>
<!-- end of span for commissions -->
<!-- span for ceramics -->
<div class="span4">
<div class="image">
<img src="assets/images/ceramics.jpg" alt="ceramics" />
<h2 class="music">ceramics</h2>
</div>
</div>
<!-- end of span for ceramics -->
</div><!-- end row fluid -->
</div> <!-- /end container fluid-->
</body>
</html>
// My Custom Style Sheet //
/* Footer Border Top */
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:3px;
margin-top:10px;
margin-bottom:10px;
}
body {
max-width:950px;
background-color:black;
margin: 0 auto;
font color: white;
}
/* element blocks */
#container
{
height:100%;
width:auto;
position:relative;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
/* custom h2's for each image tile (div) header */
/* music heading */
H2.music {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* bio heading */
H2.bio {
background:rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* new art heading */
H2.newart {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* illuminated and decor */
H2.illuminatedanddecor {
background: rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* commissions heading */
H2.commissions {
background:rgba(109, 255, 36, .75);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* ceramics heading */
H2.ceramics {
background: rgba(2, 6, 143, 0.5);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* end custom headers for tiles */
.wrapper {
background-image: url(http://nwtronix.com/word/assets/images/navbartile.jpg);
background-repeat: repeat-x;
background-size: height="100%" width="auto";
width: 100%;
height: 100%;
}
/* header */
h1 {
font-family: 'Satisfy', cursive;
font-color: '#E5E4E2';
}
/* Copyright */
copyright {
font-color: '#333333';
}
/* Bar Background for H2's */
.bar {
height: 22px;
padding-top: opx;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
background: black;
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
margin-top: 5.0em;
}
p {
margin-left: 20px;
}
For now I have laid out a responsive theme. I created a fluid container. Inside of the fluid-container I created a row fluid, inside of which are 3 span-4’s. There are two rows of these span4’s inside one single container.
I am looking for help with understanding what I am doing wrong with CSS regarding the H2 classes here.
What I did was create some h2 alternatives for each image tile (div). The H2’s define the way I want each title’s title to be. Since the tile’s titles will be on varying background images, I think I need to be able to uniquely position the titles depending on each image. I hoped to use some background opacities to help the titles pop out a bit more from their background images.
My understanding is a custom h2 selector will allow me to create unique styles for any div that I select the custom h2 style inside of. Why the h2 styles are all staying linked when viewing on a small screen is stumping me.
Why are my H2’s all clustered on one single image tile div, when I view in a small display? What am I missing or messing up. I appreciate any and all help and will +1 the best answer.
Thank you
I have the following code
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
<div id="login_container">
<form method="post" id="login_form">
<table>login form</table>
</form>
<form method="post" id="create_account_form">
<table>create account form</table>
</form>
</div>
</div>
<div id="content">
content here
</div>
The header is about 60px tall and 960px wide, centered in the browser window and sticking to the top of the viewport. When the user clicks on "Login" the #login_container reveals itself. However, I want to position it aligned right with the header row, not aligned to the right of the viewport. I can do that by not using 'position: absolute' when styling #login_container, however, then the login form gets cut-off because the containing #header div is not tall enough. In other words, I want the #login_container aligned with the right edge of #header, but laid on top of #content, if any.
You could either set
#header {
position: relative;
height: 60px;
}
#login_container {
position: absolute;
right: 0;
top: 60px; /* equal to #header height, if it's not fixed, you should retrieve it dynamically via jQuery */
}
and then dynamically retrieve #content's size and apply it to #login_container.
Otherwise, and maybe even better, you could wrap the whole code in a #container div, set its width to whatever width you wish the site to have, set it centered, then move #login_container from inside #header to immediately after it and with absolute position. You will have a cleaner css code and less meddling to do with jQuery (just setting login_container's height).. so it should be like this (if I'm not missing anything):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#login_container {
position: absolute;
right: 0;
width: 100%;
z-index: 10;
}
#content {
position: relative;
z-index: 0;
}
</style>
<!--[if lte IE 6]><style type="text/css"></style><![endif]-->
</head>
<body>
<div id="container">
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
</div>
<div id="login_container">
<form method="post" id="login_form">
<p>login form</p>
</form>
<form method="post" id="create_account_form">
<p>create account form</p>
</form>
</div>
<div id="content">
content here
</div>
</div>
</body>
</html>
Give it a try and let me know if you still got problems!