Well, I am getting closer to tackling this issue, yet my playing with
values in the below body:after code didn't fix the issue which can be
seen in the screengrab here:
http://www.coffeeonmars.com/afterResults.jpg
for lack of better terms, it looks like it "wants" to behave itself,
but I can't get it to line up with the center bar (darker green)...
any suggestions? I messed with: left, width and margin-left
values...only made it worse!
;-)
thank you!
John
On Jul 20, 2011, at 2:43 PM, Ghodmode wrote:
Copy and paste the entire body:after block into your <style></style>
section, or into a separate stylesheet that's linked to the HTML page.
For testing, you can create a new page with a bunch of lipsum text if
you want, but it's pretty safe and I think it should work fine if you
want to copy and paste it into your live page.
Here's the block again:
body:after {
content: ".";
font-size: 0;
display: block;
position: fixed;
top: 0;
left: 50%;
width: 770px;
height: 100%;
margin-left: -385px;
background-color: gray;
z-index: -1;
}
It adds a block of content after the body...The important part is
how it's styled.
- font-size:0 hides the dot. That's probably not necessary in this
case, but it's a good practice.
- position:fixed positions it absolutely relative to the browser
window and, most importantly, makes it so that it doesn't move
when you scroll the content.
- left:50% puts its left edge exactly the center of the window.
Maybe it would be better to say "its left margin" because...
- margin-left:-385px moves it's left margin to the right by 385px,
which is exactly half of the width of the block. So, the left
margin is at the middle of the block.
- z-index:-1 moves it behind the content.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
