Ive created a webpage as you can see below, however i can't make the a section of the page to stretch all the way to the bottom as you can see by the dark area in the image. I've done research and searched through som of the similar posts in here but nothing i've tried seem to do the trick.
Height:100%; position:relative; Doesnt work
Height:auto; min-height:100%; Doesnt work
Bottom:0; Doesnt work
html{
height:100%;
}
#home {
background: url(../img/chemical.jpg) no-repeat center center; /*Full Witdth background image*/
padding: 0;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size: cover;
min-height: 600px;
width:auto;
min-width:100%;
}
/*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/
#home .overlay {
padding-bottom:20%;
background-color: rgba(0, 116, 112,0.6); /*.75 opacity of the color so that background image is visible*/
min-height: 600px;
color: #fff;
width:auto;
min-width:100%;
}
body {
margin-top: 100px;
background-color: #222;
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
bottom:0;
padding: 0;
background-color: #fff;
}
<body>
<div id="wrapper" style="height:auto; min-height:100%">
<!-- Navigation -->
<?php include 'navbar.php'; ?>
<div id="page-wrapper">
<div id="home">
<div class="overlay">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
View All Overdue Lab Tests
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="row" style="height:100%">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-long-arrow-right fa-fw"></i> All Overdue Lab Test:
<button style="float:right; height:25px; width:200px; color:black; border-radius:25px 25px 25px 25px;" value="hello">Prompt Overdue Items</button>
</div>
<div class="panel-body" style="color:black;">
"Table Data"
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
100% height elements will only be 100% of the viewport if all parents have 100% height.
To start:
html, body {
height: 100%;
}
As well as the two parents #wrapper and #page-wrapper.
The alternative is to use 'Viewport Units' like vh.
#home {
min-height: 100vh;
}
That will work regardless of parents heights. Here is the caniuse browser support table.
Related
I would like to position the icons where the red square is. But I have tried the position: relative and position absolute but I dont understand why its not working.
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png">
<h4>Catering</h4>
The Menu
<br>
Today's Menu
<br>
Gallery
<br>
Festivities
<br>
</div>
</div>
.wrap {
position:relative;
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
position:absolute;
top:-50%;}
Not sure why this isn't working for you; I plugged it into a Fiddle and (while it doesn't behave the way I think you'd want) it seems to move the image up just fine. Here's a fiddle of a slightly different approach (not using position attributes; just applying a negative top margin) that might get you closer.
https://jsfiddle.net/35aohm3y/
.wrap {
margin-top:50px; /* push the wrap down a bit. You might not need this */
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
background:#666; /* added just for demonstration purposes */
margin-top:-50px; /* and push the image up a bit */
}
You can use a negative margin to pull the image up and out.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.options ul,
.options li {
margin: 0;
padding: 0;
list-style: none;
}
.options>div {
margin: 50px 0;
/* for demo */
}
.options .wrap {
padding: 1rem;
text-align: center;
background-color: #e9e9e9;
}
.blockico {
margin-top: -50px;
}
<div class="container-fluid">
<div class="row options">
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Restaurant</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>City Club & Garden</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Catering</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
</div>
</div>
update css blockico
.blockico {
position:absolute;
transform: translate(-50%,-50%);
left: 50%;
}
I am working on a project where we are using blocks which contains text. The blocks have a header image. The result should be something like the picture below.
The problem I am facing is that the image is set using the CSS background-url propertly, which makes the image go beneath the text instead of being displayed as a header image. I am using the code below, for the purpose of this question in the style of the picture above:
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: contain;
height: 300px;
}
This creates the <div> that I need, however as you can see on the picture below, it does not give me the result I want.
I have tried setting the .header to display: block, but this did not change anything. I have also tried using margin to force the text to be displayed under the image, which did not work either. Can someone help me to get the result I want?
The relevant HTML is down below.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
Change your html to below:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header">
</div>
<div class="block">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
You have put block and header in the same div, so your background-color in .block class is overriden by background of .header class.
Here is fiddle.
If you really want to use a background image, consider using % padding. That also helps the layout stay responsive. Also, cover forces the background image to cover the entire div, so you don't want that at all.
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 32%;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
I keep my original suggestion of using an <img> instead of a background image. It is both easier to implement and more correct semantically.
I've tried to simulate the result in your image below:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row content">
<img class="header_img" src="https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png" />
<div class="col-md-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.header_img{
width: 100%;
height: auto;
}
.content{
background-color: white;
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}
Demo: http://jsfiddle.net/bh7Lh42k/1/
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* 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;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
I have the following HTML (and also at http://jsfiddle.net/pHXSJ/). In IE and Firefox, it works as expected. However, Chrome and Safari do not correctly position the footer at the bottom of the viewport.
I have tried many things suggested here already, including implementing from cssstickyfooter.net. While those techniques work, they start to fail once I try to provide the (in the example) green side bar color. Note there is no content slated for those sidebars.
<!DOCTYPE html>
<html>
<head>
<title>2012 test</title>
<style>
html,body,form {height: 100%;}
body,p{margin:0}
div#wrapper {height:100%;background-color: transparent;}
div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;}
div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;}
div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;}
div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;}
div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;}
</style>
</head>
<body style="background-color:green;">
<form>
<div id="wrapper">
<div id="contentwrap">
<div id="content">
<div style="padding-top: 3.5em;">
<div id="lcol" style="float:left;position:relative; width:38%">
<p>Left</p>
</div>
<div id="rcol" style="float:right; position:relative; width:60%;">
<p>Right 1 total of 35</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 5</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 10</p>
</div>
<div style="clear:both;position:relative;">
</div>
</div>
</div>
</div>
<div id="header">
<div>Main Header</div>
</div>
<div id="header2">
<div>Header level 2</div>
</div>
</div>
<div id="footer" style="">
<div>Footer text</div>
</div>
</form>
</body>
</html>
If i look at your css this part is missing:
div#wrapper { min-height: 100%; padding-bottom: -4em; }
This should fix your problem in Chrome.
So I've been using CSS table display property to get a table layout on my site. Now before you go into the using 'float' property or use the HTML table tag, I prefer the CSS table layout and find it better and my mind is made up. Here is the HTML code:
<div class="page_wrap">
<div class="header">
<div class="banner">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Topics</li>
<li>"Closet"</li>
<li>Music</li>
<li>Resources</li>
<li>About</li>
</ul>
</div>
<div class="directory"></div>
</div>
<div class="content">
<div class="main_col">
<div class="blog">
<div class="blog_head">
<h3>What To Wear Today</h3>
</div>
<div class="blog_body">
<p></p>
</div>
<div class="blog_recent"></div>
</div>
<div class="news">
<div class="news_recent"></div>
</div>
</div>
<div class="sub_col">
<div class="daily_verse">
<h3>"What Word To Wear Today"</h3>
<p></p>
</div>
<div class="bible_topic"></div>
</div>
</div>
<div class="footer">
<div class="container"></div>
</div>
</div>
And here is the CSS:
.content
{
display: table-column-group;
margin-top: 25px;
}
.main_col
{
display: table-column;
background: red;
width: 550px;
padding: 20px 15px;
}
.sub_col
{
display: table-cell;
background: green;
width: 350px;
padding: 20px 15px;
}
.blog
{
display: table-cell;
background: black;
}
.blog h3
{
padding: 20px 0px;
width: 250px;
}
.news
{
display: table-cell;
background: gray;
}
.daily_verse
{
display: table-cell;
}
.bible_topic
{
display: table-cell;
}
</style>
The problem is when I use the table-column property in the CSS, then everything in the HTML tag under the main_col div disappears.
Use this example as your structure and go from there. Your table is crazy disorganized and I don't think you are actually wanting table-columns. Or maybe an illustration of how you'd like it to look would help and we could provide code examples?
(http://xahlee.info/js/css_table.html)