Formatting Recent Visitors

[DoubleDee]

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

[ralph.m]

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;

[DoubleDee]

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

[ralph.m]

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.

[DoubleDee]

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

[ralph.m]

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.

[DoubleDee]

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

[DoubleDee]

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...

LeftColumn.png


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