In designing a working reservation page for my facility, one attribute has so far been impossible for me to get. That is a fixed header which is intended to always be visible and "on top", even if the calendar scrolls into it. Currently the behavior is that the calendar object scrolls over the header which leads to rather unattractive visuals. I have tried many work-a-rounds using various div/css settings which are designed to fix this sort of behavior and in in non-FC web pages work perfectly. The calendar over-rides, things like z-index and blocking settings for the container div's.[screen shot showing the header with calendar overlapping the header.
Does someone know how to force the calendar to render below a fixed header? Is this even possible without an overhaul of the CSS files?
So I got it working: Proper fiddling was key. Setting the z-index=-1 on the outermost page container plus careful attention to the layering and positioning of subsequent containers up to and including the calendar itself made it work.
I think my problem was that at first I didn't have a complete handle on the layering of containers in the document and was probably attempting to set the z-index of the outermost container of my header to a large value thinking it would push the header to the top of the stack.
The important CSS and body layout code is partially copied just for inspection
<style>
/* <!-- Masthead definition --> */
.header{
width:100%;
position:fixed !important;
height:auto;
padding-bottom:5px;
background:#c8102e;
top:50;
}
/* <!-- Set the main Calendar container to 100% width so that sub-containers can float center --> */
/* <!-- Set the main Calendar container relative position to help fix its position--> */
.mainPage {
width: 100%;
position:relative;
top:50;
height: auto;
z-index:-1; /* <!-- push its contents under the Masthead --> */
}
/* <!-- Set this subcontainer to absolute postion to help force it below Masthead--> */
/* <!-- maintain 100% width setting --> */
#calendarme {
position:absolute;
overflow:auto;
width: 100%;
margin-top: 130px;
margin-bottom: 10px;
}
</style>
<body>
<!-- Masthead content -->
<div data-role="page" id="page1">
<!-- Main Site Name Header imutable kind of -->
<div data-role="header" id="headerme" class="header">
<div class="inner-topHeader-panel">
<h1><center><b>UH SERC-NMR Reservation</b></center></h1>
</div>
</div>
</div>
<div data-role="page" class="mainPage">
<div role="main inner-centercontent" class="ui-content" id="calendarme">
<div id="FC-container" class="container" >
<!-- Calendar -->
<div id="calendar-div" class="container">
<div id="Calendar"></div>
</div>
</div>
</div>
</div>
</body>
Related
I'm trying to achieve a fixed sidebar where the footer should not interfere with the fixed sidebar.
<body>
<div>
<div class="sidebar"> <!-- Fixed sidebar -->
</div>
<div class="content">
<!-- Long article -->
</div>
</div>
<div class="footer">
</div>
</body>
You can use this code to fixate elements to viewport.
.sidebar {
position: fixed;
top: 100px; /* below the header */
height: calc(100% - 200px); /* substract the height of the header and footer */
}
You should have a look at this answer for the CSS3 calc-function: https://stackoverflow.com/a/14101451
If you inspect Google's code for this page, you'll see that the element is set to position: fixed once you've scrolled a certain amount as well as a top value set to the header's height.
It's max-height is lowered as the window's height lowers.
If you're satisfied with its browser support you could try position: sticky although I would advise not too as it's still only truly compatible with Firefox & Safari's latest versions.
You'll have to set your sidebar to position: fixed and adjust its position values using JavaScript on scroll. Or set it to fixed from the get-go and use z-index on your footer to cover it.
I have set my footer as a running element. The HTML content of the footer is set at the end of the document, thus making the footer show only on the last page of the document (which is what I want).
<!-- DTD declaration -->
<html>
<!-- head -->
<body>
<!-- My content -->
<footer>
<!-- footer content -->
</footer>
</body>
</html>
The problem is that the footer shows directly under the content, instead of its specified position:
footer {
width: auto;
margin: 0 auto;
position: running(footerIdentifier);
}
#page {
#bottom-center {
content: element(footerIdentifier);
}
}
I have tried the classic approach, but I need to calculate the push block dynamically depending on too much different content to get a perfect position for the footer everytime.
Shouldn't this code make the footer appear at the bottom center of the page?
I have been browsing the manual (HTML)(PDF) specifically for the Running Elements for a while and I can't seem to find my mistake.
I still didn't find why PDF Reactor won't behave like it should, but in the meantime I used the widely-known regular CSS way:
footer {
position:absolute;
bottom:0;
}
I'm having an issue with an expanding div tag that is nested within another div tag. In IE the expanding div tag expands outside the outer div tag when needed. However, in Chrome, when the inner div tag expands, it causes the outer div tag to get scroll bars. I would like the behavior to be the same as in IE - no scroll bars appear and the content overlaps the body content of the page (after all it is just the shopping cart widget).
Here is the code in my html page.
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
Here is my CSS:
#mastheadcontainer {
width: 100%;
margin: 0 auto;
background-color: #dcb;
border-bottom:10px solid #0066CC;
/*margin-bottom:20px;*/}
#masthead {
text-align: right;
width: 960px;
margin: 0 auto;
overflow: auto;}
#mastheadcontent{
width:956px;
height:122px;
margin:0 auto;
/*background-image:url('../images/bk-masthead.jpg');*/
/*background-repeat:no-repeat;*/
background-color:#dcb;}
Any recommendations so that the inner div tag expands similar to the behavior in IE when viewed in chrome?
Thanks
Mike
I assume your are talking about vertical scrolling and that the content inside your #mastheadcontent id is making a scroll bar appear when it exceeds 122 pixels.
I am not sure exactly what you want the end result will look like but here is what I suggest depending on what you are looking for:
Remove the height of the container so that the div will expand to fit the content inside of it. Note that since you are using a floated inside the container you will have to clear the container using a number of methods, one of them is using the property "overflow: auto;" on the #mastheadcontent. If you are not familiar with clearing floats I suggest you look at the multitude of guides on the web to help you understand the concept.
Or you want the content to expand past the boundaries but not expand the container itself, in that case you might want to use the property "overflow: visible;".
In any case you might want to play with the overflow property to get a solution to your problem, there is plenty of information on the web that should clear things up for you.
Hope this helps.
I answered my own question. Here is the current div structure of my site:
<div id="main>
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
To get the googlecart-widget to expand over the top of the content in the bodydiv element in Chrome, I had to add overflow:visible to all div elements in the mastheadcontainer and to the mastheadcontainer element. My new HTML div structure looks like this:
<div id="main>
<div id="mastheadcontainer" style="overflow:visible;"><!-- Begin mastheadontainer -->
<div id="masthead" style="overflow:visible;"><!-- Begin Masthead -->
<div id="mastheadcontent" style="overflow:visible;">
<div id="googlecart-widget" style="float:right; overflow:visible;"></div>
</div>
</div><!-- End Masthead -->
<div id="bodydiv">
</div><!-- End bodydiv -->
</div><!-- End main -->
This might be a bit of overkill setting the overflow property for all elements, but it worked.
I've got a simple CSS:
div.header
{
width:auto;
}
div.footer
{
clear:both;
}
div.middle
{
margin:5px 0 5px 0;
}
div.links
{
width:200px;
float:left;
}
div.content
{
width: 900px;
margin-left:210px;
}
and a simple page:
<div class="header">
<!-- some control inside -->
</div>
<div class="middle">
<!-- left navigation list -->
<div class="links">
<!-- some control inside -->
</div>
<!-- content place -->
<div class="content">
<asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footer">
<!-- some control inside -->
</div>
The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?
When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:
<div class="links">
<!-- some control inside -->
<div class="footer"></div>
</div>
If you plan on having more style on footer you might want to create a new class just for this purpose.
I think there are two ways you can solve this:
overflow on .middle:
.middle {
overflow: hidden;
}
put your footer (or another div with clear:both) inside middle, after the other two divs
http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html
heres an article about floating divs not expanding their parent divs
You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:
$("#links").click(function() {
var footer-height = $("#footer").css("height");
var links-height = $("#links").css("height");
var links_resize = ...code to determine how much to resize links div ....
$("#footer").css("height, " footer-height - links_resize);
$("#links").css("height, " links-height + links_resize);
});
Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.
Maybe IE8 was supposed to fix this issue, but it isn't fixed.
Take the code from that article for example
<style>
.container
{
width:300px;
background-color:green;
}
.box
{
float:left;
width:100px;
height:100px;
border:3px solid red;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)
I'm using this solution, which has worked for me before:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I'm currently working on a site, and it's not working. I think it's because I'm using absolute position on some divs on the page. Instead of sticking to the bottom of the page, the footer shows up under the header, on top of the absolutely positioned divs. How can I get sticky footer to work in this situation?
<div id="wrap">
<div id="container">
<div id="myDiv">
...content...
... this div is absolutely positioned
</div><!-- END aboutText -->
</div><!-- END container -->
<div class="push"></div>
</div><!-- END wrap -->
<div id="footer">
...footer content
</div>
Actually it's working now. Not sure why - one of those CSS mysteries. Here's a related question though - How do you set a minimum browser height, so that when someone is resizing the browser (making it smaller), the footer stops moving up and covering the content?
Edit - here's the CSS. The footer sticks to the bottom fine, but it covers the content divs on the page if the browser window is small.
html, body {
height: 100%;
}
#wrap{
width:950px;
margin: 0 auto -80px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.push {
height: 80px;
}
#footer{
height: 80px;
background-image:url(../images/img.jpg);
}
#container{
position:relative;
}
#someDivWithinTheContainer{
position:absolute;
left:230px;
top:300px;
}
The correct answer is position fixed, except that IE6 does not support that property.
Here's what I use for sticking the footer at the bottom. With this method, the footer never overlaps the content, no matter how small the window gets. If you edit it, make sure the padding-bottom on the #body div is greater than the height of the #footer div - this is what prevents overlap. I don't have any pages with absolutely-positioned content, so I don't know how it behaves with that; for floated content, naturally you need to have a clearing block after it, otherwise the #body div shrinks down.
CSS:
html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}
html:
<body>
<div id="container">
<div id="body">
(body contents)
</div><!-- #body -->
<div id="footer">
<p>(footer text)</p>
</div><!-- #footer -->
</div><!-- #container -->
</body>
And then to fix IE6, I add a conditional comment:
<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->
It's also important to have a doctype declaration so IE will be in standards mode, not quirks mode.
Fixed positions an element relative to the window frame, ignoring whatever scrolling happens within the body of the page.
People will sometimes use absolute because it is similar, but different.
One of the biggest misconceptions about "absolute" is that it is absolutely positioned within a page (at least based on all the people I've interviewed recently). It's not. Absolute means the element is positioned absolutely within its closest containing "positioned" element-- any element that doesn't have "position: static" (the default). If you don't position anything else, then it's the body, as you expect. Once you start using position, you will change what the element is relative to.
I suspect this is what you have run into.