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
07-07-2004, 06:02 AM
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
07-07-2004, 06:18 AM
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
07-07-2004, 07:39 AM
Why not have another div (yes a nested one) that has width:100% align:center; then carry on as normal...
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
07-07-2004, 07:55 AM
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
07-07-2004, 07:57 AM
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
07-07-2004, 09:16 AM
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
07-07-2004, 11:56 AM
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
07-07-2004, 12:36 PM
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? :D
piersk
07-07-2004, 12:42 PM
Oooooh, look at Mr "I have dual screen monitors and I want to stretch the pic over both" over there
goldbug
07-07-2004, 01:20 PM
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! :P :)
onion2k
07-07-2004, 01:31 PM
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? :D
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
07-07-2004, 01:39 PM
Yeah, I wouldn't mind a 3840*1024 version... :)
pyro
07-07-2004, 01:45 PM
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 margin: 0 auto;.
Weedpacket
07-08-2004, 05:18 AM
Um, I'm doing graphics for a nightclub, and they've got 6x6 monitor arrays on a couple of walls....
Weedpacket
07-08-2004, 05:21 AM
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 margin: 0 auto;. 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
07-08-2004, 05:54 AM
I updated the site a bit last night.
Should be centered now, and I added paging.
http://www.ooer.com/desktops/
pyro
07-08-2004, 09:32 AM
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
07-08-2004, 10:43 AM
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
07-09-2004, 04:41 AM
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?
Merve
07-09-2004, 09:21 PM
I prefer to use <div>s as little as possible and I use the <span> tag a lot. (I've managed to take the <br>s out of my markup.)
BuzzLY
07-09-2004, 11:38 PM
:confused:
Why would you code using standards, then insist on going against the norm? This is like using <a></a> around a paragraph, then formatting it to display as a paragraph. Why would you do that? You should use the tools the way they were meant to be used.
BuzzLY
07-09-2004, 11:47 PM
Usually, my pages have <div>s inside of <div>s. They are made to nest, so I don't think of it as unnecessary. The outer div gets the "text-align: center" and the inner div gets "margin: xx auto xx auto;display:table". Works like a charm (I did this a lot in my Color Picker (http://www.ultimatespin.com/projects/colors/colorpicker.php) application, which now works in IE and Netscape).
pyro
07-10-2004, 12:34 AM
Originally posted by Merve
I prefer to use <div>s as little as possible and I use the <span> tag a lot. (I've managed to take the <br>s out of my markup.) Why's that? <div>s are block level; <span>s are inline. I'd think you needs would dictate which of the two you use. :confused:
Originally posted by BuzzLY
Usually, my pages have <div>s inside of <div>s. They are made to nest, so I don't think of it as unnecessary....and since they are non-semantic elements (as are <span>s), it's really not that big of a deal. Obviously the leaner the markup the better, but if an extra <div> or two is needed, go for it.
Weedpacket
07-10-2004, 02:35 AM
Originally posted by pyro
...and since they are non-semantic elements (as are <span>s), it's really not that big of a deal. Obviously the leaner the markup the better, but if an extra <div> or two is needed, go for it.
Well, yeah, that's the point - they don't have any semantic interpretation. <div><div>...</div></div> says "something that exists only to contain something that exists only to contain something". It's redundant, and the only reason why you'd have it is because you're trying to achieve some stylistic effect that for some reason can't be achieved through stylesheets alone. In other words, it represents a confusion of style and content. Any future manipulation of the content of the page would have to take into account how it is styled (which <div> do you attach the id attribute to if you want to manipulate the gallery later?).
The <div> and <span> elements were developed without semantics so that you - as the page developer - could supply your own, independently of the represenational semantics already attached to elements like <li>, <a>, or <cite>. So: what is the outer <div> in <div style="width:100%;text-align:center"><div style="width:850px">...</div></div> actually supposed to mean in terms of the content of the page (independent of how it may be styled)? And if you have an answer for that, then what is the inner <div> supposed to mean?
Overuse of <div> and <span> can lead to horrible messy pages that are ugly to parse, slow to render, and nightmares to edit or manipulate ("Is this the <div> I should be putting this new element in? Or should I be putting it in the containing <div>? Or maybe in the <div> it contains?").
But, as I've already pointed out, having to do that is basically because developers still have to support IE with its broken box model and braindead selector parser.
BuzzLY
07-10-2004, 06:21 AM
I don't see any reason to do this:<div class="foo">
<div class="bar">
some content
</div>
</div>However, I have had occasion to do something like this:<div class="foo">
<div class="bar">
some content
</div>
<p>
a paragraph
</p>
<p>
another paragraph
</p>
</div>For instance, I might want to put a border around the contents of the outer div.
More often than not, the inner div(s) were <p>, <a>, <img>, etc. But there have been occasions where i have needed to insert a second <div> inside the outer <div> (but only if there were other items inside the outer <div>)
Weedpacket
07-10-2004, 06:41 AM
Originally posted by BuzzLY
owever, I have had occasion to do something like this:<div class="foo">
<div class="bar">
some content
</div>
<p>
a paragraph
</p>
<p>
another paragraph
</p>
</div>
Well, yeah, <div>s wouldn't be much use if you couldn't put arbitrary block-level stuff in them (such a restriction would be a matter of semantics). I was referring to situations like your other one, where the only thing in the <div> was another <div>. The phrase "<div><div>...</div></div>" was intended to imply that (the assumption being that "..." represented something that was well-formed).
Merve
07-10-2004, 09:53 AM
Originally posted by Merve
I prefer to use <div>s as little as possible and I use the <span> tag a lot. (I've managed to take the <br>s out of my markup.)
What I meant was that I use <span> inline in some places where people might have used <div>s. I use <p>s where I can. I'll show you what I mean here...I don't think I can be very clear explaining it, but I can be clearer through an example. Look at where I used the <span> tags....
(Pssstt...don't try to login or anything...it doesn't work...it's just merely a CSS example. Yes, I had to create a separate stylesheet for IE...argh!)
pyro
07-10-2004, 11:30 AM
Originally posted by Weedpacket
It's redundant, and the only reason why you'd have it is because you're trying to achieve some stylistic effect that for some reason can't be achieved through stylesheets alone.The point is that it can't be, so when developing for the real world, sometimes using a few <div>s here and there is necessary. I'm sure you don't disagree with that, due to current browser implimentations of CSS (and the current limits of CSS in general).
Originally posted by Merve
Look at where I used the <span> tags....Yeah, I see that. However, I don't see either of the four places you used the <span> element as a weird or out of the ordinary place to use one. However, your markup is exactly what Weedpacket was talking about - <div>s and <span>s were overused. For instance, why wern't <p>s used instead of <div class="bottomofpage">? From what you've done, I don't see any point for these: <span class="bodytext">. Why not just apply the styling to one of the outer <div>s? Why not use a <hx> instead of <span class="title">Login</span>?
Merve
07-12-2004, 01:14 PM
pyro, I prefer to use <p> tags for paragraphs; there are no paragraphs on the page.
Thanks for <hx> tip. I'll change that. I thought that those tags were deprecated, but I was wrong :)
pyro
07-12-2004, 01:21 PM
Originally posted by Merve
pyro, I prefer to use <p> tags for paragraphs; there are no paragraphs on the page. What's this, then?
Not a registered user? Sign up!
Merve
07-12-2004, 03:36 PM
I know in some cases that could be considered a paragraph. But since it's the only 'paragraph' on the page, I prefer to just use the <div> tag. It seems to make more sense to me.
PHP Builder
Copyright WebMediaBrands Inc. All Rights Reserved.