SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fix footer problem

    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.

  2. #2
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this problem is related to css and html.

    Can any body move this thread to the relevant section ?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...eat=directlink

    http://picasaweb.google.com/sonu.sha...47109017454802




    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  8. #8
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 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

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cools_sonu View Post
    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.

    Code:
     or http://www.ndtv.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.

    Code:
    div#footer {
        position: fixed;
        bottom: 0px;
        font-size:.8em;
        width:1050px;
        background:url(http://maayazaal.dyndns.org/images/menuback.png);
    }
    li#rssname {
        /*padding-left:19.8em;*/
     
    }
    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.

  12. #12
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cools_sonu View Post


    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.

  14. #14
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


    without overflow.jpg

    overflow1.jpg

    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.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, instead of overflow:hidden; method on the parent, give it hte clearfix instead
    http://www.positioniseverything.net/easyclearing.html
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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


    fontoverlapping.jpg

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  18. #18
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •