This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2004 > Align DIV center?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| Axel Dahmen 2004-11-27, 7:16 pm |
| 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
| |
| Martin Honnen 2004-11-27, 7:16 pm |
|
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/
| |
| Phil Thompson 2004-11-27, 7:16 pm |
|
"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:41a0a07d$0$29839$9b4e6d93@newsread2.arcor-online.net...
>
>
> Axel Dahmen wrote:
>
>
>
> 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/
| |
| Andrew Thompson 2004-11-27, 7:16 pm |
| 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
| |
| Lauri Raittila 2004-11-27, 7:16 pm |
| 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>
| |
| Martin Honnen 2004-11-27, 7:16 pm |
|
Martin Honnen wrote:
>
>
> 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.
--
Martin Honnen
http://JavaScript.FAQTs.com/
| |
| Phil Thompson 2004-11-27, 7:16 pm |
|
"Andrew Thompson" <SeeMySites@www.invalid> wrote in message
news:k7d9w9j9bxnh.19y0pxo2cm4am$.dlg@40tude.net...
> On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
>
>
> 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
| |
| Lauri Raittila 2004-11-27, 7:16 pm |
| in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:
>
> "Andrew Thompson" <SeeMySites@www.invalid> wrote in message
> news:k7d9w9j9bxnh.19y0pxo2cm4am$.dlg@40tude.net...
>
> 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>
| |
|
|
| Axel Dahmen 2004-11-27, 7:16 pm |
| > > Set the width to something smaller than 100% and the margin to auto e.g.
>
> 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
| |
|
|
| Andrew Thompson 2004-11-29, 4:16 am |
| 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
| |
| Phil Thompson 2004-11-29, 4:16 am |
|
"Andrew Thompson" <SeeMySites@www.invalid> wrote in message
news:seeb2cp60h0p.1nq8rrglh3a6v$.dlg@40tude.net...
> On Sun, 21 Nov 2004 21:12:29 -0000, Phil Thompson wrote:
>
>
> 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.
>
>
> 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/
| |
| Phil Thompson 2004-11-29, 4:16 am |
|
"Lauri Raittila" <lauri@raittila.cjb.net> wrote in message
news:MPG.1c0b3a0074cecf5598a183@news.individual.net...
> in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:
>
>
> 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
>
>
> 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, 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/
>
>
> 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.
>
>
> 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>
| |
| Martin Honnen 2004-11-29, 4:16 am |
|
Axel Dahmen wrote:
>
>
> 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/
| |
| Lauri Raittila 2004-11-29, 4:16 am |
| in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:
>
> "Andrew Thompson" <SeeMySites@www.invalid> wrote in message
> news:seeb2cp60h0p.1nq8rrglh3a6v$.dlg@40tude.net...
>
> 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>
| |
| kchayka 2004-11-29, 12:21 pm |
| 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.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|