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.
Related
I am trying to center an item in the middle of the layout while also, if possible have ability to control its position if need be with minor css tweaks. In my layout page I cannot figure out why the item I want in the middle of the screen both horizontally and vertically is positioned to the left of the screen. I know the issue is something in my layout I just can't seem to find out what the issue is. Below is a basic version of my layout with the item I can trying to center.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: inline-block;
height: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
I want to center the entire appRoundedShadow div
You've got to do a couple things here. First, remove the <br> that's currently below the .headerImage div, because it's adding extra space that makes the .headerImage appear like it's not centered vertically.
Then, add the following for .appRoundedShadow:
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
Then, make the padding consistent around .bodyContainer (replace it's padding-bottom with padding).
Finally, remove the min-height on the .layoutPage. Let the div's contents determine the height instead.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
position: relative;
}
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
To center your report add this style...
.bodyContainer {
text-align: center;
}
You can give the element you wish to center 'display:block' and 'margin:auto'
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: block;
height: auto;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
Take display: inline-block off .appRoundedShadow and you're done.
I'm using bootstrap 3.3.7. I've adapted the navbar template provided from the bootstrap documentation and a carousel from W3. My footer's width extends all the way to the side edges but my carousel and nav do not (in fact my carousel does not even extend to the same width as my nav). How do I fix this?
Image of problem:
#charset "UTF-8";
* {
margin: 0;
}
html body {
height: 100%;
}
.nopadding {
padding: 0;
}
.navbar {
background-color: #ff8300;
border-radius: 0 0 10px 10px;
border: 0;
height: 100px;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.navspace {
right: 50px;
margin-top: 25px;
position: relative;
font-size: 18px;
color: #fff;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
.thumbnails {
position: relative;
margin-top: 150px;
}
#myCarousel {
width: 980px;
max-width: 100%;
height: 654px;
bottom: 25px;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
border-radius: 0 0 10px 10px;
}
.banner {
background: url(../images/banner1.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner2 {
background: url(../images/banner2.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner3 {
background: url(../images/banner3.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner p {
position: relative;
font-size: 25px;
color: #fff;
top: 440px;
left: 20px;
}
.banner h1 {
position: relative;
font-size: 50px;
color: #fff;
left: 20px;
top: 420px;
}
.bodyimg {
max-width: 100%;
}
.bodytext1 {
color: #ff8300;
}
.bodytext2 {
color: #ff8300;
width: 160px;
margin-top: 37px;
}
.bodytext3 {
color: #ff8300;
margin-top: 60px
}
.bodytext4 {
color: #ff8300;
margin-top: 60px
}
.socialpadding {
padding: 0px 10px 0px 10px;
position: relative;
}
.centersocial {
margin: 0 auto;
text-align: center;
position: absolute;
}
.contactinfo {
color: #ff8300;
margin: 200px 0px 0px auto;
}
/* Add a background color and some padding around the form */
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 400px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
.formlabel {
color: #fff;
}
#inputMessage {
height: 200px;
}
.btn {
background-color: #fcb972;
border-color: #ff9300;
margin-top: 20px;
}
.btn:hover {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.btn:onclick {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.messageform {
height: 50px;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.formarea2 {
background-color: #fff;
border-radius: 10px;
width: 400px;
height: 50px;
margin: 50px auto 0px auto;
padding: 15px;
display: inline;
text-align: center;
}
#inputPostal {
display: inline-block;
width: 30%;
margin-left:3%;
}
.formpostal {
color: #ff8300;
font-size: 30px;
display: inline-block;
}
.menubg {
background-color: #ff8300;
height: 100%;
width: 100%;
max-width: 980px;
border-radius: 10px;
margin: 125px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.cartbtn {
margin-top: 20px;
position: relative;
left: 96%;
}
h2 {
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 30px;
}
.menubox {
background-color: #fff;
border-radius: 10px;
width: 321px;
height: 320px;
margin-top: 30px;
position: relative;
}
.menubox a {
text-decoration: none;
}
.item1 {
background: url(../images/menu1.jpg) no-repeat center;
border-radius: 10px 10px 0px 0px;
}
.menubox img {
border-radius: 10px 10px 0px 0px;
opacity: 0;
transition: .5s ease;
backface-visibility: hidden;
}
.menubox:hover .item1 {
opacity: 0.7;
transition: .5s ease;
}
.menubox:hover img {
opacity: 1;
transition: .5s ease;
}
h3 {
font-size: 16;
color: #ff8300;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 10px 10px 0 0;
height: 50px;
margin: 150px auto 0 auto;
position: absolute;
width: 100%;
max-width: 980px;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
footer {
position: relative;
color: #fff;
text-align: right;
margin-top: 30px;
font-size: 10px;
width: 100%;
max-width: 980px;
}
#media only screen and (max-width: 992px) {
.navbar {
background-image: none;
background-color: #ff8300;
width: 100%;
border-radius: 0px;
margin: 0;
}
.navspace {
padding: 0px 20px 0px 0px;
left: 120px;
top: 30px;
}
.navbar-collapse {
background: rgba(255, 255, 255, 0.75);
height: 300px;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 0;
overflow: hidden;
}
footer {
position: relative;
color: #fff;
display: block;
text-align: right;
font-size: 10px;
}
.contactinfo {
margin: 40px auto 0px auto;
text-align: center;
}
}
#media only screen and (max-width: 767px) {
#myCarousel.carousel {
max-width: 100%;
width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
}
.findus {
margin: 0 auto;
}
.centersocial {
position: relative;
}
.bodytext4 {
text-align: center;
width: 250px;
margin: 100px auto 5px auto;
}
.bodytext3 {
text-align: center;
width: 250px;
margin: 60px auto 5px auto;
}
}
#media only screen and (max-width: 576px) {
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 350px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* additional */
.row, #myCarousel, .container {
max-width: 100%;
margin: 0 auto;
}
<!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>Peperoni Pizzeria</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-static-top rounded-bottom">
<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="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navspace" href="index.html">Home</a></li>
<li><a class="navspace" href="menu.html">Menu</a></li>
<li><a class="navspace" href="location.html">Locations</a></li>
<li><a class="navspace" href="contactus.html">Contact Us</a></li>
<!-- Put here your menu items -->
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active banner">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
<div class="item banner2">
</div>
<div class="item banner3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img class="img-responsive center-block img-rounded" src="images/bodyimg.jpg" alt="">
</div>
<div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
<p class="bodytext1">
Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
</p>
</div>
<div class="col-md-offset-1 col-md-3 hidden-xs">
<p class="bodytext2">
Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!
</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext3">
Check us out on our social media accounts or subscribe to our newsletter for the latest updates!
</p>
<div class="centersocial">
<a href="#"><img class="socialpadding" src="images/email.png" alt="">
</a>
<a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
</a>
<a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
</a>
</div>
</div>
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext4">
Feel free to come explore our outlets
</p>
<a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 foot img-responsive">
<footer class"navbar-fixed-bottom">
Copyright © 2017 Peperoni Pizzeria. All Rights Reserved.
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
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.
I wrote a code for header as follows:
html,
body {
width: 100%;
min-width: 992px;
}
#content {
width: 100%;
padding: 0px;
}
#header {
/*background-color: #166bb3;
height: 85px;
min-width: 992px;
width: 1024px;*/
/* padding: 0 6%;*/
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #E5E5E5;
background-color: #166bb3;
}
#logo {
padding: 20px 0px;
}
#headerdetails {
padding: 25px 0px;
min-width: 400px;
}
.hddtlsItems {
color: #ffbf00;
font-size: 18px;
text-align: right;
padding: 0px;
min-width: 120px;
}
.subhddtlsItems {
color: #FFF;
/*margin-right: 3%;*/
font-size: 9px;
/* padding: 0px;*/
float: right;
min-width: 61px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="header" role="banner">
<div class="container clearfix">
<img id="logo" src="images/logo.png" alt="logo">
<div id="headerdetails" class="pull-right col-md-5"> <span class="col-md-3 hddtlsItems pull-right"><img src="images/routes.png" alt="r" style="width: inherit;">14567
<span class="subhddtlsItems">Routes</span>
</span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/transaction.png" alt="t" style="width: inherit;">$345.45
<span class="subhddtlsItems">Transaction values</span>
</span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/conversation.png" alt="c" style="width: inherit;">18456
<span class="subhddtlsItems">Conversations</span>
</span>
</div>
</div>
But right side elements aren't same as shown in this picture:
How can I move subtitles more upwards as shown in picture? Other elements like 18456, $345 etc are proper. For best results, execute the above code and view it in full screen.
According to you layout, you can just add
position: relative;
top: -8px;
(or whatever pixel value) to .subhddtlsItems but it's not the cleanest way to achieve this. Unfortunately I would have to change all your layout to make something more maintainable and consistent.