CSS instead of tables problem

[Geezer D]

Hi, all.
I'm experimenting with not using tables at all for a store site.
Unfortunately, css positioning eludes me, hahah.
I've been experimenting trying to figure out how to set the positioning on these divs for quite awhile, and, well..... it aint happenin'.
I've thrown together a picture describing what I'm trying to do, if anyone could tell me how to position these, I'd appreciate it.

Or direct me to a good tutorial on it, anyway, which I can't seam to find, either.

Thanks in advance.

The top block, block1, will have a featured item, with a bigger image, then block2 (and block3 and block4, etc) will be below it, with 2 items, side by side.
All the images will be the same dimensions, except the one in block1.

http://02045candle.com/cssdivs.jpg

All the "text" and "buynow"s could actually be in one div, but then I'd have to put a transparent image after the text, and adjust its height to push down the buynow so it's at the very bottom.
I'm trying to avoid that, though.

[Medyman]

Something like this (http://www.visualbinary.net/files/tutorials/love-the-store/), perhaps?

[Geezer D]

Something like this (http://www.visualbinary.net/files/tutorials/love-the-store/), perhaps?

You, sir, are A GOD! :)
(or Goddess, in the off chance you're a female named "Medyman", hahah)

Did you do this for me!?

I am humbled by your generosity! Thanks a million!

Oh, and the featured image breaking outside of the frame is the bomb! (are you kids still using that expression....? :p)

One mo TIME: THANKS!

[Geezer D]

[QUOTE=Geezer D;142920]You, sir, are A GOD! :)
Oh, and the featured image breaking outside of the frame is the bomb! (are you kids still using that expression....? :p)
[QUOTE]

Hahah, of COURSE, I should have known... IE only displays it like that, it's all good in Firefox....

And my nightmare continues, lol.

No, not really, it must be a simple fix for that, I'll figure that one out (I hope).

:cool:

[Medyman]

Ahh..I should have mentioned I didn't bother to actually test it.

I've fixed it now. Just added a height to the featured div.

If you actually want it to look like it did in IE, let me know. I can show you how to do that too.

By the way, I expect 10% of all the profits from the store if you use my markup :p just kidding.

[Geezer D]

Yup, that's what I did first, too, and it fixed it.

But... in Firefox all the h1 text at the top of all the descriptions is invisible, or not there at all.

And div class="description" has no css....?

I have to take off right now, I'll mess with it later.

Thanks again!

[Medyman]

But... in Firefox all the h1 text at the top of all the descriptions is invisible, or not there at all.

It's the neg. margins. I was trying to get the text to line up with the top of the images. There are other ways to do it though.

Just remove those and you'll be good.


And div class="description" has no css....?
Yeah. I wrote the HTML before I did the CSS. I thought I might need some styling on that. But didn't. You can take out the class identifier, if you want. Otherwise, it just serves as an organizational markup. No biggie.

[Geezer D]

Hmmmm....

I messed it up too much :mad: and re-downloaded it, and now it opens in IE7 with the featured div (and everything in it) and the item-right and item-left divs all up against the left edge of the screen (but, strangely, not the more-items div itself, which has the item-left and item-right inside it).

But if I refresh the page, they move over to where they are supposed to be.

All dandy in FF, though.

[Geezer D]

OK, I got it all honky dory, sort of, hahah.

I removed all the positioning on everything, except anything with float or clear.

That made everything but the buynow divs work perfectly. The but now divs I couldn't get to behave, so I removed all the css references to them in the styles, and just put div style="padding-top:XXpx;" and will adjust them to push them down to the bottom.

http://www.aedadvantage.com/test1

http://www.aedadvantage.com/test1/styles.css

[Medyman]

Hmmmm....

I messed it up too much :mad: and re-downloaded it, and now it opens in IE7 with the featured div (and everything in it) and the item-right and item-left divs all up against the left edge of the screen (but, strangely, not the more-items div itself, which has the item-left and item-right inside it).

But if I refresh the page, they move over to where they are supposed to be.

All dandy in FF, though.

I'm almost positive that it's probably just your brower's cache. You could have just cleared your cache instead of redoing my CSS. But whatever works. By the way, you have some unclosed <p> tags. You might want to fix those.

[Geezer D]

No, I just changed it back, emptied cache, and it still does it, even from the server.

http://www.aedadvantage.com/test1/

http://www.aedadvantage.com/test1/styles.css

[Medyman]

Weird...I don't get any problems like that at all (tested in IE6, IE7, Fx2, Safari, Opera on a PC)

[Geezer D]

It must be something to do with my PC, my IE7 maybe needs an update, dunno.

I just it opened again, and it looked fine, it wasn't shifted.
BUT I'm downloading stuff, and my connection is slow right now.
Last time, when I wasn't downloading, and it popped right up, it messed up.

So if the page loads real fast, it messes up, if it loads slow, it's fine.

BizAHHHHHHH!

[Medyman]

Yeah, sounds like something is up with your browser.