Re: Centering this darn div's

On Sep 29, 9:17 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Cartoper <carto... (AT) gmail (DOT) com> wrote:

Why? What harm is there in XHTML 1.0 Strict doctype?

Look at

http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Food for thought, thanks!

I might have been looking at old link when i posted

http://netweaver.com.au/test/cartoper.html

I am sure, to say it again, you can add and modify this basic
skeleton to suit yourself. Just be careful of absolute
positioning, it really is too tricky and unnecessary for normal
and simple layouts like yours.

I do believe you where thinking of the first version when you posted
your reply, no worries

I agree with you that what you see right now is VERY basic, but it
isn't going to be staying basic for very long. One of the objectives
of the basic frame (header/contentAll/footer) is that on other pages I
need to find out how many pixels tall and wide the contentAll div is
for a more complex layout. At times the contentAll div will be joined
by another column, such that the contentAll is about 70% of the
screen.

The real key is that at all times on these other pages the exact size
of the contentAll and this other column will need to be known. The
best I have been able to find to determine that is to use absolute
positioning like I have and then use JavaScript to determine the size
of the two div elements I am interested in. If there is a better,
simplier way to do that, I am all ears! (well, I guess eyes in this
case<grin>)

Cartoper

In article
<1191117942.719707.147950 (AT) 57g2000hsv (DOT) googlegroups.com>,
Cartoper <cartoper (AT) gmail (DOT) com> wrote:

On Sep 29, 9:17 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Cartoper <carto... (AT) gmail (DOT) com> wrote:

Why? What harm is there in XHTML 1.0 Strict doctype?

Look at

http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Food for thought, thanks!

I might have been looking at old link when i posted

http://netweaver.com.au/test/cartoper.html

I am sure, to say it again, you can add and modify this basic
skeleton to suit yourself. Just be careful of absolute
positioning, it really is too tricky and unnecessary for normal
and simple layouts like yours.

I do believe you where thinking of the first version when you posted
your reply, no worries

I agree with you that what you see right now is VERY basic, but it
isn't going to be staying basic for very long. One of the objectives
of the basic frame (header/contentAll/footer) is that on other pages I
need to find out how many pixels tall and wide the contentAll div is
for a more complex layout. At times the contentAll div will be joined
by another column, such that the contentAll is about 70% of the
screen.

The real key is that at all times on these other pages the exact size
of the contentAll and this other column will need to be known. The
best I have been able to find to determine that is to use absolute
positioning like I have and then use JavaScript to determine the size
of the two div elements I am interested in. If there is a better,
simplier way to do that, I am all ears! (well, I guess eyes in this
case<grin>)

OK, good luck.

I would never attempt such things, myself. I have seen big strong
grown adults weeping in gutters, broken from trying to keep track
of so many pixels. Whereas I see the happiest and most carefree
people walking about knowing they have made more fluid layouts,
based on em and % dimensions so that their information and
layouts adapt to the different browsers and screens and text
sizes preferred by users. They rest easy at night and sleep well.
The pixel worriers cannot sleep well and they become pinched and
pale and gaunt... <g>

I have to say to you, at least don't use pts or pixels for font
sizes. These are print medium dimensions and have poor meanings
and consequences for monitor contexts.

Just so you get a taste for em dimensioning, try it for settling
the width of such as your:

div.catLink
{

....
width: 30em;
}

Pick a figure by looking at the longest (most chars) text link
content in your page.

--
dorayme

On Sep 29, 11:02 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

I would never attempt such things, myself. I have seen big strong
grown adults weeping in gutters, broken from trying to keep track
of so many pixels. Whereas I see the happiest and most carefree
people walking about knowing they have made more fluid layouts,
based on em and % dimensions so that their information and
layouts adapt to the different browsers and screens and text
sizes preferred by users. They rest easy at night and sleep well.
The pixel worriers cannot sleep well and they become pinched and
pale and gaunt... <g

Have a look at this site:

http://pahountis.zenfolio.com/p925877948

My final objective is to implement a fluid gallery similar to this
site, which is why I *MUST* know the exact size of the content area.
After placing one of the thumbnails (with some text) on the content
area, I will find out the size of that object and then calculate how
many more can fit without them leaving the page. Yes, I know this
site uses a ton of javascript, so be it. My site will be running in
an environment where I am able to force JavaScript to be enabled.

My original question still stands, how do I center the buttons on this
page:

http://cartoper.ueuo.com/centering.htm

Cartoper

On Sep 30, 9:15 am, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

Cartoper wrote:
Have a look at this site:

http://pahountis.zenfolio.com/p925877948

JavaScript is not necessary to make a page like that zenfolio page.

[snip]

See this page of mine:http://fingerlakesbmw.org/visual/flmgshow.php
No JavaScript at all, and it sure seems to work just like your sample
above.

My original question still stands, how do I center the buttons on this
page:

http://cartoper.ueuo.com/centering.htm

dorayme already gave you an example. You are way too deep into absolute
and pixel precision.

Where to start...

1: No, you cannot pull off Zenfolio's page without JavaScript
2: The link you provided does NOT work like the Zenfolio page
3: Dorayme has NOT answered my initial question.

I think the real problem is that I don't know how to explain myself.
The key difference between the link you provided and Zenfolio's site,
which requires JavaScript is that assuming you have the browser in
which you are viewing Zenfolio at a minimum size (I am guessing that
of a 800x600 display) there never any scroll bars! The link you
provided there are scroll bars, which is simply not an option in what
I am working on.

Do this, go back to the Zenfolio site and resize the page. What you
will discover is that as the window size gets larger, more images
appear (and the number of pages goes down), as you make the window
smaller, images go away and the number of pages increase. This I find
to be a very fluid and elegant design, which is what I am working on
copying.

The ONLY way I see to do this is to find out the exact size in pixels
in which to place images, find out the exact size in pixels of each
image object (image and caption), and then calculate how many can be
loaded. To the best of my knowledge there is no way to do this
exclusively in the backend.

If I still have not made my needs clear, let me try another approach:
I want to display as many images as possible in a given area without
using scroll bars.

Here is the real problem, this is all way OFF topic. You seem to
think I am fixated on pixel precision, which is not the case. I
simply want to know, given the framework I have to work with, how do I
center the inner div? If in the end, it simply cannot be centered
with CSS, the say that it simply cannot be done and I will center it
with JavaScript, which should be easy enough to do. And to top it all
off, if you got back to my original post and look at my original
question: "I would like to get centered both horizontally and
vertically.", dorayme never answered how to center it vertically.

So after 17 total message, we still don't have an answer to the
original question! (You ask why I started another thread, because I
understand the average person will not read through 17 threads to get
to where we are now, which is still no where!, I figured they might be
willing to read a new thread, though.)

Cartoper

Cartoper wrote:

http://pahountis.zenfolio.com/p925877948

The key difference between the link you provided and Zenfolio's site,
which requires JavaScript is that assuming you have the browser in
which you are viewing Zenfolio at a minimum size (I am guessing that
of a 800x600 display) there never any scroll bars!

Um, the minimum size must be rather larger than 800px wide, because I
most definitely have horizontal scrolling at that site, and quite a lot
of it. Like Mr Kofler, I fail to see why you are so impressed with that
site. With JS enabled, they've hijacked some of my keys which prevents
some of my usual keyboard navigation. Highly annoying. Disabling JS to
avoid that nuisance leaves me with nothing to look at at all.

Regardless, I don't see how this is really a CSS issue. I suggest going
to a JavaScript or design group instead.

I
simply want to know, given the framework I have to work with, how do I
center the inner div?

Have you bothered trying a search for: how to center with CSS?
That's an old subject with plenty of examples.

It never fails to amaze me how many people post to Usenet through that
damnable google groups, but don't bother searching its archives. :-(

--
Berg

Bergamot <bergamot (AT) visi (DOT) com> writes:

Regardless, I don't see how this is really a CSS issue. I suggest going
to a JavaScript or design group instead.

CSS properties are CSS properties, regardless of how whether they're bound
to your HTML with selectors in a .css file, or with JS that modifies the
document on the fly. I'm honestly not sure what aspect of this is confusing
the OP. If he's asking what CSS properties his JS needs to work with to do
its job, then that's an on-topic question here. On the other hand, if he's
asking how to write his JS to respond to window resizing and/or how to apply
those CSS properties, then it's more appropriate for a JS group.

What I would do is develop and test the layout with a hard-coded set of
images first - i.e. three columns of four images each (for example). This
page would contain plain old links to the previous and/or next page of
images, and so forth, so that if JS isn't enabled, it would still work.

Then, I'd write JavaScript to enhance that page by loading the additional
images and JavaScript to swap them in, and the JS code to tweak the # of
rows and columns displayed. The JS code would also replace the plain old
http: next/previous links with javascript: links to the paging functions.

Not only would this result in a page that degrades nicely in the absence
of JS, the experience of writing the non-JS static page would help show
what CSS properties the JS should work with to to its job.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

In article
<1191173815.303399.269700 (AT) n39g2000hsh (DOT) googlegroups.com>,
Cartoper <cartoper (AT) gmail (DOT) com> wrote:

If I still have not made my needs clear, let me try another approach:
I want to display as many images as possible in a given area without
using scroll bars.

If that was the main thing you wanted, it is not hard. I assume
(any other assumption would be unreasonable) that you want to put
off a scroll-bar appearing for as long as possible - who doesn't?

One <img...> followed in the html by another <img...> will be
rather like text, wrapping to fill the available browser window
space allotted. You can also achieve similar with inline list
items, floated divs.

But before going on, perhaps this is not quite what you really
want on the whole?

--
dorayme

On 2007-09-30, Cartoper <cartoper (AT) gmail (DOT) com> wrote:

On Sep 30, 9:15 am, "Beauregard T. Shagnasty"
a.nony.m... (AT) example (DOT) invalid> wrote:
Cartoper wrote:
Have a look at this site:

http://pahountis.zenfolio.com/p925877948

JavaScript is not necessary to make a page like that zenfolio page.

[snip]

See this page of mine:http://fingerlakesbmw.org/visual/flmgshow.php
No JavaScript at all, and it sure seems to work just like your sample
above.

My original question still stands, how do I center the buttons on this
page:

http://cartoper.ueuo.com/centering.htm

You can't centre floats. But why not put margin: 0 auto on the container
(div class="folders") to centre that?

[...]

The ONLY way I see to do this is to find out the exact size in pixels
in which to place images, find out the exact size in pixels of each
image object (image and caption), and then calculate how many can be
loaded.

Don't do that, it shouldn't be necessary.

[...]

If I still have not made my needs clear, let me try another approach:
I want to display as many images as possible in a given area without
using scroll bars.

Then just use a series of <img> as dorayme suggested in another post. If
you want them centered use text-align: center on their container.

If each <img> needs its own little centered caption or something then,
until display: inline-block is sufficiently well supported, you will
need to make each little unit a left float instead containing image and
caption. That means you can't centre them any more, unless you resort
to a bit of JS. dorayme has an example.

[...]

question: "I would like to get centered both horizontally and
vertically.", dorayme never answered how to center it vertically.

Centering vertically is tricky unless you set an explicit height on the
thing you want to centre. If you don't, you basically have to use
tables.

See also http://www.student.oulu.fi/~laurirai/www/css/middle/.

Cartoper wrote:

Do this, go back to the Zenfolio site and resize the page. What you
will discover is that as the window size gets larger, more images
appear (and the number of pages goes down), as you make the window
smaller, images go away and the number of pages increase. This I find
to be a very fluid and elegant design, which is what I am working on
copying.

The ONLY way I see to do this is to find out the exact size in pixels
in which to place images, find out the exact size in pixels of each
image object (image and caption), and then calculate how many can be
loaded. To the best of my knowledge there is no way to do this
exclusively in the backend.

The page has 155 HTML errors. The errors include invalid characters in

attributes, and non-existent attribute names.

The page generates more javascript warnings than I can be bothered to
count (100+).

The page uses 21 divs for each image. This is a little OTT.

Its a mess, a complete and utter mess. It is NOT a good example of a web
page.

Its like a dog trained to walk on its front legs. A bit of harmless
showing off by the dog, but amazing that anyone bothered to train the
dog, or is impressed by the quality of walking!

Regards

Ian