Basically #content is not obeying the height: auto attribute.
What am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title>
<style type="text/css">
#container
{
background-color: White;
height: 100%;
min-height: 100%;
min-width: 600px;
width: 100%;
}
#header
{
height: 50px;
overflow: hidden;
width: 100%;
}
#headerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg');
float: left;
height: 50px;
width: 5px;
}
#headerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg');
float: left;
height: 50px;
width: 99.2%;
}
#headerRight
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg');
float: left;
height: 50px;
width: 5px;
}
#menu
{
background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg');
height: 20px;
width: 100%;
}
#content
{
background-color: Pink;
height: auto;
width: 100%;
}
#footer
{
height: 40px;
overflow: hidden;
width: 100%;
}
#footerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg');
float: left;
height: 40px;
width: 5px;
}
#footerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg');
float: left;
height: 40px;
width: 99.2%;
}
#footerRight
{
background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg');
float: left;
height: 40px;
width: 5px;
}
* html #container
{
height: 100%;
}
*
{
margin: 0;
padding: 0;
}
html, body, form
{
border: none;
height: 100%;
}
</style>
</head>
<body>
<form id="form" runat="server">
<div id="container">
<div id="header">
<div id="headerLeft"></div>
<div id="headerCenter"></div>
<div id="headerRight"></div>
</div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer">
<div id="footerLeft"></div>
<div id="footerCenter"></div>
<div id="footerRight"></div>
</div>
</div>
</form>
</body>
</html>
Any ideas anyone?
Auto is already the default value.
Block level elements don't stretch to fill the parent's height.
So, that div is not supposed to stretch - is it? (Maybe see height calculation for block level elements )
Which would mean is is obeying the height:auto attribute.
Maybe you can do what you want using position: absolute; bottom: 10px; on the footer and some bottom-margin on the content.
Background might be tricky - maybe you can give "pink" background to all body, and white to the header and menu.
Related
I would like to have an element looking like a navbar at the top of my website:
It should be fixed, like a navbar. However, as soon as the user scrolls down, it should disappear under the rest of the content:
I tried something like that, where the #title element is the "navbar":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="title" class="center-align">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase" class="center-align">
</div>
</body>
<style>
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
}
#showcase {
margin-top: 50vh;
height: 75vh;
background-color: #212121;
}
</style>
</html>
However this is not working, the #title seems to be also affected by the 50vh margin-top (you can see it by setting its z-index to 1 instead of -1).
No need to use z-index
By default sibling are stacking by the order from bottom to top so the 1st child will at the bottom, the last child at the top. See example here:
Example of sibling z-index:
.div1 {
width: 100px;
height: 100px;
background: red;
}
.div2 {
margin-top: -50px;
margin-left: 50px;
width: 100px;
height: 100px;
background: green;
}
.div3 {
margin-top: -50px;
margin-left: 100px;
width: 100px;
height: 100px;
background: aqua;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
Solution to your problem:
#title {
width: 100%;
height: 100px;
text-align: center;
position: fixed;
top: 0;
}
#showcase {
margin-top: 120px;
height: 90vh;
background: black;
}
<div id="title">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase">
</div>
Try change your style with the following css . I made some changes for test purpose.
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
background: red ;
top:0;
}
#showcase {
margin-top: 50vh;
height: 275vh;
background-color: #212121;
}
Hope it helps
Here's an example using a fixed navabr and a normal div for the content having a margin-top:
body {
margin:0;
height:100%;
}
.navbar {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
background-color: lightblue;
z-index:-1;
}
.content {
width: 100%;
float: left;
height: 1000px;
margin-top: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div class="content">
Content
</div>
</body>
</html>
Add top: 0 to the title id. Like:
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: 1;
top: 0;
}
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.
I'm having a problem creating a layout that's partly liquid. The layout has to have 100% width and height but it shouldn't have scrollbars (overflow: hidden;).
On the image above shows what I'm trying to achieve. As you can see:
The header has to be fixed - 110px with 100% width.
Two divs wrapped via a container div. The blue one needs to be with fixed width 130px & 100% height, while the green one needs to be with liquid width and 100% height.
Here is my current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
float: left;
}
#content {
height: 88%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width: 91%;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div class="spacer"></div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
There are a couple of problems with this code:
It doesn't work on various resolutions (800x600,1024x768, 1280x1024 and etc)
The "content" div doesn't always fill the page to the end.
The green div would go below the blue one if you resize the page to lower resolutions.
I guess I might be doing something TERRIBLY wrong here but I'm not a designer so is there somebody who could point me to "the right way" of solving this problem?
Take a look here http://jsfiddle.net/bmqPV/2/
you have the left set to 100px and the right to 91%, so if 100px is greater than 9% it will go to the next line.
EDIT, here is a new fiddle http://jsfiddle.net/bmqPV/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index:3;
}
#content {
height: 100%;
width: 100%;
padding: 0;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
width: 100%;
}
#wrapper
{
position: relative;
height: 100%;
width: 100%;}
.contentcontainer {
padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
My Header
</div>
<div id="content">
<div id="left">
<div class="contentcontainer">Left container</div>
</div>
<div id="right">
<div class="contentcontainer">Right container</div>
</div>
</div>
</div>
</body>
</html>
You can achieve your result through a simple CSS with defining positions in #content & #right for better understanding please see the simple code:-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
#header {
background: black;
height: 100px;
}
#content {
width:100%;
border:5px solid red;
overflow:hidden;
position:relative;
}
#left {
background: #1664a0;
height: 100%;
width: 130px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width:100%;
position:absolute;
margin-left:130px;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
see the demo:- http://jsbin.com/ajasey/17/edit
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).