Onions Desktops (+a question)

onion2k

New mini site online: http://www.ooer.com/desktops/

A selection of hi-res (well, ish.. 1280*1024) photos by me. Just something I've put together in order to muck about with CSS layouts.

Which leads me to my question...

How do I centre all of it on the page? I have a bunch of floating divs, so nesting it all in centred div isn't working.

planetsim

Do you want to center the images or the whole page?

if its the whole page why not simply put in

body {
    margin: 50px;
}

Of course that wont exactly be center so you will need to change it around a bit for it to work.

If you want the images centered. Then do a similar thing but with a div class

onion2k

Originally posted by planetsim
Of course that wont exactly be center so you will need to change it around a bit for it to work.

I want the full page centred.. but setting a specific width won't work for all resolutions. I could get the width with Javascript, but thats the worst sort of hack out, and about 5% of web users turn Javascript off ayway. I'd rather not have 1 in 20 people viewing the page wrong.

The_Chancer

Why not have another div (yes a nested one) that has width:100% align:center; then carry on as normal...

<html>
<head>
<title>Desktops</title>
<style>
.thumb {
	float: left;
	width: 250px;
	margin: 0 15px 15px 0;
	border: 1px dashed #000;
	padding: 5px;
}
.clearboth { clear: both; }
</style>
</head>
<body bgcolor="#FFEDED">
<div style="width:100%;align:center;">
<div style="width: 850px;">
<img src="background.gif">
<div class="thumb"><a href="images/autumn.jpg" target="_BLANK"><img src="images/thumb_autumn.jpg" border="0"></a></div>
<div class="thumb"><a href="images/autumn2.jpg" target="_BLANK"><img src="images/thumb_autumn2.jpg" border="0"></a></div>
<div class="thumb"><a href="images/bumblebee.jpg" target="_BLANK"><img src="images/thumb_bumblebee.jpg" border="0"></a></div><br class="clearboth">
<div class="thumb"><a href="images/butterfly.jpg" target="_BLANK"><img src="images/thumb_butterfly.jpg" border="0"></a></div><div class="thumb"><a href="images/butterfly2.jpg" target="_BLANK"><img src="images/thumb_butterfly2.jpg" border="0"></a></div>
<div class="thumb"><a href="images/clouds.jpg" target="_BLANK"><img src="images/thumb_clouds.jpg" border="0"></a></div><br class="clearboth">
<div class="thumb"><a href="images/dandelion.jpg" target="_BLANK"><img src="images/thumb_dandelion.jpg" border="0"></a></div><div class="thumb"><a href="images/flower.jpg" target="_BLANK"><img src="images/thumb_flower.jpg" border="0"></a></div>
<div class="thumb"><a href="images/ice.jpg" target="_BLANK"><img src="images/thumb_ice.jpg" border="0"></a></div><br class="clearboth">
<div class="thumb"><a href="images/purrkins.jpg" target="_BLANK"><img src="images/thumb_purrkins.jpg" border="0"></a></div>
<div class="thumb"><a href="images/snowclouds.jpg" target="_BLANK"><img src="images/thumb_snowclouds.jpg" border="0"></a></div>
<div class="thumb"><a href="images/snowdrops.jpg" target="_BLANK"><img src="images/thumb_snowdrops.jpg" border="0"></a></div><br class="clearboth">
<div class="thumb"><a href="images/sunset.jpg" target="_BLANK"><img src="images/thumb_sunset.jpg" border="0"></a></div></div></div>
</body>
</html>

Not too hot on my CSS (need to do more on it I know.... still working with tables But shhh don't tell anyone....

onion2k

Originally posted by The Chancer
Not too hot on my CSS (need to do more on it I know.... still working with tables But shhh don't tell anyone....

Me too.. this is my attempt at learning how all the cool kids are doing it.

Weedpacket

Unfortunately, the suggestion I wanted to give (and the one suggested by the CSS spec):

...If both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.

doesn't work in IE. I thought of it and figured that surely not even IE could stuff that up.....Since you want to cater for the 1/20 who don't use Javascript I guess you want to cater for the 9/10 who still use IE.

So... uglier, but works:
<div style="position: absolute; width: 850px; left: 50%; margin-left: -425px;">
Which depends crucially on the fact that half of 850 is 425. So if the width were variable, the margin would have to be as well.

Incidentally, the thumb divs are generally unneeded, you could style the <a> elements as class="thumb" instead and the effect would be the same.

Going further, one could drop the class completely, and just specify that <a> tags have those style properties.

If there are other types of <a> tag on the page, the gallery-enclosing <div> could be given an id value foo, and then the thumb styling would have the selector "#foo a" - any <a> that is a descendant of the element with id foo. If you were ignoring IE you could go further with (the more efficient and more allowing of flexibility) "#foo > a" - which selects any <a> tag which is an immediate descendant of the element with id foo.

Oh, and the <br> tags aren't needed - since only three images can fit side-by-side in the enclosing div, the fourth automatically flows onto the next line.

Mordecai

Put 'text-align: center;' in a <div> with 100% width. So, the one you set the width to 850px can be nested in that one, or you can manually break after each third image and then shove them all into the 100% width one.

But, either way, it should work.

Moonglobe

if i were you i'd use

body {
margin-left: auto;
margin-right: auto;
text-align: center;
}
div#container {
     text-align: left;
}

the auto code is for compliant browsers, but due to a bug in IE, it will apply text-align to block-level elements as well. so your container div will be centered, and everything inside it will be left-aligned.

goldbug

Slightly off topic....
if you have any super-high-res versions of some of the nature/macro shots, any possibility of (at least temporarily) making available some wide versions, like 2560x1024? 😃

piersk

Oooooh, look at Mr "I have dual screen monitors and I want to stretch the pic over both" over there

goldbug

Originally posted by piersk
Oooooh, look at Mr "I have dual screen monitors and I want to stretch the pic over both" over there

Now, don't make me order a third! 😛 🙂

onion2k

Originally posted by goldbug
Slightly off topic....
if you have any super-high-res versions of some of the nature/macro shots, any possibility of (at least temporarily) making available some wide versions, like 2560x1024? 😃

Sure. The originals of those pics are all 2560*1960, pick the image you'd like and I'll see what I can do.

Mordecai

Yeah, I wouldn't mind a 3840*1024 version... 🙂

pyro

Originally posted by Weedpacket
Unfortunately, the suggestion I wanted to give (and the one suggested by the CSS spec):
...If both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.
doesn't work in IE.

Actually, it will work just fine in IE 6, as long as it isn't in quirks mode (ie. you specify a valid DOCTYPE). However, in IE 5.x you are correct, so you'll still have to use something like what Moonglobe suggested, though I'd use the shorthand and just type [font=monospace]margin: 0 auto;[/font].

Weedpacket

Um, I'm doing graphics for a nightclub, and they've got 6x6 monitor arrays on a couple of walls....

Weedpacket

Originally posted by pyro
Actually, it will work just fine in IE 6, as long as it isn't in quirks mode (ie. you specify a valid DOCTYPE). However, in IE 5.x you are correct, so you'll still have to use something like what Moonglobe suggested, though I'd use the shorthand and just type [font=monospace]margin: 0 auto;[/font].

I'm personally not that keen of loading in <div> after <div> for the sake of formatting (and formatting workarounds): it complicates the the document's OM, which is why I avoided a container div (beyond the one necessary to specify the width). Does the "negative margin" trick work in both IE6 and 5?

onion2k

I updated the site a bit last night.

Should be centered now, and I added paging.

http://www.ooer.com/desktops/

pyro

Originally posted by Weedpacket
Does the "negative margin" trick work in both IE6 and 5?

Sure, but I don't see how that saves you anything. You still need the container div.

goldbug

Originally posted by pyro
Sure, but I don't see how that saves you anything. You still need the container div.

And a fixed content width as well 🙂

Weedpacket

Originally posted by pyro
Sure, but I don't see how that saves you anything. You still need the container div.

No, that's not the <div> I'm talking about, I'm talking about this
<div style="width:100%"><div style="width:850px"> business. The outer (100%-width) div is noise. (Cf: http://www.phpbuilder.com/board/showthread.php?s=&threadid=10275442)

Originally posted by goldbug
And a fixed content width as well🙂

I said it was ugly 🙂 But hey, it's an IE-bug workaround - whaddayaexpect?