#bottom_fade {
position: absolute;
bottom: 0;
width: 100%;
background: url("bottom-fade.png");
background-repeat:repeat-x;
height: 400px;
z-index: 2;
}
.categories {
position: absolute;
left: 50%;
color:black;
word-wrap: break-word;
font-family: 15px 'Libre Baskerville', serif;
margin-left: -200px;
z-index: 1;
}
.categories td {
width: 200px;
}
you may see the result of the above code here.
Try to resize your browser window so that you're forced to scroll to see the whole text in the table.
As you scroll, you may see that #bottom_fade will not remain sticked to the bottom of the page but will follow your scrolling. I don't want that to happen: how can I say to bottom_fade to ALWAYS stays attached to the bottom of the browser window, no matter what happens to the scrollbar?
Many thanks!
Change
#bottom_fade {
position: absolute;
}
to
#bottom_fade {
position: fixed;
};
and it should work like a charm.
(nice effect by the way!)
Related
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
Please review my Fiddle Sample.
Click on a calendar day with an event (orange square).
You'll notice that the date box, is at the bottom of the window.
In the stylesheet, there's a snippet like this...
.calendar *{
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical align: top;
behavior: url(pie/PIE.htc);
}
...the vertical-align: top; should bring that box to the top of the window, but it doesn't.
If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.
Not sure why this is... Thoughts?
I seems to be a height issue. Remove height: 100%; from .calendar .c-specific
.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}
This is the line you need to change:
.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/
behavior: url(pie/PIE.htc);
}
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.
i have problems with the alignment of divs.
My layout consists of one div view_central which contains three other divs namely view_central_top, view_central_left and view_central_right. Chrome and FF render the wanted result: a top div with a bannner, the navigaiton to the left and the content to the right.
IE 7 offsets the content div view_central_right 10 px to high thus covering part of the banner div view_central_top.
The css code looks like this:
.view_central
{
position: relative;
width: 827px;
height: 100%;
}
.view_central_top
{
position: absolute;
top: 0xp;
left: 0px;
height: 118px;
width: 828px;
}
.image_borderless
{
border: 0px none;
}
.view_central_left
{
position: relative;
left: 0px;
top: 118px;
width: 187px;
height: 683px;
background: #C7D2EB;
font-size: 11px;
}
.view_central_right
{
position: relative;
left: 0px;
top: 118px;
width: 640px;
height: 683px;
background: #FFFFFF;
}
Can anyone help me out. Thanks.
My first thought -- browser dependent padding or margins. A CSS reset (at least for div elements) might be worth trying.