I can't seem to get my footer to display at the bottom of the page. I want it to stay at the bottom at all times, even when it's being responsive.
At the moment, it is vertically centred. Can anyone please help. thanks.
_Layout page
#using System.Web.Optimization
#using InventoryManager.Web.StaticHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Fleepos" src="...">
</a>
<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>
</div>
<div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="navbarUsername">#SessionHelper.GetUserFullName()</li>
<li>#Html.ActionLink("Sign out", "SignOut", "Shared", null, new { id = "btnButtonSignOut", #class = "btn btn-default navbar-btn" })</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>
Property of Floormind</li>
</ul>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
CSS
html,body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
height: 100%;
min-height: 100%;
}
header, footer, nav, section {
display: block;
}
.footer {
margin-bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
ul.footer {
margin-top: 10px;
text-align: center;
padding-left: 0;
}
ul.footer li {
color: #333;
display: inline-block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
.frmLogin {
padding-left: 30%;
padding-right: 30%;
padding-top: 10%;
}
.navbarUsername {
margin-top: 14%;
margin-right: 10px;
text-align: center;
font-weight: bold;
}
.txtPageTitle {
text-align: center;
}
Use position:fixed and remove margin from .footer class and clear the ul margin by adding margin:0 to ul.footer
ul.footer {
text-align: center;
background: burlywood;
padding-left: 0;
margin: 0;
}
.footer {
height: 50px;
left: 0;
position: fixed;
right: 0;
bottom: 0;
}
Demo
Get your footer out of the container like so:
<div id="footer">
<ul class="footer">
<li>Property of Floormind</li>
</ul>
</div>
Then, in your CSS:
#footer {
position: fixed; // Places the element sticky somehwere the window
bottom: 0; // Places at the bottom
right: 0;
width: 100%; // In case you need to be full width
}
Here's the Fiddle
Hope it helps.
Related
When i use position relative for adjusting position of button and ul,li,
There is any other property in bootstrap?.I want to create this nav-bar without using css properties.
I need create same nav-bar with using bootstrap
.full_image{
font-family: Lato,"Helvetica Neue",Arial,sans-serif;
}
#top-nav {
width: 100%;
position: fixed;
top: 0;
background-color: #000;
height: 70px;
z-index: 999;
}
nav{
display: block;
}
nav #ss-logo{
height: 62px;
width: 206px;
position: relative;
bottom: 5px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9
{
float
}
nav .btn-primary{
background-color: #2eb066;
/**padding: 15px 15px;**/
border-color: #2eb066;
text-transform: uppercase;
background: #02a15e;
border-radius: 5px;
color: #fff;
padding-left: 4px;
display: inline-block;
font-size: 14px;
font-weight: 600;
position: relative;
left: 36%;
letter-spacing: 3px;
padding: 18px 0;
line-height: 16px;
margin-left: 0;
width: 279px;
text-align: center;
}
nav #questions{
font-family: 'Verdana';
letter-spacing: -1.2px;
font-size: .8em;
line-height:30px;
color: #FFF;
}
nav #login {
color:#2eb066;
text-transform:uppercase;
font-family: 'Verdana';
letter-spacing: 2px;
font-size: .8em;
line-height:30px
}
nav li a{
color: #FFF;
}
nav li{
padding:0px 10px
}
#hero_area{
position: fixed;
background: url(features_hero_bg.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin: 0 0 0 -15px;
color: #fff;
z-index: -1;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
#hero_area h1 {
font-family: Lato,sans-serif;
font-size: 60px;
font-weight: 700;
width: 1180px;
margin: 210px auto 30px;
}
#hero_area p {
width: 1180px;
line-height: 1.2;
font-family: lato,sans-serif;
font-size: 32px;
font-weight: 400;
margin-left: auto;
margin-right: auto;
padding-right: 510px;
}
#hero_area>* {
padding-left: 15px;
}
a:focus, a:hover
{
color: #23527c;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="Assingment_bootstrap.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="full_image">
<form name="assingment_three" id="assingment_three">
<nav id="top-nav" class="full-width navbar navbar-inverse dark-bg navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-3">
<img id="ss-logo" src="logo-white.png" alt="SugarSync">
</div>
<div class="navbar-collapse collapse" id="containerNavbar">
<ul class="navbar-nav ml-auto color_one">
<li class="nav-item active">
<a id="login" class="nav-link" href="#"><span class="fa fa-lock"> Log in</a>
</li>
<li class="nav-item">
<a id="questions" class="nav-link" href="#"> Questions? (877) 442-1693</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Try Free for 30 Days</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</form>
<div class="wrapper">
<div class="col-md-12 content">
<div id="hero_area" class="page-header">
<h1>Features</h1>
<p>With SugarSync, your files and folders are always accessible from anywhere.</p>
</div>
</div>
</div>
</body>
</html>
I am able to make my text in the center but using px values. When I try using percentage it is not working. I tried display:table; and display:table-cell and also display:flex;
justify-content: center; //horizontal centering
align-items:center; but it did not work.
My parent div has height: 7.7% .
Note: I have updated my full header code
Below is JSFIDDLE link:
https://jsfiddle.net/Anthony_Chien/f7n77068/#&togetherjs=gR8VEaLgqR
HTML:
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
<div class="navheadersec2">
<div class="navheadermargin">
<div class="btn-group">
<button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="headerspanbox"> <div class="headerdivbox"></div> </span>Default <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
<!--<div class="header-icons">
<span class="icons-group"><img src="assets/images/icons/undo.png" /></span>
<span class="icons-label">Undo</span>
</div>-->
<span class="btn-group icons-grp"><img src="assets/images/icons/undo.png" /><br>Undo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/redo.png" /><br>Redo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-in.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-out.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/group.png" /><br>Group</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/pattern.png" /><br>Pattern</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/lock.png" /><br>Lock</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/select.png" /><br>Select</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/resize.png" /><br>Scale</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Rotate</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Forward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/backward.png" /><br>Backward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/panel.png" /><br>Panel</span>
</div>
</div>
<div class="navheadersec3">
<div class="navheadermargin">
<div class="headersec3para">
<p class="headerpara">Code</p>
<p class="headerpara">Some text</p>
</div>
<p class="header-price">2,550</p>
<span class="btn-group icons-grp info-icon"><img src="assets/images/icons/info.png" /></span>
<p class="header-price add-to-cart">ADD</p>
</div>
</div>
</nav>
</div>
CSS:
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navheadersec2 {
width: 64.76%;
display: inline-block;
border-right: solid 1px #b8b8b8;
height: 100%;
}
.navheadersec3{
width: 30.214%;
display: inline-block;
margin-left: -4px;
}
.navheadermargin .headersec3para{
width: 30.53%;
height: 100%;
float: left;
margin-left: 6.10%;
}
.headersec3para .headerpara:first-child{
font-size: 12px;
margin: 0px !IMPORTANT;
font-weight: bold;
}
.headersec3para .headerpara{
font-size: 10px;
margin: 0px !IMPORTANT;
}
.header-price{
margin: 0px;
height: 100%;
width: 16.03%;
float: left;
text-align: center;
line-height: 34px;
font-weight: bold;
font-size: 18px;
font-family: SourceSansPro;
}
.info-icon{
margin: auto;
text-align: center;
line-height: 34px;
}
.info-icon > img{
width: 20px;
height: 20px;
}
.add-to-cart{
width: 30.534%;
font-size: 15px;
color: #009cff;
}
.navheadermargin{
margin-top: 10px;
height: 34px;
margin-bottom: 10px;
}
.navheadermargin .btn-group{
margin-left: 1.3%;
height: 100%;
width: 13.510%;
float: left;
}
.navheadermargin .header-icons{
float: left;
width: 24px;
height: 100%;
}
.header-icons .icons-group{
height: 21px;
}
.header-icons .icons-group img{
height: 20px;
width: 20px;
}
.header-icons .icons-label{
height: 15px;
font-family: SourceSansPro;
font-size: 10px;
}
.navheadermargin .btn-group button{
height: 100%;
width: 100%;
}
.headerspanbox{
display: inline-block;
}
.headerspanbox .headerdivbox{
background-color: #1fb6ff;
margin-right: 10px;
height: 14px;
width: 18px;
}
Screenshot Image:
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS....</span>
</div>
</nav>
</div>
You can use flex for achieve the same.
update fiddle below
working fiddle
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
height: 100%;
width:100%;
background-color: #ffffff;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navlogo span a {
align-self:center;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS....</span>
</div>
</nav>
</div>
You can use display: table; on your container, and display: table-cell; on your children, to center vertically and horizontally your navigation elements. Ypu can then set container and elements width based on the layout you need.
Possible example :
.vav-main{
position: relative;
width: 100%;
height: 100%;
}
.navbar{
display: table;
width: 100%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
height: 100;
background-color: #ffffff;
width: 5%;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navbar-header {
display: table-cell;
padding: 3.5%;
vertical-align: middle;
text-align: center;
}
<div class="vav-main">
<nav class="navbar navbar-default">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
<div class="navbar-header">
........
</div>
</nav>
</div>
.navheader{
width: 100%;
height: 100px;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
display:table;height:100%;width:100px;
}
.navlogo span a{
display:table-cell;vertical-align:middle;text-align:center;margin:0;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
</nav>
</div>
Might be you are doing that using bootstrap if so then you could try it like as below, remove span tag as both a and span tags are inline elements, so you could use one if needed.
.nav-main {
width: 100%;
height: 100%;
}
.nav-main > .navheader {
width: 100%;
height: 7.7%;
background-color: #ffffff;
}
.navlogo {
width: 100%;
height: 100%;
background-color: #ffffff;
text-align: center;
}
.navlogo > a {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
display: inline-block;
margin-top: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
DS
</div>
<div>
</div>
</nav>
</div>
I don't modify on your code, I just write tinny block of code. Hope this will be helpful for you. As you see, the text inside lime block always align center by horizonal and middle by vertical.
$('#header .text').css('left', 'calc(50% - '+$('#header .text').css('width')+' / 2)');
$('#header .text').css('top', 'calc(50% - '+$('#header .text').css('height')+' / 2)');
#header{
width:100%;
height:200px;
border:1px blue solid;
}
#box{
width:30%;
height:80%;
background-color:lime;
text-align:center;
position:relative;
}
#box .text{
border:1px red solid;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='header'>
<div id='box'>
<div class='text'>abchghjghj</div>
</div>
</div>
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
So what I'm trying to do is make my image fit on the page without having a scroll. It's obvious that the jumbotron and nav are pushing the image down, so what makes sense to me, is to put the image behind the jumbotron and nav. I tried an overflow of hidden, and that didn't seem to work. I also tried putting everything inside my wrapper, that worked, but then my responsive design got all messed up. This is the picture here that would cover the page: [https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg][1].
Here is my code:
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
}
.jumbotron {
background-color: rgba(51, 51, 51, 1);
padding-bottom: 0;
margin-top: -20px;
margin-bottom: 0;
padding-top: 20px;
h1 {
font-size: 5em;
text-transform: uppercase;
font-weight: 100;
color: #fff;
margin: .2em 0 0 .2em;
letter-spacing: .2em;
span {
font-weight: normal;
}
}
p {
color: #fff;
margin-right: .5em;
margin-bottom: 0;
}
#slogan {
font-size: 1.2em;
margin: 0;
margin-right: 20px;
}
}
.navbar {
background-color: rgba(51, 51, 51, 1);
border-radius: 0;
margin-top: 0;
margin-bottom: 0;
min-height: 0;
border: none;
li a {
outline: none;
text-transform: uppercase;
padding: 5px 15px 10px 15px;
font-size: .9em;
}
}
.wrapper{ // The wrapper is ONLY on the index.html page.
// position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
color: #FFF;
background-image: url("https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg");
background-position: center center;
background-size: cover;
}
.h2_slogan {
font-weight: 100;
font-size: 3em;
text-transform: uppercase;
margin-top: 1em;
}
<header class="jumbotron">
<h1>John <span>Smith</span></h1>
<p class="text-right" id="slogan">Accessible. Affordable. Dependable.</p>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 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>
</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 text-center">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<h2 class="text-center h2_slogan">Web Developer & Designer</h2>
</div>
You can just add it to your body this will put it behind both the jumbotron and the navbar.
What you do:
Change this in your HTML
From:
<body>
To:
<body id="homepage">
Add this to your CSS:
body {
background-image: url("../img/header.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
And that's basically it.
JsFiddle
Hope this helps!
So, I have tried and tried, and researched and looked, but apparently I am just awful with CSS and HTML. So, I beg. How in the world do I make the trafficCanvasContainer stretch from the bottom of the navbar to the top of the footer? I've tried setting html/body to height: 100%, but then I always have extra whitespace hanging BELOW the footer. As of right now, trafficCanvasContainer ends wherever it's content ends.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Overseer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/core.css">
<style>
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none !important;
}
#allPosts {
resize: none;
font-size: 12px;
border-radius: 5px;
border: #ccc solid 1px;
line-height: 14px;
height:100px;
overflow: scroll;
}
#trafficFeed {
resize: none;
font-size: 12px;
border-radius: 5px;
border: #ccc solid 1px;
line-height: 14px;
height:80%;
overflow-y: auto;
width: 100%;
height: 100px;
}
#trafficCanvas {
margin: 0 auto;
display: block;
}
#trafficCanvasContainer {
min-height: 100%;
height: 100%;
width:100%;
display:block;
}
.fill {
min-height: 100%;
height: 100%;
width: 100%;
}
.stop-button {
margin: 5px;
}
.start-button {
margin: 5px;
}
p{
margin:0;
padding:0;
}
/* Sticky footer style */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 233px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 233px;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="#" style="color: white;">Overseer</a>
</div>
</div>
<div class="container fill">
<div id="trafficCanvasContainer">
Content Goes Here
</div>
</div>
<footer class="footer">
<div class="well" style="margin-bottom: 0px;">
<h3>Traffic</h3>
<div id="trafficFeed" class="form-control"></div>
<div class="input-group">
<span class="input-group-btn">
<button id="stopCapture" type="button" class="btn btn-danger pull-right stop-button">Stop</button>
<button id="startCapture" class="btn btn-success pull-right start-button" type="button">Start</button>
<div class="clearfix"></div>
</span>
</div><!-- /input-group -->
</div>
</footer>
</body>
</html>
UPDATE:
This is what I ended up doing to fix this problem. It involves some javascript.
index.html
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="navbar-brand" href="#" style="color: white;">Overseer</a>
</div>
</div>
<canvas id="trafficCanvas" height="500" width="940"></canvas>
<footer class="footer">
<div class="well" style="margin-bottom: 0px;">
<h3>Traffic</h3>
<div id="trafficFeed" class="form-control"></div>
<div class="input-group">
<span class="input-group-btn">
<button id="stopCapture" type="button" class="btn btn-danger pull-right stop-button">Stop</button>
<button id="startCapture" class="btn btn-success pull-right start-button" type="button">Start</button>
<div class="clearfix"></div>
</span>
</div><!-- /input-group -->
</div>
</footer>
index.css
html {
position: relative;
height: 100%;
overflow: hidden;
}
body {
/* Margin bottom by footer height */
margin-bottom: 233px;
height: 100%;
}
p{
margin:0;
padding:0;
}
.navbar {
margin-bottom: 0px;
}
#trafficCanvas {
margin: 0 auto;
display: block;
}
#trafficFeed {
resize: none;
font-size: 12px;
border-radius: 5px;
border: #ccc solid 1px;
line-height: 14px;
height:80%;
overflow-y: auto;
width: 100%;
height: 100px;
}
.start-button {
margin: 5px;
}
.stop-button {
margin: 5px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 233px;
}
index.js
function setupCanvas() {
var self = this;
self._canvas = document.getElementById("trafficCanvas");
var navbarDimensions =
document.getElementsByClassName("navbar")[0].getBoundingClientRect();
var footerDimensions =
document.getElementsByTagName("footer")[0].getBoundingClientRect();
self._canvas.width = document.body.clientWidth;
self._canvas.height = document.body.clientHeight
- footerDimensions.height
- navbarDimensions.height;
};
Ok, I believe you should make #trafficCanvas had a margin-bottom: 0; property and have the footer have margin-top: 0px; property. And then add padding-top: 10px; to your footer.