Ah-hah!
fooling around more seems to have paid off...I re-visited your value
for margin-left, noticing that it was off by about as wide as my left-
hand menu, so I began adding values, subtracting 3 for...I'm not
sure...I'll need to track down those 3 pixels.
At any rate, that column appears to line up with the center bar now,
and visually makes it extend to the bottom of however large the
browser window is.
More experimenting until I feel solid in how :after behaves..
thank you for hanging in with me on this!
John
On Jul 21, 2011, at 11:30 AM, John wrote:
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/
______________________________________________________________________
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/
