14 replies [Last post]
mafro
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-04
Posts: 4
Points: 0

Hey all, ive got some nicely styled thumbnails with rollovers etc.. but i want them to flow relative to each other in the page. Currently they act as block objects:

http://pixelabuse.co.uk/block.htm

I want them to flow horizontal and then obviously break based on window width.. Any suggestions?

thanks all
mafro

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Challenge: Get these thumbnails to flow relative..

Hi there,
The word 'challenges' in titles can have a negative effect on replies Smile

You have got this far with making these block level, do you not understand the use of the float property ?

Try float: left I'll leave you to figure out where to place it in the rules.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mafro
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-04
Posts: 4
Points: 0

Challenge: Get these thumbnails to flow relative..

Thanks for giving me a challenge in return Hugo.

And for pointing out my error with a post title! Youre a real gem. Most people tend to relish a challenge when it comes to CSS in my experience! Ive spent a while playing with floats, but since you couldnt solve the problem i guess ill try some more..

Challenge still open!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Challenge: Get these thumbnails to flow relative..

Hugo wrote:

Try float: left I'll leave you to figure out where to place it in the rules.

QFMFT

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Challenge: Get these thumbnails to flow relative..

This will do it (with a couple of extras thrown in):

html, body {
height:100%; 
}
body, td {
margin:0; 
background:#F5EDE3; 
font:normal normal 90%/1 'verdana' 'tahoma' 'helvetica' sans-serif; 
}
a.thumb {
display:block;
position:relative; 
float:left;
width:100px; 
height:100px;
margin:4px 2px; 
border:2px dotted;
text-align:center; 
}
a.thumb:hover {
background:#E1D4C0; 
color:#003366;
}
a.thumb img {
display:block; 
margin:0 auto -1em; /*the -ve margin on bottom helps 
keep the text in better vertical  alignment below
see how the text doesn't grow down much when resized*/
padding:10px 0 5px;
}
img {
border:0; 
}
a {
color:#936C55;
 }
a:hover {
color:#003366;
 }

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Challenge: Get these thumbnails to flow relative..

Come on Hugo, I can't believe someone of your guru status couldn't solve this problem Wink

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Challenge: Get these thumbnails to flow relative..

Ya, Hugo, whose yo daddy, whose yo daddy?

Actually I posted the block to show a number of different things to do when making thumbnails. First, applying the float property took care of your original question. I then wanted to show how to get the caption text to vertically center in the space below the image over a wide range of font sizes, or at least until the text wraps. I favor outlining thumbnails as it helps indicate to the user the clickable area.

Look carefully at the sequence of selectors and properties. Start with your html, body first, then body (including td for older browsers who incorrectly do not inherit body styles to tables) and then generally follow the convention of doing any layout/positioning first followed by other block stylings and then the purely presentational stuff. Also note the sequence of properties that goes in decreasing order of importance:
display
position
top/left/bottom/right
float
height
width
margin
border
padding
color
background
font/text
If you always code this way, it will be very easy for others to read your CSS and will make your own editing much easier. Note also the use of "shorthand" which combines several properties into one. (many hyphenated properties have a shorthand version for convenience and compactness. Also try to avoid declaring properties that are defaults for a selector - it bloats your code and may interfere with inheritance from a parent object.

Thats a lot to learn in one day, but if you start this off right (including picking good thread titles) you can go a long way.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 14 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Challenge: Get these thumbnails to flow relative..

Give a starving man a fish, he'll eat it, but will still be hungry tomorrow. Teach him how to fish and he'll know how to feed himself. Tongue

Written before DE's latest - that's better teach him.

mafro
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-04
Posts: 4
Points: 0

Challenge: Get these thumbnails to flow relative..

Thanks for the lengthy reply there DE - spot on. Seems to me the only required attribute was the float:left.

I would normally add borders etc.. to thumbnails but that example was streamlined for ease of reading. Defo note taken on the use of the negative margin, very nice. This syntax had me tho!

font:normal normal 90%/1 'verdana'

Whats it mean exactly?
Cheers again

mafro

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Challenge: Get these thumbnails to flow relative..

Ah it's nice to know I'm a gem, albeit a somewhat patronizing statement from one so new to the forum !

So I'm confused mafro

Quote:
but since you couldnt solve the problem i guess ill try some more..
really ! then I don't get this later statement:
Quote:
Seems to me the only required attribute was the float:left.


Now call me barking mad, but that's what I thought I said :?

The reference to "challenge was due to the fact that it is often considered bad form to come to a forum and lay down challenges, most of us do not require to be challenged we know how to do these things, this is a help forum, ask us for our help and we will bend over backwards, challenge us and most will just turn off and be disinclined to read further. Having said that this is a very relaxed forum rule wise and I was gently mentioning the fact I didn't say it was an error.

Likewise my response was not intended as a counter challenge but more based on the fact that I forgot where I placed the property and did not have time to re-check and as it would have been relatively quick to deduce I left that to you to work out.

Nuf said, and await your apology Wink

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Challenge: Get these thumbnails to flow relative..

Font shorthand lets you set several font properties at one time.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Challenge: Get these thumbnails to flow relative..

Hugo, I think you have been a victim of Omne ignotum pro magnifico and please forgive me for twigging you a little bit, but sometimes you make such an obliging target. Your original explanation would have, with a little effort by the original poster, have resulted in the desired effect.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Challenge: Get these thumbnails to flow relative..

*sigh* Clearly I am an easy target and the butt of many peoples jokes.

I don't mind you twigging me David. You have the style and panache to do it with grace, and of course I must except it with good humour when it comes from my elders and betters Smile

I did clearly think that the float answer was sufficient especially as the OP had managed the concept of blocking an inline element. I logically imagined that inserting a float property into the equation wouldn't really present too many problems, but then again ...

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Challenge: Get these thumbnails to flow relative..

Hugo wrote:
You have the style and panache to do it with grace

All that for a "Whose yo daddy, whose yo daddy - I'd never have thunk it. And BTW, I've never done it with Grace, what's she like?

As for elder, most likely, but better - not a chance.

But, I guess that's me, all style and panache

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Challenge: Get these thumbnails to flow relative..

Apologies thought yyou had been introduced to Grace

Ah no, can't except your kind remarks. I know my limitations and they are legion, and will always defer to those that clearly have the greater knowledge,

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me