Topic: Front page thing with CSS - help Pages that link to <a href="https://ozoneasylum.com/backlink?for=11171" title="Pages that link to Topic: Front page thing with CSS - help" rel="nofollow" >Topic: Front page thing with CSS - help\

 
Author Thread
warjournal
Maniac (V) Mad Scientist

From:
Insane since: Aug 2000

IP logged posted posted 03-14-2004 15:28 Edit Quote

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?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-14-2004 17:27 Edit Quote

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



warjournal
Maniac (V) Mad Scientist

From:
Insane since: Aug 2000

IP logged posted posted 03-14-2004 17:43 Edit Quote

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

Thanks.

warjournal
Maniac (V) Mad Scientist

From:
Insane since: Aug 2000

IP logged posted posted 03-14-2004 17:58 Edit Quote

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:

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

code:
.clear {
CLEAR: both
}


and this in the HTML

code:
<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:

code:
.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).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-14-2004 19:07 Edit Quote

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/

warjournal
Maniac (V) Mad Scientist

From:
Insane since: Aug 2000

IP logged posted posted 03-15-2004 02:39 Edit Quote

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-15-2004 03:49 Edit Quote

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 =)





Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu