Re: [css-d] 100% height issue, and graphic placement q's
http://coffeeonmars.com/testing/17NewIndex.html might not be perfect code, but I believe it addresses many of the issues several of you commented on. *Many* thanks for the generous help. I hope to be able to evolve this thing to meet my design goals. Now, time for a beer. J __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On 26/07/2011 9:06 AM, John wrote:
On Jul 22, 2011, at 7:17 AM, Alan Gresley wrote:
Delete the whole declaration block of _body:after_ and amend these two
style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger hasLayout */
}
Alan: if you don't mind, a few questions about this code? I've been
tinkering and entering what you supplied above a line at a time to get a
feel for what each bit does.
Why'd you go with width: 770px? I was thinking my smallest likely
monitor would be 1024, and if they had a larger monitor and could widen
that, THEN they'd see the lighter background to either side. Just
wondering if yours was an aesthetics decision or had some other
code-based reason?
No, I used the 770px because that was the width that was there and it
seem to be the same width that you had with the original layout here (I
had to search a bit to find the link to the page that this thread was
about).
http://www.coffeeonmars.com/page.html
You could use 1024px but if you do use pixels, you may have trouble with
overflowing content if a very large font-size is used by the user. You
could use min-width: 1024px. BTW, IE6 treats width as min-width due to
the expanding box bug so you CSS would have.
.livebar {
min-width:1024px;
}
* html .livebar {
width:1024px;
}
Also, the *html .livebar bitthat is IE-specific, I'm getting,
I should mention that it is '* html' (with whitespace) and not '*html'
(without whitespace). The former is a valid CSS selector which only
IE5~IE6/Win and IE5/Mac will use. The later in an invalid CSS selector
(there is no element *html) and IE7 will use it. IE7 doesn't need it
since overflow: auto triggers hasLayout.
but
how does one even know what to drop in there? I guess years of getting
knuckles scraped by Explorer? Or, is there a repository of such things?
That is why I added this CSS comment.
/* For IE6 since overflow: auto does not trigger hasLayout */
Since you have floated content, you need to declare on the parent
element a property/value that establishes a block formatting contexts
(BFC) [1] to enclose the floats. Since overflow: auto does not work, we
need to use another hasLayout trigger and sensibly one that will never
be used (a height of 1%). This is known as the Holly Hack (scroll down
to height).
http://www.satzansatz.de/cssd/onhavinglayout.html#prop
Thank you and the others for helping me on this problem. It's been a
huge education!
John
Your welcome.
[1]
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 22, 2011, at 7:17 AM, Alan Gresley wrote:
Delete the whole declaration block of _body:after_ and amend these
two style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger
hasLayout */
}
Alan: if you don't mind, a few questions about this code? I've been
tinkering and entering what you supplied above a line at a time to
get a feel for what each bit does.
Why'd you go with width: 770px? I was thinking my smallest likely
monitor would be 1024, and if they had a larger monitor and could
widen that, THEN they'd see the lighter background to either side.
Just wondering if yours was an aesthetics decision or had some other
code-based reason?
Also, the *html .livebar bitthat is IE-specific, I'm getting,
but how does one even know what to drop in there? I guess years of
getting knuckles scraped by Explorer? Or, is there a repository of
such things?
Thank you and the others for helping me on this problem. It's been a
huge education!
John
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On 22/07/2011 2:34 PM, Ghodmode wrote:
On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtungunla...@c2i.net wrote:
On 21.07.2011 20:30, 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
Have more or less lost track of what you're trying to achieve...
I'm getting confused too, but I think I understand what we want to achieve.
So, I applied my original recommendation... I just copied my body:after
block into the stylesheet and this is what I came up with:
http://www.ghodmode.com/testing/coffeeonmars/
It works just like I said it would in Firefox, Chrome, Opera, and
IE9... not so much in earlier versions of IE.
I saw a lot of mistakes in the code like opening tags without closing
tags and stuff that just didn't make sense. I couldn't leave well enough
alone, so I modified it:
http://www.ghodmode.com/testing/coffeeonmars/fixed/
Delete the whole declaration block of _body:after_ and amend these two
style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger hasLayout */
}
#menu {
float: left;
clear: left;
margin: 1em 0 0 0;
background-color: #808580;
width: 130px;
border:solid #424842;
border-width: 1px 0;
}
The layout should work in all browsers consistently. BTW, the below
comment is not quite true.
/* Margins are handled inconsistently on different
* browsers. Since this object is absolutely positioned
* anyway, use the position properties to position it
* instead of the margin.
margin: 10em 0 0 0;
*/
Please view these two test in IE7 comp. mode and you may understand what
is happening with IE7.
http://css-class.com/test/bugs/ie/haslayout-margins.htm
http://css-class.com/test/bugs/ie/floatsandblockelements.htm
And this article.
http://www.satzansatz.de/cssd/onhavinglayout.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Fri, Jul 22, 2011 at 10:17 PM, Alan Gresley a...@css-class.com wrote: ... The layout should work in all browsers consistently. BTW, the below comment is not quite true. /* Margins are handled inconsistently on different * browsers. Since this object is absolutely positioned * anyway, use the position properties to position it * instead of the margin. margin: 10em 0 0 0; */ I guess I was avoiding something that isn't really a problem any more. Before I commented out the margin to use positioning, there was something weird going on with the margins, though. In any case, I was referring to this: http://css-discuss.incutio.com/wiki/Box_Model_Hack#Why_does_the_CSS_box_model_need_a_hack.3F -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
Thanks for all the help Georg, Alan and Ghodmode... in a way, it's good to know that part of my woes were due to sloppy coding and tags... John On Jul 21, 2011, at 9:34 PM, Ghodmode wrote: On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtun gunla...@c2i.net wrote: On 21.07.2011 20:30, 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 Have more or less lost track of what you're trying to achieve... I'm getting confused too, but I think I understand what we want to achieve. So, I applied my original recommendation... I just copied my body:after block into the stylesheet and this is what I came up with: http://www.ghodmode.com/testing/coffeeonmars/ It works just like I said it would in Firefox, Chrome, Opera, and IE9... not so much in earlier versions of IE. I saw a lot of mistakes in the code like opening tags without closing tags and stuff that just didn't make sense. I couldn't leave well enough alone, so I modified it: http://www.ghodmode.com/testing/coffeeonmars/fixed/ I put some explanatory comments in the stylesheet. This version works almost as well in IE8, and is at least usable in 7 and Quirks mode. Note that I've only used IE's Developer Tools Document Mode to test rendering for earlier versions of IE. I haven't used the actual earlier versions. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] 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 [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
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 [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On 21.07.2011 20:30, 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 Have more or less lost track of what you're trying to achieve, but maybe this is close enough... http://www.gunlaug.no/tos/alien/j/john.html http://www.gunlaug.no/tos/alien/j/john_files/styles00.css regards Georg __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
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 [css-d@lists.css-discuss.org]
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 [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 21, 2011, at 1:02 PM, G.Sørtun wrote: Have more or less lost track of what you're trying to achieve, but maybe this is close enough... http://www.gunlaug.no/tos/alien/j/john.html http://www.gunlaug.no/tos/alien/j/john_files/styles00.css regards Georg thank you, Georg; what you posted is *almost* what I'm after. what I need to do is make the center, darker area visually go the the bottom of the browser window no matter how short or tall it is, but yours does make that center area stay put whereas mine would creep up and down pretty annoyingly... J __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On 21.07.2011 22:15, John wrote: what I need to do is make the center, darker area visually go the the bottom of the browser window no matter how short or tall it is, I see. Reload... http://www.gunlaug.no/tos/alien/j/john.html http://www.gunlaug.no/tos/alien/j/john_files/styles00.css ...and see if it is OK with 'height: 100%' strategically added. Georg __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
You're mixing floats and absolute positioning on major element, which can't work in such a layout. The mix of 'em' and 'px' for margins and width also doesn't work well in such layouts. So, reload again... http://www.gunlaug.no/tos/alien/j/john.html http://www.gunlaug.no/tos/alien/j/john_files/styles00.css ...and test with the basic fixes for those flaws in place. Georg __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtun gunla...@c2i.net wrote: On 21.07.2011 20:30, 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 Have more or less lost track of what you're trying to achieve... I'm getting confused too, but I think I understand what we want to achieve. So, I applied my original recommendation... I just copied my body:after block into the stylesheet and this is what I came up with: http://www.ghodmode.com/testing/coffeeonmars/ It works just like I said it would in Firefox, Chrome, Opera, and IE9... not so much in earlier versions of IE. I saw a lot of mistakes in the code like opening tags without closing tags and stuff that just didn't make sense. I couldn't leave well enough alone, so I modified it: http://www.ghodmode.com/testing/coffeeonmars/fixed/ I put some explanatory comments in the stylesheet. This version works almost as well in IE8, and is at least usable in 7 and Quirks mode. Note that I've only used IE's Developer Tools Document Mode to test rendering for earlier versions of IE. I haven't used the actual earlier versions. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
Ghodmode;
would you please clarify what you have below as body:after
Is this a different tag I'd be applying?
thanks!
John
On Jul 14, 2011, at 1:34 PM, Ghodmode wrote:
Approach the problem differently. You want a differently colored
background to your content, right? Try adding some content with
position:fixed with a negative z-index to force it behind the content.
Then, it's still only the height of the viewport, but it doesn't move
when you scroll.
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;
}
This way has the added benefit of removing an element from your
content that was only there for presentation anyway.
--
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
:after is a pseudo element. Here's some info about it and its use. http://css-tricks.com/9189-browser-support-pseudo-elements/ -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John Sent: Tuesday, July 19, 2011 1:57 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] 100% height issue, and graphic placement q's Ghodmode; would you please clarify what you have below as body:after Is this a different tag I'd be applying? thanks! John __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
would you please clarify what you have below as body:after
This is what's known as CSS Generated Content. A Google search will
turn up details and other examples
Is this a different tag I'd be applying?
Not exactly. Basically, it's a way to add stuff to a page with CSS
(and without adding more HTML), for things that are for display only.
In this example, there is now a period after the body tag with the
applied styles (a big gray box).
A more simple example might be
h4:after {content: ':'}
which would add a colon after all your h4 tags.
---Tim
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
There is something I'm not getting about appliying/implementing this.
I've read a couple of links discussing it, and I see how you can
manipulate text in a number of useful ways..
but I don't get how I can make my center (content) column go as far,
visually as the browser window is open, and enable scrolling, and not
have the center column color simply end when the browser window is
made shorter.
If this pseudo tag idea is the key, I'm not gettin' it.
thanks for shedding any light on this for me!
John
Approach the problem differently. You want a differently colored
background to your content, right? Try adding some content with
position:fixed with a negative z-index to force it behind the content.
Then, it's still only the height of the viewport, but it doesn't move
when you scroll.
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;
}
This way has the added benefit of removing an element from your
content that was only there for presentation anyway.
--
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 13, 2011, at 10:48 PM, Philippe Wittenbergh wrote: On Jul 14, 2011, at 4:42 AM, John wrote: 1. Why does the center area not go to the bottom? I put in height: 100%; for both the body of the document and for that center area. If the idea is that div.livebar stretches from top to bottom of the /document/, then you have to declare a min-height on the root element; then a height:100% on the body element will be as tall as the document (as opposed to being the height of the viewport, as it presently is as noted already). Except for absolute positioned elements, a %-based height can only be computed based on a ‘known’ (specified) height. read a bit in CSS 2.1 chapter 10 - specifically 10.5 and 10.6.3 http://www.w3.org/TR/CSS21/visudet.html#the-height-property http://www.w3.org/TR/CSS21/visudet.html#normal-block After reading this email and the links suggested, something isn't adding up in my head. I think I get what's being said, I think I've typed the right code, but I don't see the right behavior. If I'm getting inheritence, then the body is the mama of all inside it, including my center column. if both mama and center column have height: 100%; and if that's relative to the inner browser window, then I ought to see that center column extend to the bottom of the window no matter how tall or short my browser window is, right? What's more than 100%? It looks like something else is influencing the behavior of this code. But I swear I don't see what it is...any clues? thanks! John __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Wed, Jul 20, 2011 at 4:57 AM, John j...@coffeeonmars.com wrote: Ghodmode; would you please clarify what you have below as body:after http://www.w3.org/TR/CSS21/generate.html#before-after-content http://w3schools.com/cssref/sel_after.asp Is this a different tag I'd be applying? That's exactly how you would put it into your stylesheet. __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Wed, Jul 20, 2011 at 5:51 AM, John j...@coffeeonmars.com wrote:
There is something I'm not getting about appliying/implementing this. I've
read a couple of links discussing it, and I see how you can manipulate text
in a number of useful ways..
It creates new content in your page without it being part of the HTML
markup. You can style that new content however you want.
but I don't get how I can make my center (content) column go as far,
visually as the browser window is open, and enable scrolling, and not have
the center column color simply end when the browser window is made shorter.
You're right. It ends at the bottom of the browser window. However, when you
scroll your content, it doesn't move because of the position:fixed. So, it has
the desired effect without having to go to the end of the page.
If this pseudo tag idea is the key, I'm not gettin' it.
Put it in a test page and I think you'll get it :)
thanks for shedding any light on this for me!
John
Approach the problem differently. You want a differently colored
background to your content, right? Try adding some content with
position:fixed with a negative z-index to force it behind the content.
Then, it's still only the height of the viewport, but it doesn't move
when you scroll.
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;
}
This way has the added benefit of removing an element from your
content that was only there for presentation anyway.
--
__
css-discuss [css-d@lists.css-discuss.org]
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 [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Wed, Jul 20, 2011 at 6:53 AM, John j...@coffeeonmars.com wrote: After reading this email and the links suggested, something isn't adding up in my head. I think I get what's being said, I think I've typed the right code, but I don't see the right behavior. If I'm getting inheritence, then the body is the mama of all inside it, including my center column. if both mama and center column have height: 100%; and if that's relative to the inner browser window, then I ought to see that center column extend to the bottom of the window no matter how tall or short my browser window is, right? If the body height is set to 100%, it will be exactly the height of the inside of the browser window. However, it's content can be longer than that. Don't mistake the height of the inside of the browser window as the height of the content. Forget about the content. If your browser window is 1024x768, the inside of the browser window is 768px minus the height of the ui elements like toolbars, status bar, menus, etc. That scrollbar on the right lets you see more content by moving the content into the browser window. Think about it like a real life window... If you have a 1000-foot-high mountain outside your window, but you can only see 10 feet of it by looking through your window, that doesn't make your window 1000 feet high because there's more to see. In the same way as the mountain, the content can be bigger than the browser window, but that doesn't make the browser window bigger. What's more than 100%? The cumulative height of the content is (apparently) more than 100%. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 13, 2011, at 3:09 PM, Ghodmode wrote: something about that sounds familiar...do I need to add something like overflow: notvisible; overflow: hidden; or you can play with overflow:scroll on certain elements, but that has lead to weird scrolling for me in the past. http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow overflow: hidden; did solve the one problem, but now, when the browser window is made small, the user will be unable to scroll. Imagine a scenario where you need to have a browser window open, and maybe a text document at the same time, or other applications. when I had a 1024 x 768 powerbook, I was always juggling my screen space that way. Can I both get the visual I want of having that center area go down as far as the browser window is open, AND have the user be able to scroll? Do I need to give some silly height value, like 10,000 pixels? or is that considered crass and kludgy? thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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-d] 100% height issue, and graphic placement q's
Hello; I have two questions about this page: http://www.coffeeonmars.com/ page.html 1. Why does the center area not go to the bottom? I put in height: 100%; for both the body of the document and for that center area. I noticed while viewing the page at 1024 x 768 that when the browser window is shorter, you get a scrollbar; scroll down and you see the center area end, and that copy goes beyond it. I don't get why. and 2. is there something like baseline shift which can operate on a span tag? the small black bar to the right of the top line of type rests on the type baseline, but it isn't centered vertically. would I need to create a div tag just for that little black bar? thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Thu, Jul 14, 2011 at 3:42 AM, John j...@coffeeonmars.com wrote:
Hello;
I have two questions about this page: http://www.coffeeonmars.com/page.html
1. Why does the center area not go to the bottom? I put in height:100%; for
both the body of the document and for that center area.
I noticed while viewing the page at 1024 x 768 that when the browser window is
shorter, you get a scrollbar; scroll down and you see the center area end, and
that copy goes beyond it. I don't get why.
I think that 100% height is based on the inner height of the browser window.
So, they are actually going to the bottom of that. However, the overflow is
defaulting to visible, so the content becomes longer than the element that
contains it.
and
2. is there something like baseline shift which can operate on a span tag? the
small black bar to the right of the top line of type rests on the type
baseline, but it isn't centered vertically.
It looks like it's centered relative to the text from here (Firefox 5.0 and
Chromium (Google Chrome) 12.0.742.112, Linux), but you could try changing either
line-height or position:relative and top.
would I need to create a div tag just for that little black bar?
In theory, it's better not to have elements there that are just for appearance.
Design elements should be separated from the content. You should probably do
something creative with the :after pseudo-class on span.headtype ...
span.headtype:after {
content: .;
color: black;
background-color: black;
width: 46px;
height: 14px;
margin-left: 6px;
}
--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@lists.css-discuss.org]
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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 13, 2011, at 2:32 PM, Ghodmode wrote: I think that 100% height is based on the inner height of the browser window. So, they are actually going to the bottom of that. However, the overflow is defaulting to visible, so the content becomes longer than the element that contains it. something about that sounds familiar...do I need to add something like overflow: notvisible; or something like that? your answer to my other issue, I believe I understand and just have to tinker.. thank you for helping! John __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Thu, Jul 14, 2011 at 5:50 AM, John j...@coffeeonmars.com wrote: On Jul 13, 2011, at 2:32 PM, Ghodmode wrote: I think that 100% height is based on the inner height of the browser window. So, they are actually going to the bottom of that. However, the overflow is defaulting to visible, so the content becomes longer than the element that contains it. something about that sounds familiar...do I need to add something like overflow: notvisible; overflow: hidden; or you can play with overflow:scroll on certain elements, but that has lead to weird scrolling for me in the past. http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height issue, and graphic placement q's
On Jul 14, 2011, at 4:42 AM, John wrote: 1. Why does the center area not go to the bottom? I put in height:100%; for both the body of the document and for that center area. If the idea is that div.livebar stretches from top to bottom of the /document/, then you have to declare a min-height on the root element; then a height:100% on the body element will be as tall as the document (as opposed to being the height of the viewport, as it presently is as noted already). Except for absolute positioned elements, a %-based height can only be computed based on a ‘known’ (specified) height. read a bit in CSS 2.1 chapter 10 - specifically 10.5 and 10.6.3 http://www.w3.org/TR/CSS21/visudet.html#the-height-property http://www.w3.org/TR/CSS21/visudet.html#normal-block Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] 100% height for table
Does anyone have any idea about this? Can I truly not create a table
that is 100% the height of the browser window? I've tried adding a min-
height to the table too but it doesn't seem to make any difference.
Help please!
On Aug 27, 2010, at 10:37 AM, Jody Levinson wrote:
Hello all,
I'm trying to make this layout 100% the height of the browser
window. It uses a table for layout. I know there are other, perhaps
preferrable ways to do layouts than using a table, but I don't have
the option of changing that at this point.
Here's the page (one of several short pages on the site):
http://www.adlergiersch.com/adler-giersch-and-you
I've added this CSS, which is supposed to fix it:
body { background-color: #FF; margin: 0; padding:0; border:none;
height:100%; }
html { margin: 0; padding:0; border:none; height:100%; }
and also to the layout table CSS:
.layouttable { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; height: 100%; width: 100%; padding:0px; }
I've also added 'height=100% to the table html, which I know
doesn't work, but I'm trying everything.
I ran the CSS through a validator and it throws errors, but none
that should affect the layout (mostly having to do with opacity
settings on the menu)
Thanks!
Jody
--
TroutDream Graphics, Inc.
Always fresh. Never canned.
http://troutdream.com
425-686-8699
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] 100% height for table
Does anyone have any idea about this? Can I truly not create a table that is 100% the height of the browser window? I've tried adding a min- height to the table too but it doesn't seem to make any difference. I'm confused... What are you trying to do? You have height=100% set on your table. And your table has a height of 100%. (or so it seems. Scroll down a little bit, and notice how the background stops before the end of the table) But the you have also set your page height to 100%. Everything overflows, because you have margins, and padding, and borders, and an iframe, and also a table that's 100%. And because it overflows, there's a scroll. Notice how the center column is at the bottom of the screen. That's because the page has a 100% height. The scroll is because the left column is longer than that. If you want your 100% page to not scroll, and have everything below the bottom of the screen hidden and inaccessible (I don't know why you'd want that), you can add overflow: hidden to your body styles. ---Tim __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] 100% height for table
On Aug 30, 2010, at 11:19 AM, Climis, Tim wrote: Does anyone have any idea about this? Can I truly not create a table that is 100% the height of the browser window? I've tried adding a min- height to the table too but it doesn't seem to make any difference. I'm confused... What are you trying to do? You have height=100% set on your table. And your table has a height of 100%. (or so it seems. Scroll down a little bit, and notice how the background stops before the end of the table) But the you have also set your page height to 100%. Everything overflows, because you have margins, and padding, and borders, and an iframe, and also a table that's 100%. And because it overflows, there's a scroll. Notice how the center column is at the bottom of the screen. That's because the page has a 100% height. The scroll is because the left column is longer than that. If you want your 100% page to not scroll, and have everything below the bottom of the screen hidden and inaccessible (I don't know why you'd want that), you can add overflow: hidden to your body styles. ---Tim I tried setting everything I possibly could to 100% height in an attempt to find something that would work. All I wanted to do was keep the background from stopping before the bottom of the page, no matter what the height of the content. It turns out that the problem was caused by the What's New box, which was absolutely positioned. Absolutely positioned elements do not 'take up space' on a page, so they don't push down other elements. I switched the absolute positioning to margin-top and it seems to have fixed the problem. Thank you so much for taking the time to look at it. I really appreciate it! Jody -- TroutDream Graphics, Inc. Always fresh. Never canned. http://troutdream.com 425-686-8699 __ css-discuss [cs...@lists.css-discuss.org] 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-d] 100% height for table
Hello all,
I'm trying to make this layout 100% the height of the browser window.
It uses a table for layout. I know there are other, perhaps
preferrable ways to do layouts than using a table, but I don't have
the option of changing that at this point.
Here's the page (one of several short pages on the site):
http://www.adlergiersch.com/adler-giersch-and-you
I've added this CSS, which is supposed to fix it:
body { background-color: #FF; margin: 0; padding:0; border:none;
height:100%; }
html { margin: 0; padding:0; border:none; height:100%; }
and also to the layout table CSS:
.layouttable { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; height: 100%; width: 100%; padding:0px; }
I've also added 'height=100% to the table html, which I know doesn't
work, but I'm trying everything.
I ran the CSS through a validator and it throws errors, but none that
should affect the layout (mostly having to do with opacity settings on
the menu)
Thanks!
Jody
--
TroutDream Graphics, Inc.
Always fresh. Never canned.
http://troutdream.com
425-686-8699
__
css-discuss [cs...@lists.css-discuss.org]
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-d] 100% height for wrapper div?
I'm using this sticky footer method: http://www.cssstickyfooter.com/ But my wrapper (outlined in red) isn't going to the bottom - can someone point out my error(s)? This page validates as both XHTML strict and CSS. My page: http://www.redkitecreative.com/projects/mgwa/ -- Debbie C www.redkitecreative.com __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] 100% height for wrapper div?
Debbie Campbell wrote: I'm using this sticky footer method: http://www.cssstickyfooter.com/ But my wrapper (outlined in red) isn't going to the bottom - can someone point out my error(s)? This page validates as both XHTML strict and CSS. My page: http://www.redkitecreative.com/projects/mgwa/ Your markup differs from the example. There should only be two outer DIVs on the page-- #wrapper (with min-height: 100%;) and the #footer. Those extra DIVs on your page are making it taller than 100% at all times. Incidentally, your page does not like text sizes other than medium. Note that medium on my older IBM laptop is 16px in Firefox, but 20px in IE and Opera (compensating for small pixel sizes). Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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-d] 100% height?
Hi there, html: http://aubreybenasa.com/height/ css: http://aubreybenasa.com/height/styles.css I can't figure out how to make the the full background-image appear on this page. When you open the page at a height less than the height of the background image (810px) and use the scrollbar to page down, the background image and background color is cut off. only if you maximize the browser window do you see the full background image and background color. I'm sure it's a problem with the way i've set the height in the css. any tips? thank you in advanced, aubrey __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] 100% height?
Aubrey Benasa wrote:
Hi there,
html: http://aubreybenasa.com/height/
css: http://aubreybenasa.com/height/styles.css
I can't figure out how to make the the full background-image appear on this
page. When you open the page at a height less than the height of the
background image (810px) and use the scrollbar to page down, the background
image and background color is cut off. only if you maximize the browser
window do you see the full background image and background color. I'm sure
it's a problem with the way i've set the height in the css. any tips?
thank you in advance,
aubrey
Hi Aubrey,
Try this:
div.bg
{
/* Add this to avoid margin collapsing */
padding-top: 1px;
}
div.container
{
/* Remove this
top: 127px;*/
/* Change to margin-top; keeps the element in the document flow */
margin-top: 127px;
}
I only tested it in Firefox 3/Ubuntu Ibex, but it should work well in
other browsers, too, I think.
Hope it helps.
--Bill
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] 100% height?
From: Aubrey Benasa aubreyben...@gmail.com
html: http://aubreybenasa.com/height/
css: http://aubreybenasa.com/height/styles.css
I can't figure out how to make the the full background-image appear on this
page. When you open the page at a height less than the height of the
background image (810px) and use the scrollbar to page down, the background
image and background color is cut off.
See if the following changes to your CSS do what you want.
html {
height:100%;
/*overflow:scroll;*/ /* delete */
}
div.bg {
margin:0 auto;
width:1000px;
min-height:100%;
background:#22112d url(images/bg_purple.jpg) no-repeat;
padding-top: 127px; /* add */
}
div.container {
margin-left:auto;
margin-right:auto;
/* position:relative;
top:127px; */ /* delete these two, also */
width:830px;
}
~holly
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] 100% height over existing page
Seona Bellamy wrote: Hi guys, I need to create an absolutely positioned div that will float on top of the existing page layout, and be 100% of the height of the rendered page, not the viewport. [..] Cheers, Seona. Simply give the ancestor of the a.p. box position:relative which establishes a containing block [1] (not the principal containing block which is the root element html). http://css-class.com/test/css/visformatting/positioning/100per-box-entire-viewpoint.htm And for IE6 only give a height in pixels. 1. http://www.w3.org/TR/CSS21/visudet.html#containing-block-details -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ 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/
Re: [css-d] 100% height over existing page
2008/8/1 Alan Gresley [EMAIL PROTECTED]: Seona Bellamy wrote: I need to create an absolutely positioned div that will float on top of the existing page layout, and be 100% of the height of the rendered page, not the viewport. Simply give the ancestor of the a.p. box position:relative which establishes a containing block [1] (not the principal containing block which is the root element html). http://css-class.com/test/css/visformatting/positioning/100per-box-entire-viewpoint.htm And for IE6 only give a height in pixels. 1. http://www.w3.org/TR/CSS21/visudet.html#containing-block-details Thanks for the links Alan. Interesting reading. I'll have a play around with this and see what I can come up with.. Cheers, Seona. __ 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-d] 100% height over existing page
Hi guys, I need to create an absolutely positioned div that will float on top of the existing page layout, and be 100% of the height of the rendered page, not the viewport. Something similar to what Lightbox does - greying out the page and displaying a box over it. The trouble is, because it's to display some legal stuff (of the this site contains medical information that some people might find offensive or disturbing variety) I don't want to use Lightbox because it relies on JavaScript. Anyone who doesn't have JS simply won't see the warning and that just doesn't seem like a good idea. I've had no trouble making the div that sits on top of everything extend to the height of the viewport, but if the page extends beyond that then you see normal (and clickable) page as soon as you scroll. Don't want that, if possible. Is there a CSS way of doing this? Or am I going to have to fall back onto JS for that section and just say Well, at least they see the message if they don't have JS, even if they don't get such a nice experience? Cheers, Seona. __ 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/
Re: [css-d] 100% height over existing page
From: Seona Bellamy [EMAIL PROTECTED] Hi guys, I need to create an absolutely positioned div that will float on top of the existing page layout, and be 100% of the height of the rendered page, not the viewport. Something similar to what Lightbox does - greying out the page and displaying a box over it. The trouble is, because it's to display some legal stuff (of the this site contains medical information that some people might find offensive or disturbing variety) I don't want to use Lightbox because it relies on JavaScript. Anyone who doesn't have JS simply won't see the warning and that just doesn't seem like a good idea. I've had no trouble making the div that sits on top of everything extend to the height of the viewport, but if the page extends beyond that then you see normal (and clickable) page as soon as you scroll. Don't want that, if possible. Is there a CSS way of doing this? No - and the Lightbox scripted method is flawed to boot :-) Our Lighshow widget would do exactly what you need to do and be accessible if script is disabled. It's not free, though. I think one of the J-Query-based Lightbox clones might also work with some tweaking. If it is possible with CSS, it would be mightily hacked and probably not practical. You can also post this on a script or DOM-based mailing list or forum as it would be more appropriate. -- Al Sparber - PVII http://www.projectseven.com The Ultimate Lightbox: Lightshow Magic __ 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/
Re: [css-d] 100% height over existing page
2008/7/31 Al Sparber [EMAIL PROTECTED]: From: Seona Bellamy [EMAIL PROTECTED] Is there a CSS way of doing this? No - and the Lightbox scripted method is flawed to boot :-) Our Lighshow widget would do exactly what you need to do and be accessible if script is disabled. It's not free, though. I think one of the J-Query-based Lightbox clones might also work with some tweaking. If it is possible with CSS, it would be mightily hacked and probably not practical. That's fair enough. Thanks for the advice. I'm not sure if I could get approval to go with a paid solution for this, so I might have to look into some of the other options. You can also post this on a script or DOM-based mailing list or forum as it would be more appropriate. Will do. Thought I'd try here amongst the CSS-focussed folks first. :) Cheers, Seona. __ 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/
Re: [css-d] 100% Height problem
It was foretold that on 01/07/2008 @ 17:00:39 GMT-0400 (which was 18:00:39 where I live) David Laakso would write: Maybe Paul O'Brien's method might help? http://www.pmob.co.uk/temp/2colfixedtest_4.htm On Tue, 1 Jul 2008 23:53:36 -0300, Luc responded: Good evening David, That's a nice one too David, tnx! FWIW - Paul's method does not put the footer at the bottom on my (Win xp) version of Opera - 9.50 build 10063. Not unless you resize the window, that is -- e.g. by opening a panel. His three-column demo works though, and I can't figure out why Opera would misbehave with the simpler two columns. :( Cordially, David -- __ 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/
Re: [css-d] 100% Height problem
Good afternoon David, It was foretold that on 02/07/2008 @ 10:06:21 GMT-0700 (which was 14:06:21 where I live) David Hucklesby would write: snipped a bit FWIW - Paul's method does not put the footer at the bottom on my (Win xp) version of Opera - 9.50 build 10063. Strange... on my end it does... Winxp, Opera 9.50, build 10063 -- Best regards, Luc _ Using the best e-mail client: The Bat! version 4.0.18 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. Today is the tomorrow you worried about yesterday. __ 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-d] 100% Height problem
Good afternoon list, I'm experimenting with 100% height and ran into some x-browser inconsistencies (no surprise here). Problems: [1] IE seems to do the trick, except the footer overlaps a bit the content. [2] Opera, FF and Moz all have the same trouble: the header doesn't sit snug at the top of the viewport, the content overflows the grey area and the footer. The footer doesn't stay below. What i'm aiming for is the way IE almost presents it, but without the footer overlapping the content, i.o.w. if the document goes beyond one full page,the div should be the height of the actual document. http://dzinelabs.com/sandbox/Height.html CSS embedded. Page validates. -- Best regards, Luc http://www.dzinelabs.com Using the best e-mail client: The Bat! version 4.0.18 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. And so, my fellow net surfers, ask not what your homepage can do for you; ask what you can do for your homepage. __ 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/
Re: [css-d] 100% Height problem
Luc wrote: Good afternoon list, I'm experimenting with 100% height and ran into some x-browser inconsistencies (no surprise here). Problems: [1] IE seems to do the trick, except the footer overlaps a bit the content. [2] Opera, FF and Moz all have the same trouble: the header doesn't sit snug at the top of the viewport, the content overflows the grey area and the footer. The footer doesn't stay below. What i'm aiming for is the way IE almost presents it, but without the footer overlapping the content, i.o.w. if the document goes beyond one full page,the div should be the height of the actual document. http://dzinelabs.com/sandbox/Height.html CSS embedded. Page validates. Hi Luc, I've tweaked your code a bit and published my results at: http://theholiergrail.com/tests/height/index.html Let me know if it helps! --Bill -- /** * Bill Brown * TheHolierGrail.com MacNimble.com * From dot concept...to dot com...since 1999. ***/ __ 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/
Re: [css-d] 100% Height problem
Luc wrote: Good afternoon list, I'm experimenting with 100% height and ran into some x-browser inconsistencies (no surprise here). http://dzinelabs.com/sandbox/Height.html Maybe Paul O'Brien's method might help? http://www.pmob.co.uk/temp/2colfixedtest_4.htm -- http://chelseacreekstudio.com/ __ 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/
Re: [css-d] 100% Height problem
Good evening Bill,
It was foretold that on 01/07/2008 @ 16:46:09 GMT-0400 (which was
17:46:09 where I live) Bill Brown would write:
snipped a bit
I've tweaked your code a bit and published my results at:
http://theholiergrail.com/tests/height/index.html
Let me know if it helps!
Excellent Bill... worked like a charm.
But could/would you enlighten me as to the errors i had?
You removed the star html hack i had and the min-height on the #wrapper and in
your
#wrapper you added:
{height: auto !important;
height: 100%;
position:relative;}
Also the #header you changed from height:100px to 99px
the #content: you removed the float:left
and the #footer, you added position:relative
Just trying to understand those changes...
--
Best regards,
Luc
_
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
The taxpayer is someone who works for the federal government but
doesn't have to take a civil service examination. - Attributed to:
Ronald Reagan
__
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/
Re: [css-d] 100% Height problem
Good evening David, It was foretold that on 01/07/2008 @ 17:00:39 GMT-0400 (which was 18:00:39 where I live) David Laakso would write: Maybe Paul O'Brien's method might help? http://www.pmob.co.uk/temp/2colfixedtest_4.htm That's a nice one too David, tnx! -- Best regards, Luc _ http://www.dzinelabs.com Using the best e-mail client: The Bat! version 4.0.18 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. Home is where you hang your @ __ 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-d] 100% height again
Hi! I received a great tip from here a little while ago on how to make a
colum expand to 100% height. I'm now applying this to another design, but
I'd like about 10px padding on the bottom, no matter how high the column is
expanded.
Please see
http://www.blackfootchallenge.org/am/publish/newsite/index.php.threecol and
look at the Support center column. This is the css where I added the rules
to expand the column to the bottom:
.col1 {
width: 34%;
left: 108%;
margin: 0 0 -2000px 0;
padding: .5em 0 2000px 0;
background-position: center top;
background-repeat: repeat-x;
border: 1px solid #963;
background-image: url(../images/backgrounds/support_bg.jpg);
}
How do I add in the 10px bottom padding?
Thanks :)
Becca
__
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/
Re: [css-d] 100% height problems on Mac
On 5/16/07, Lee Powell [EMAIL PROTECTED] wrote: Hi Georg Unfortunately that doesn't seem to fix it when I test it in Safari or Firefox on a mac... Any other ideas? From what I understand, this is correct behavior for height: 100%. Setting height to 100% defines it to equal 100% of its container. Inheritance for this item would be: Browser html 100% body 100% element 100% Thus, 100% in this case equal 100% of the height of the browser window. This is not a bug, it is per the specifications and renders the same in Firefox PC: http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property Brian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height problems on Mac
Lee Powell wrote: Unfortunately that doesn't seem to fix it when I test it in Safari or Firefox on a mac... Any other ideas? Compare your fix with mine... http://www.gunlaug.no/tos/alien/test_07_5060.html ...as mine works perfectly well in Firefox, Opera, Safari, IE7. Tested relevant browsers/versions on win2K, win-XP and OS-X. An older demo is also available... http://www.gunlaug.no/tos/moa_14a.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height problems on Mac
Hi, Wonder if anyone can shed a little light on this problem. I've created a test page here: http://www.sixtyten.co.uk/sandpit/testheight.html Which includes a simple DIV with some content. HTML and BODY are set to 100% height, as well as the DIV, however when previewing in Firefox and Safari on a Mac the DIV's height only seems to be 100% of the inital browser window. When scrolling down the page it gets cut off!! Any ideas on how I can fix this? I've tried several things and nothing seems to be doing the trick Thanks Lee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height problems on Mac
Lee Powell wrote:
http://www.sixtyten.co.uk/sandpit/testheight.html
When scrolling down the page it gets cut off!!
You're right: html and body, and subsequently the div, are taking height
from the window - regardless of how tall that is. The text will then
overflow the div. You must replace 'height' with 'min-height', to allow
the div to grow taller when necessary.
Change...
div {
height: 100%;
width: 600px;
background-color: blue;
}
...to...
div {
min-height: 100%;
width: 600px;
background-color: blue;
}
...to make it work.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height problems on Mac
Hi Georg Unfortunately that doesn't seem to fix it when I test it in Safari or Firefox on a mac... Any other ideas? Lee On 15 May 2007, at 21:34, Gunlaug Sørtun wrote: Georg __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height challenges...
Hi, I get the list in digest format so I hope this goes to the right place. Rolf wrote: I've been building this layout concept for a project that does everything I want it to... almost. The basic markup is where I want it to be, but I'm having one issue. You can view it here: http://tinyurl.com/25r3pq The layout is done via css, and there's a little javascript to open and close the left panel. There are some IE hacks in the css that will get moved to conditional comments. I've played with the YUI reset.css and fonts.css in this layout, but the main layout css is embedded in the head. To get the layout to fill the screen vertically, I've used percentage heights. This is okay, but ideally I'd prefer to set the height of at least the div#top in something more fixed... ems would be fine. But I can't figure out how to do that while getting everything else to work as it is now (left and right scrolling independently, footer sitting politely at the bottom). Is it possible without knowing the exact window height ? I'm not entirely sure this will work, especially in IE6, but, if you set #app_container to: position: absoulute; top: 0; right: 0; left: 0; bottom: 0; you may be able to have a full-height effect without having to explicitly declare a height on every element. It's a stretch, but maybe it'll work. John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height challenges...
I've been building this layout concept for a project that does everything I want it to... almost. The basic markup is where I want it to be, but I'm having one issue. You can view it here: http://tinyurl.com/25r3pq The layout is done via css, and there's a little javascript to open and close the left panel. There are some IE hacks in the css that will get moved to conditional comments. I've played with the YUI reset.css and fonts.css in this layout, but the main layout css is embedded in the head. To get the layout to fill the screen vertically, I've used percentage heights. This is okay, but ideally I'd prefer to set the height of at least the div#top in something more fixed... ems would be fine. But I can't figure out how to do that while getting everything else to work as it is now (left and right scrolling independently, footer sitting politely at the bottom). Is it possible without knowing the exact window height ? I appreciate any suggestions! Rolf __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height of HTML and BODY
I want to have a backround gradient across all page and also a background
image sits on the very bottom of the page (not viewport). I tryed something
like this:
html {
min-height: 100%;
background: url(...) repeat-x bottom blue; /* 1x1600px */
}
body{
height: 100%;
background: url(...) no-repeat center bottom;
}
The background of html works well but body background stick to the end of
the content or to the bottom of viewport (and move when I resize the
window).
Do you know how to manage that Bottom of BODY is always same as Bottom of
HTML?
Pavel.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height question
I've been trying to figure something out for a while now, and wouldn't you know it, it's *just* dawned on me that I can pick your all's brains. (Yeah, duh me!) This is just something I'm trying to do for the sake of doing it - just to see if I *can* - it's not part of any actual design or anything. So, the thing is, I'd like to try and create a 3-column layout that's got a sticky footer (meaning, 100% in height with footer at the bottom of the browser screen, *unless* one of the columns in said layout pushes the site longer - then the footer will always stay at the bottom). I also want to make the sidebars one color, and the content another color *without* using the faux columns method. I can accomplish this, no problem. But the issue is this: I can do it as long as the site is 100% in width. Now, when I want to take it another level and make the two sidebars *different* colors, and/or I want the site to be a fixed width, then I lose my footer stickiness. Apparently, the issue comes from having the outer container being 100% in height, and then allowing for header and footer space, yet still trying to make the *inside* container 100% in height as well. It doesn't seem to work out so well. So I was wondering if anyone else has come across this issue. If so, how did you all get around it? I'm aware of the A list apart thing, where you make a HUGE padding at the bottom, with a negative margin of the same - and quite honestly, I *hate* that solution. I avoid it like the plague. So if there's any other way you all have come across to - well, I guess make an div 100% in height of it's parent div (rather than the browser window) I'd love to hear about it. Of course, this sounds a lot like the I want my sidebar to go 100% in height thing, doesn't it? I've become fairly certain that what I'm asking for is impossible, but I don't believe much in things being impossible...there's *got* to be a way to do this. LOL Am I crazy in thinking so? ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height question
http://css-discuss.incutio.com/?page=AnyColumnLongest has a good list of related links; maybe it'll help. The padding/margin hack's not really all that bad, but it does annoy me knowing it won't work if you have an unreasonably enormous column (or just some anchors for that matter). ;-) For the sticky footer, assuming it's actually possible, I'd think you'd want to put everything in a wrapper div with min-height 100% (or gasp a table). I've mulled this over myself a few times but haven't actually played with it. Lemme know if you figure it out. :-) Andy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height question
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Andy Harrison wrote: For the sticky footer, assuming it's actually possible, I'd think you'd want to put everything in a wrapper div with min-height 100% (or gasp a table). I've mulled this over myself a few times but haven't actually played with it. Lemme know if you figure it out. :-) Here's my little test for the sticky footer: http://test.riczho.dyndns.org/fullheight/ Hopefully, it can be easily expanded to three columns (unfortunately, it uses faux columns right now, but the overall method might be useful). Hope this helps, Ricky -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.6 (GNU/Linux) iD8DBQFFtWdViXbZ7NjlUcARAj8wAKCMKirheptXk7mPziNMx/Q9unxQFwCgqbp+ GV9UyFd094Bp/gBEsJfZiLM= =xA0x -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height minus 2em
This is likely one of those Gordian knots of CSS: how to combine percentages and ems in the same layout. I want to style a block that fills the vertical space of the viewport, minus the 2ems taken up by the header. How to express 100% - 2em in CSS? Before I fall back on JavaScript (or *gasp* table markup), I'd like to plumb the well of CSS community knowledge. None of the 100% height solutions I've found so far address this wrinkle. Here's an illustration of the layout I'm after, but 'cheating' by using a percentage for the header height as well as the content block: http://juniperwebcraft.com/test/PercentMinusEmsProblem.html Please understand that I'm not looking for a faux layout in which the eye is fooled, you know, by giving the content block 100% height and letting the header reside inside or overlay it with absolute positioning. Because my content block will contain a Flash object that will expand to the dimensions of its container, I need the container to truly begin at the bottom of the header. Thanks, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height minus 2em
Couldn't you use padding and negative margins?
div1 {height:100%; padding:2em 0 0 0;}
div2 {height:2em; margin:-2em 0 0 0;}
div id=div1
div id=div2/div
/div
David Merwin
[EMAIL PROTECTED]
541-335-1832
http://www.davemerwin.com
http://www.purebluedesign.com
http://www.betachurch.org
http://www.agiprofessional.com
On Oct 24, 2006, at 11:55 AM, Paul Novitski wrote:
This is likely one of those Gordian knots of CSS: how to combine
percentages and ems in the same layout.
I want to style a block that fills the vertical space of the
viewport, minus the 2ems taken up by the header. How to express 100%
- 2em in CSS?
Before I fall back on JavaScript (or *gasp* table markup), I'd like
to plumb the well of CSS community knowledge. None of the 100%
height solutions I've found so far address this wrinkle.
Here's an illustration of the layout I'm after, but 'cheating' by
using a percentage for the header height as well as the content block:
http://juniperwebcraft.com/test/PercentMinusEmsProblem.html
Please understand that I'm not looking for a faux layout in which the
eye is fooled, you know, by giving the content block 100% height and
letting the header reside inside or overlay it with absolute
positioning. Because my content block will contain a Flash object
that will expand to the dimensions of its container, I need the
container to truly begin at the bottom of the header.
Thanks,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height minus 2em
At 10/24/2006 12:22 PM, David Merwin wrote:
Couldn't you use padding and negative margins?
div1 {height:100%; padding:2em 0 0 0;}
div2 {height:2em; margin:-2em 0 0 0;}
div id=div1
div id=div2/div
/div
On Oct 24, 2006, at 11:55 AM, Paul Novitski wrote:
http://juniperwebcraft.com/test/PercentMinusEmsProblem.htmlhttp://juniperwebcraft.com/test/PercentMinusEmsProblem.html
Please understand that I'm not looking for a faux layout in which the
eye is fooled, you know, by giving the content block 100% height and
letting the header reside inside or overlay it with absolute
positioning. Because my content block will contain a Flash object
that will expand to the dimensions of its container, I need the
container to truly begin at the bottom of the header.
Thanks, David, but as I said I need a container that is 100% - 2em
high, not a container that is 100% height and contains a 2em high
block. In my limited experience marking up Flash objects, Flash
expands to fill its container without regard to any other content
that might be there, so I really want that content box to be the
header's sibling, not its parent.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height minus 2em
Paul Novitski wrote:
This is likely one of those Gordian knots of CSS: how to combine
percentages and ems in the same layout.
It can't be done, but that doesn't mean your _problem_ can't be solved
with regular CSS.
Some browsers may be a bit weak though - IE6 being one of them.
I want to style a block that fills the vertical space of the
viewport, minus the 2ems taken up by the header. How to express 100%
- 2em in CSS?
http://juniperwebcraft.com/test/PercentMinusEmsProblem.html
Because my content block will contain a Flash object that will expand
to the dimensions of its container, I need the container to truly
begin at the bottom of the header.
The solution is to forget the percentage-height on #content, and focus
on the window-size - or rather its edges - instead, using absolute
positioning.
The tested solution below will give you a container that starts below
the header, and auto-adjusts to window-height in all CSS-capable browsers.
HTML:
your example-page - unchanged source-code.
CSS:
#header
{
height: 2em;
width: 70%;
margin: 0 auto;
padding: 0 1em;
background-color: #F0F;
}
#content
{
position: absolute;
width: 40em;
padding: 0 1em;
background-color: #FF0;
top: 2em;
bottom: 0;
}
Opera and Firefox do just fine.
IE6 needs help (use an expression or something), since it can't position
relative to opposite edges.
Don't know about IE7, and can't check.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height minus 2em
I am not getting it then. Sorry bout that. The flash object would be
controlled by the padding of the parent div. In this case the padding
then leaves room for the header div that is using negative top margin.
SOrry about that.
David Merwin
[EMAIL PROTECTED]
541-335-1832
http://www.davemerwin.com
http://www.purebluedesign.com
http://www.betachurch.org
http://www.agiprofessional.com
On Oct 24, 2006, at 1:28 PM, Paul Novitski wrote:
At 10/24/2006 12:22 PM, David Merwin wrote:
Couldn't you use padding and negative margins?
div1 {height:100%; padding:2em 0 0 0;}
div2 {height:2em; margin:-2em 0 0 0;}
div id=div1
div id=div2/div
/div
On Oct 24, 2006, at 11:55 AM, Paul Novitski wrote:
http://juniperwebcraft.com/test/
PercentMinusEmsProblem.htmlhttp://juniperwebcraft.com/test/
PercentMinusEmsProblem.html
Please understand that I'm not looking for a faux layout in which
the
eye is fooled, you know, by giving the content block 100% height and
letting the header reside inside or overlay it with absolute
positioning. Because my content block will contain a Flash object
that will expand to the dimensions of its container, I need the
container to truly begin at the bottom of the header.
Thanks, David, but as I said I need a container that is 100% - 2em
high, not a container that is 100% height and contains a 2em high
block. In my limited experience marking up Flash objects, Flash
expands to fill its container without regard to any other content
that might be there, so I really want that content box to be the
header's sibling, not its parent.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height div css problem
Hi, http://develop.oidadev.co.uk/arrogant_cat/frontend/basket_address.html I am having problems on this example of a page created with 100% height and 4 absolutely positioned divs with 100% height and background colours. The divs only take 100% height of the viewable area so when I scroll they do not extend. I reduce the height of the browser window they I lose the background of any div that does not have extra content. It seems to behave the same on all browsers It's very annoying and I would really rather use this than creating background images for the entire html area as my columns change per page. Does anyone have any ideas? Thanks Cameron Cameron Rimington Project Manager Oida Media Ltd 8a West Smithfield London EC1A 9JR Tel: +44 (0)20 7778 0200 Fax: +44 (0)20 7778 0201 Email: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] Web: www.oida.co.uk http://www.oida.co.uk/ *** This e-mail and any attached electronic files are intended for the named recipient(s) only and are confidential. They may also be legally privileged. If this message has come to you in error, please contact the sender by reply and then delete it from your system immediately. Any disclosure, copying, distribution or any action taken or omitted to be taken in reliance on it is prohibited and may be unlawful. Any statements or opinions contained herein are those of the individual and not necessarily those of Oida Media and may be subject to change without notice. Oida Media does not accept responsibility for any change made to this message after it was sent. *** __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height
Try this
body {
margin: 0px;
padding: 0px;
}
// Sebastian
-Original Message-
From: richard hall [mailto:[EMAIL PROTECTED]
Sent: 25. maj 2006 15:56
To: Sebastian Dammark; css-d@lists.css-discuss.org
Subject: Re: [css-d] 100% height
Sebastian,
Thanks!
This worked great.
One minor detail is that in IE there is still a little space at the
bottom where the menu background color doesn't quite reach.
http://www.inspirationcenter.net/midamericadharma
... Any thoughts on that?
... Thanks again ... Richard
On 5/24/06 3:30 PM, Sebastian Dammark [EMAIL PROTECTED] wrote:
Hi Richard
Try this
html, body {
height: 100%;
}
// Sebastian
www.dammark.net
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of richard hall
Sent: 24. maj 2006 21:02
To: cj
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] 100% height
http://www.inspirationcenter.net/midamericadharma/100.aspx
Actually, I'm not sure what I did differently from the last time I
tried, but it doesn't seem to work in any of the browsers I tested.
The yellow background on the menu on the left is supposed to go to the
bottom of the page.
... Any help much appreciated ... Richard
On 5/24/06 12:43 PM, cj [EMAIL PROTECTED] wrote:
giving a link to your current page would greatly help. otherwise my
guess would be your doctype isn't getting making ie behave the way
you
want.
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height
Is there any trick for getting a division to use 100% height in IE? I tried height:100% and it works in FireFox and Safari, but not in IE. ... Richard -- Richard H. Hall http://www.umr.edu/~rhall Save the internet - Preserve Network Neutrality! http://www.savetheinternet.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height
giving a link to your current page would greatly help. otherwise my guess would be your doctype isn't getting making ie behave the way you want. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height
http://www.inspirationcenter.net/midamericadharma/100.aspx Actually, I'm not sure what I did differently from the last time I tried, but it doesn't seem to work in any of the browsers I tested. The yellow background on the menu on the left is supposed to go to the bottom of the page. ... Any help much appreciated ... Richard On 5/24/06 12:43 PM, cj [EMAIL PROTECTED] wrote: giving a link to your current page would greatly help. otherwise my guess would be your doctype isn't getting making ie behave the way you want. -- Richard H. Hall http://www.umr.edu/~rhall Save the internet - Preserve Network Neutrality! http://www.savetheinternet.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height
Hi Richard
Try this
html, body {
height: 100%;
}
// Sebastian
www.dammark.net
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of richard hall
Sent: 24. maj 2006 21:02
To: cj
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] 100% height
http://www.inspirationcenter.net/midamericadharma/100.aspx
Actually, I'm not sure what I did differently from the last time I
tried, but it doesn't seem to work in any of the browsers I tested.
The yellow background on the menu on the left is supposed to go to the
bottom of the page.
... Any help much appreciated ... Richard
On 5/24/06 12:43 PM, cj [EMAIL PROTECTED] wrote:
giving a link to your current page would greatly help. otherwise my
guess would be your doctype isn't getting making ie behave the way you
want.
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org
-- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% Height Problem
Hello All, On my site, http://www.blueplasmarecordings.com/ I tried to achieve 100% height. It works in Safari/Mozilla, but shocker, not in IE. Anyone see why this wouldn¹t be working? Sincerely, Jordan WOLLMAN // __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% Height Issues
Hello all, I recently launched my site: http://www.blueplasmarecordings.com/ Relevant CSS: http://www.blueplasmarecordings.com/assets/styles/global.css The height thing again. Seems like this is a problem I can¹t seem to get right! Any 404 page is a good example. Works fine on the Mac FF and Safari. IE is a no go. Anyone? Thanks, Jordan WOLLMAN // Ariamedia Corporation __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height?
Hi *Anastasios Angelidis,*
To standard browsers 100% height should be a real 100% height:
html, body, #heightestwrapper {height:100%;}
Your heightestwrapper should contain all the others.
Hope it helps,
Isabel Santos
On 9/26/05, Anastasios Angelidis [EMAIL PROTECTED] wrote:
Hi I mamanged to get 100% working in explorer but not in Mozilla. Is
this something really supported in general?
You can see the example here: http://www.mamothblue.com
Thanks
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org http://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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height?
Monday, September 26, 2005, 12:18:28 AM, Anastasios Angelidis wrote:
Hi I mamanged to get 100% working in explorer but not in Mozilla. Is
Google 100% height, 1st result will answer your question:
http://www.quirksmode.org/css/100percheight.html
The key in Standards mode:
html, body, div#onlyChildOfBody {
margin:0;
padding:0;
height:100%;
}
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height?
Hi I mamanged to get 100% working in explorer but not in Mozilla. Is this something really supported in general? You can see the example here: http://www.mamothblue.com Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height image or content to set parent height
Hi everyone,
I'm trying to set-up a simple 2 column layout, with % widths and heights, so
that whichever column is longest, sets the height of the parent block.
Nav on the left, expands if content ( a ul with a number of li) increases.
Image on the right, with width as 100% and height at 100% so it changes
accordingly as the browser increases or decreases.
However, because the image height is a %, the parent block doesn't inherit its
height and expand accordingly. Its height is set only by the height of the nav
block content.
And on a similar vein, the image then has transparent stripes that sit on top
of it. In Firefox these stay at 100% of the image size as the browser size
changes. But in IE they won't expand to 100% of the image height, they sit at
one line-height.
I've read a lot of articles on various css websites, and the only one which
really addressed this exact problem said that it couldn't be done! Am I asking
the impossible, or can css deliver the flexible design I need?
Many thanks for any help / advice / links etc!
Charlotte.
As I don't have a staging server to put this onto, the code snippets are copied
below.
- HTML code -
body
div id=headercontainer
div id=containerleft
div class=mainmenu
ul
liVisiting/li
liLearning About/li
liLooking After/li
liLiving In/li
liVisiting/li
liLearning About/li
liLearning About/li
liLooking After/li
lilast one/li
/ul
/div
/div
div id=containerrightdiv id=column11/divdiv
id=column22/divdiv id=column33/divdiv id=imagecontainer img
src=homepage630.jpg width=100% height=100%//div
/div
/div
/body
/html
CSS code ---
#headercontainer{
width:100%;
height:inherit;
background-color : #cc;
position:absolute;
left:0;
top:0;
}
#containerleft
{
width:20%;
height:auto;
float:left;
background-color : #aeaa91;
}
#mainmenu
{
height:auto;
}
#containerright
{
width:80%;
height:inherit;
float:right;
background-color: #aeaa91;
position:absolute;
left:20%;
}
#imagecontainer
{
width:100%;
height:100%;
z-index:1;
}
#column1{
width:13%;
height:100%;
padding:0;
margin:0;
background-color : #aeaa91;
opacity: .5;
line-height: 100%;
filter: Alpha(Opacity=70);
position:absolute;
left: 0;
top:0;
z-index:2;
}
#column2{
width:5%;
height:100%;
line-height:100%;
display:block;
padding:0;
margin:0;
background-color : #798161;
opacity: .3;
filter: Alpha(Opacity=30);
position:absolute;
left: 4%;
top:0;
z-index:3;
}
#column3{
width:5%;
height:100%;
padding:0;
margin:0;
background-color : #798161;
opacity: .5;
filter: Alpha(Opacity=70);
position:absolute;
right: 0;
top:0;
z-index:2;
}
This email contains information intended for the addressee only. It may be
confidential and may be the subject of legal and/or professional privilege.
Any dissemination, distribution, copyright or use of this communication
without prior permission of the addressee is strictly prohibited. Any views
or opinions presented are solely those of the author and do not necessarily
represent those of the Lake District National Park Authority. Although this
email and any attachments are believed to be free of any virus or other
defects which might affect any computer or IT system into which they are
received, no responsibility is accepted by the Lake District National Park
Authority for any loss or damage arising in any way from the receipt or use
thereof. Computer systems of this Authority may be monitored and
communications carried out on them recorded, to secure the effective
operation of the system and for other lawful purposes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
