I am trying to create a CSS-based layout that has:
- A dynamically sized banner.
- A content area that should use all available space.
- A footer that aligns against the bottom of the page.
Currently, I have this. However, my challenge is working in the content area. Within the content area, I need to show:
- A dynamically sized header.
- A content area that uses all available space.
- A footer that aligns at the bottom of the content area, but above the footer mentioned above.
Altogether, I want to create a screen that looks like this:
+------------------------------------+
| Banner |
| |
|------------------------------------|
| Header |
|------------------------------------|
| Some Content |
| This needs to be dynamically sized |
| to fill all remaining content |
|-------------------------------------
| Toolbar |
|------------------------------------|
| Footer |
+------------------------------------+
Currently, I have the following
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
html, body{
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
font-size: .85em;
font-family: Arial, Verdana;
color: #232323;
background-color: #fff;
}
</style>
</head>
<body>
<div id="banner" style="width:100%; background-color:Black; color:White;">[Banner]</div>
<div id="content" style="width:100%; height:100%; background-color:Gray; margin:0px 8px 0px 8px;">
<h2>Header</h2>
<div id="contentArea">
<div id="mainContent" style="background-color:Silver;">The main content goes here.</div>
</div>
<div id="toolbar" style="padding:8px 0px 8px 8px;">
<input type="button" id="refreshButton" value="Refresh" />
<input type="button" id="addButton" value="Add" />
</div>
</div>
<div id="statusBar" style="background-color:black; color:White; width:100%; position:fixed; bottom:0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="width:33%;">Info</td>
<td style="text-align:center; width:34%;">Message</td>
<td style="text-align:right; width:33%;">Miscellaneous</td>
</tr>
</table>
</div>
</body>
</html>
This screen does not render as desired though. From what I can tell, when I set the "content" div height to 100%, it means 100% of the entire screen. In addition, I can't seem to get the "contentArea" div to take up the remaining space, nor can I get the toolbar to be aligned to the bottom. What am I doing wrong? How do I accomplish this?
This "sticky footer" technique should help with your footer problems. It will make it stick to the bottom, but will not overlap content like a position:absolute will if the page scrolls.
http://ryanfait.com/sticky-footer/
I believe you are asking how to make a side bar and the content section of a webpage appear to be equal in height without concern for the actual height of the content in either of the aforementioned div sections. If this is true, I believe I have what I perceive to be an easy answer to your dilemma.
Using HTML 5 and CSS 3, this is my proposal.
Starting with the CSS:
body{/*enter in your parameters */ }
.container{/*this div surrounds all the other divs and allows you to give percentage based widths in subsequent divs*/ max-width: 1000px; min-width: 760px; maergin: 0, auto, 0, auto; background-color: #000;}
.extraheight{float: left; width: 100%; height: 100%; background-color: #ccc;}
.header{width: 100%; color: #FFF; background-color: #00f; /*just for demo purposes*/ }
.sidebar{float: left; width: 30%; background-color: #ccc; /*match the background of the extraheight div*/ }
.content{float: left; width: 70%; background-color: #ccc; /*matches extraheight and siderbar colors */ }
.footer{color: #FFF; /* must make sure you clear the floats above */ position: relative; /* IE6 to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ }
Some basic HTML Using the above CSS to illustrate how it works:
<div class="container">
<div class="extraheight">
<div class="header"><h1>THIS IS MY WEBSITE</h1></div>
<div class="sidebar">
<p>This where you put your feed or whatever sidebar content you desire</p>
</div><!-- ENDS SIDEBAR -->
<div class="content">
<h2>This is where you place your content</h2>
<p>My site is the product of my effort and desire to provide each user with an enjoyable visit. We strive to exceed expectation without comprimising any needs. Check back often as our content is constantly changing.</p>
</div><!-- ENDS CONTENT -->
</div><!-- ENDS EXTRAHEIGHT -->
<div class="footer"><p>Put your footer content here</p></div>
</div><!-- ENDS CONTAINER -->
I don't have enough points yet to provide you with screenshots of how the page displays but I encourage you to give it a try. Most important issue to is to either make the extraheight div the background you want for the sidebar and content divs while making the background transparent in those divs or to make the sidebar and content divs the same background as the extraheight div. The latter being very easy when a solid color is used as the background but the former is necessary with a background that is any but extremely basic.
I hope this provided you with at least a portion of the information you were interested in when you posted. I am still trying to learn how to properly interpret the questions asked by our colleagues that post to this forum. Alas, I am new to this forum, but a quick learner!
Best wishes and success,
Steve K
Related
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
I'm using CSS to create a header graphic:
#header {
height:125px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
then:
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is there a way to make the graphic (space above the nav UL) into a clickable link?
thx
I don't think this is a good approach. If you want only the graphic to be a link put in a separate element:
CSS :
#header{
height:125px;
}
#headerImg{
display:block;
height:100px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
HTML :
<div id="header">
<span id="headerImg"></span>
<ul id="main_navigation">
Certainly: add a link tag. CSS is great at adding graphics and visual elements to pages, but if you want the page to do anything (e.g., to link somewhere) that has to be expressed somewhere in the HTML.
A common solution to what you're trying to do is to add an empty <a> tag, styled with a width and height that match the graphic you're using.
The above answers are correct in that you need an anchor tag in your HTML, but how that plays out depends entirely on what the image is that you are linking.
I don't see any reason to ever have an empty anchor tag. That's meaningless. Most likely you are either linking a logo or wordmark or site title or some combination. That should go in your HTML code, even if you plan to replace it with an image.
The first consideration is whether your header image itself is content or design. In the case of logos, it sometimes is content. In the case of site titles or wordmarks I would more often say the image is simply design, and the text is content.
For an image that is content in it's own right:
<div id="header">
<img src="logo.png" alt="My company">
<!-- navigation START -->
<ul id="main_navigation">
For an image that is replacing content:
<div id="header">
<h1>My Company</h1>
<!-- navigation START -->
<ul id="main_navigation">
and style:
#header h1 a {
display: block;
text-indent: -999em;
height: ??px;
background-image: url(path/to/image.png);
}
In either case, you have given semantic meaning to the area used as a link. I can't quite imagine a situation where you would want a meaningless link.
Keep everything the same, move the tags within the div so it validates. Add a class to the tag.
Class then is display:block and then height and width required. Job done, validating complete.
Erm, wouldn't this do it (or have I misunderstood?):
<div id="header">
You'll probably also want to add border:none to your #header
<a href="/whereever.php">
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is that what you wanted?
But I agree that the above answer is a better method
just do like this:
<div style=" height: 100px; background: url('logo.png')" >
<a href="/link" style="display: block; width: 100%; height: 100%" />
</div>
You can style your hyperlink attribute directly:
Example:
<a href="<your-link>" target="_blank" style="content: ''; width: 10px; height: 10px; background-image: url('<your-image-path>'); background-repeat: no-repeat; background-size: 10px 10px; display: flex">
i have three divs outside my contentplaceholder
masterpage code:
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
</asp:ContentPlaceHolder>
</div>
</div>
</div>
the width of content outer div is 1400px,it works well in the screen whose width is 1400 or more but when i run it in the scree of width 1024, the whole page starts from left,,,i want to center align my page when open in the browser,i have given some css properties like
content-outer:
margin-left:auto;
margin-right:auto;(not working)
but i m not able to center align my whole page,,,plz tell me how can i do that,,i have also given the same properties for body but again no luck
Firstly, the use of the center tag has been deprecated, so you shouldn't use it.
<center>
Your content here
</center>
Your solution of (I've put the css inline for clarity)
<div style="width: 1400px; margin: 0 auto;">
Your content here
</div>
Is the correct method of centering content on a page.
As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.
Your options are:
Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below
Hope this helps.
<div style="width: auto; margin: 0 10%;">
Your content here
</div>
just playaround with following styles
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
or
.divMain
{
position: absolute;
left: 10%;
width: 80%;
}
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
Here is the solution I finally came up with when using a div as a container for a dynamic background.
Remove the z-index for non-background uses.
Remove left or right for a full height column.
Remove top or bottom for a full width row.
EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
I had a similar problem and the solution was to do this:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
You can cheat using Faux Columns
Or you can use some CSS trickery
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
I ran into the same problem as you. I wanted to make a DIV as background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
It's simple using a table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>
Good luck ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
If you are targeting more modern browsers, life can be very simple.
try:
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}
<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>
This is how you can make your side nav as tall as the page content, without having to change the body to be flex or table.
Don't set html or body to height 100%, because that will make it only as tall as the browser viewport, and the page will be overflowing that, and your nav will only be as tall as the viewport.
Just set your nav to height:100% position:absolute with the html tag position:relative.
The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag.
<html style='position:relative'>
<body style='margin:0'>
<div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'>
nav
</div>
<div style='font-size:99px;padding:33px'>
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
</div>
</body>
</html>
This code works but not fully supports:
height: 100svmax;
Browsers support
Edit
Sorry, old answer is not correct..
i have tried all viewport units
but the only solution work using javascript here
Simple, just wrap it up in a table div...
The HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
The CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
I succeeded with
min-height: 100vh
for both, the menu and content div.