Hi,
I have a page http://www.********-to-poverty.com/grid/
I’m looking to widen this by a little bit so it’s not that square.
I’m confused as to how to do this though…
I have the code
.image-grid { width:923px; float:left;margin:0 -323px 0 -160px;display:inline;position:relative}
How would I do this? I’m crap at css 
I took the images out…
I put # for the squares cause it has nothing to link to.
The effect is a lightbox effect you can you see your photo in the grid
As the site isn’t working for me at all at the moment (I’m getting a grid, but the images are 404ing), I’m struggling to image what “nice effect” you get from loading images that are 20 times larger than they need to be, and then relying on browsers to resize them…
I’m loading the images full-sized though. If they really were a few px by a few px my browser would prolly be able to deal with it better.
Anyway if you’re spelling a word out the answer would be something like, only make it as wide as necessary to spell out the word. Some people are going to get scrollbars (in both directions). There’s not really a way around that with your current setup that I can see.
But I’m also pretty unfamiliar with all the new trendy web stuff… I don’t understand what anyone’s doing anymore : )
I’m in the process of speeding it up via .htaccess code and hopefully moving to a dedicated server.
The images where full size about 300x200 or something like that…
I’m trying to figure out if I can add a lightbox figure to them and load them like that so people will be able to see their photo.
OR
I can aim for speed and put 5000 photos 13px x 13px which will load alot faster but will loose the nice effect.
Too many choices
I haven’t designed it to win a design award.
I designed it to do a specific job and it does that.
The images are not at full size and blah de blah blah can’t be arsed responding to your post
Then that’s a bad design decision. If a design concept conflicts with the layout choices, pitch the design concept.
But then, that’s why for me the LAST thing I do with a page is add the non-content (aka presentational images)… Of course you’re putting 5,000 images at full size on a page; Excellent way to prevent ANYONE from EVER wanting to visit the site. What’s that going to take to download in overhead alone? 8 minutes in just HANDSHAKING regardless of the connection speed if you are on top of the server (extremely optomistic 100ms request>response>send), like an hour+ real world?
No wonder it locked up on the stupid kitty’s browser. 
I could run into problems with that as I will be spelling out a word with the photos. If I ran a fluid width then some people would not be able to read it due to that fact that it had automatically re-sized.
The best width to use is whatever fits on my screen, in my browser window. And since you don’t know what that is, the best thing to do is to make your site flexible so that rather than using any particular fixed width, it adapts to the size of the user’s browser window. (You may want to constrain it with min-width and max-width to avoid it getting silly on very big or very small screens)
sorry I did mean screens 
Per browser isn’t the issue, but per screen. There is no “safe” width for screens, since people resize their browsers. You’ll have to check out this sticky thread on screen resolution.
What would be a safe width to go to for different browsers?
I will give that a try
Wow, the page makes my browser freeze. Likely the bazillion images.
The code is weird. I’m guessing the negative margins are to make the box wider than its container, but I dunno why the setup is like that. Normally to make a box wider you’d just make it wider. Here, you might need to first set the width to something wider and then increase the negative margins.
Beyond that, I’d want to understand the very strange setup going on here.
The full code is
<style type="text/css">
.image-grid { width:923px; float:left;margin:0 -323px 0 -160px;display:inline;position:relative}
.image-grid br {display:none}
.image-grid a { float:left; width:13px; height:13px;display:inline;border:none}
.image-grid img { float:left; width:13px; height:13px;border:none }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
Yes, there are 5000 images on it which it how i need it:)
crap…
b o l l o c k s
haha my site won’t load because it’s a rude word…
It’s not a rude site i promise
it’s www ******** - to - poverty - com / grid 
I saw the whole code, I just don’t understand why it is how it is.
Anyway, you can try what I mentioned: not only increase the stated width from 923px, but also increase the negative margins (pull the box even further to each side).