16 replies [Last post]
aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Hi everyone

I don't know if this post is supposed to go in this topic but I'm new to this forum so I apologize if it's not right.

I need to style a ul element as an explorer view. I include a picture to better ilustrate what the desired goal is. I have searched for a way to do it but so far I haven't found a way. I thought of doing it with floats. Positioning all li items as floats. However I would like to know if anyone has a different idea or approach.

image

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to style a list (ul) as an "explorer-like" vie

floats would be the way to go. Style the contents of the individual li elements as you need them and assign the li container a fixed width and float it left.

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an "explorer-like" vie

Thanks for the confirmation. I was not sure it was the best way to go.

I'll just take the opportunity to ask if there is a way of controlling the floats so that when they start a newline they start it from the left side and not as soon as there is space available for the float element (for example in my case when I have 30 items some of them are placed in middle of a "row" and I need to have only full "rows" i.e. from left to right sides).

UPDATE: I forgot to say that I have no way to know the item's height previously as they are dinamic.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to style a list (ul) as an "explorer-like" vie

Not without using a wrapper for each row. The behaviour you describe is correct as per the CSS specification, which says something along the lines of

(for a left float)
It should appear as high as possible then as far left as possible. Its top can not be higher than the bottom of any previous (floated) element displayed to its right, but its top can be higher than any previous (floated) element displayed to its left.

reverse left and right for a right float.

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an "explorer-like" vie

Is there a way to use the CSS display property to help in this case?

UPDATE: also is there a way of saying that the vertical spacing between li elements is a percentage of a certain height?

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How to style a list (ul) as an "explorer-like" vie

aikanaro wrote:
Is there a way to use the CSS display property to help in this case?

Floats are automatically display:block, so the answer to your questions should be "no".

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an "explorer-like" vie

Right...I didn't make myself clear then...what I meant was if there was any way that using the CSS display property we could get the same output but without using floats.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How to style a list (ul) as an "explorer-like" vie

aikanaro wrote:
Right...I didn't make myself clear then...what I meant was if there was any way that using the CSS display property we could get the same output but without using floats.

Well you can make a list display horizontally without floats by giving display:block to the <li> elements. But it's then harder to style the results and, I believe, less robust cross browser.

Take a look at the listamatic site for some examples, if I recall right.

Other display types, in my experience, are less well supported accross browsers.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an &quot;explorer-like&quot; vie

Ed Seedhouse wrote:

Well you can make a list display horizontally without floats by giving display:block to the <li> elements.

I'm sorry but aren't you mistaken? Shouldn't it been display:inline ? If not, how then do you accomplish it with display:block . Just asking to learn a bit more about CSS.

Thanks for your contribution so far and my thanks also to Chris..S

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How to style a list (ul) as an &quot;explorer-like&quot; vie

aikanaro wrote:
Ed Seedhouse wrote:

Well you can make a list display horizontally without floats by giving display:block to the <li> elements.

I'm sorry but aren't you mistaken?

Yep. A typo.

My excuse is I'm up before noon and haven't been able to start my drinking for the day yet. Laughing out loud

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to style a list (ul) as an &quot;explorer-like&quot; vie

There is display:inline-block. Not all browsers support it. You'd need to investigate if those that do support it, support it in the same or similar manner.

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an &quot;explorer-like&quot; vie

Right...but in Firefox it needs display: -moz-inline-box; to be correctly displayed and there isn't yet a way of producing the same result in IE6 without resorting to floats isn't it? At least that's what I understood from the pages I read about it. Please correct me if I'm wrong.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to style a list (ul) as an &quot;explorer-like&quot; vie

IE does support inline-block - see it in action here as part of a vertical centering example.

Does that FF property work right?

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an &quot;explorer-like&quot; vie

Well...I had just tested it in Firefox and it display li items as inline blocks. As I needed. But I took it out because I couldn't replicate the behaviour in IE without resorting to floats. I'm going to see the link you posted now and proabably change things back.

Thanks. I'll let you know if I got it to work.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an &quot;explorer-like&quot; vie

If you use that FF extension with display: inline-block you can get elements (drawn as blocks) inline. That was the behaviour I was talking about, blocks next to each other. I'm not saying that it doesn't work...only that it was not what I had expected. I've read that in IE display:inline-block is only supported for elements that are natively displayed as inline. For example, if you want to display a horizontal list but each li item as a block you can't because inline-block won't work (in IE as it is natively a block element). Again, if I made any mistake please correct me.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to style a list (ul) as an &quot;explorer-like&quot; vie

You are now the guru here. I am filing away your findings for future reference.

Smile

aikanaro
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

How to style a list (ul) as an &quot;explorer-like&quot; vie

I was just lucky to have found a page explaining it. I'm still at the beginning of CSS. Still a rookie. Laughing out loud

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II