i am trying to do a page like this -
http://www.wickham43.supanet.com/tutorial/headerfooterfixexample.html
but i want just the bottom to stay.
so i created this but this is not working. can you pls tell me why?
<html>
<head>
<title></title>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="screen,print">
body,
html{
margin:0;
padding:0;
}
div#middlewrap {
margin-left:16px;
padding-bottom:50px;
}
/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
width:100%;
position:absolute;
bottom:0;
left:0;
height:50px;
}
body>div#footerwrap {
position:fixed;
}
div#footer {
height:50px;
width:1520px;
margin:0 auto;
}
/* Styling rules to make this demo page look nice. */
body,
html{
font-family:"Trebuchet MS", Georgia, Verdana, serif;
color:#335500;
background:#e9e9e2;
}
div#header,
div#footer {
background:#de7008;
color:#eee;
}
div #footer p {
margin:0;
padding:0;
text-align:center;
}
div#footer a {
color:#fff;
}
p {
margin-bottom:0;
font-size:0.8em;
line-height:1.4em;
}
pre {
font-size:0.9em;
line-height:1.4em;
}
</style>
</head>
<body>
<div id="middlewrap">
gfhgfhgfh
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf <br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="footerwrap">
<div id="footer"></div>
</div>
</body>
</html>
Here you go.
<!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"> <!-- make it play nice in IE -->
<head>
<title></title>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="screen,print">
body,
html{
margin:0;
position: relative;
padding:0;
}
div#middlewrap {
margin-left:16px;
padding-bottom:50px;
}
/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
width:100%;
position:absolute;
bottom:0px;
left:0px;
height:50px;
}
body>div#footerwrap {
position:fixed;
bottom: 0px;
}
div#footer {
height:50px;
width:1520px;
margin:0 auto;
}
/* Styling rules to make this demo page look nice. */
body,
html{
font-family:"Trebuchet MS", Georgia, Verdana, serif;
color:#335500;
background:#e9e9e2;
}
div#header,
div#footer {
background:#de7008;
color:#eee;
}
div #footer p {
margin:0;
padding:0;
text-align:center;
}
div#footer a {
color:#fff;
}
p {
margin-bottom:0;
font-size:0.8em;
line-height:1.4em;
}
pre {
font-size:0.9em;
line-height:1.4em;
}
</style>
</head>
<body>
<div id="middlewrap">
gfhgfhgfh
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf <br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="footerwrap">
<div id="footer"></div>
</div>
</body>
</html>
Related
I am trying to make a full screen layout with a scrolling content section.
Problem is the content section will not scroll, but instead the whole page scrolls.
.view-container {
display: grid;
grid-template-rows: 75px auto 50px;
height: 100vh;
}
.header-container {}
.body-container {
display: grid;
grid-template-columns: 200px auto;
}
.sidebar-container {}
.content-container {
overflow-y: scroll;
}
.footer-container {}
<div className="view-container">
<div className="header-container">Header</div>
<div className="body-container">
<div className="sidebar-container">Side Bar</div>
<div className="content-container">
Scrolling Content
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /> More Content...
</div>
</div>
<div className="footer-container">Footer</div>
</div>
.view-container {
display: grid;
grid-template-rows: 75px auto 50px;
height: 100vh;
}
.header-container {}
.body-container {
display: grid;
grid-template-columns: 200px auto;
}
.sidebar-container {}
.content-container {
overflow-y: scroll;
max-height: 100px;
}
.footer-container {}
<div class="view-container">
<div class="header-container">Header</div>
<div class="body-container">
<div class="sidebar-container">Side Bar</div>
<div class="content-container">
Scrolling Content
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /> More Content...
</div>
</div>
<div class="footer-container">Footer</div>
</div>
You need to specify height to get scroll worked otherwise it will take height auto.
I want to create a menu on the left of a website. The main idea is how youtube is making it:
you have a bar at the top (fixed) and always 40px height and 100% width.
on the left you have the menu. you can open and close it with a button that is in the top bar. if the menu is open, you have the menu fixed on the left with an own scrollbar inside. The menu is 100% height-40px (from the top bar withdrawn).
When the menu is closed the content has 100% width and when the menu is open, the content has 100%-menu width.
The window scroll bar scrolles only the content. menu and top bar are fixed.
Here is a little example: http://output.jsbin.com/gehatitaxe
and also the same in fiddle:
<!-- http://jsfiddle.net/zyam1m79/ -->
But now I have the problem, that the menu with 100% can not withdraw the 40px from the top bar. so the inner scrollbar can scroll a littlebit out of the window (to the bottom). In the menu text there is an "x" at the end and it is impossible to read it when you scroll all to the menu bottom.
How can I fix this? How can I set a fixed element height to 100% and it does not take the window height but the height from en element in an higher level?
greetings and thanks for any help,
Christopher
You can use the CSS calc property to calculate 100% height minus the top bar. Example:
.main_left {
height: calc(100% - 40px);
/* ... */
}
I noticed you have padding on the top and bottom, so the 40px above will need to include that as well, therefore calc(100% - 120px);. Either that, or add box-sizing: border-box; so the padding doesn't add to the height of the container.
When using position: fixed, try avoiding using 100% width / height. Instead, use left: 0; right: 0 for 100% width and top: 0; bottom: 0 for 100% height. See the example below:
.table { display: table; } /* table */
.table > * { display: table-row; } /* tr */
.table > * > * { display: table-cell; } /* td */
/* main container */
.main{
position: relative;
min-width: 1024px;
}
/* top */
.main_head{
width: 100%;
height: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
transform: translateZ(0px);
z-index: 1999999999;
}
.main_head > div > div{ /* all + search */
border: 1px solid #000;
}
.main_head > div > div:first-child{ /* menu */
border: 1px solid #000;
}
.main_head > div > div:first-child > i{
font-size: 40px;
}
.main_head > div > div:last-child{ /* User information */
width: 400px;
}
/* Container menu + content */
.main_left_content{
}
/* left: menu */
.main_left{
width: 200px;
left: 0;
top: 0;
bottom: 0;
padding-top: 40px;
padding-bottom: 40px;
border: 1px solid #000;
position: fixed;
}
.main_left > div{
position: absolute;
background-color: red;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
/* right: content */
.main_content{
border: 1px solid #000;
vertical-align: top;
}
<div class="main">
<div class="main_head table">
<div>
<div>
<i class="fa fa-bars fa-lg"></i>
</div>
<div>Suche</div>
<div>User Information</div>
</div>
</div>
<div class="main_left_content table">
<div>
<div class="main_left">
<div>
<div>
Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
<div class="main_content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
</div>
I am trying to create a layout with a top menu bar area, and then a split 75 / 25 screen with a fixed and covering background.
--------------------------------------------------------
| |
--------------------------------------------------------
| | |
| | |
| | |
| | |
| | |
| | |
--------------------------------------------------------
The left hand main area should scroll in the y direction as per any normal page.
The top menu bar should scroll with the main content.
But the region on the right hand area needs to have a fixed background that scales and covers this entire region (using CSS cover property), and is fixed - so it doesnt scroll, always covers this area, and is always visible.
I can do parts of this but not everything at the same time!
I can get the 75/25 split, get the top bar and the split, or get a covering and fixed background, but cant get everything to work together!
Ignoring top bar, this code works for everything except the position of the rhs background. The backgrounds are in place and are fixed, and the rhs background scales and covers, but it is not in the correct position within the block:
<!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>
<style>
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.lhs {
width: 75%;
float: left;
background: url(lhs_bg.jpg) repeat left top;
}
.rhs {
width: 25%;
float: right;
background: url(rhs_bg_1.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="lhs">
lhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
<div class="rhs">
rhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
</body>
</html>
Numbers are just there to show the content scrolling as it should and make sure the page is taller than the browser to force it to scroll.
My guess is that the background image is still sizing to cover the full screen, not the parent div element of the right hand area only - so you only see part of the full image in the rhs area, not the full image.
Any tips?!
Are you trying to achieve this? http://jsfiddle.net/oneeezy/kc4umn1c/1/
/* Rows (clears floats) */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; clear: both; }
.wrapper { margin: 4em auto 0; height: 100%; }
header { background: black; position: fixed; top: 0; left: 0; right: 0; padding: 1em; color: white; }
main { width: 75%; float: left; display: block; background: #f2f2f2; padding: 1em; }
nav { width: 25%; float: left; display: block; background: yellow; padding: 1em; position: fixed; right: 0; top: 5em; }
p { background: white; padding: 2em; margin: 1em 1em 2em; }
Are you looking for Something like This?
I use
#filler {
min-height:700px;
}
to make the site scroll.
<head>
<title>My Website</title>
<style type='text/css'>
body {
background-color: #EEE0A7;
margin:0px;
min-width:1200px;
}
.container {
text-align: center;
display:block;
}
#rightbanner {
background-color: orange;
width: 25%;
float: right;
margin-top: 1em;
margin-right: 2%;
min-height:250px;
padding:10px;
}
#content {
position:relative;
min-width:475px;
background-color: orange;
margin-left: 2%;
margin-right: 30%;
min-height:350px;
margin-bottom:1em;
margin-top:1em;
}
#filler {
min-height:700px;
}
h2 {
padding:0;
margin:0;
font-size:1.2em;
}
a {
color:black;
font-family: "Times New Roman", Georgia, Serif;
}
p {
padding:0;
margin:5px;
}
`.item {
width:468px;
margin:0 auto;
padding: 0;
border:gray solid 2px;
border-radius:10px;
}
header {
top:1em;
margin-right:2%;
margin-left:2%;
background-color: orange;
height: 3em;
margin-top:1em;
}
h1 {
margin-top:0;
}
}
#search {
display:none;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Website</h1>
</header>
<div id="rightbanner">
<div id="search">
<b>Search Box:</b><br>
<form method="get" action="#">
<input type="text" id="search_input" name="search" placeholder="Search" /><br>
<input type="submit" value="Search"/>
</form>
</div>
<b>MENU</b><br>
<div id=navbar>
<a href='#'>Site 1</a><br><a href='#'>Site 2</a><br>
</div>
</div>
<div id="content"><br>
<div class='item'>
<h2><a href='#'>Test-Link!</a></h2>
<audio controls>
<source src=#' type='audio/wav' />
<source src='#' type='audio/mp3' />
</audio>
<p><b>From:</b><a target='_blank' href='https://www.youtube.com/'>Video XY</a></p>
<p><h2><a href='download.php?id=1'>DOWNLOAD</a></h2></p>
</div><br>
<div class='item'>
<h2><a href='#'>Link-Test-2!</a></h2>
Here comes text
<p><b>Aus:</b><a target='_blank' href='https://www.youtube.com/'>Video ABC</a></p>
<p><h2><a href='download.php?id=2'>DOWNLOAD</a></h2></p>
</div><br>
<div id="filler">
</div>
</div>
</div>
</body>
It sounds like you want the background fixed on the right-side div, with the content scrolling over it?
check out this article:
http://nicolasgallagher.com/flexible-css-cover-images/
Based on that article, here's what I did:
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
}
body {
margin: 0px auto;
background-color:blue;
}
#menu{
height:250px;
background-color:green;
}
#container{
position:relative;
}
#lhs {
width: 75%;
float:left;
background: url(lhs_bg.jpg)repeat left top;
}
#rhs {
width: 25%;
float:right;
background-image:url(rhs_bg.jpg);
background-repeat:no-repeat;
background-position:50%;
background-size: cover;
}
</style>
</head>
<body>
<div id = "menu"></div>
<div id = "container">
<div id = "lhs">
lhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
<div id="rhs">
rhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
</div>
</body>
</html>
This keeps the background image in the right div fixed, but centered in the right div.
Try add the code in the .rhs
right: 0px;
position: fixed;
See if that's what you want. Or do you mean have rhs content also moving up, but the rhs background stays?
If that's the case, then just add another div for rhs with only backgound style. Sample.
I have two parts to my background: a repeated pattern, and a fixed image in the center – done like so:
body {
background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#center {
position: fixed;
height: 100%;
width: 100%;
background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat center center;
}
<body>
<div id="center"> </div>
<div><!-- page content, br's here as example to show how #center is "fixed" --><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</body>
See jsfiddle.net/Ps9JV.
What I'm trying to do is keep the fixed image central, but mask it to a 300px x 300px square in the top left of the body, like below. Is there any cross browser way to do this without javascript?
It's possible with calc, see here
body {
background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#c {
position:fixed;
width:100%;
height:100%;
margin: 50%;
}
#center {
/* image is 450px x 300px */
width: -moz-calc(525px - 50%);
width: -webkit-calc(525px - 50%);
width: -o-calc(525px - 50%);
width: calc(525px - 50%);
height: -moz-calc(450px - 50%);
height: -webkit-calc(450px - 50%);
height: -o-calc(450px - 50%);
height: calc(450px - 50%);
margin-top: -150px;
margin-left: -225px;
background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat top left;
}
I have this dirty html that is currently used in my company, the issue is that the hyperlinks or anchors work in IE8, but not in IE9 any reason why this is not working in IE9?. Basically its just clicking on the link and then it should focus on the id, like when i click on specialties I see the url changing like this
file:///C:/Users/TestUser/Desktop/test.html#c3
Now in IE8 when i do the click it correctly goes to that section #c3
Well this code does not work either in IE9
<!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>
<title></title>
</head>
<body>
<p id="titleC">Specialty</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p id="#c3">Did it work?</p>
<p>Then your code is wrong</p>
</body>
Thehash is the problem:
<p id="c3">Did it work?</p>
(without the hash) should work.
Maybe you should use
<a id="c3" name="c3">Did it work?</a>
for compatibility reasons.
All you attributes need to but surrounded by single or double quotation marks. For one on the many incorrect lines in the html
<P id=#titleQ class=style1>
Should be
<P id="#titleQ" class="style1">
Try adding this meta tag, maybe it would fix it:
<meta http-equiv="X-UA-Compatible" value="IE=8">
Run into the same issue and from my experience, on IE9 the anchor tag <a> does not recognise id or name on other elements other than another <a> tag, so as a workaround, you probably want to add a dummy empty <a> tag link above the element you want to link to, like so:
<body>
<p id="titleC">Specialty</p>
...
<a id="c3" name="c3"></a>
<p>Did it work?</p>
<p>Then your code is wrong</p>
</body>