Absolute positioning in a <div>?

**Spartanicus** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

Gustaf Liljegren <gustafl@algone t.se> wrote:
[color=blue]
>Here's what I'm trying to achieve:
>
>1. A <div>, centered on screen, 600px wide and 100px high[/color]

Why?
What about window sizes smaller than 600px?
Smells like a splash screen, don't.
[color=blue]
>, with a background-image (also 600 x 100).[/color]

Why?
This will destroy a useful function: a user should be able to disable
image display, the occupied screen space should then be freed up.
[color=blue]
>2. Text (an <h1> element) positioned with precision inside the <div>, on
>the image.[/color]

Striving for pixel precision is a flawed pursuit.
[color=blue]
>Here's some of the XHTML:[/color]

Why *X*HTML?
[color=blue]
><body>[/color]

An URL with an example using real content is preferred.
[color=blue]
>I can't figure out how to position the text in '#top h1'. I want it,
>say, 30px from the top of #top and 20px from the left border of #top. So
>it seems I need to use absolute positioning, but only inside the #top
><div>. Hope it's possible...[/color]

Look at the margin, padding and line-height property of the h1 element.
[color=blue]
>So it seems I need to use absolute positioning[/color]

Thinking that absolute positioning is the way to achieve a pixel precise
rendering is a classic mistake.

--
Spartanicus

**Gustaf Liljegren** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

Spartanicus wrote:
[color=blue]
> What about window sizes smaller than 600px?[/color]

Frankly, I don't care about those. My site is targeted on people with
desktop or laptop computers.
[color=blue]
> Smells like a splash screen, don't.[/color]

It's the title text. Below #top, the content follows.
[color=blue]
> Striving for pixel precision is a flawed pursuit.[/color]

I used to think so too, but now when IE got its box model right it's
possible to make a more advanced page layout while sticking closely to
the standards. I wasn't asking for true pixel precision (just a "similar
result" in two browers) but there's no reason of course why things would
end up at different places if the browsers just follow CSS.

Besides, every page I make validates (XHTML 1.0 Strict), every page
looks just fine when you turn off the stylesheet, every page sticks to
the web accessibility standards. I'm not using any browser bugs or
workarounds -- it's all nice and tidy markup. Sticking to the standards
doesn't mean we still have to use the layout of 1994. CSS is a powerful
language and there's nothing wrong in using this power.
[color=blue]
> Why *X*HTML?[/color]

Because it's a more tidy markup, and it's recommended by the W3C.
[color=blue]
> Look at the margin, padding and line-height property of the h1 element.[/color]

Thank you. With some padding, this was easier than I imagined, and it's
even possible to achieve some precision.

Gustaf

**Neal** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

On Sun, 15 Aug 2004 18:25:55 +0200, Gustaf Liljegren <gustafl@algone t.se>
wrote:
[color=blue]
> Spartanicus wrote:
>[color=green]
>> What about window sizes smaller than 600px?[/color]
>
> Frankly, I don't care about those. My site is targeted on people with
> desktop or laptop computers.[/color]

You're assuming all your target users browse with a maximized browser with
no sidebars or other applications visible. A user with an 800px wide
screen my only have 500px of viewport after factoring in the ICQ bar, the
search bar on the left in IE, etc.

I appreciate where you're coming from, but the fact is you have no way of
knowing the size of the user's viewport, and as such are better off
designing for display at any width. Sadly, IE's piss-poor support of CSS
makes this far more difficult that it could be.

If you can reduce that image to 400px wide, you still might get a few
visitors for whom that is too wide, but you've greatly increased the
usability and look of the site for many more. I generally assume that
users will see a site at 490px wide minimum and 1300px max, and always try
to get it to work on even smaller viewports. Make the design scalable to
any width, and it looks good for all.

**Alan J. Flavell** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

On Sun, 15 Aug 2004, Gustaf Liljegren wrote:
[color=blue]
> Spartanicus wrote:
>[color=green]
> > What about window sizes smaller than 600px?[/color]
>
> Frankly, I don't care about those. My site is targeted on people
> with desktop or laptop computers.[/color]

I've got all three. Am I in your target or not?

You really have to make up your mind whether your targets are people
(good) or computers (ungood).
[color=blue][color=green]
> > Striving for pixel precision is a flawed pursuit.[/color]
>
> I used to think so too, but now when IE got its box model right it's
> possible to make a more advanced page layout while sticking closely
> to the standards.[/color]

You proved my point, it seems. You're still showing lack of
understanding that flexible design is for people - you seem to think
it's only for dealing with buggy browsers.

I've no objection to you making your web page look the way you wanted
it to look, in the narrow range of display situations which you
consider to be the majority. But that doesn't exclude that the page
should be flexible enough to adapt itself when the display situation
is outside of that range.
[color=blue]
> Besides, every page I make validates[/color]

That's important for a different reason, but it's not the issue under
discussion right now
[color=blue]
> (XHTML 1.0 Strict),[/color]

(this isn't the moment to debate that detail)
[color=blue]
> every page looks just fine when you turn off the stylesheet,[/color]

That's sounding better. Maybe you're not all ungood after all ;-)

all the best

**Brian** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

Gustaf Liljegren wrote:
[color=blue]
> Spartanicus wrote:
>[color=green]
>> Why *X*HTML?[/color]
>
> Because [...] it's recommended by the W3C.[/color]

HTML is also recommended by the W3C:

<quote source: http://www.w3.org/TR/html4/ >
HTML 4.01 Specification
W3C *Recommendation * 24 December 1999
</quote>

[emphasis is mine]

--
Brian (remove ".invalid" to email me)

Home - TS McHughs Irish Pub & Restaurant

http://www.tsmchughs.com/

**Gustaf Liljegren** · Jul 20 '05, 11:29 PM

Re: Absolute positioning in a <div>?

Alan J. Flavell wrote:
[color=blue][color=green]
>>Frankly, I don't care about those. My site is targeted on people
>>with desktop or laptop computers.[/color][/color]
[color=blue]
> You really have to make up your mind whether your targets are people
> (good) or computers (ungood).[/color]

I'm pretty sure that if someone would watch my site on a screen less
than 640 x 480, they'll have a way better experience than on the average
site out there. If my default style doesn't suit my users, the pages are
completely readable and well structured without it.
[color=blue]
> You proved my point, it seems. You're still showing lack of
> understanding that flexible design is for people - you seem to think
> it's only for dealing with buggy browsers.[/color]

I hoped mentioning Web Accessibility would prove my concern for this.
I'm just not prepared to go through any lengths only to make the site
accessible to the last 0.5 perecent.
[color=blue]
> I've no objection to you making your web page look the way you wanted
> it to look, in the narrow range of display situations which you
> consider to be the majority.[/color]

It's not about what I consider, but about the statistics. Have a look:

W3Schools.com

http://www.w3schools.com/browsers/browsers_stats.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

My guess is that the figures shown here are even more heterogeneous than
average (because it's a technical site, and advanced users are more
likely to use something other than IE5 at 800 x 600). But the lession I
learn from this is that the world is not so diverse at all, and it makes
perfect sense to do what works for the great majority.

Gustaf

Absolute positioning in a <div>?

Absolute positioning in a <div>?

Comment

Comment

Comment

Comment

Comment

Comment