I'd like to use Bootstrap's .container property to format my site, not .container-fluid, as I want the width limited at certain viewports. I also would like to have half the (desktop) site static, filling the left half of the window. I can make this happen, but when I use position:fixed; the col-md-6 adopts 50% of the full width of the viewport, not of the .container, and my content extends under the right half, as you can see where I've made the opacity of the white background less.
How do I make the left half of my responsive content fixed, while still maintaining width properties of .container?
<!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">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.leftside {
background-image: url("http://studiotierney.com/studiotierneycom/sample/images/leftside-BG.jpg");
background-size:cover;
background-position:50% 50%;
padding:0;
}
#media (max-width:991px) {
.leftside {
height:800px;
color:white;
padding:0;
}
.bluebg {
position:absolute;
width:100%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:800px;
}
}
#media (min-width:992px) {
.leftside {
position:fixed;
height:100%;
color:white;
overflow:hidden;
padding:0;
}
.bluebg {
position:fixed;
width:50%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:100%;
}
}
.logo {
text-align:center;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container bluebg"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 leftside">
<div class="row">
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
<div class="col-xs-8 logo">
<img src="http://studiotierney.com/studiotierneycom/sample/images/sampleLogo.png" class="img-responsive" alt="Sample Logo" style="margin:auto;" />
</div>
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-6" style="background-color:white;height:4000px; opacity:.8;">Scroll Content</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>
http://studiotierney.com/studiotierneycom/sample/container-sample.html
Make column fixed position in bootstrap
Related
Code sandbox:
https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0
How to fill image to 100% height of the parent div? Ratio width: height should stay the same.
Here is a possible solution for your question I hope it can help
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<style>
html,
body {
height: 100%;
}
.custom-container {
position: relative;
max-width: 800px;
max-height: 400px;
width: 70%;
height: 60%;
border: 2px solid red;
}
.mid {
border: 2px solid green;
}
.flex-grow-1 {
position: relative;
min-height: 100px;
max-height: 100%;
}
.img-container {
position: relative;
height: 100%;
}
.flex-grow-1,
.img-container,
img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
div>img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1">
<div class="img-container">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1"
alt="img" />
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
You want the img to fill the height of its container which has class .img-container.
At the moment you have set the width and height of the img element to 100px. This gives a small image and one that may be distorted if the original is not square.
To make the image fill the full height but keep its original aspect ratio replace the .img-container img CSS settings with:
.img-container img {
height: 100%;
width: auto;
}
This may not be what you want if some of your images are more landscape than portrait for example. Depending on the image aspect ratios compared to the container's you may get the image cut off at the sides.
If you want to ensure that you always show exactly the whole image then investigate object-fit: contain This may give you white space either top and bottom or at the sides if the ratios don't match.
If you want to always fill the container, but without image distorion then investigate object-fit: cover. This will cut off top and bottom or the sides if it has to. You will need also to look at positioning, often center will do what is needed but may not work for all your images.
This is correct answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I see that this question has been asked before but with different elements used. I want the balance of space that is left (less header and footer space) to have the image smack in the middle no matter the size of the viewer's screen / browser.
I've tried sooooo many codes that I've read here but always either
a. something becomes messed up on the page and/or
b. the image still isn't vertically centered on the page itself (unless the page itself doesn't contain all my bits) though fixes center it in the middle of a space allocated but that space isn't centered vertically on the page.
EDIT NOTE: The answers below by roopa only resolved the Footer issue that I had included in this post as vertically centered image fixes I tried messed it up too.
EDIT 2: I have found the solution and have posted it as an Answer.
Thank you.
Here are the current codes: http://jsbin.com/vazevamile/edit?html,output
And a Stack Snippet:
/* chrome android to show background-image */
html{
height:100%;
min-height:100%;
}
body {
overflow-x: hidden;
padding-top: 50px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
/* chrome android to show background-image */
min-height:100%;
/* .end */
/*keep footer at bottom*/
height:100%;
margin:0; /* for footer*/
/* .end*/
padding: 0 2em; /* top, right, bottom, and left*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
background-color: #B4A890;
background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
background-position:absolute;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* CSSReset.com - How To Keep Footer At Bottom of Page with CSS
* http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/*/
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:0px;
}
}
#content {
position:relative;
padding:50px 0;
/*background-color:black; - for testing*/
}
/* orginal, before footer background fix:
#content {
padding:50px; /*padding for navbar at the top*/
/* padding-bottom:100px; /*value must be equal to or greater than the height of #footer*/
/*background-color:black; - for testing*/
/*}*/
#footer {
background:#000000;
width:100%;
min-height:100px; /*for footer background fix*/
/*height:100px; - orginal before footer background fix*/
position:absolute;
bottom:0;
left:0;
font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="en">
<head>
<!-- MenuBar - below 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ./3 meta tags -->
<!-- MenuBar - Bootstrap Core CSS (ddmenu.js, jquery.js & bootstrap.js are the bottom for faster loading)-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MenuBar & Mine Custom CSS -->
<link href="css-mb/main.css" rel="stylesheet">
<!-- /.custom css -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--for footer bottom:-->
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- MenuBar Navigation -->
<a id="ddmenuLink" href="menu_bar.htm">Menu</a>
<script src="js-mb/jsfiddle.js"></script>
<!-- /.navigation -->
</div><!--.header-->
<div id="content">
<center><img src="http://oi64.tinypic.com/k3sz9x.jpg" width="840" height="166"></center>
</div><!--.content-->
<div id="footer">
<center><TABLE BORDER=0><TR>
<TD><b><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis ante vitae interdum feugiat. Duis pretium diam quis justo fermentum efficitur. Pellentesque justo tortor, vulputate quis suscipit ut, lobortis eu massa. Donec vitae nisi sagittis, dictum eros pulvinar, finibus turpis. Nullam</center></b></TD>
</TR></TABLE></center>
<p><center><b>FOOTER</b></center></p>
</div><!--.footer-->
</div><!--.wrapper-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
I have checked this code in my local server and footer is working fine as per your requirement.
So please implement it and let me know how is this working.
<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css-mb/main.css" rel="stylesheet">
<style>
body {
padding-top: 50px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
min-height:100%;
height:100%;
margin:0; /* for footer*/
/* .end*/
padding: 0 2em; /* top, right, bottom, and left*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
background-color: #B4A890;
background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
background-position:absolute;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:0px;
}
#content {
padding: 0;
display: table;
width: 100%;
height: 520px;
}
#content center{
display: table-cell;
vertical-align: middle;
}
#footer {
background:#000000;
width:100%;
min-height:50px;
bottom:0;
left:0;
font-size: 15px;
position: fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- MenuBar Navigation -->
<a id="ddmenuLink" href="menu_bar.htm">Menu</a>
<script src="js-mb/jsfiddle.js"></script>
<!-- /.navigation -->
</div><!--.header-->
<div id="content">
<center><img src="http://r69.cooltext.com/rendered/cooltext240617569866922.png" class="img-resposive" ></center>
</div><!--.content-->
<div id="footer">
<center>
<TABLE BORDER=0>
<TR>
<TD><b><center>blah blah <br>blah blah <br>blah blah <br></TD>
</TR>
</TABLE>
</center>
<p><center><b>FOOTER</b></center></p>
</div><!--.footer-->
</div><!--.wrapper-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
For the image verticle alignment issue. I am trying to implement a perfect solution.
Thanks,
Please check the below mentioned code:
<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css-mb/main.css" rel="stylesheet">
<style>
body {
padding-top: 50px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
/* chrome android to show background-image */
min-height:100%;
/* .end */
/*keep footer at bottom*/
height:100%;
margin:0; /* for footer*/
/* .end*/
padding: 0 2em; /* top, right, bottom, and left*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
}
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:0px;
}
#content {
position:relative;
padding:50px 0;
/*background-color:black; - for testing*/
}
#footer {
background:#000000;
width:100%;
min-height:100px;
bottom:0;
left:0;
font-size: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- MenuBar Navigation -->
<a id="ddmenuLink" href="menu_bar.htm">Menu</a>
<script src="js-mb/jsfiddle.js"></script>
<!-- /.navigation -->
</div><!--.header-->
<div id="content">
<center><img src="http://r69.cooltext.com/rendered/cooltext240617569866922.png" class="img-resposive" ></center>
</div><!--.content-->
<div id="footer">
<center><TABLE BORDER=0><TR>
<TD><b><center>1. Problem: Image Above - Can't center vertically.<br>
2. Problem: This Footer - Background is fixed (100px), when screen is smaller (collapsed) the footer background isn't tall enough to cover the collapsed footer text. (If I use width 100% & 'margin:auto;' the text is fixed and won't collapse on smaller screens.)</center></b></TD>
</TR></TABLE></center>
<p><center><b>FOOTER</b></center></p>
</div><!--.footer-->
</div><!--.wrapper-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
<!-- end snippet -->
<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css-mb/main.css" rel="stylesheet">
<style>
body {
padding-top: 50px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
min-height:100%;
height:100%;
margin:0; /* for footer*/
/* .end*/
padding: 0 2em; /* top, right, bottom, and left*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
}
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:0px;
}
#content {
padding: 0;
height: 300px;
display: table;
width: 100%;
}
#content center{
display: table-cell;
vertical-align: middle;
}
#footer {
background:#000000;
width:100%;
min-height:100px;
bottom:0;
left:0;
font-size: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- MenuBar Navigation -->
<a id="ddmenuLink" href="menu_bar.htm">Menu</a>
<script src="js-mb/jsfiddle.js"></script>
<!-- /.navigation -->
</div><!--.header-->
<div id="content">
<center><img src="http://r69.cooltext.com/rendered/cooltext240617569866922.png" class="img-resposive" ></center>
</div><!--.content-->
<div id="footer">
<center>
<TABLE BORDER=0>
<TR>
<TD><b><center>1. Problem: Image Above - Can't center vertically.<br>
2. Problem: This Footer - Background is fixed (100px), when screen is smaller (collapsed) the footer background isn't tall enough to cover the collapsed footer text. (If I use width 100% & 'margin:auto;' the text is fixed and won't collapse on smaller screens.)</center></b>
</TD>
</TR>
</TABLE>
</center>
<p><center><b>FOOTER</b></center></p>
</div><!--.footer-->
</div><!--.wrapper-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
I’m having a mini CSS celebration here ;) . I woke up in the middle of the night and realized I was going about it the wrong way. The image couldn’t center as it didn’t know the size of the container to be center in.
1. So first I needed to have a container that would take up the balance of the empty space no matter the size of the window (found here: http://jsfiddle.net/WdrDH/ ):
/* Height less (header + footer) */
section {
height: calc(100% - (50px + 25px));
}
Then to center the image, any size image (found here http://codepen.io/sebastianekstrom/pen/kzEhe and here: css3: translateX to center element horizontally ):
.image img {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translatey(-50%);
-moz-transform: translateX(-50%) translatey(-50%);
transform: translateX(-50%) translatey(-50%);
}
You'll need this too:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
html part for section and image:
<section class="image">
<img src="https://yourimage.com/image.jpg" width="840" height="166">
</section>
I've included all my other bits (menu, background image, etc.) to demonstrate they aren't messed up. Find here https://jsfiddle.net/4dcuaen2/ and below:
/* chrome android to display background-image */
html{
height:100%;
min-height:100%;
}
body {
overflow-x: hidden;
padding: 50px 20px 0px 20px;/* 50px: for .navbar-fixed-top.*/
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
/* chrome android to dispaly background-image */
min-height:100%;
/* .end */
/*keep footer at bottom*/
height:100%;
margin:0; /* for footer*/
/* .end*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
background-color: #B4A890;
background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
background-position:absolute;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* RELEVANT CODE TO CENTERING AN IMAGE HORIZONTALLY & VERTICALLY NO MATTER THE SIZE OF THE WINDOW: */
/* 1. Container to use balance of the space: */
/* Height less (header + footer).
(Note: My footer is 70, but if use 70 it places extra space below footer and the need to scroll even if window is larger.) */
section {
height: calc(100% - (50px + 25px));
/* Container border for visual testing*/
border: 2px solid red;
}
/* 2. Center image vertically & horizontally */
.image img {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translatey(-50%);
-moz-transform: translateX(-50%) translatey(-50%);
transform: translateX(-50%) translatey(-50%);
}
/* .END OF RELEVANT CODE */
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#footer {
width:100%;
min-height:70px; /*for footer background fix*/
bottom:0;
left:0;
font-size: 13px;
/* Container border for visual testing*/
border: 1px solid blue;
}
.foot {
padding: 10px 0;
text-align: center;
color: #ffffff;
font-size:13px;
letter-spacing: 2px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="en">
<head>
<!-- MenuBar - below 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ./3 meta tags -->
<title>CENTERED</title>
<!-- MenuBar - Bootstrap Core CSS (ddmenu.js, jquery.js & bootstrap.js are the bottom for faster loading)-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MenuBar & Mine Custom CSS -->
<link href="css-mb/main-SOLVED.css" rel="stylesheet">
<!-- /.custom css -->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
<span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">Dropdown1<span class="caret"></span><!--Requires the JavaScript files linked at the end-->
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li class="dropdown">Dropdown2<span class="caret"></span>
<ul class="dropdown-menu">
<li>AnotherItem</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Header:</li>
<li>MoreItems</li>
<li>MoreItems</li>
<li>MoreItems</li>
</ul>
</li>
<li>Tutorials</li>
<li>About</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="image">
<img src="http://oi64.tinypic.com/k3sz9x.jpg" width="840" height="166">
</section>
<div id="footer">
<center>
<TABLE BORDER=0><TR id="sl">
<TD><i class="fa fa-1x fa-facebook"></i>FB </TD>
<TD><i class="fa fa-1x fa-youtube"></i>YT </TD>
<TD><i class="fa fa-1x fa-share-alt"></i>SH</span></TD>
</TR></TABLE>
</center>
<div class="foot">FOOTER TEXT</div><!--class foot-->
</div><!--.footer-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!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">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
I am having trouble trying to center an image both horizontally and vertically, using Bootstrap and a sticky footer. It needs to be fluid, responsive and work on both desktops and mobiles.. I don't want the footer to go over the image if the window/screen size is too small (obviously).
Any help or insight would be great appreciated!
Here's what I've got..
404.php
<html lang="en">
<head>
<title>Error 404</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Error 404</title>
<!-- Bootstrap -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="/assets/css/sticky-footer.css" rel="stylesheet">
<link href="/assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="panel-default">
<div class="panel-body">
<div class="text-center top"><h2>Error 404</h2>
</div>
<div class="form-group text-center">
<h4>Nothing to see here, nothing to see</h4>
<img src="/assets/images/404.jpg" class="img-responsive center-block">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">
<small>© 2015</small>
</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
sticky-footer.css
/* Sticky footer styles */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
}
Sticky bottom footer
Bootstrap has a navbar that I find is useful for footers. Try using navbar navbar-default navbar-fixed-bottom instead of your custom footer class.
Center vertically
This question has a lot of great information regarding centering vertically. This is what I use:
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Center horizontally
I've found the easiest solution to centering horizontally is just using center-block. Hasn't failed me yet.
I would suggest you have a loook at this stackoverflow question first.
This might also get you started (change it in your sticky-footer.css):
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
display: table; /*<<<< this line was added*/
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent {
margin: 0 25% auto 25%;
}
Add the class cent to you paragraph in your webpage, i.e.:
<p class="cent text-muted text-center">
<small>© 2015</small>
</p>
What I am trying to achieve is a page with a sticky footer, which is a vector island.
The island is always at the bottom of the page, but when the browser height is too small it invokes vertical scrolling.
Behind the island is a sunburst that then falls behind all the page content. This is quite big, about 1417px high. This doesn't affect vertical scrolling though.
Here is what I have so far and I've been stuck for hours! Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background-color: #6ec8e4;
}
#wrap {
min-height: 100%;
height: auto;
}
.testBox{
height: 300px;
width: 100%;
background: red;
margin: 20px 0;
}
.footer-image-container {
margin: 0 auto;
position: absolute;
width: 100%;
height: 1417px;
}
.footer-image {
position: absolute;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div id="footer">
<div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png">
<img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div>
</div>
</div>
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
It would be better to use the images as background images in css:
see https://jsfiddle.net/6t9vxq1o/1/
.body{
height:100%;
background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom;
}
#wrap{
background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom;
}
This way the images will be always on bottom, the sunburst behind the content, and the grass behind the footer