OT: web design again, and an oddity

[Bert Coules]

I didn't know that; I'll check it out. Thanks.

Bert

[Dave Liquorice]

You might find:

shows major problems. If a site looks the same in all the thumbnails the chances are it'll render well on almost anything.

[djc]

If using Firefox:

Tools: Web Developer : Responsive Design View

will enable you to check various screen resolutions.

[Mike Tomlinson]

En el artículo , The Natural Philosopher escribió:

ctrl-f5 to force a reload from the server is easier and quicker.

[Bert Coules]

Yes indeed. I had no idea that existed. Many thanks.

Bert

[Bert Coules]

Another very useful Firefox feature I didn't know about. Thanks.

Bert

[Bert Coules]

Another website design question, which I thought I'd probably better stick in the existing thread rather than starting a new one, to avoid multiplying the number of not-strictly-DIY discussions.

Is there a utility available which fill the screen with a grid and report co-ordinates as your mouse moves over it?

I know that most graphics packages can do this for a loaded image but I'm thinking in terms of complete screen coverage. I know of course of the necessity of catering for as many different resolutions and screen sizes as possible, but this is more basic than that: working on my standard monitor, I'm just having trouble when positioning elements to mentally go from "I want it just there" to "so that's co-ordinates XXX by YYY".

But does such a thing exist? I've searched around of course but haven't found anything as simple and as basic as I'm thinking of. Of course I could always sit down with a big sheet of paper, a pencil and a ruler...

Many thanks.

Bert

[The Natural Philosopher]

knock up a grid on a graphics package , give it a transparent background and load it last over the top of everything else.

[Dave Liquorice]

Like that. As knowing the screen co-ords won't really help as you need to know the co-ords of the window contents. Still need to make sure you load it into the largest container with no borders, margins, padding, etc or you are going to get mind mangling offsets. B-)

Personally I think the easy option is to draw all the containers out on paper with the dimensions of any borders, margins, padding etc.

[Andy Burns]

There are several varieties of screen ruler, e.g.

[Bert Coules]

Nice idea. Thanks.

And Dave, good point about fitting it to the largest container.

My original (if slightly jokey) suggestion...

Bert

[Mike Barnes]

Bert Coules :

I'm trying not to say "I wouldn't start from there", but...

I've done quite a lot of pixel-precise CSS design and I've never felt the need for a grid. What I use is Firebug (a Firefox add-on) or Safari's Web Inspector, and I believe there's something similar in IE . With those I can use the "Layout" (Firebug) or "Metrics" (Safari) panels to indicate the margin, border, and padding of any element. Also I can change the pixel numbers or use the arrow keys to nudge things and see the results instantly.

[Bert Coules]

And I've been doing the same. But nonetheless (and accepting that I'm only just getting to grips with all this) I've still felt to the need to look at the screen, think "yes, that element ought to go just there" and be able immediately to translate that position into numerical co-ordinates rather than use trial and error.

Bert

[Bert Coules]

Bert

[Bert Coules]

Mike, my apologies. I haven't been doing the same: in fact, I haven't (beyond a brief initial look) ben using Firebug at all. If I had, I would have realised (as I now do after a second try) that Firebug does indeed do a lot of what I was talking about. My apologies: I don't know what I was thinking...

Bert