Fix footer problem

[cools_sonu]

Hello all.

I’m developing a site, where I wanna put a fix footer.

here is the link of
my site

I want to make a my footer like CNET

which have the option of toggling. But I’m unable to do so.

Please suggest me where I’m going wrong.

My footer is not spanning over my body instead it is moving upwards. Which I don’t want, I want it to span over my body and then when some one will click on the hide button then it will toggle out and just show the show option.

How could I achieve that ?
Please help me.

[cools_sonu]

I think this problem is related to css and html.

Can any body move this thread to the relevant section ?

[PaulOB]

HI,

You seem to have it working now or did you mean something else?

[RyanReese]

The site is displaying just fine for me in modern browsers, clear your cache to make sure it’s working (if you haven’t messed with it :))

[cools_sonu]

Thanx for the replies.

Yupp this is working fine now.

But one thing I wanna do is, put some images on that bar, which will overflow.

What I mean to say that some images are large, but I’m unable to show them full as the they are being over shadowed by the border of that bar.

May be this image would be helpful in explaining what I mean to say:

http://picasaweb.google.com/lh/photo/wecCGqAnaUVHZXw1qt6zfQ?feat=directlink

http://picasaweb.google.com/sonu.shantanu/WebServer#5455147109017454802

I’ve put some links, all links contain the same pic. As I dunno which link will work, as I’ve put a pic in the past, but it was not showing the image here.

Well I really need some help to make those images show over the bar in full.

And also please suggest where can I improve in that site.

[PaulOB]

Hi,

You have overflow:hidden on the footer which will stop anything escaping. Remove the overflow:hidden and you should be able to allow elements to poke out.

[cools_sonu]

@Paul_O_B

Hi,

You have overflow:hidden on the footer which will stop anything escaping. Remove the overflow:hidden and you should be able to allow elements to poke out.

Paul

I’m really very much thankful to u. U dunno how much I’m excited this time by just watching that my images are not hidden now.

Thanx really very much.

[cools_sonu]

Now a different prob arises

When I’m trying to see my site in low res as some of my targeted users would have low res old age system.

Then my footer breaks down and it ain’t remain same. and also footer is not spanning over the parent div.

I’ve attached a screenshot here.

Without specified width or 100% width

Width Same as parent div

[RyanReese]

Hi, you give hte background image on the <li>'s so thus the image will only stretch as far over as the <li>'s combined width.
You could give the RSSFeed <li> 19em left padding…although I don’t know how you want it layed out.Fixed positioning elements are shrink to fit which is why this isn’t working

[cools_sonu]

@RyanReese

Hi, you give hte background image on the <li>'s so thus the image will only stretch as far over as the <li>'s combined width.
You could give the RSSFeed <li> 19em left padding…although I don’t know how you want it layed out.Fixed positioning elements are shrink to fit which is why this isn’t working

Hi, thanx for the reply.

I want it to make it like CNET or [URL=“http://www.marketwatch.com”]http://www.ndtv.com/NDTV like footer.

Which user can hide too. But my footer breaks down. Earlier I was just testing on high res. but when I tested it on low res. it breaks down and made me crazy :sick:

[PaulOB]

@cools_sonu

Hi, thanx for the reply.

I want it to make it like CNET

They are using javascript to determine the width of the screen andadjust the width of the footer to match.

 or [http://www.ndtv.com/](http://www.marketwatch.com)NDTV like footer.

That one is like yours and once the scrollbar appears the items are unreachable. That’s the problem with fixed positioning. Anything that doesn’t sit in the viewprt cannot be scrolled to (otherwise it wouldn’t be fixed would it :)).

Either align the items to the left:

e.g.

div#footer {
    position: fixed;
    bottom: 0px;
    font-size:.8em;
 [B]   width:1050px;
    background:url(http://maayazaal.dyndns.org/images/menuback.png);[/B]
}
li#rssname {
[B]    /*padding-left:19.8em;*/[/B]
 
}

Repeat the background on the footer and not each item. In that way you don;t have to make all the items fit.

Or float #rss and #rssname to the right but realise that when the scrollbar appears they cannot be reached unless you implement a javascript solution as in the cnet example.

[cools_sonu]

@Paul_O_B

They are using javascript to determine the width of the screen andadjust the width of the footer to match.

Either align the items to the left:

Repeat the background on the footer and not each item. In that way you don;t have to make all the items fit.

Or float #rss and #rssname to the right but realise that when the scrollbar appears they cannot be reached unless you implement a javascript solution as in the cnet example.

Hmmm, yeah actually earlier I did the same, applied the javascript first then after trying slowly slowly, I just removed all the code and only used the toggle function of jquery, and it did what I want. So I did let it. and just concentrated on css part.

But when I look that thing on low res screen, then came to what is actually happening.

And it makes me crazy… And as it is not possible with CSS then I think I should resort to js only. While I’m very weak on js so I’l again use some one else’ code without understanding it fully.

Well One question I wanna ask.

Is it possible to make the child element visible, even if I make the overflow property of parent element hidden ?

If it is possible then it will sort out nearly 70% of my problem.
If u can see, then take a look at my index page. how it is scattered.

[PaulOB]

@cools_sonu

If it is possible then it will sort out nearly 70% of my problem.
If u can see, then take a look at my index page. how it is scattered.

Where exactly are you talking about as I don’t see that the above has anything to do with your problem.

If the parent is overflow:hidden then its children will also be hidden unless those children are positioned elements and part of a different stacking context.

[cools_sonu]

@Paul_O_B

Where exactly are you talking about as I don’t see that the above has anything to do with your problem.

If the parent is overflow:hidden then its children will also be hidden unless those children are positioned elements and part of a different stacking context.

Well I’ve attatched the pics here and showed what I wanna achieve.

Basically I want to make the child element visible and overriding the overflow:hidden property of their parent’s element.

This Pic is without overflow property and here I’ve shown the problem

This pic is with overflow:hidden property, and this is what I wanna achieve but child element should also be visible.

How can I achieve this ?

And I think this is not related to footer problem so this topic should be cut here. If u think like the same then please do the needful.

[RyanReese]

Hi, instead of overflow:hidden; method on the parent, give it hte clearfix instead

Clear Float: An Easy Guide on Using The CSS Clear Property

[cools_sonu]

@RyanReese

Hi, instead of overflow:hidden; method on the parent, give it hte clearfix instead
http://www.positioniseverything.net/easyclearing.html

Thanx Ryan

I did try to use that, but was not able to do that, so I designed my page in a different way. And now it is working fine.

Now I’ve only one issue. and i.e. is the one element overlapping the other one. How do I make them not to overlap ?

Here is the Link I’ve shown here what I wanna achieve.

Here is the Page

[PaulOB]

Hi,

If you want that green box to float at the bottom of that text and for the text to wrap around it then it can’t be done automatically without using js I’m afraid. (If that’s what you were asking as I still wasn’t sure :))

The only way that effect can be achieved is by floating the element at the precise point in the text that would allow it to align at the bottom. It can’t be done automatically.

If you want that element at the bottom and for the text to stay clear you will need to add a margin-right to the text to make it clear but then all the text above will be at margin-right.

[cools_sonu]

@Paul_O_B

Hi,

If you want that green box to float at the bottom of that text and for the text to wrap around it then it can’t be done automatically without using js I’m afraid. (If that’s what you were asking as I still wasn’t sure :))

The only way that effect can be achieved is by floating the element at the precise point in the text that would allow it to align at the bottom. It can’t be done automatically.

If you want that element at the bottom and for the text to stay clear you will need to add a margin-right to the text to make it clear but then all the text above will be at margin-right.

Thanks Paul.

Now I’ve made a little different laid out. So now no more problem.

Thanx really for the help.

Can I put ur name or ur site name as reference. As U’ve helped me in designing that site ?