SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Pandora Tipem's Avatar
    Join Date
    Feb 2006
    Posts
    450
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text and an image, but only see the image?

    Hi,

    Take a look at this website: http://qn5.com/

    Pull up the source for their top navigation (<div id="nav">). It appears that there are normal <li> elements with <a>s and text in it, but when the page is rendered, the text clearly does not appear; the user only sees the nav image.

    They can't be doing a display: none, right? -- otherwise, the <a> (and therefore, the menu) would never be clickable.

    My question is: how is it possible to have a normal, unordered list with text in it, but only render the background image like on qn5.com?

    Unfortunately, their CSS source is minified, which is almost impossible to read and comprehend.

    Thanks.
    Tipem no fancy sig, yup
    Need Neopets Help? Try Neopets
    fun adoptable eggs

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    They give text-indent:-9999px on the anchor ("#nav li a.root") to move the text off the screen, that way it will work in different scenarios of CSS on/off and images on/off
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Pandora Tipem's Avatar
    Join Date
    Feb 2006
    Posts
    450
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh! That's much easier than I thought it would be. :P Thank you!

    Another question: I noticed that when qn5 is rendered, it displays (i.e. appears) in the web browser ALL at once. Other CSS layouts, on the other hand, sometimes load in "chunks." Does this have anything to do with the way the CSS/HTML is ordered/written? Or is it simply because they have a fast server? :P
    Tipem no fancy sig, yup
    Need Neopets Help? Try Neopets
    fun adoptable eggs

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    First I want to comment on the negative text indent: it's popular but there's one important thing to be careful with it: people who have CSS on but images off (esp blocking them for faster surfing) get a mystery space menu, which suck. This page is a nice rundown of different ways people have tried to tackle the problem (and my favourite to use is either just an image tag with alt text (except it's harder to have :hover/:focus/:active versions) or Gilder-Levin near the bottom) and what the pros and cons are of each: http://www.mezzoblue.com/tests/revis...e-replacement/

    Keyboarders/laptop users are definitely getting teh suck with that menu... you can't tell where you are as you tab through the page. This is because someone removed the normally default "outline" that you see dotting focussed elements. When a negative text indent is used, you'll see the outline... stretching to the right of the page (it tries to encompass the text that's offscreen) and looks terrible, so people remove it. Always try to have :hover/:focus styles so everyone gets something good from it.

    Re loading in chunks: it may well be server speed. If a page is built in delicate, multiple or nested tables then often you see stuff re-arrange itself as each table finishes loading (if you don't have table-layout: fixed on your table then often the user agent waits til the whole table is loaded before trying to render it). Some pages have Apache set to manage load when there are lots of media like videos, and may try to have them load in a certain order and in Firefox you'll see that images who aren't loaded do not take up space... only after the image gets loaded does FF add the space in, so you may see parts of a page adjust position in FF as images and objects load. Also FF normally tries to load two files at a time (unless you turn off Keep-Alive), Opera is willing to call 8 at a time, and IE is always stuck at 2 no matter what. This might also affect page load of some types of pages cross-browser.

    Okay half of that is coming out my butt and the other half is true but maybe not the reason you see pages loading a certain way as I can't be sure what in particular you're seeing. : )

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tipem View Post
    Ahhh! That's much easier than I thought it would be. :P Thank you!

    Another question: I noticed that when qn5 is rendered, it displays (i.e. appears) in the web browser ALL at once. Other CSS layouts, on the other hand, sometimes load in "chunks." Does this have anything to do with the way the CSS/HTML is ordered/written? Or is it simply because they have a fast server? :P
    Their page is probably optimized for speed and they have a fast server

    I too noticed it was fast loading though that's not uncommon. Their CSS file is also nicely written . From what little I looked at.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Portland, OR and San Jose, CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, I designed QN5.com

    Looks like you got the CSS figured out. But if you wanted it for reference, here's the html & css for our navigation:

    * navigation html: http://pastie.org/814192
    * navigation css: http://pastie.org/814193

    We inherit some global CSS styles for the navigation, but the navigation-specific code might help you out.

    As for the speed, I try to use "sprites" when possible (and when I have time to create them.) To continue with the navigation example, this is the image we use for all our navigation links: http://qn5.com/assets/images/nav_bg.png

    So instead of making 25 http calls to the server for each link image and hover/selected states, we make 1 call and load up everything at once. Hope this points you in the right direction.

    Thanks for visiting our site! If you have an account with us, post in our forum and say hi. And listen to our music when working. It'll make your day go about 100x faster

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisrhee View Post
    Hello, I designed QN5.com

    Looks like you got the CSS figured out. But if you wanted it for reference, here's the html & css for our navigation:

    * navigation html: http://pastie.org/814192
    * navigation css: http://pastie.org/814193

    We inherit some global CSS styles for the navigation, but the navigation-specific code might help you out.

    As for the speed, I try to use "sprites" when possible (and when I have time to create them.) To continue with the navigation example, this is the image we use for all our navigation links: http://qn5.com/assets/images/nav_bg.png

    So instead of making 25 http calls to the server for each link image and hover/selected states, we make 1 call and load up everything at once. Hope this points you in the right direction.

    Thanks for visiting our site! If you have an account with us, post in our forum and say hi. And listen to our music when working. It'll make your day go about 100x faster
    Going a bit OT here but maybe you would like to check your XHTML and CSS: 105 Errors, 31 warning(s) for the xhtml and 71 errors and 307 warnings (the last ones are the typical color warnings so you can skip those lol)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Portland, OR and San Jose, CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google.com and Facebook.com homepages have around 45 errors each — and display much less content. It doesn't seem to stop people from using their sites

    I know where you're coming from (as I was once a validator snob), but I'd MUCH rather spend my time on the end goal: shipping sites that work. I haven't run into much problems in that regard.
    Chris Rhee
    QN5: an indie hiphop record label
    Blood: my design & dev blog

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'd be more likely to nag you about the keyboard-unfriendliness... the reset you mention is likely where the focus outline got removed, since most of the popular resets out there do that (with a snarky comment saying "don't forget to put it back in" that everyone ignores).

    As a laptop user I can't tell where the heck I am with my cursor as I tab through the menu or the page... I have to rely on looking at the little bar at the bottom of my browser.

    Oh and now I see that javascript is required to get the Artists to drop down. Way to slam the door in my face : (

    Since you're using sprites, it ought to be easy enough to add the :focus statement to every place you have :hover. Then outline can remain safely gone (well, except for IE but I expect IE users to be used to the inaccessibility of that browser).

    Facebook is NOT a good example of code. They are built out of a steaming pile of script-ridden gar-bage. It even thinks one of my browsers is a mobile phone and sends me to some wap page. Facebook is popular not because it works for everyone or is well-written but because it works for many people and they like the idea of a site suggesting people as friends whom they haven't seen since childhood and have no obvious connection to them which is downright creepy (but also strokes the ego as well).

    Felgall stated that if a page or app doesn't work for many people that the site will lose popularity as people tell their friends etc. Facebook is proof that this isn't true. But, I do hope that Facebook tries to act more like Amazon, who DOES do usability studies and DOES make everything work like a website should (and yeah they also have spaghetti-ness in their code and validation errors... so I do agree it's more awesome to have a site WORK than be 100% error-free).

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisrhee View Post
    Google.com and Facebook.com homepages have around 45 errors each — and display much less content. It doesn't seem to stop people from using their sites

    I know where you're coming from (as I was once a validator snob), but I'd MUCH rather spend my time on the end goal: shipping sites that work. I haven't run into much problems in that regard.
    No need to get antsy... i was just trying to give you a heads up. And i'm no snob, much less a validator snob. If standards isn't your thing, that's fine by me.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Portland, OR and San Jose, CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't mean to imply that you were being a snob.&#160;I was referring to my former self with the "validator snob" comment. I know you were just trying to give me a heads up and I appreciate it.

    Anyway, I just came here to share our un-minified code since the OP was talking about our site.
    Chris Rhee
    QN5: an indie hiphop record label
    Blood: my design & dev blog

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisrhee View Post
    Didn't mean to imply that you were being a snob.*I was referring to my former self with the "validator snob" comment. I know you were just trying to give me a heads up and I appreciate it.

    Anyway, I just came here to share our un-minified code since the OP was talking about our site.
    Although it's a funny description: validator snob I have to remind that one lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

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

    Anyway, I just came here to share our un-minified code since the OP was talking about our site.
    Yes, we must remember the original question from the OP and not get into specifics about chrisrhee's site as that isn't the topic exactly

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I prefer "Web Standard Evangelical Jack-Booted Storm Trooper Thugs" myself : )


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
  •