Topic: Front page thing with CSS - help (Page 1 of 1)

This is driving me nuts. It drove me nuts in the past, and it's driving me nuts now. I used to do this with a table, but I would like to give it a go with CSS.

I'm trying to work on my front page. I want blocks (orange). In each block, a thumbnail (blue) floats to the left. Then there is the blurb/description (green). There will be bunches of these that go down the page as I add more.



I've tried several plans of attack, and they have all fallen flat.
I'm at a loss.
How would you do it?
Please? Pretty please?

I can't see your image at the moment, so I don't know exactly what you're looking for, but let me give it a shot - something like this?
http://in-dented.com/temp/wj.html

For a stab in the dark, it looks like you nailed it.
I'll let you know how it goes.

Thanks.

You are going to love this.

While what you have is damn close, I was trying to get the text to not wrap to the bottom of the thumb. I should have mentioned that. Add this:

.blurb {

display: inline-block;

}

and it's the way I want it.

I definitely need to spend more time with HTML and CSS. It's been too long since I got this nitty-gritty.

DL, I do have a question about what you did.
I noticed this in the CSS:

.clear {

CLEAR: both

}

and this in the HTML

<BR class=clear>

Now, since the BR is the last thing in .wrapper, would it be the same as adding the clear to .wrapper in the CSS?
You know, like this:

.wrapper{

clear: both;

}

Just curious.

Again, thanks.

edit: Man, talk about white space. Be mostly gone!


[This message has been edited by warjournal (edited 03-14-2004).]

Cool =)

The <br class="clear" /> is added to break the floats that are within the wrapper <div>, so applying the clear:both; to the wrapper itself would have no effect on the things inside it, and could (depending on your page layout) have adverse effects on your page layout.

What the clear:both; does is force the wrapper to expand to enlcose the floated items.
Good info on how/why here: http://development.gurusnetwork.com/discussion/thread/2220/

Man, I hate bizarre! This has happened to me before, it happened to me just now, and I'm sure it will happen again.

Okay, I took the important things from your CSS, DL. Not a cut-n-paste, but the important stuff. Slapped all together in your manner with my twist - and it was all funked up! I hate that!

So I eventually resorted to cut-n-paste. Looked good. Chop things up just tad. Test and still looks good. Kept whittling it down until it was WJ style. Still looks good. I don't understand this phenomenon. I put something together from scratch, and it's bunk. Cut-n-paste-n-hack, and it's good. One of the most annoying instances of this was my old site when I was trying to use some Blue Robot stuff. I don't get it. Is it any wonder I gave up web wonking?

Anyways, I got it mostly around. It breaks a little bit in Opera 7, but it's survivable.

The front door: Max Slop.

I'll pick up the stray pieces in a few days. In the meantime, I've got a tutorial to write.

Many thanks, DL.

Funny - I usually have it the other way around: I cut 'n paste, try to whittle away what I don't want....nothing but problems.

Take the important cues and write it my self, much better

Anyway, always glad to help =)