SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Formatting Recent Visitors

    What formatting/styling technique does SitePoint use for the "Recent Visitors" area under my profile?

    It sorta looks like the Username just "snake" around...


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    What formatting/styling technique does SitePoint use for the "Recent Visitors" area under my profile?
    You know about Inspect Element, right? That's the best way to check. I use Chrome now, having moved from Firefox. Anyhow, it's an <ol> with the <li>s set to display: inline-block;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You know about Inspect Element, right?
    No, not really.

    I use FireFox and FireBug.

    Is it in there somewhere?


    Anyhow, it's an <ol> with the <li>s set to display: inline-block;
    If it is an Ordered List, then why are there at least 2 Usernames per line?

    And what is up with all of the spaces and double-commas?!

    Like I said before, it has the appearance that it is wrapping around like an "s"...


    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    No, not really.

    I use FireFox and FireBug.
    It doesn't sound like you are using Firebug.

    Right click on an element and choose "Inspect Element with Firebug". It shows you the HTML and CSS involved. Or just click "Inspect Element" in Chrome, which has inbuilt tools.

    why are there at least 2 Usernames per line?
    display: inline-block;

    And what is up with all of the spaces and double-commas?!
    A bug, presumably.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It doesn't sound like you are using Firebug.
    I do but don't know all of the features.


    Right click on an element and choose "Inspect Element with Firebug". It shows you the HTML and CSS involved. Or just click "Inspect Element" in Chrome, which has inbuilt tools.
    I usually click on the arrow thingy to the right of the orange firebug thingy and hover over what i want to study and then it highlihts it i the HTML and shows all of the corresponding styles...


    display: inline-block;
    display: block create a block that is the width of the entire containing block or whatever you call it, right?

    So is display: inline-block like a Lego where it create a smaller block, and they can slide up next to each other, almost like Floats do?

    And what is the difference between display: inline-block and display: inline again?


    A bug, presumably.
    Bugs on SitePoint?! Never!


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So is display: inline-block like a Lego where it create a smaller block, and they can slide up next to each other, almost like Floats do?
    Yep, that's how I'd describe them ... although I'm sure it can be described more technically. An element set to inline-block acts like an inline element in that it can sit beside others, but it has characteristics of a block element like accepting proper margins and paddings etc. It is very handy for a lot of things, especially since older browsers that don't understand it have all but died off now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yep, that's how I'd describe them ... although I'm sure it can be described more technically. An element set to inline-block acts like an inline element in that it can sit beside others, but it has characteristics of a block element like accepting proper margins and paddings etc. It is very handy for a lot of things, especially since older browsers that don't understand it have all but died off now.
    Okay, good. Thanks for the explanation.


    Debbie

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    BTW, Ralph, since you were giving me a hard time about my Color and Text-Decoration choices, attached is a screen-shot of my Left Page Column...

    Attachment 60143


    I would appreciate your (and other's) thoughts on how I can make my "Recent Visitors" section look better...

    (The fact that I got the PHP and MySQL part working, and that it actually takes you to the User's Profile is the real trip, but I'd like to make things as "pretty" as possible too!!)

    Thanks,


    Debbie


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
  •