[css-d] A footer that moves to the middle of the screen
Hello,
I'm doing a website where container is 960px width and footer is 100% px
width being the footer out of the container.
The site is long in some pages so when you scroll down you see the footer at
the bottom as expected. But when the container is smaller the footer stays
just after the container, not staying at the bottom of the screen as I would
like it to be. I'm using this:
#container {
background: #000;
width:960px;
margin 0 auto -250px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#footer {
margin: 0 auto;
clear: both;
background-color: #111;
height: 250px;
}
Thank you in advance for any help you may provide
JohnDBB
__
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] Embedded SWF isn't linking
| Daniel Hammond wrote: | URL: http://www.studentremix.org/hs/media.htm | CSS: http://www.studentremix.org/hs/hs.css | The flash animation (top object in the sidebar on the | right) is supposed to | link to http://gallery.me.com/northsideyouth#gallery; when | you click on | it, | but it's not doing anything when clicked on. It's not | acting like a link at | all. Any idea why? | | | Lourens Thalen wrote: | What you should do is place the transparent link on top of the flash | animation. (presuming you can't fix the link in the flash | file directly) | Use position absolute to place it on top of the flashfile, | give it the | correct height and width. | Do NOT forget to give a z-index to the object and embed | tag, you can just | use position: relative and z-index: 1;, this will do just fine. | Problem is, flash always wants to be on top, tha's what's | causing the | problem atm. :) | | | I'm sorry to seem like such a novice, but I haven't used absolute | positioning or z-indexing before, so would you mind giving | me the lines of | code that I need to add to my files? | Thanks, | Daniel | | position: absolute; is the line of code for absolute positioning | z-index: 1; line of code for z-index; | --- | Alexandru Dinulescu Yes, but I'm wondering where to put those in my CSS file and what to add (and where to add it) to my HTML file. Thanks, Daniel __ 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] A footer that moves to the middle of the screen
On Fri, 10 Oct 2008 08:02:25 +0200, Juan Diaz-Bustamante wrote: | Hello, | | I'm doing a website where container is 960px width and footer is 100% px | width being the footer out of the container. | The site is long in some pages so when you scroll down you see the footer at | the bottom as expected. But when the container is smaller the footer stays | just after the container, not staying at the bottom of the screen as I would | like it to be. http://www.google.co.uk/search?q=css+sticky+footer -- Rasal Postill Dance your Life - http://www.danceyourlife.eu __ 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] border doesn't fill expected area
Hi Kimi, What page are you talking about? Can we see some of your code and lay-out? Regards, Lourens, The Netherlands 2008/10/10 Kim Brooks Wei [EMAIL PROTECTED] Hi People, I have #contentwrap with a border, and expected the border to fill the entire content area all the way to the bottom of the text on this page, but it doesn't. Instead, it stops after h1. Help resolving this issue much appreciated. Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What's an OP? and other stuff
My apologies for being off-topic and my thanks for the pointers. But what is an OP? Clearly, I am one but a look in the mirror confirmed general normality. OP = [O]riginal [P]oster of message. Whenever someone replies to one of my threads, I receive two copies of each response but only one copy of responses to other new topics by other people. Different, interesting. The list is set up such that REPLY goes to the person that submitted the message. REPLY-ALL will go to BOTH the poster and the list. ...Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ 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] A footer that moves to the middle of the screen
Hello,
What you should do is create a wrapper of 100% height and 100% width which
contains both the footer and #container.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}
#container {
padding-bottom: height of footer;
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
}
HTML :
div class=wrapper
div id=containertext/div
div id=footertext/div
/div
The footer will always be at the bottom of .wrapper, and .wrapper wil expand
if #container will be bigger than 100% of the viewport.
#container will always push some extra space for the footer at the bottom,
so the footer will always be visible :)
Good luck!
Lourens Thalen,
The Netherlands
2008/10/10 Juan Diaz-Bustamante [EMAIL PROTECTED]
Hello,
I'm doing a website where container is 960px width and footer is 100% px
width being the footer out of the container.
The site is long in some pages so when you scroll down you see the footer
at
the bottom as expected. But when the container is smaller the footer stays
just after the container, not staying at the bottom of the screen as I
would
like it to be. I'm using this:
#container {
background: #000;
width:960px;
margin 0 auto -250px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#footer {
margin: 0 auto;
clear: both;
background-color: #111;
height: 250px;
}
Thank you in advance for any help you may provide
JohnDBB
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE position problem
I have no issue with any of that below. It's factually correct. What has
happened is that some folks have read their own meaning into what I said, which
is that (apart from HTML the BODY is the prime and only global element at
the start of a document. If you simply add text to it, the text will obey any
settings that have been defined for 'body', including margins and padding. When
any other element is *added* within 'body' the situation *changes*. The text
within 'body' will still obey 'body' rules and anything else will set its own
rules and take over from 'body' and may or may not inherit attributes from
'body' and may or may not set its own attributes. That's a fundamental fact and
is the 'change' from 'body' attributes that I originally spoke of. I have never
mentioned 'inheritance' up until this message, so I don't know where that came
from.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Alyda Gilmore
To: Alan K Baker ; css-d
Sent: Friday, October 10, 2008 6:21 AM
Subject: Re: [css-d] IE position problem
The following is quoted from
http://meyerweb.com/eric/articles/webrev/199903.html
Not all properties are inherited, however. As an example, most of the box
properties (margins, padding, and borders) are not inherited.
To demonstrate this, I've uploaded two files to my server:
http://www.aroundtheblock.net/tutorials/css/index.php
http://www.aroundtheblock.net/tutorials/css/indexNoPM.php
The first page (index.php) has the following in it's stylesheet:
ul, ol, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, div, blockquote,
input, textarea, fieldset
{
margin: 0;
padding: 0;
}
For the second page (indexNoPM.php) I changed the above selector to include
only the body:
body
{
margin: 0;
padding: 0;
}
There's an obvious difference in the margin and/or padding of the p, h1, h2,
and ul elements on each page.
---
Alyda
__
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] Embedded SWF isn't linking
Hi Daniel,
Something like this:
HTML
div class=flashcontainer
a href=your link Put a fake description here for google /a
embed flashfile class=flashfile
object flashfile class=flashfile
/div
CSS
.flashcontainer {
width: 200px;
height: 200px;
position: relative;
}
.flashcontainer a{
text-indent: -px;
height: 200px;
width: 200px;
z-index: 2;
position; absolute;
left: 0px;
top: 0px;
}
.flashfile{
position: relative;
z-index:1;
}
something like this is what you need, you can just play with it a little.
Try to understand what I am doing with the code, it won't work if you'll
just copy and paste :)
If you need more help you can always e-mail me :)
Regards,
Lourens Thalen,
The Netherlands
2008/10/10 Daniel Hammond [EMAIL PROTECTED]
| Daniel Hammond wrote:
| URL: http://www.studentremix.org/hs/media.htm
| CSS: http://www.studentremix.org/hs/hs.css
| The flash animation (top object in the sidebar on the
| right) is supposed to
| link to http://gallery.me.com/northsideyouth#gallery; when
| you click on
| it,
| but it's not doing anything when clicked on. It's not
| acting like a link at
| all. Any idea why?
|
|
| Lourens Thalen wrote:
| What you should do is place the transparent link on top of the flash
| animation. (presuming you can't fix the link in the flash
| file directly)
| Use position absolute to place it on top of the flashfile,
| give it the
| correct height and width.
| Do NOT forget to give a z-index to the object and embed
| tag, you can just
| use position: relative and z-index: 1;, this will do just fine.
| Problem is, flash always wants to be on top, tha's what's
| causing the
| problem atm. :)
|
|
| I'm sorry to seem like such a novice, but I haven't used absolute
| positioning or z-indexing before, so would you mind giving
| me the lines of
| code that I need to add to my files?
| Thanks,
| Daniel
|
| position: absolute; is the line of code for absolute positioning
| z-index: 1; line of code for z-index;
| ---
| Alexandru Dinulescu
Yes, but I'm wondering where to put those in my CSS file and what to add
(and where to add it) to my HTML file.
Thanks,
Daniel
__
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] border doesn't fill expected area
Hi People, I have #contentwrap with a border, and expected the border to fill the entire content area all the way to the bottom of the text on this page, but it doesn't. Instead, it stops after h1. Help resolving this issue much appreciated. Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ 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] word-wrap: break-word not working in Firefox
What do people think the easiest solution is for this problem? __ 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] :active with display: none
On Thu, 9 Oct 2008 10:57:31 -0600, Jack Blankenships wrote: I can click a link that is displayed off left. On my test page at http://www.cssprovingground.com/ there is a link relatively positioned with left: - 220px as the first element on the page. I can tab to the link and activate the link using the enter key in Firefox, Internet Explorer, and even Google Chrome. Furthermore, this test reveals that the problem may in fact be in the speed of the mouse 'click'. Using the same test page and positioning the mouse on 'Option 5' will allow me to tab through all of the links on the page. If I press the Enter key when the desired 'Option 5' link is selected, the link will fire and the display is still set to none properly. Similarly this process works if the mouse and keyboard selection are different, and regardless of which link is selected in either process. This does not work in browsers that do not allow for using the tab key to move between links (which incidentally seems like an accessibility flaw). I will try some experiments using the visibility attribute rather than the display attribute. ~~~ Sorry. I was taking your original question literally: [q] I want to make it so that an active link makes the parent element disappear. The element does disappear when I place an :active pseudo-class on the parent element to change the display to none, however the link ceases to function (i.e. - clicking on it does nothing). Working example: http://www.cssprovingground.com [/q] 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] A footer that moves to the middle of the screen
On Fri, 10 Oct 2008 08:02:25 +0200, Juan Diaz-Bustamante wrote: Hello, I'm doing a website where container is 960px width and footer is 100% px width being the footer out of the container. The site is long in some pages so when you scroll down you see the footer at the bottom as expected. But when the container is smaller the footer stays just after the container, not staying at the bottom of the screen as I would like it to be. I'm using this: [code snipped] You may be missing a height: 100%; declaration on the HTML and BODY elements. 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/
[css-d] ie6 - image based menu not scrolling with content - when using a fixed position bottom element
Hello all, i'm having a heck of a time here, what I am trying to accomplish is a fixed position element set on the bottom of viewport. It works fine everywhere except, in ie6 when i applied i to my mockup the topmenu is not scrolling with the other content. Any help would be greatly appreciated. Thankyou ! Corey .L Example: http://thevenusflytrap.org/ie6/fixed-position-mockup-2.html ( i know iepngfix is not working in this example, thanks again ! ) __ 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] ie6 - image based menu not scrolling with content - when using a fixed position bottom element
I don't think your IE stylesheets are loading. Try:
!--[if IE 6]--link rel=stylesheet type=text/css
href=stylesheets/ie6.css!--![endif]--
!--[if gte IE 7]--link rel=stylesheet type=text/css
href=stylesheets/ie7.css!--![endif]--
!--[if lte IE 6]--
style type=text/css
html {overflow-x:auto; overflow-y:hidden;}
/style
!--![endif]--
---
Alyda
From: corey deep [EMAIL PROTECTED]
Date: Fri, 10 Oct 2008 12:32:18 -0700
To: css-d@lists.css-discuss.org
Subject: [css-d] ie6 - image based menu not scrolling with content - when
using a fixed position bottom element
Hello all,
i'm having a heck of a time here, what I am trying to accomplish is a fixed
position element set on the bottom of viewport.
It works fine everywhere except, in ie6 when i applied i to my mockup the
topmenu is not scrolling with the other content.
Any help would be greatly appreciated. Thankyou !
Corey .L
Example:
http://thevenusflytrap.org/ie6/fixed-position-mockup-2.html
( i know iepngfix is not working in this example, thanks again ! )
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 - image based menu not scrolling with content - when using a fixed position bottom element
corey deep wrote: It works fine everywhere except, in ie6 when i applied i to my mockup the topmenu is not scrolling with the other content. http://thevenusflytrap.org/ie6/fixed-position-mockup-2.html All 'absolute' and 'relative' positioned elements will be fixed to the window in IE6 with that method, and you have those properties/values declared on #topNav and its children. Only 'static' (default) will scroll. regards Georg -- http://www.gunlaug.no __ 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] Standrards Compliance -fine-tuning
Neal, at a minimum for SEO, include keywords/phrases searchers might use: 1. Expand your title tag (currently just Construct Web) to include the tagline: Standards-Compliant Web Design / Development 2. Add a description tag Think of these in terms of the highlighted words/phrases that might show in a search engine results page. On Wed, Oct 8, 2008 at 1:53 PM, [EMAIL PROTECTED] wrote: apologize for the cross post. I created a page (pages) for a client and they will be used mostly for SEO This is the (very simple) page: http://www.constructweb.com/seo/ It validates! - anything else that be suggested from the css/html (maybe SEO if it's not too OT) perspective that would make this page even more web standards compliant? Thanks Neal life is certain death is short ~furry lewis __ 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/ -- Pat C [EMAIL PROTECTED] __ 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] IE6 and margin problem
Hi everybody, here's an example page of my problem: http://mosor.net/iebljuv/ In FF, Opera and Konqueror the height of the blue box is exactly the same as the height of the gray DIV. In IE6 the gray DIV is a fex pixels bigger than it should be, so they don't fit perfectly. Any ideas what is the problem, and how to fix it? Thanks a lot, this is driving me crazy. -- Mosor __ 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] Standrards Compliance -fine-tuning
Thanks Pat but I was referring to a different page Now I have two of them: http://www.constructweb.com/seo/a http://www.constructweb.com/seo/b which one do most people think is better for SEO and web standards http://www.constructweb.com/seo/b has a IRT (Image replacement Technique) implemented I do not think that is a problem with google? Neal Neal, at a minimum for SEO, include keywords/phrases searchers might use: 1. Expand your title tag (currently just Construct Web) to include the tagline: Standards-Compliant Web Design / Development 2. Add a description tag Think of these in terms of the highlighted words/phrases that might show in a search engine results page. On Wed, Oct 8, 2008 at 1:53 PM, [EMAIL PROTECTED] wrote: apologize for the cross post. I created a page (pages) for a client and they will be used mostly for SEO This is the (very simple) page: http://www.constructweb.com/seo/ It validates! - anything else that be suggested from the css/html (maybe SEO if it's not too OT) perspective that would make this page even more web standards compliant? Thanks Neal life is certain death is short ~furry lewis __ 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/ -- Pat C [EMAIL PROTECTED] __ 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/ life is certain death is short ~furry lewis __ 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] IE6 and margin problem
Karlo Lozovina wrote: http://mosor.net/iebljuv/ In FF, Opera and Konqueror the height of the blue box is exactly the same as the height of the gray DIV. In IE6 the gray DIV is a fex pixels bigger than it should be, so they don't fit perfectly. Any ideas what is the problem, and how to fix it? IE sees whitespace before and after the image, and insists on making room for text because of it. This means space below the image for descenders, and since IE has no respect for declared dimensions it pushes #abc taller. Same in all IE versions in quirks mode. Remove the gaps before and after the image, turn the image into a block-element, or declare 'vertical-align: bottom' on the image. regards Georg -- http://www.gunlaug.no __ 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/
