I have a website where I want a header and a sidebar.
My intended functionality is that the sidebar extends to the bottom of the page, which it does. However, it has content that extends beyond the viewport, I'm guessing because the .menu is sized to 100% of the entire body container, yet is pushed down because of the header.
How do I make it such that the menu only extends all the way down the viewport?
<body>
<div class="container-fluid">
<header class='row'>
<div class="col-md-1">
<a href="#" class="menu-icon-link">
<i class="glyphicon glyphicon-list"></i>
</a>
</div>
<div class="input-group col-md-4 col-md-offset-4">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</header>
<div class="row menu-container">
<div class="menu col-md-2">
Lorem ipsum...
</div>
</div>
</div>
</body>
My CSS:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
padding: 3.5em 0 0 0;
box-sizing: border-box;
}
.menu-container {
display: block;
}
.menu {
position: fixed;
top: 3.5em;
padding: 1em;
background: #A9E2AD;
height: 100%;
overflow-y: scroll;
}
.glyphicon-list {
font-size: 1.5em;
color: #FFF;
}
header {
background: #50af4c;
color: #fff;
position: fixed;
top: 0;
width: 100%;
padding: 0.5em 1em;
display: block;
}
You don't need to use an explicit height, you can use positioning for what you want.
.menu {
position: fixed;
top: 3.5em;
bottom: 0; //add this
padding: 1em;
background: #A9E2AD;
//height: 100%;
overflow-y: scroll;
}
Related
Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}
I cant figure out why the red buttons are not displayed properly in firefox. In chrome it looks good.
Here is the fiddle:
Fiddle
That is my chrome:
That is my firefox:
My HTML:
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
My CSS:
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
}
Well I dont know what details to add. I tried to change everything in firefox browser dev tools but could never achieve the same behaviour as in chrome.
https://jsfiddle.net/7vz89t4d/2/
.img-element-del {
position: relative; /* this is new */
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
position: absolute;
bottom: 0; /* this is new */
left: 0; /* this is new */
}
Short explanation:
If using position:absolute; do also set position:relative; to the parent. Then absolute is always from the parent.
This picture might help:
the picture is from css-tricks.com/absolute-positioning-inside-relative-positioning which explains it even a little further.
The above picture in code would look like:
.parent {
position: relative;
width: 400px;
height: 300px;
border: solid 3px CHOCOLATE;
}
.absolute-one,
.absolute-two,
.absolute-three {
position: absolute;
background-color: CHOCOLATE;
color: white;
padding: 10px;
width: 100px;
height: 100px;
}
.absolute-one {
top: 0;
left: 0;
}
.absolute-two {
bottom: 5px;
left: 10px;
}
.absolute-three {
top: 30%;
right: -25px;
}
<div class="parent">
<div class="absolute-one">
top: 0;
left: 0;
</div>
<div class="absolute-two">
bottom: 5px;
left: 10px;
</div>
<div class="absolute-three">
top: 30%;
right: -25px;
</div>
</div>
I've updated your fiddle here -> https://jsfiddle.net/7vz89t4d/3/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
bottom: 0;
left: 0;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
Try adding "Left:0;" and "bottom:0;" in your deletebtn css
Here I have craeted a new one. You do not have to use position absolute or something similar.
jsfiddle
I have just put each "image" and "a" in a div
<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
and style:
.bilder-row{width:160px;float:left;}
this will solve the problem.
When styling a page with markup, generally avoid absolute positioning within your layout. Absolutely positioned items make for very brittle layouts which make responsive design very very challenging. Only use it as a last resort. I'd recommend you fully utilize Bootstrap. It's a very powerful tool but is opinionated about your markup. I've refactored your example into something more responsive while taking full advantage of the Bootstrap grid: http://getbootstrap.com/css/#grid
Here's the full Codepen example: http://codepen.io/toddsby/pen/pRLQem
Viewed on Firefox 51 (macOS)
HTML
<div class="row gutter-5">
<div class="img-element-del col-xs-3">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
<div class="deletebtn-container">
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
</div>
</div>
CSS
/** custom Bootstrap grid gutter **/
.row.gutter-5 {
margin-left: -10px;
margin-right: -10px;
}
.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
I've moved the items into a col-3 (12/4) grid. Then styled the image and button to take up 100% of their containers. This allows for a flexible and responsive layout. You can then use Bootstrap breakpoints to target different devices. ie <div class="img-element-del col-xs-1 col-md-2 col-lg-3">
Note: This layout would be very simple with Flexbox. As of 2016, Flexbox is supported by all major browsers! You can learn more about Flexbox here: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
Try add position: relative; to .img-element-del
and to .deletebtn add this properties:
z-index: 1;
left: 0;
bottom: 10px;
All are working however in 800 px, 1100px, 1400px , the navigation bar is not showing up as I think that the 400 px media query have overlapped others queries. I need help on how to make navigation bar show up ...
CSS Code:
#media screen and (min-width: 400px)
{
header {
padding: 1%;
}
header h1 {
position: relative;
left: 0.5%;
bottom: 10%;
}
header div{
display: none;
}
nav.sitenavigation {
}
nav.sitenavigation ul {
border: 3px solid #34180f;
display: none;
background-color: #B8944D;
position: absolute;
right: 5%;
top: 80%;
z-index: 1;
}
nav.sitenavigation ul li {
display: inline-block;
}
.navigation-menu-button {
float: right;
}
article.container{
padding:0%;
}
figure {
display: none;
}
aside {
display: none;
}
aside p {
display: none;
}
}
#media screen and (min-width:800px),print
{
header h1 {
position: absolute;
top: 8%;
left: 28.0%;
}
header div{
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 36.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 0%;
}
#contentstart {
padding-right: 0%;
}
figure {
display: none;
}
aside {
display: inline;
}
aside p {
position: relative;
left: 3.5%;
margin: 2% 0 0 5%;
padding-right: 5%;
}
}
#media screen and (min-width:1100px){
header h1 {
position: absolute;
top: 5.5%;
left: 37%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 43.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 50%;
}
#contentstart {
padding-right: 50%;
}
figure {
position: absolute;
left: 50%;
bottom: 28.7%;
margin: 2% 2% 0 0.3%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
margin: 1% 0 0 0%;
}
}
#media screen and (min-width:1400px) {
body {
width: 1400px;
}
header h1 {
position: absolute;
top: 7%;
left: 42%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 47.1%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 54%;
padding-bottom: 2%;
}
figure {
position: absolute;
left: 45%;
bottom: 1%;
top: 0.2%;
margin: 2%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
padding-right: 7%;
margin: 1% 0 0 0%;
}
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Revisions Bookstore & Cafe</title>
<!--
Revisions Bookstore and Cafe main web page
Filename: index.html
Author: Wong Wan Zhen Sofia
Date: 5 January 2017
HTML5 and CSS3 Illustrated Unit I, Visual Workshop
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation">Skip navigation </p>
<header>
<h1>Revisions Bookstore & Cafe</h1>
<div>
<img src="images/logo.gif" width="120" height="100" alt="">
</div>
</header>
<nav class="sitenavigation">
<div class="navigation-menu-button">
<img src="images/menu.png" width = "60" height="60" alt="Show Navigation">
</div>
<ul>
<li>Home</li>
<li>Events</li>
<li>New Releases</li>
</ul>
</nav>
<article>
<div class="container">
<h2 id="contentstart">10th Anniversary Sale!</h2>
<figure><img src="images/browsing.jpg" width="500" height = "378" alt="picture of person browsing"></figure>
<p>10% off our top 10 best sellers</p>
<p>Buy any two books, get a third at 50% off</p>
<p>In-store giveaways every day this month</p>
<p>Through November 30</p>
</div>
</article>
<aside>
<p>Custom brewed coffee and hand-selected books.</p>
<p>Special orders are our specialty.</p>
</aside>
<footer>
<p>412 N. 25th St.</p>
<p>Richmond, VA 23223</p>
<p>(804) 555-2565</p>
</footer>
</div>
<script src ="script.js"></script>
</body>
</html>
Try to use bootstrap for responsive and mobile-first. Quickly demo for you.
HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COLLAPSE NAVBAR
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_cholai">-->
<!--<i class="glyphicon glyphicon-repeat"></i> Cho lại-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_boqua">
<i class="glyphicon glyphicon-refresh"></i> Bỏ qua
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_new">
<i class="glyphicon glyphicon-floppy-saved"></i> Thêm Mới
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_sua">
<i class="glyphicon glyphicon-edit"></i> Sửa
</div>
</div>
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_luu">-->
<!--<i class="glyphicon glyphicon-floppy-save"></i> Lưu-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_them">
<i class="glyphicon glyphicon-plus"></i> Thêm
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_xoa">
<i class="glyphicon glyphicon-remove"></i> Xóa
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_huy">
<i class="glyphicon glyphicon-trash"></i> Hủy
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_in">
<i class="glyphicon glyphicon-print"></i> In
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_inkemchidinh">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-list-alt"></i> In kèm chỉ
định</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_ketthuc">
<i class="glyphicon glyphicon-off"></i> Kết thúc
</div>
</div>
CSS:
.row {
margin-bottom: 5px;
margin-top: 10px;
}
#wm_header {
width: 100%;
min-height: 22px;
margin: 0;
/*background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%);*/
/*background-repeat: repeat-x;*/
background-color: #428bca;
border-color: #2b669a;
color: #ffffff;
font-weight: bold;
padding: 5px;
font-size: 15px;
}
.input-label {
/*background-color: #428bca;*/
background-color: #fff;
border: 0;
font-weight: 700;
min-width: 110px;
text-align: left;
}
.input-group {
margin-bottom: 5px;
margin-top: 10px;
}
.input-group-addon:first-child {
text-decoration: none;
font-weight: bold
}
.button-load {
cursor: default;
background-color: #428bca;
color: #fff;
font-weight: bold;
}
I've got a search form within a div that
margin: 0 auto;
isn't moving it to the center. Any idea's of how to correct this?
Here's an image link to reference
HTML:
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
CSS:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
Add additional class "col-lg-offset-4" to "postcode-search".
Because you are using "col-lg-4" it adds style width: 33.33% and float: left.
So, The style below won't work. This is Useless style.
#postcode-search {
margin: 0 auto;
padding: 0px;
}
You just have to add one bootstrap grid offset class to center your form within a DIV.
Using a pure CSS solution you can simply do this, using text-align:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align: center;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
You need to width on #postcode-search fox example width: 300px; then it will be in center
This is quite simple.
I applied the text-align:center style
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align:center;
}
Here is a working demo
you have to add this css
.postcode-search {
width: 300px; // change value as per requirement
padding: 30px; // optional
}
.postcode-search.col-lg-4 {
margin: auto;
}
here is a working example https://plnkr.co/edit/FSeAt3TkFeuGvj57hVgS?p=preview
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.