I am tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]
Related
I'm new at coding and I've managed to figure out some things, but this one is bugging me deeply as I can't seem to find a solution.
I have an horizontal & vertically centered div on a page. I want to place a header on top of it, without decentering the main div.
How it looks like now (both are centered as a whole):
How I want it to look (yellow is centered, blue header on top):
..
Basic code:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.main {
width: 1000px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
This is most likely not the best answer, but it's a start.
Baisically I centered the container using this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.
HTML
<div class="centered-container">
<div class="header">
header stuff
</div>
<div class="content">
Content stuff here.
</div>
</div>
CSS
body {
background: #600;
}
.centered-container {
position: absolute;
left: 50%;
top: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 600px;
background: red;
color: white;
text-align: center;
}
.header {
height:100px;
background:blue;
}
.content {
height:300px;
background:teal;
}
fiddle here.
I made the content 600px wide and 300px high and header 100px high, just so it is easier to see.
The negative margin
<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
<style>
/** Web browsers load whatever is in the <head> tag FIRST
*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}
</style>
</head>
<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the
header. -->
<body>
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
</body>
I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height.
Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Footer</title>
<style type="text/css">
Html, body {
margin: 0;
height: 100%;
background-color: lightgreen;
}
header {
height: 40px;
background-color: green;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
height: 40px;
background-color: gray;
}
.fixedHeightDiv {
border: 2px;
border-style: solid;
height: 500px;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="content">
<div class="fixedHeightDiv">
Div 1
</div>
<div>
Div 2
</div>
<div class="fixedHeightDiv">
Div 3
</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?
Have a problem trying to have a header tab strip occupy the entire width of the browser. Below is the code. When the page is viewed in a browser, I see a horizaontal scroll bar for the browser, so, when you scroll over to the right, the bluish tab cuts out, revealing the white background.
How can I have this header tab expand when scrolled over too?
THanks.
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin-left: 10px;overflow: hidden; width: 100%; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<title>Example</title>
</head>
<body>
<div id="tabstrip" style="height: 25px; background-color: #63a3c7; color: White;">
</div>
<form id="form1" runat="server">
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</form>
</body>
</html>
It's coming from the margin-left: 10px; on your #wrapper. Remove it and the problem goes away.
jsFiddle example
If for some reason you need that bit of margin there, put it on the form instead.
See this. I removed the wrapper width 100%.
#wrapper { margin-left: 10px;overflow: hidden; }
Hope this helps!