I'm trying to make a div position itself at the bottom of the window, fixed location so that regardless of my scroll position it always stays at the bottom, and inside it has layered children divs.
Basically I've got a wrapper div, and inside I've got 2 child divs. One of the child divs displays completion percentage text, the other a progress bar. I want the text div to be on top of the progress bar div, and all of it to be inside the wrapper div, at the bottom of the window. Here is my HTML and CSS: CSS - <style>
-
body {
-
margin: 0px;
-
}
-
-
#progress_wrapper {
-
position: fixed;
-
bottom: 0px;
-
margin: 0px auto;
-
width: 100%;
-
height: 20px;
-
background-color: gray;
-
z-index: 0;
-
}
-
-
#progress {
-
position: absolute;
-
bottom: 0px;
-
left: 0px;
-
height: 100%;
-
border-right: 1px solid black;
-
background-color: #0f81a7;
-
z-index: 50;
-
}
-
-
#progress_text {
-
position: absolute;
-
bottom: 0px;
-
left: 0px;
-
width: 100%;
-
height: 100%;
-
color: #FAFAFA;
-
text-align: center;
-
z-index: 100;
-
}
-
</style>
HTML - <div id="progress_wrapper">
-
<div id="progress_text">Loading...</div>
-
<div id="progress" style="width: 0%;"></div>
-
</div>
This should work, but what I get instead is the wrapper div positioned at the top of the window and the text and progress bar positioned at the bottom, layered properly.
There has to be a way to make this work!
3 3062
I, for one, have been out of town and didn't have time to dive into this. One thing you should think about till I can get to this is that absolutely positioned elements are removed from the normal flow and will rise up to the first positioned element. Position:fixed is also an absolutely positioned element. Those two thoughts may be the reason for your problem but I won't be back home till some time tomorrow.
I still don't understand what you're telling me. Setting the position: fixed and bottom: 0px should make the element appear at the bottom of the page, I know this because I did it on another site. The only difference was that on the other page I didn't have asolutely positioned divs inside the wrapper div, I just allowed them to position themselves inside it. I need to have the divs overlap so that the text showing the percentage of completion is on top of the actual progress bar itself. Here is what I have so far: http://halo3shots.infectionist.com/progress.php
It's obviously wrong. I also had to really jerry rig the PHP to make it actually output the buffer every loop. Basically I have to output 64kb or more per loop, forcing PHP to flush it's buffer to the browser. But that's not my issue now.
I don't see that at all and the markup you show works. Which browser are you testing in? Your link doesn't show anything.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Ted Mayett |
last post by:
I've read a lot through the google archives, but I cannot seem to find
an example...
Has someone successfully made css code that allows for
position: fixed to work in IE 6.0.2800? What is the url please?
My partner is looking to make the top-right graphic stay in view as
the reader scrolls down the page:
<http://www.solitarytrees.net/trees.htm>
|
by: JIM.H. |
last post by:
Hello,
I am making my report control visible and invisible in my asp.net page. I
need to keep copywrite word at the bottom of my page. When component is
invisible it comes up. How can I define a fixed position?
Thanks,
Jim.
|
by: Sharon |
last post by:
Hi all.
I need to make a label that stays in a fixed position,
when the page is scrolled.
The javascript solution i have, is a bit jerky, and I'm looking for
something better.
Firefox is no problem, I'm looking for a solution for internet explorer.
Thanks,
Sharon.
|
by: vunet.us |
last post by:
This beautiful code allows a table header to be not scrollable in IE.
Since Firefox does not support this CSS method expression(...), the
code does not do the desired work in Firefox or other Mozilla browsers.
What is the workaround here? I tried position: fixed for Mozilla, but
it is making my table header unrelevant to the table, as if these are
two different objects.
<div style="overflow:auto; height:100px;">
<table cellspacing="0"...
|
by: vunet.us |
last post by:
Mozilla reported the fix to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=167801.
When input text field is located over div, the cursor cannot be seen
unless special CSS properties are applied. The link above illustrates
many example.
The problem I came across with, is almost identical, except that I
need to use position:fixed for my div element instead of
position:absolute as in all examples illustrated on Mozilla link. It
is...
| |
by: Roger |
last post by:
While there are several web sites that make use of sidebars, there are
relatively few that make use of fixed position sidebars. While fixed
position sidebars offer the advantage of having the page controls and
hyperlinks always visible when the user scrolls down a page, they have
one great disadvantage: a portion of the fixed position sidebar may not
be visible for some users because of a combination of small vertical
height and the...
|
by: kraj |
last post by:
hi,
i need a help in my web page, i used layer in my document in html and i want to set fixed position of that layer in page & if system resolution 800*600 or 1024*768, the layer must be in the same place no change in position.
how i can set this for my this requirement? please give reply as soon as possible....
thanks
|
by: subramaniam |
last post by:
Hi i want the script coding for How to move Div position from a fixed position to other position ?
|
by: anmcafresher |
last post by:
Hi Guys
Any Help highly appreciated..
Please let me know if there is a way to print the table footer at a fixed absolute position. My HTML Table footer gets printed at the same space where data in the table ends..is there a way to get that footer at the bottom of the printed page not on the html view.
|
by: Marten Kemp |
last post by:
I want to display a novel. I have the following
working fine except for the Back, Home and Next
buttons.
---------------------------
| Top Stuff |
---------------------------
| C | |
| h | ^ |
| a | | |
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |