Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

ugh, css layout problems (re: divs)

B

brianellisrules

macrumors regular
Original poster
OK, I've got this page currently:
http://www.brianellisrules.com/stickers/pics/ (click on a state)

I'm trying to add a caption to each thumbnail showing the date:
http://www.brianellisrules.com/stickers/pics/testindex.php
(click on a state, preferably NY or NJ since they have a lot of pics)


In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row).

In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice.

How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)?

Thanks!

oh yeah, here's the CSS:
div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/
div.float { float: left; text-align: center; }
div.float p { text-align: center; margin: 0; font-size: 0.8em; }

edit: someone on another forum suggested margin-left: auto, and that'd what div.thumbrow is set at now (hence the left-alignment)
 
brian...

to get the same type of effect on my site, i had to use an already centered class div with a set width to have the floats conform to. perhaps you could go that route?
 
Originally posted by mnkeybsness
brian...

to get the same type of effect on my site, i had to use an already centered class div with a set width to have the floats conform to. perhaps you could go that route?
Click to expand...
I think I tried that... here was my approach to writing the page:

<floating pic div><floating pic div><floating pic div>

that was all left aligned though.

so, I added a div around that:
<div for row>
<floating pic div><floating pic div><floating pic div>
</div for the row>

that had everything left aligned still, even if I resized the div for the row using {margin: 0 auto} and {text-align: center}. all divs were left aligned.

then I read another page that said I needed *another* div around the row-div so everything would be centered. so I added *another* div around everything... and it centered it! but only in IE. In Mozilla it was still left aligned.

I figured I was getting closer and all I needed to do at this point was figure out why the outer-most div wasn't centered in Mozilla and then I'd be home free. Then another problem arose... the spacing between each of the internal divs (of the thumbnails) wasn't consistent between mozilla and IE (even though I specifically set the margins and padding in the stylesheet). so, even if I set the div for the row to a specific width, it might look correct in one browser, but not another.

at this point I was getting pretty annoyed, whipped up a table and it worked first try.

(I realize this makes no sense and is probably too dang confusing to make any sense out of it... sorry!)
 
Here's the deal, text-align pretty much is for text only. Freaky, I know.

To center an element in the browser use margin auto on the left and right sides of a specific width container div and then set up your floats inside.

Let me know if you need an example.
 
Originally posted by Rower_CPU
Here's the deal, text-align pretty much is for text only. Freaky, I know.

To center an element in the browser use margin auto on the left and right sides of a specific width container div and then set up your floats inside.

Let me know if you need an example.
Click to expand...
mocking me out, eh? 😉

I'm not crazy! I'm just going by what this page said... particularly, the section titled "front and center" (3/4 of the way down the page).

Front and Center

You may have noticed part of the STYLE attribute for the containing DIV above contained the following: margin: 0px auto;. This results in the 400 pixel DIV being centered in standards compliant browsers. Some browsers, like IE5.x for Windows ignore this, but will (incorrectly) center DIVs that have a TEXT-ALIGN of center. To center DIVs in these browsers you can wrap a DIV with TEXT-ALIGN set to center, around another DIV that sets MARGIN to auto (and TEXT-ALIGN to left so text will align correctly). See Rob Chandanais’ Layout Reservoir for this and other centering technniques.

I tried all that... it centered in IE, but not Mozilla.

Assuming I got that to work and the div gets centered, there's also the problem of the <div> for each thumbnail pic not being the same size.... check out this screenshot (it's IE and Mozilla lined up overtop one another):
wackydiv.jpg


the div around each thumbnail is different for IE and Mozilla, even though I explicitly set margin and padding in the stylesheet. is there another setting I'm missing?
 
Originally posted by brianellisrules
mocking me out, eh? 😉
Click to expand...

Nah, just yanking yer chain a bit. I've made the same mistake a bunch of times, since this works so much different than table-based designs.

I'm not crazy! I'm just going by what this page said... particularly, the section titled "front and center" (3/4 of the way down the page).

Front and Center

You may have noticed part of the STYLE attribute for the containing DIV above contained the following: margin: 0px auto;. This results in the 400 pixel DIV being centered in standards compliant browsers. Some browsers, like IE5.x for Windows ignore this, but will (incorrectly) center DIVs that have a TEXT-ALIGN of center. To center DIVs in these browsers you can wrap a DIV with TEXT-ALIGN set to center, around another DIV that sets MARGIN to auto (and TEXT-ALIGN to left so text will align correctly). See Rob Chandanais’ Layout Reservoir for this and other centering technniques.

I tried all that... it centered in IE, but not Mozilla.
Click to expand...

According to what ALA writes, you need something like this:

.centermeIE {text-align:center}
centerme {margin: 0 auto}

<div class="centermeIE">
<div class="centerme">
stuff
</div>
</div>

Is that what you tried?

Assuming I got that to work and the div gets centered, there's also the problem of the <div> for each thumbnail pic not being the same size.... check out this screenshot (it's IE and Mozilla lined up overtop one another):
wackydiv.jpg


the div around each thumbnail is different for IE and Mozilla, even though I explicitly set margin and padding in the stylesheet. is there another setting I'm missing?
Click to expand...

I think if we clear up the rest of the stuff going on there it'll make it easier to troubleshoot. It looks to me like you have some redundant/overlapping styles that are giving you some weird behavior. Clean those up and we can take a look at the padding differences in browsers more easily.
 
The web-design GODS hate me. I'm still being punished for using Frontpage for a week when I first started.

OK, here's my test page. For some reason, it's starting to work. Sort of.

The outer divs are centered, finally. Now there's the size issue of the individual div for each thumbnail.

If I let the browser auto-size each div, Mozilla and IE are identical. If I set a specific width (since that's what really matters, as far as spacing it across the page and consistency for different sized thumbnails), Mozilla and IE are different.

But, if I used fixed-width divs for each thumbnail, then when a browser is using a larger font-size, it starts wrapping the caption below each thumbnail. (i.e. try resizing the text on my test page up top to see the effect in action.)
 
Cool, thanks. So it was the padding, eh? Well, I took that out and it seems to be a lot closer... still not exactly the same between Mozilla and IE, but close enough for gov't work. (I shrank down the row <div> so it fit perfectly in Mozilla, but it looked like there was ~10 pixels left over in IE... not that big of a deal)

I updated the test page...

http://www.brianellisrules.com/stickers/pics/testindex.php

the upside to this is no tables... the downside is that I had to take out the prev/next arrows... and everything is top-aligned. I don't know that the last thing is bad necessarily... just different.

Thanks for all the help... it's much appreciated.
 
Looks good. 🙂

For the next/previous arrows and top alignment, you could set up another class and give it enough top padding to move them down into the middle.
 
Originally posted by Rower_CPU
Looks good. 🙂

For the next/previous arrows and top alignment, you could set up another class and give it enough top padding to move them down into the middle.
Click to expand...
Yeah, I just realized that about the prev/next arrows too... I could add an empty div at the beginning and end of the row as a placeholder... and if they need to be displayed, put the arrows inside that placeholder div. That way, everything is in the same place, regardless of what is/isn't displayed.

The problem with the vertical alignment (of the arrows) is that some of the thumbnails are landscape and other are portrait. If it's a row of all landscape thumbnails, it's going to look different than if there was a portrait thumbnail in the mix. all landscape vs. combination

Also, for that same reason, I removed the height declaration from the CSS because on some pages, all the pictures are landscape and that leaves a signficant gap between the bottom of the picture/caption and the <hr> below.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back