SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Berkana's Avatar
    Join Date
    Dec 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Things that should be simple but aren't: Facebook style bar/frame

    If anyone can help out with this, please do. Otherwise, this will be a gripe-fest.

    Recently, I tried to implement bar that sits across the top of a page akin to the Facebook bar that gets superimposed on external links. It proved to be so difficult that I ended up giving up on using a standards based approach, and resorted to using tables, and eventually found that even with tables enforcing the sizes, I had to leave out the DTD just for the page to look right in FireFox. The page still does not work in IE 7; the framed page simply does not show.

    (I looked at the HTML code from Facebook for reference, and I still can't figure out what they're doing that makes it all work.)

    Methods I've tried:

    First, I tried using frames, but I could not figure out how let a link in the bar update the whole vieport rather than just the frame the bar resides in.

    i-frames helped with that, but I couldn't get the bar to fit across the entire top of the page and have a fixed height while having the lower portion fill the rest of the viewport. I had to resort to using tables where the top cell has a fixed height and the lower cell fills the rest of the page. However, this only worked when I left out the DTD; adding any DTD caused the lower cell to fail to fill the rest of the viewport.

    Does any one know how to build a toolbar that will behave like the facebook external link frame/bar? (Especially using standards compliant methods.)

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I don't have an answer, but I can shoot my mouth off, er, state my opinion, that your methodology--abandoning standards and doctypes, using frames and iframes, will cause you nothing but grief in the long run. Better to find another alternative that is standards-compliant rather than twist your site into a pretzel to use a particular technique.

    I'm not a Facebook user, so this question may be ignorant: Are you talking about the navbar that sits on pages like this one?

    http://developers.facebook.com/?ref=pf

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you do is create an unordered list.

    HTML Code:
    <ul>
    <li><a href-"#"></a></li>
    <li><a href-"#"></a></li>
    <li><a href-"#"></a></li>
    </ul>
    ...and then in the CSS

    HTML Code:
    ul, ul li{
    display:inline;
    }
    
    ul{
    background:url(images/path-to-bg-image.jpg); /*This is the background "blue" bar/*
    }
    
    ul li{
    margin-right:20px;
    }
    
    ul li a{
    color:white;
    font:Whatever-font-;
    font-size:however-big-you-want;
    }

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...of course there is more CSS that will be required to slightly reposition everything, but that is the "skeleton"

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That has got to be one of the most useless replies I have ever seen. That's like saying here is come code, now go and make it work!

    Try here:

    ryan.rawswift.com/2009/02/15/fixed-that-bar-at-the-bottom-like-facebook/


Tags for this Thread

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
  •