473,387 Members | 1,483 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Align DIV center?

Hi,

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"
.... .
Is this also possible for vertical alignment?

TIA,
Axel Dahmen
Jul 21 '05 #1
32 274457


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"


Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="someClass">...</div>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 21 '05 #2

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:41***********************@newsread2.arcor-online.net...


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve this?
So
far I can only align text blocks centrally by using <table align="center"


Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="someClass">...</div>

<snip />

and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}
--
Phil Thompson
W: http://www.doubleonegative.com/
Jul 21 '05 #3
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use


If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane
Jul 21 '05 #4
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:
and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}


No. Please don't answer any posts until you have a clue. Your way makes
content unaccessible, if browser window is smaller than 500px. (it will
be just unaccessible, one also gets a scrollbar, but it doesn't allow one
to scroll left)

If it needs to work on IE<6:
http://dorward.me.uk/www/centre/



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #5


Martin Honnen wrote:


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve
this? So
far I can only align text blocks centrally by using <table align="center"

Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;


That should have been e.g.
width: 80%;
of course.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 21 '05 #6

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:k7*****************************@40tude.net...
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use
If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!


a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.


Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.
Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Jul 21 '05 #7
On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<ph******@doublonegative.com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.


Perhaps you'd like to offer a few examples of sites where this is the
case?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 21 '05 #8
Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.


You are quite correct in pointing out this other method, Phil.
Really disappointing isn't it, to get such condascending comments such
as "get a clue" and the one above, instead of a sensible comment such as:
Yes, it does work, but has a drawback when the page is reduced to a
certain point, etc., etc. In certain situations however, it is a viable
and at times possibly the only option.

--
Gus
Jul 21 '05 #9
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:k7*****************************@40tude.net...
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use
If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!


a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.


500px is very bad idea:
1) Most people use much bigger window, so they get large unusable space
2) People using smaller screen will get scrollbar.

There is very little number of people using browser that would be good.

And if you center using the way you showed earlier, people using under
500px window can't use your site. Anything handheld fits that.
Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.
No, fixed width works never best. Totally fluid is not best always
either, but it is much better than fixed width
Read other peoples opinions here: http://www.designbyfire.com/000032.html


http://www.htmlhelp.com/cgi-
bin/validate.cgi?url=http://www.designbyfire.com/000032.html&warnings=yes

Don't take advice from people that use nested blockquotes to indent
stuff. CSS1 was published 8 years ago, and margins were supported good
enaugh in very first implementions.

From there:
Fixed:
| Pros
| Guarantees line length readability

You can do that without fixing layout. Read on max-width, and IE
alternative

| Guarantees ability to place images into the layout in relation to other
| design elements and type size

Unless user changes type size, in which case layout breaks.

| Allows for predictable printed results from screen to paper

Most likely one third on right hand side clipped.

| Allows for a predictable presentation as intended by the designer

If user has same fontsize and other settings as user.

Liquid:
| Cons
| Can produce unreadable or hard to scan line lengths

Unless you limit them, which does not require fixed width page, or even
element

| Can allow images to become out of proportion to resized type settings
| or other design elements

That seem to be only possible if done stupid way.

| Can have serious issues when printed, even clipping off some content

That practically never happens on liquid layout. It seems that the writer
has gotten this totally wrong.

Because said site uses fixed layout, I get scrollbar, and can scroll to
see about 30px of orange margin on right. It looks much better when I
force it to fit window. If this had been done differently, it would not
force me to scroll to see margin.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #10

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:pb********************************@4ax.com...
On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<ph******@doublonegative.com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.
Perhaps you'd like to offer a few examples of sites where this is the
case?


http://www.simplebits.com/
http://www.mezzoblue.com/
http://www.dkeithrobinson.com/asterisk/
http://9rules.com/whitespace/
http://www.happycog.com/
http://www.zeldman.com/
http://www.blogger.com/start
http://www.stopdesign.com/


--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 21 '05 #11

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:k7*****************************@40tude.net...
> On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
>
>> and for a fixed width div use
>
> If I understand your CSS correctly, it will only work for a page
> that is 500px wide. Please drag yourself into the third millenium!
a page that is at least 500px wide. I know that isn't wholly accessible
but
it is pretty damn close.


500px is very bad idea:
1) Most people use much bigger window, so they get large unusable space
2) People using smaller screen will get scrollbar.

There is very little number of people using browser that would be good.

And if you center using the way you showed earlier, people using under
500px window can't use your site. Anything handheld fits that.


Not technically anything handheld, as some handheld devices do recognise CSS
handheld media styles and ignore CSS set for the screen. N.B. Some not all.
Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times,
when
<big breath> shock horror, a fixed width layout works best.
No, fixed width works never best. Totally fluid is not best always
either, but it is much better than fixed width


Well it actually depends on the design. I notice that the perosnal websites
of the two people haranging me, for advocating fixed-width design, aren't
very image intensive. A design with few images is a great candidate for a
fluid layout but a site with lots of background images (giving a design a
bit of character) sometimes needs fixed width.
Read other peoples opinions here: http://www.designbyfire.com/000032.html
http://www.htmlhelp.com/cgi-
bin/validate.cgi?url=http://www.designbyfire.com/000032.html&warnings=yes

Don't take advice from people that use nested blockquotes to indent
stuff. CSS1 was published 8 years ago, and margins were supported good
enaugh in very first implementions.


Have you see this man's resume? http://www.designbyfire.com/andrei.php I
think I will take advcie from him. He seems a lot more knowledgeable than me
and you put together.

From there:
Fixed:
| Pros
| Guarantees line length readability

You can do that without fixing layout. Read on max-width, and IE
alternative

| Guarantees ability to place images into the layout in relation to other
| design elements and type size

Unless user changes type size, in which case layout breaks.

| Allows for predictable printed results from screen to paper

Most likely one third on right hand side clipped.

| Allows for a predictable presentation as intended by the designer

If user has same fontsize and other settings as user.
What you have go to remember is to design for your audience, this site has
an audience of web professionals who probably are goig to have very similar
settings to the designer, that means large screen resolutions. Amazon and
Google et al have a wider audience and so must design with that in mind.
Google can't afford to make their site inaccessible to someone with a screen
resolution of 640*480 but designbyfire.com can.
<snip />
Because said site uses fixed layout, I get scrollbar, and can scroll to
see about 30px of orange margin on right. It looks much better when I
force it to fit window. If this had been done differently, it would not
force me to scroll to see margin.
What screen resolution are you using? 800*600?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Jul 21 '05 #12

"Gus Richter" <gu********@netscape.net> wrote in message
news:L5********************@golden.net...
Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times,
when <big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.


You are quite correct in pointing out this other method, Phil.
Really disappointing isn't it, to get such condascending comments such as
"get a clue" and the one above, instead of a sensible comment such as:
Yes, it does work, but has a drawback when the page is reduced to a
certain point, etc., etc. In certain situations however, it is a viable
and at times possibly the only option.

--
Gus


Thankyou Gus. Fact of the matter is my solution was a bit shit but I didn't
think I deserved the abuse I got.
But seems how it came from such excellent designers http://www.1point1c.org/
not to mention http://www.student.oulu.fi/~laurirai/
Jul 21 '05 #13
Phil Thompson wrote:
"Lauri Raittila" wrote...
Phil Thompson wrote:
Read other peoples opinions here:
http://www.designbyfire.com/000032.html
http://www.htmlhelp.com/cgi-bin/vali...om/000032.html
Don't take advice from people that use nested blockquotes to indent
stuff.


Nor one who uses empty paragraphs, presumably to create visual margins.
Have you see this man's resume?
http://www.designbyfire.com/andrei.php I think I will take advcie
from him.


He's a talented visual designer. But he is not exactly an expert on
markup. I'm surprised that he is unclear about concepts that are pretty
elementary in HTML.

<quote from http://www.designbyfire.com/000064.html>
I like to use subheaders in my articles, as you can see from above. In
the older version of my blog, I used <span class="subtitle">. Now I’ve
switched to using <h#>. I’m told this is more semantically correct.
</quote>

He's "told this is..correct"? You mean he didn't already know? <h1-6>
goes back to the original HTML draft. How could he not know this?

I'd take advice from this guy for visual design/interface, but I
wouldn't rely on him for markup advice.

--
Brian (remove "invalid" to email me)
Jul 21 '05 #14
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...
No, fixed width works never best. Totally fluid is not best always
either, but it is much better than fixed width


Well it actually depends on the design. I notice that the perosnal websites
of the two people haranging me, for advocating fixed-width design, aren't
very image intensive.


That is because they aren't. That irrelevant.
A design with few images is a great candidate for a
fluid layout but a site with lots of background images (giving a design a
bit of character) sometimes needs fixed width.
No, it doesn't. It sometimes needs some fixed elements. But I have yet to
see any sensible reason to fix width of whole page to some width...
Read other peoples opinions here: http://www.designbyfire.com/000032.html


http://www.htmlhelp.com/cgi-
bin/validate.cgi?url=http://www.designbyfire.com/000032.html&warnings=yes

Don't take advice from people that use nested blockquotes to indent
stuff. CSS1 was published 8 years ago, and margins were supported good
enaugh in very first implementions.


Have you see this man's resume? http://www.designbyfire.com/andrei.php I
think I will take advcie from him. He seems a lot more knowledgeable than me
and you put together.


So, he has been doing webpages since 1999. That is just 5 years less than
me. He mentions mambo.com, which did not succeed. Then he mentions
impresse.com, which doesn't seem to have same UI anymore. Then he has
done web application. So, there is no website in public done by him,
exept his own?

See what person with real knowledge say:
http://www.useit.com/
What you have go to remember is to design for your audience, this site has
an audience of web professionals who probably are goig to have very similar
settings to the designer, that means large screen resolutions. Amazon and
Google et al have a wider audience and so must design with that in mind.
Google can't afford to make their site inaccessible to someone with a screen
resolution of 640*480 but designbyfire.com can.


Well, designbyfire.com would be very easy to make more fluid. And only
thing people would miss is ability to scroll to see that right margin.
His problem is that he sees this issue black and white. Either totally
fluid or totally fixed. That is common, as all arguments against liquid
layout depend on that.
Because said site uses fixed layout, I get scrollbar, and can scroll to
see about 30px of orange margin on right. It looks much better when I
force it to fit window. If this had been done differently, it would not
force me to scroll to see margin.


What screen resolution are you using? 800*600?


Resolution is 1600*1200, which is irrelevant. Viewport is about 800*1150.
But that is not the point, the point is that I get unnecessary scrollbar.
There is absolutely no need for it.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #15
"Phil Thompson" <ph******@doublonegative.com> wrote:
"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:pb********************************@4ax.com...
Perhaps you'd like to offer a few examples of sites where this is the
case?


http://www.simplebits.com/
http://www.mezzoblue.com/
http://www.dkeithrobinson.com/asterisk/
http://9rules.com/whitespace/
http://www.happycog.com/
http://www.zeldman.com/
http://www.blogger.com/start
http://www.stopdesign.com/


What is so cool about horizontal scrollbars?

Jul 21 '05 #16
On Sun, 21 Nov 2004, Martin Bialasinski wrote:
What is so cool about horizontal scrollbars?


They show the reader in no uncertain terms who's the boss.

And that's what such deezyners seem to be aiming at.
Jul 21 '05 #17

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:o_********************@bgtnsc04-news.ops.worldnet.att.net...
Phil Thompson wrote:
"Lauri Raittila" wrote...
Phil Thompson wrote:

Read other peoples opinions here:
http://www.designbyfire.com/000032.html

http://www.htmlhelp.com/cgi-bin/vali...om/000032.html
<snip /> I'd take advice from this guy for visual design/interface, but I
wouldn't rely on him for markup advice.

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

Isn't CSS about visual design? True his markup may be wanting but someone
must have noticed I linked to a page on his site because it contained lots
of links to other webpages where others had expressed their opinions on this
subject matter, not because I thought his page or his opinion was gospel.
--
Phil Thompson
http://www.doubleonegative.com/
Jul 21 '05 #18
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:
Brian wrote:
I'd take advice from this guy for visual design/interface,
I would too, if you meaned interface for some program. But even then, I
would not take it as granted. He has done stuff for Adobe, and if their
other UIs are as bad Adobe Acrobat Reader, I wouldn't take any advice.

Only other Adobe product I have used was PhotoShop 4 (or was it 3), and
it's UI was not as bad...

And then webpages are totally different than program UIs. So hes
expertice would be more suited on designing Browser than Webpage.
but I wouldn't rely on him for markup advice.

Certainly not.
Isn't CSS about visual design?
Yes. But it is totally different that application interface design.
True his markup may be wanting but someone
must have noticed I linked to a page on his site because it contained lots
of links to other webpages where others had expressed their opinions on this
subject matter, not because I thought his page or his opinion was gospel.


Of course he has links to sites that think same as he does. Everybody
has. But all those pages are just as bad. Or at least it is very likely.
If there was some better, you would propably shown us that one.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #19
> > Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;


That should have been e.g.
width: 80%;
of course.


Thank you Martin (and Phil, of course!). I tried your solution (actually I'm
a floating design evangelist myself *g*), but it doesn't really seem to work
in IE6 (although on Firefox it does)... Is there some "bullet-proof"
solution?
And actually I'm not really satisfied with providing a fixed width. I'd
prefer to have the with of the div be the width required by the content. Is
there a solution without providing a width?

Regards,
Axel Dahmen
Jul 21 '05 #20
On Sun, 21 Nov 2004 21:12:29 -0000, Phil Thompson wrote:
Thankyou Gus. Fact of the matter is my solution was a bit shit but I didn't
think I deserved the abuse I got.
Excuse me?

"If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page."

Which part of that represents 'abuse'?
But seems how it came from such excellent designers http://www.1point1c.org/


Thanks! You might also have listed my other three sites though
(and if you follow the link to my personal site, you could add
three more).

Where's yours?

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane
Jul 21 '05 #21
In news:pb********************************@4ax.com,
Stephen Poley <sb******************@xs4all.nl>wrote:
On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<ph******@doublonegative.com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the
apocalypse. Fluid is a great idea and yes it works sometimes but
there are times, when <big breath> shock horror, a fixed width
layout works best.


Perhaps you'd like to offer a few examples of sites where this is the
case?


(I originally posted this exact text in <cn**********@titan.btinternet.com>,
but had no follow-up (possibly because I changed the subject as well?))

I'm interested in this. Whilst fixed width design, I agree is not a good
thing; what are your feelings on divs with percentage widths (see e.g. one
of a set of pages I'm trying to put together for a small project at
<URL:http://www.stephanbird.org.uk/Album/caravans1.html> )?

On a related note, is it possible to find out the height (of a horizontal
scrollbar) server-side i.e. without javascript or variants (naturally things
like height: 110% don't work)?

Stephan
--
Stephan Bird
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.799 / Virus Database: 543 - Release Date: 19/11/04
Jul 21 '05 #22

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:se*****************************@40tude.net...
On Sun, 21 Nov 2004 21:12:29 -0000, Phil Thompson wrote:
Thankyou Gus. Fact of the matter is my solution was a bit shit but I
didn't
think I deserved the abuse I got.
Excuse me?

"If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page."

Which part of that represents 'abuse'?


asking me to 'drag myself into the third millenium' was less than nice and
Lauri comment of 'No. Please don't answer any posts until you have a clue. '
was also quite nasty. I wasn't asking to be talked to like that. I simply
offered an alternative solution as a benefit to the guy who originally
posted you should have pointed out the pitfalls in my solution and the
benfits in the the fluid method.
But seems how it came from such excellent designers
http://www.1point1c.org/


Thanks! You might also have listed my other three sites though
(and if you follow the link to my personal site, you could add
three more).

Where's yours?

<snip />

I chose not to leave my url at the bottom of every post so as to not make it
seem as though I post just for hits. Not that people would do that. Yes I
checked out all your sites and they all have the same template so it didn't
need me to link all of them. N.B. It must be pointed out that
lensescapes.com doesn't and actually looks good.
Lets put this to rest now. You think that fluid is best and I think that
although fluid is great it doesn't always work out and that a fixed-width
design is sometimes the nest solution. Lets agree to disagree.
--
Phil Thompson
http://www.doubleonegative.com/
Jul 21 '05 #23

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...
> No, fixed width works never best. Totally fluid is not best always
> either, but it is much better than fixed width


Well it actually depends on the design. I notice that the perosnal
websites
of the two people haranging me, for advocating fixed-width design, aren't
very image intensive.


That is because they aren't. That irrelevant.


Why is that irrelevant? Your preference for fluid layouts affects your
design decisions blatantly. If you were to start making your site more
image-intensive you will come across more dificulties trying to make your
design fluid. Please read why alistapart.com uses a fixed width design
http://www.alistapart.com/qa/#question21
A design with few images is a great candidate for a
fluid layout but a site with lots of background images (giving a design a
bit of character) sometimes needs fixed width.
No, it doesn't. It sometimes needs some fixed elements. But I have yet to
see any sensible reason to fix width of whole page to some width...
>> Read other peoples opinions here:
>> http://www.designbyfire.com/000032.html
>
> http://www.htmlhelp.com/cgi-
> bin/validate.cgi?url=http://www.designbyfire.com/000032.html&warnings=yes
>
> Don't take advice from people that use nested blockquotes to indent
> stuff. CSS1 was published 8 years ago, and margins were supported good
> enaugh in very first implementions.


Have you see this man's resume? http://www.designbyfire.com/andrei.php I
think I will take advcie from him. He seems a lot more knowledgeable than
me
and you put together.


So, he has been doing webpages since 1999. That is just 5 years less than
me. He mentions mambo.com, which did not succeed. Then he mentions
impresse.com, which doesn't seem to have same UI anymore. Then he has
done web application. So, there is no website in public done by him,
exept his own?

See what person with real knowledge say:
http://www.useit.com/
What you have go to remember is to design for your audience, this site
has
an audience of web professionals who probably are goig to have very
similar
settings to the designer, that means large screen resolutions. Amazon and
Google et al have a wider audience and so must design with that in mind.
Google can't afford to make their site inaccessible to someone with a
screen
resolution of 640*480 but designbyfire.com can.


Well, designbyfire.com would be very easy to make more fluid. And only
thing people would miss is ability to scroll to see that right margin.
His problem is that he sees this issue black and white. Either totally
fluid or totally fixed. That is common, as all arguments against liquid
layout depend on that.
> Because said site uses fixed layout, I get scrollbar, and can scroll to
> see about 30px of orange margin on right. It looks much better when I
> force it to fit window. If this had been done differently, it would not
> force me to scroll to see margin.


What screen resolution are you using? 800*600?


Resolution is 1600*1200, which is irrelevant. Viewport is about 800*1150.
But that is not the point, the point is that I get unnecessary scrollbar.
There is absolutely no need for it.


Once again why is that irrelevant? Your resolution governs the maximum size
your browser viewport could be.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Jul 21 '05 #24
"Phil Thompson" <ph******@doublonegative.com> wrote:
Once again why is that irrelevant? Your resolution governs the
maximum size your browser viewport could be.


Why stop there? I could expand the browser to span all six virtual
desktops I use.

Bye,
Martin
Jul 21 '05 #25


Axel Dahmen wrote:
Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;


That should have been e.g.
width: 80%;
of course.

I tried your solution (actually I'm
a floating design evangelist myself *g*), but it doesn't really seem to work
in IE6 (although on Firefox it does)... Is there some "bullet-proof"
solution?


With IE 6 you need to make sure you get it into standards compliant
rendering mode, then it should work. You get IE 6 or other newer
browsers like Mozilla or Opera into standard compliant rendering mode by
including a DOCTYPE declaration (referring a HTML 4.01 DTD for instance).

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 21 '05 #26
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:se*****************************@40tude.net...
On Sun, 21 Nov 2004 21:12:29 -0000, Phil Thompson wrote:
Thankyou Gus. Fact of the matter is my solution was a bit shit but I
didn't
think I deserved the abuse I got.
Excuse me?

"If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page."

Which part of that represents 'abuse'?


asking me to 'drag myself into the third millenium' was less than nice


IMHO, that was not good. But that is quite mild. I have called people
idiots and I have been called idiot many times here...
and
Lauri comment of 'No. Please don't answer any posts until you have a clue. '
was also quite nasty.
That aimed against your *very* clueless way to center things. And I still
mean it. If you don't understand why that was such, the advice is still
valid.
I wasn't asking to be talked to like that. I simply
offered an alternative solution as a benefit to the guy who originally
posted you should have pointed out the pitfalls in my solution and the
benfits in the the fluid method.


Your solution was exeptionally bad. Much worse than something like "wrap
it to table, put another table inside the first table and then use
align=center".

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #27
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...
in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

> No, fixed width works never best. Totally fluid is not best always
> either, but it is much better than fixed width

Well it actually depends on the design. I notice that the perosnal
websites
of the two people haranging me, for advocating fixed-width design, aren't
very image intensive.
That is because they aren't. That irrelevant.


Why is that irrelevant?


Because in Internet, there is n+1 pages. The fact that 2 people have non
graphic intensive pages, means nothing. Of course, even fixed layout
advocate understand that page with just text shoudl not be fixed width.

And if you used some other browser than IE, you would notice that my page
does not have overly long lines.
Your preference for fluid layouts affects your
design decisions blatantly.
No, my design has little graphics, because I don't have digital camera,
and I haven't bothered to do layout images for my personal site. I am
working on quite complex, more graphic intensive site though. Will
hopefully be ready before new year. It is of course not fixed.
If you were to start making your site more
image-intensive you will come across more dificulties trying to make your
design fluid. Please read why alistapart.com uses a fixed width design
http://www.alistapart.com/qa/#question21


I know that they are getting it wrong. There is no need to fix whole site
to limit text lenght, which I think I have said you at least twice.

As usual, they see just the opposite ends.
A design with few images is a great candidate for a
fluid layout but a site with lots of background images (giving a design a
bit of character) sometimes needs fixed width.


No, it doesn't. It sometimes needs some fixed elements. But I have yet to
see any sensible reason to fix width of whole page to some width...
So, you didn't have answer to this question. I am not surprised.
See what person with real knowledge say:
http://www.useit.com/
Again, when real authority does something, you have nothing to say?

Resolution is 1600*1200, which is irrelevant.


Once again why is that irrelevant? Your resolution governs the maximum size
your browser viewport could be.


But, it does not mean that I use window that size. The window size is
meaningful, not the resolution. Of course, I can make my viewport bigger,
and quite easily too. But what is relevant is still the size of viewport
(viewport = windows client area, where website is drawn)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #28
in comp.infosystems.www.authoring.stylesheets, Martin Honnen wrote:
You get IE 6 or other newer
browsers like Mozilla or Opera into standard compliant rendering mode by
including a DOCTYPE declaration (referring a HTML 4.01 DTD for instance).


Transitional DTD whitout URL won't work though, use one with URI or
strict.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #29
Phil Thompson wrote:
"Brian" wrote...
Phil Thompson wrote:

> Read other peoples opinions here:
> http://www.designbyfire.com/000032.html
I'd take advice from this guy for visual design/interface, but
I wouldn't rely on him for markup advice.

Isn't CSS about visual design?


Yes, visual design of documents on the www, documents created with HTML
or XHTML. And designing on the www means accepting it for what it is,
and for what it is not. Anyone can choose to ignore its strengths and
weaknesses, but there's a cost to that approach, naturally.

If someone doesn't understand why <h2-6> is better than <span
class="subtitle">, then they have not yet grasped that strengths v.
weaknesses concept.
True his markup may be wanting
It's more serious than that, I think. I wouldn't take advice from him
for HTML, nor for CSS. If he were a consultant, and suggested a color
scheme or general layout, I'd be all ears (not least because I do not
have an eye for such things). But for the technical stuff regarding www
authoring, this guy is an amateur.
but someone must have noticed I linked to a page on his site because
it contained lots of links to other webpages where others had
expressed their opinions on this subject matter, not because I
thought his page or his opinion was gospel.


Fair enough, but it's also fair play to critique the site for its
shortcomings.
--
Brian (remove "invalid" to email me)
Jul 21 '05 #30
Phil Thompson wrote:
"Lauri Raittila" wrote...
Phil Thompson wrote:
Well it actually depends on the design. I notice that the
perosnal websites of the two people haranging me, for advocating
fixed-width design, aren't very image intensive.
That is because they aren't. That irrelevant.


Your preference for fluid layouts affects your design decisions
blatantly.


I'm not sure what you are saying here.
If you were to start making your site more image-intensive you will
come across more dificulties trying to make your design fluid.
Only if the images were necessarily large. Obviously, if the content is
fixed width, it may require horizontal scrollbars to view it in some
display situations. That is simply not the case for all content. That's
why L. Raittila said that, while fixed width elements may be neccessary,
there's never a justification for fixing the width of an HTML document.

You seem to think that image intensive pages automatically mean that
fixed width is best. Here's an example of a site with lots of images.

http://www.julietremblay.com/portfolio/

If you have MSIE/Win, load that url and select any of the galleries.
Note that there are only 4 images per row, which is what the artist
wanted. This was accomplished by assigning a width to the containing
<div>, not to the whole page.

Note too that the width is set in MSIE/Win only. In modern browsers, the
design is even more flexible. If you have such a browser (Firefox or
Opera will do), load up the same url. Now adjust your window to
something much narrower, and note how the thumbnails reflow to
accomodate you.

I'm afraid your contention that lots of images require fixed width
simply doesn't hold up.
Please read why alistapart.com uses a fixed width design
http://www.alistapart.com/qa/#question21


A List Apart has useful articles, but their site design is chock full of
examples of what not to do, starting with fixing the width. Fortunately,
there are examples of how to fix their badly broken layout with user css:

http://steve.pugh.net/articles/taming.html
What screen resolution are you using? 800*600?


Resolution is 1600*1200, which is irrelevant. Viewport is about
800*1150. But that is not the point, the point is that I get
unnecessary scrollbar.

Once again why is that irrelevant? Your resolution governs the
maximum size your browser viewport could be.


Right, the maximum size, but not necessarily the actual size. Resolution
<> window size, and there's no way to know that. In fact, there's no
way, on the authoring end, to be certain of any properties on the client
end. That's the challenge of visual design on the www, and why
fixed-width designs do not work.

--
Brian (remove "invalid" to email me)
Jul 21 '05 #31
Phil Thompson wrote:

Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html


Opinions of web deezyners aren't worth the paper they're written on. ;)

BTW, it's hard to give any credence to what these blokes say when the
text size on their sites is so bloody small I can't read it. When I zoom
text to a comfortable size, the stoopid fixed width makes for a really
short line length, which is just as bad as long lines.

It's beyond me why some folks think this is a good thing... :(

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #32
On Sun, 21 Nov 2004 21:01:28 -0000, "Phil Thompson"
<ph******@doublonegative.com> wrote:

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:pb********************************@4ax.com.. .
On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<ph******@doublonegative.com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.


Perhaps you'd like to offer a few examples of sites where this is the
case?


http://www.simplebits.com/
http://www.mezzoblue.com/
http://www.dkeithrobinson.com/asterisk/
http://9rules.com/whitespace/
http://www.happycog.com/
http://www.zeldman.com/
http://www.blogger.com/start
http://www.stopdesign.com/

You're joking, right? More than half of those would definitely work
better as flexible layouts, and only a couple would be even slightly
difficult to make flexible while looking just as good at typical window
widths. In what way do you suppose a fixed number of pixels "works
best"?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 21 '05 #33

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Charles Crume | last post by:
Hello; I'm fairly new to CSS, but have learned that Mozilla is supposed to be the most compliant in rendering. I have a web page that uses a style sheet with a class named "page_links" that...
3
by: VB Programmer | last post by:
I cant 'align center' a text box. First of all, all the justifications (left, center, right) on the toolbar are dimmed. Why? Also, when I try to do it through HTML (wrapping the control in a...
3
by: tshad | last post by:
I have the following: <tr valign="baseline"> <td align="center" width="103" colspan=2 nowrap> <asp:Button ID="ViewPositions" runat="server" Text="View Positions" OnClick="ViewPositions_Click"...
2
by: Eric Lindsay | last post by:
If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center...
2
by: Mrozu | last post by:
Hi How I can set CaptionAlign to Center. I can't find this option in DataGrid Properties... Default align is left... Thx Mrozu
3
by: jaiwin | last post by:
I am insert a div tag in table. table width is 100%. div width is 500px. i want to center alignment in div tag. so which command i want to use this <table align="center" border="0"...
1
by: Steve Richter | last post by:
I am using <div align=centerto center a horizontal menu on the page. Problem is the center align of the div is rippling down to the menu items and causing the text of the dynamic popup sub menu...
3
by: divina11 | last post by:
Oddly, I can't seem to get the image to align to the center of the page? I'm using IE 6, tried FireFox 2 still the same! The image just aligns to the right for same reason. The text aligns to the...
2
by: yangtono | last post by:
Hi, I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net. I can't attach image here, basically html will wrap the heading,...
13
by: Stevo | last post by:
I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.