so I am trying to make a cool portfolio landing page with Bootstrap.
The template includes a fixed navbar and a sticky footer. The rest of the page is whtespace that I want to fill with basically a giant background so I put a test paragraph element to try and see how to size it. I figured I could just add CSS rules that made body's height 100% but when I do that I get an overflow and my footer isn't at the bottom of the page anymore. Instead I have a small overflow of the background at the bottom.
How can I fix this? I made the background color bright yellow to try and show what I mean. Any help is appreciated!
Here's the 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Work in Progress</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="#">Portfolio</a>
</div>
<div id="navbar" class="navbar-collapse collapse"
aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Rails Projects</li>
<li>LAMP Projects</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="main">
<div class="container">
<p>Test text</p>
</div>
</div>
<!--footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Contact info or whatever goes here.</p>
</div>
<div class="col-md-4 col-md-offset-4">
<p>More info or whatever goes here.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
And here's the CSS
html, body{
height: 100%
}
.main{
height: 100%;
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
You can use this CSS (position: relative on body and .main height as calc function (100% minus height of the footer):
html,
body {
height: 100%;
position: relative;
}
.main {
height: calc(100% - 60px);
background-color: #FFFF00;
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
Demo: https://fiddle.jshell.net/uvaef49h/1/
You want to use the following CSS:
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.main{
height: calc(100% - 110px);
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
overflow: hidden;
}
Why did it not work before?
The body had a height of X, main occupied 100% of that. However main was pushed down by the 50px margin. After the .main part, you had your footer which was completely pushed out from the view-port so I had to remove another 60px from .mains height. The footer still had an overflow issue so I hid that.
Lastly, the browser wanted to add some random margin/padding so I Removed that as well.
Related
Hey guys so I have a bootstrap site and I've built a fairly basic header file that looks like this:
<head>
<style>
nav a{
color: white
}
nav {background-color: #1c71b9; }
.navbar-toggle{border: 3px solid white;}
.icon-bar{background-color: white;}
.navbar-brand:hover{background-color: white;
color: #1c71b9;
}
body{margin-top: 50px;}
h1, h2, h3, h4, h5, h6, p{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.row + .row{margin-top: 20px;}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
</head>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="index.php">My Site</a>
</div><!--end .navbar-header-->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Subscriptions</li>
<li>Templates</li>
<li>Stock</li>
<li>Login</li>
<li>Signup</li>
</ul>
</div><!--end #navbar-->
</div><!--end container-->
</nav>
<div class="container">
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--modal header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Login</h2>
</div>
<!--modal body-->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="username">Username/Email</label>
<input type="text" class="form-control" placeholder="Username/Email" id="username" name="username">
Forgot Username
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
Forgot Password
</div>
</form>
</div>
<!--modal footer-->
<div class="modal-footer">
<button class="btn btn-primary btn-block">Login</button>
</div>
</div>
</div>
</div>
</div>
</header>
I included this header file into my index.php document and am trying to make a video that spans 100% of the browser in width and have a max-height of 800px but its not working no matter what I do the video has white space on the sides without spanning all of the width. Any help here would be great! I basically want the video to always be centered and responsive. Similar to the img-responsive class does. Heres a copy of the index file
<?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body><?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body>
if you are using bootstrap wrap video inside a container-fluid. This spans the entire width of the viewport (view documentation). You can try something like this:
<div class="container-fluid">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
then in your css:
div video {
height: 800 px;
}
If you want you video to cover full width of you div do not set height for the video, videos will always keep its aspect ratio, so if you set height the width will also reduce according to that. so the best way would be set height for the div wrapping the video the let the video to expand 100%
I need to do a responsive navbar with:
LOGO1(left side) text(centered) LOGO2(right side)
I am trying the next but It doesnt work when when resized to small screens.
Here is my problem: when in "lg" size the screen is correct. But when in "md" size or smaller the LOGO2 goes to left side.
And, in 'xs' size the 'text' continues showing with the LOGO2 below it.
In my markup code I have some angular staff, but it is not important to answer the question.
What am I doing wrong?
//markup
div class="container-fluid example2">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isMyNavCollapsed = !isMyNavCollapsed" ng-init="isMyNavCollapsed=false">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="img/SoundCloud64.png" alt="Cloud Clínica">
</a>
</div>
<p class='navbar-text navbar-center font35'><strong>Retire seu ticket aqui</strong></p>
<div class="collapse navbar-collapse" id="navbar_right" uib-collapse="isMyNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><img class="img-responsive" height="150" width="200" src="img/red-ticket-md.png" /></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
//css
<style type="text/css">
.example2 .navbar-brand>img {
padding: 7px 15px;
}
.navbar-right img{
padding: 7px 15px;
}
.navbar-center
{
display:inline-block;
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
overflow: visible;
height: 0;
padding:15px 10px 10px 10px;
z-index: 10099;
}
.navbar-nav,
.navbar-right {
display:inline-block;
position: relative;
z-index: 100100;
}
</style>
In a Bootstrap nav-bar, I'm trying to create two items whose drop-shadows intersect each other.
http://codepen.io/anon/pen/gaEJWY
It currently looks like this:
But I want it to look like this:
Anyone have an idea how to make this happen(using CSS preferably)?
.navbar-inner {
box-shadow: 0px 4px 8px #888888;
}
.navbar-brand {
background: #F8F8F8;
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
box-shadow: 0px 10px 8px #888888;
margin-top: -25px;
padding-top: 29px;
padding-left: 29px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>My Product</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="/stylesheets/all.css" rel="stylesheet" />
<script src="/javascripts/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">
<img src="//placehold.it/100x100">
</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 navbar-right">
<li class="active">Store Locator</li>
<li>Share</li>
<li>Cocktails</li>
<li>Shop</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<!--<div class="container">-->
<!--<img src="images/header-video.jpg">-->
<!--</div>-->
</body>
</html>
Many thanks!
You can create a pseudo element that will be behind your circle with the same color and height as the navbar.
You have to do the maths on the positioning, but it works.
.navbar-brand:before{
/* bigger than the circle to mask the shadow 1*/
width:200px;
/* same height as navbar */
height:50px;
content:".";
overflow:hidden;
text-indent:99999px;
display:block;
background: #F8F8F8;
position: absolute;
/* cause your div has margin -25px */
top:25px;
/* so it will mask everything on the sides */
left:-15px;
}
.navbar-brand > * {
/* everything inside the navbar brand need to have its positioning set */
position: relative;
}
Pen
I am building a site where I use the Bootstrap Sticky Footer and Navbar. However, with Google's recent release of the Material Design Lite library, I want to use the cards for a portion of my site. However, as soon as I include the MDL library (just the CSS, no other changes), my sticky footer does something odd. The footer is set to the bottom of the viewport (no matter the height of that window) but then it just sticks there. If I scroll up, it scrolls up as well.
When I actually inspect the footer, body, etc., I see nothing that is affecting the layout from the material design CSS. Something obviously is, but I'm fairly stuck on what it might be. (To see it work, remove the reference to the material-lite.css. Currently it is broken within the snippet.)
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 20px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
color: white;
background-color: black;
}
#footer-content {
margin: 20px 0;
}
<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a asp-controller="Home" asp-action="Index" class="navbar-brand">
<i class="fa fa-globe fa-lg visible-sm visible-xs"></i>
<i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav main-links">
<li><a asp-controller="Home" asp-action="Index">Home</a>
</li>
<li><a asp-controller="Home" asp-action="About">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="http://placekitten.com/300/450" />
<br/>
<img src="http://placekitten.com/300/450" />
<br/>
</div>
<footer>
<div class="container">
<div id="footer-content" class="pull-right">
My Footer
</div>
</div>
</footer>
I found the correct solution to keeping footer stuck to bottom even if the content of a new tab is a different height.
https://github.com/google/material-design-lite/issues/913
This js fiddle specifically had useful html and css.
http://jsfiddle.net/eggbox/gk7u32b6/
In short add this to your html above the footer
<style>
.mdl-layout__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.mdl-layout__content > *:not(.mdl-layout-spacer) {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
</style>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
This should fix your problem. See plunker
html {
height: auto;
}
I've a bootstrap formatted page with a fixed top navbar.
What I want is to set a full width (fixed height) cover image just over the nav (responsive possibly...).
I've tried this, but the cover just not show.
UPDATE1:
the navbar is showed in bottom of the page (like a footer)... don't understand why...
Here is my HTML:
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
...
...
...
Navbar CSS customization and cover CSS:
body {
min-height: 2000px;
padding-top: 70px;
}
.navbar-brand,
.navbar-nav li a.main-bar{
line-height: 70px;
height: 70px;
padding-top: 0;
}
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
.FlexEmbed:before {
content: "";
display: block;
width: 100%;
}
.FlexEmbed--3by1:before {
padding-bottom: 33.33333%;
}
Thanks in advance stackoverflow community!
UPDATE 2:
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>MySite</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">
<img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Mydropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>element1</li>
<li class="divider"></li>
<li>element2</li>
<li>element3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>element4</li>
<li>element5</li>
<li>element6</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="content"></div> // here I paste all the content via jQuery
</body>
</html>
Heres a fiddle to my problem.
I hope I understood your question correctly. One option is to position your background fixed as well. By adding width: 100%; and background-size: cover; you'll get it to cover completely.
Update:
To get it to be more like a "Facebook cover image" add a height to the image and remove the padding-top: 70px; on the body. Then you should be set.
.FlexEmbed {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 70px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
You could also add some margin to your .navbar-fixed-top to see that the background is displayed on top.
.navbar-fixed-top {
top: 70px;
}
Check out my updated demo here.
Use JsFiddle to create a live demo.
The navbar is at the bottom because you have the image display as block;
I'm not quite sure either about what you're trying to achieve but, have you tried with z-index?