Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-08-2009, 12:51 PM   PM User | #1
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Scrolling feeback button help

Hi all,

Iv been trying to position a feedback button the extreme left of my site using position: absolute and placing it 300px from the top of the page, I also want have added fixed to the background image so that it scrolls with the page. My problem is though if you scroll up the page within the 300px set from top the button disappears? I know Im going very wrong with this and would really love your help?

The page can be found at http://kylehouston.com/testing/test.html

Thanks loads in advance
Kyle
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-08-2009, 01:33 PM   PM User | #2
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
With CSS issues always validate first (from validator):

Quote:
document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
You need to wrap your <a> tag in a container first. Then, if you want this item to ALWAYS be visible 300px from the top of the browser window you need position:fixed; rather than absolute. Last but not least, you are losing the feedback button because it is a background image with fixed position. You could either change that to scroll or else put an image tag inside the anchor tag. Since empty anchor tags are a no-no, I'd recommend just using the background image as an actual image.

So, you could fix it as easily as this but it still wouldn't be the right way to do it:
Code:
.feedback {
background:transparent url(images/feedback.gif) no-repeat scroll 0 0;
height:100%;
left:0;
position:fixed;
top:300px;
width:33px;
z-index:1000;
}
Instead you should probably try something like this:
HTML:
Code:
<div id="feedback_wrapper">
  <a href="" class="feedback"><img src="images/feedback.gif" alt="Feedback" /></a> 
</div>
CSS:
Code:
#feedback_wrapper {
position:absolute;
z-index:999;
}
.feedback {
height:168px;
left:0;
position:fixed;
top:300px;
width:33px;
}
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Users who have thanked Rowsdower! for this post:
kyllle (12-08-2009)
Old 12-08-2009, 02:02 PM   PM User | #3
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Thanks so much for your help Rowsdower!

I really didnt understand what i had to do there but youve explained it really wel for me!!

Thanks a milion!

Kyle
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-08-2009, 02:05 PM   PM User | #4
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
No problem!
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Old 12-08-2009, 02:24 PM   PM User | #5
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
just one more question however, when this is viewed in ie6 the tab is placed at the top center of the page? how can i correct that?
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-08-2009, 02:37 PM   PM User | #6
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,680
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
IE6 doesn't support fixed position. However you may cleverly tackle this. Have a look at http://www.cssplay.co.uk/layouts/fixed.html
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Users who have thanked abduraooft for this post:
kyllle (12-08-2009)
Old 12-08-2009, 02:52 PM   PM User | #7
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
Yep, that or you could use conditional IE6 comments to just change the style to position:absolute; and just let it scroll with the page. I'm lazy though!

abduraooft's solution shows more ambition than I have today!
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Users who have thanked Rowsdower! for this post:
kyllle (12-08-2009)
Old 12-08-2009, 02:59 PM   PM User | #8
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Excellent!! Thanks guys!!
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-08-2009, 03:01 PM   PM User | #9
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,680
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Quote:
Originally Posted by Rowsdower! View Post
abduraooft's solution shows more ambition than I have today!
Quote:
Originally Posted by http://www.cssplay.co.uk/layouts/fixed.html
But they didn't know that another bug works in a way that ALLOWS this to be done!

This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.
Yeah, that's why IE6 is still my favourite browser.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:38 AM.


Advertisement
Log in to turn off these ads.