Re: CSS for positioning

[freemont]

My site uses tables for layout. I was experimenting yesterday with CSS
for positioning and ran into problems.

More specifically I was trying to convert this table-based page:
http://www.molon.de/test/csspo/part2.html (ignore the links which do not
work)

Here is as far as I got:
http://www.molon.de/test/csspo/

There are the following problems:

1. The round logo on the top menu bar on the right should be aligned
vertically with the "Jordan 2009-10 Travelogue" header. No problem with
a table, but with CSS I had to give the logo an absolute position, which
is not good design in my opinion. How to position the logo correctly
without using an absolute position?

Since your header is a fixed width, you can just add a margin to scoot it
over.

<div id="menu2"><font class="hline">Jordan 2009-10 Travelogue</font>
<a href="../../../"><img style="border: 0px none;margin-left:360px;"
src="logorund.gif" alt="" height="24" width="33"></a>
</div>

2. The vertical menu bar on the left should have rounded corners. But
the top and bottom gifs with the rounded corners are now not adjacent
with the vertical menu bar, no idea why. How to make them adjacent?

3. Then there is the mess with the central part of the page. It should
appear as shown on first link I posted (the one with the table-based
layout). What am I doing wrong?

Looks like you straightened that out.

4. One more question: does it really make sense to convert a table-based
layout of a thumbnail page like this for instance
http://www.molon.de/galleries/Jordan/Jerash/

to a CSS-based layout?

It would seem that for that page using tables for layout is much
simpler, or what do you think?

I'm not a zealot. If tables are working for you for this site, *and the
site behaves correctly*, why muck with it.

That said, if you're going to convert to CSS layout, go all the way and
make the page fluid. Leaving it set at 850px sort of defeats the purpose
of moving away from tables. Try setting a "wrapper" div for the entire
content of the page, set its width to, say, 85% or so, its margin to 0
auto, and start working from there.

 

[freemont]

That said, if you're going to convert to CSS layout, go all the way and
make the page fluid.

Sry to respond to me own post. Here's a quick re-do:

<http://freemontsoffice.com/test/molon/>

Strict doctype was necessary to make the centering obey in IE, and it'll
make validation fail all over the place until you get rid of all those
<font> tags. And there are other problems - all those pixel sizes, for
instance. And a LOT of redundant styles. But the page "works", as far as
fluidity.

 

[123Jim]

Ok, I'll remove all legacy code from the pages as soon as I find the
time.
But what specifically is the problem with transitional documents, given
that all browsers display them properly? Perhaps that browsers are
forced to contain code needed to correctly display legacy HTML and that
there is a burden on browser developers?

May I suggest you change this:
<div style="border: medium none; position: absolute; top: 50px; left: 10px;
width: 295px;">

to this:
<div style="border: medium none; position: relative; top: 50px; left: 10px;
width: 295px;">

notice the only change is 'absolute' to relative on this one div .. It's not
the end of the layout problems but it at least bumps the main text to below
the map.

 

[freemont]

Ok, I'll remove all legacy code from the pages as soon as I find the
time.
But what specifically is the problem with transitional documents, given
that all browsers display them properly? Perhaps that browsers are
forced to contain code needed to correctly display legacy HTML and that
there is a burden on browser developers?

One important consideration is that Transitional doctype will prevent
some markup from displaying correctly - margins in particular. Like I
noted before, if that page of yours I uploaded has the Transitional
doctype instead of Strict, the content will not center in IE. Try it and
see.

 

[freemont]

Hmmm... thumbnail sizes are fixed and there is some text below each
thumbnail. I'm not sure a fluid design would work here.

Did you ever consider using an existing photo gallery software?

That said, I believe dorayme has a page or two up that demonstrate good
fluid thumbnail/caption layout technique. My spidey sense tells me she'll
be along to share...

 

[BootNic]

Hmmm... thumbnail sizes are fixed and there is some text below
each thumbnail. I'm not sure a fluid design would work here.

http://bootnic.bounceme.net/TemporaryPages/inlineBlock.php

[snip]



--
BootNic Sun May 9, 2010 10:55 pm
Complaining is good for you as long as you're not complaining to the
person you're complaining about.
*Lynn Johnston*

â• 64 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkvnda4ACgkQmo2774GZ7qksJACdH59/qRkes1h5+Gbsx/ZmVlsf
wUkAoIDuNXBuj44upOiodVvlRR1iLPyq
=tI1B
-----END PGP SIGNATURE-----

 

[Neredbojias]

Ok, I'll remove all legacy code from the pages as soon as I find the
time.
But what specifically is the problem with transitional documents,
given that all browsers display them properly? Perhaps that browsers
are forced to contain code needed to correctly display legacy HTML
and that there is a burden on browser developers?

Yes, that's a good part of it and I think you are pretty sharp to
discern it. In addition, browsers will eventually drop the
legacy-supporting routines and become more "standards pure", if you
will. Ie has shown signs of this already.

 

[dorayme]

Interesting. Does that also work if the thumbnails do not all have the
same width?

Without looking at the details and just guessing, the beaut thing
about inline boxes is that (if you don't over specify with the
CSS to hobble them) they are smart enough to cope with most
things you throw at them.

You were asking about thumbnails and some layout I made. Yes,
these were done with floats but are highly managed into same size
thumbs, classified in blocks according to general shape and good
for truly short captions.

http://tinyurl.com/2jcs5r

 

[freemont]

says... [thumbnail layout]

http://tinyurl.com/2jcs5r

Well, I gave a try to your design, but apparently it is not able to cope
with thumbnails with a variable width.

See for instance here:
http://www.molon.de/test/csspo/index3.html

All thumbnails are squeezed. Removing the width/height lock yields this:
http://www.molon.de/test/csspo/index4.html

Try setting height and width to 100% and see what you think.

 

[123Jim]

Well, I gave a try to your design, but apparently it is not able to cope
with thumbnails with a variable width.

See for instance here:
http://www.molon.de/test/csspo/index3.html

All thumbnails are squeezed. Removing the width/height lock yields this:
http://www.molon.de/test/csspo/index4.html

You still have width constrained here:
#wrapper div {
float:left;
margin:5px 5px 10px;
padding:0;
text-align:center;
width:150px; <<------------ remove this width
}

I'm sure Dorayme will be along with the definitive fix

 

[123Jim]

http://www.molon.de/test/csspo/index5.html

Now it floats, but there are huge empty spaces in the page, depending on
the width of the window. This float feature is not too smart at
rearranging thumbnails on the page.

Yeah I'm looking at that ... On your table version the space is taken up in
the cells . it's still empty space.. but enclosed in a border .. I guess you
could contain the images in a div which you can give a height, width and
border that looks more uniform. ...

 

[123Jim]

Yeah I'm looking at that ... On your table version the space is taken up
in the cells . it's still empty space.. but enclosed in a border .. I
guess you could contain the images in a div which you can give a height,
width and border that looks more uniform. ...

er... of course they [images] already are contained in a div .. but that div
fits neatly on the image whereas it might be better if there is more empty
space inside the div around the image . and the div's dimensions can be made
closer in width and height to each other.. It might take some experiment to
land on the best relative sizes ..

 

[dorayme]

This actually is a plus and your thumbs look brilliant in my
opinion. In fact it instantiates an idea that I have deliberately
done and I am sure have urged before. As long as the enlargements
are the real McCoy, the way they are squeezed in the thumbs will
catch on as a convention. Ever seen the beginnings and ends of
some old movies (try Big Country), it looks interesting when the
figures are elongated and marks the end of the film and aspect
management in what turns out to be a spandrel like fortuitous
symbiosis. The nice even look of all the thumbs being same size
(you know, the 'Campbell's Soup Cans' look) and the bit of
squeezing distortions *can trump* naive literalistic aims.

You still have width constrained here:
#wrapper div { ....
width:150px; <<------------ remove this width
}

I'm sure dorayme will be along with the definitive fix

You have helpfully saved me the bother in one respect, thank you.
The main point is that Alfred seems to have seriously
underestimated my words "but are highly managed into same size
thumbs, classified in blocks according to general shape and good
for truly short captions". I will repeat that inline-block is the
way to go for the website maker who has reasons not to do this
management and I better now add, who cannot see the value and
beauty in some interesting thumbnail distortions.

The gallery I made was really for a real project and mainly for
pictures I had taken with a 35mmm film camera and some movies
from another camera. This situation made it easy for the
thumbnails to be either one size landscape or one size portrait.
And seeing as I have a gift for brevity in words, naturally being
reticent and not the lest typative, I tend to short captions.

I repeat for Alfred's ears: I *liked* your URL above just as it
is, look like they would be nice pics enlarged too!

 

[123Jim]

This actually is a plus and your thumbs look brilliant in my
opinion. In fact it instantiates an idea that I have deliberately
done and I am sure have urged before. As long as the enlargements
are the real McCoy, the way they are squeezed in the thumbs will
catch on as a convention. Ever seen the beginnings and ends of
some old movies (try Big Country), it looks interesting when the
figures are elongated and marks the end of the film and aspect
management in what turns out to be a spandrel like fortuitous
symbiosis. The nice even look of all the thumbs being same size
(you know, the 'Campbell's Soup Cans' look) and the bit of
squeezing distortions *can trump* naive literalistic aims.


You have helpfully saved me the bother in one respect, thank you.
The main point is that Alfred seems to have seriously
underestimated my words "but are highly managed into same size
thumbs, classified in blocks according to general shape and good
for truly short captions". I will repeat that inline-block is the
way to go for the website maker who has reasons not to do this
management and I better now add, who cannot see the value and
beauty in some interesting thumbnail distortions.

The gallery I made was really for a real project and mainly for
pictures I had taken with a 35mmm film camera and some movies
from another camera. This situation made it easy for the
thumbnails to be either one size landscape or one size portrait.
And seeing as I have a gift for brevity in words, naturally being
reticent and not the lest typative, I tend to short captions.

I repeat for Alfred's ears: I *liked* your URL above just as it
is, look like they would be nice pics enlarged too!

The images look great (are they HDR?) even in the distorted version, but I'm
don't think I would be able tolerate the distortion on thumbnails. Some of
them are very different to the 'full size' thumbs.

Some careful calculations and adjustments might have to made to make this
work without squashing the thumbs. I would choose a width for div that fits
three across on about a1000 pixel wide screen. Then choose a height that is
not too small, because then I would adjust the sizes of the thumbs to fit
into these identical dimensioned landscape container divs. (same size boxes
makes the whole floating left thing work better)


This would mean making the widest landscape thumb(s) a bit less wide, and
making the tallest portrait thumbs a bit less tall, but without distortion.
The reason I'd make the tallest thumbs shorter is to allow less empty space
above the landscape images in the identical dimensioned divs)

 

[Neredbojias]

Possibly yes, although I would imagine that there are lots of old web
pages which won't be updated and will continue containing legacy
code.

Certainly, but if they're not updated, they will cease to function
effectively. The day is coming; mark my words! <g>

 

[123Jim]

The images look great (are they HDR?) even in the distorted version, but
I'm don't think I would be able tolerate the distortion on thumbnails.
Some of them are very different to the 'full size' thumbs.

Some careful calculations and adjustments might have to made to make this
work without squashing the thumbs. I would choose a width for div that
fits three across on about a1000 pixel wide screen. Then choose a height
that is not too small, because then I would adjust the sizes of the thumbs
to fit into these identical dimensioned landscape container divs. (same
size boxes makes the whole floating left thing work better)


This would mean making the widest landscape thumb(s) a bit less wide, and
making the tallest portrait thumbs a bit less tall, but without
distortion. The reason I'd make the tallest thumbs shorter is to allow
less empty space above the landscape images in the identical dimensioned
divs)

850 pixels wide I should have said above as that is the example page's table
width. That might result in the landscape images being to small, if scaled
into a third of the width available.
how would it work if the container divs are the same height but varied in
width?

 

[dorayme]

The images look great (are they HDR?) even in the distorted version, but I'm
don't think I would be able tolerate the distortion on thumbnails. Some of
them are very different to the 'full size' thumbs.

Some careful calculations and adjustments might have to made to make this
work without squashing the thumbs. I would choose a width for div that fits
three across on about a1000 pixel wide screen. Then choose a height that is
not too small, because then I would adjust the sizes of the thumbs to fit
into these identical dimensioned landscape container divs. (same size boxes
makes the whole floating left thing work better)


This would mean making the widest landscape thumb(s) a bit less wide, and
making the tallest portrait thumbs a bit less tall, but without distortion.
The reason I'd make the tallest thumbs shorter is to allow less empty space
above the landscape images in the identical dimensioned divs)

You are probably right but one needs to see a real situation and
the caption and understand more about what would make for someone
likely to click to see the enlargement. Most times it is hard to
tell between two similar pictures as represented in *small*
thumbnails anyway, they might as well be distorted sometimes for
all that the thumbnail is a factor.

The management I mentioned previously was to do with grouping and
sizing. You are mentioning other ones about thumbnail
preparations. There are even others where the thumbs are preapred
with loving attention and a detail of the significant parts are
fitted into a set size for thumbnail. Full enlargement shows a
feet to hair man holding a stamp. Thumbnail might show the hand
to forehead. Lot of work!

 

[Jenn]

--
Jenn (from Oklahoma)

Certainly, but if they're not updated, they will cease to function
effectively. The day is coming; mark my words! <g>

Ideas:
http://snipurl.com/w4xqb

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

 

[rf]

Ideas:
http://snipurl.com/w4xqb

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

which, like just about everything at dynamicdrive, fails miserably if
Javascript is disabled. The thumbnails are not even *displayed* on that page
without Javascript, although, stupidly, the credits for them are

Hint: the single most important visitor to your site does not have
javascript enabled.

 

[Jenn]

which, like just about everything at dynamicdrive, fails miserably if
Javascript is disabled. The thumbnails are not even *displayed* on that
page without Javascript, although, stupidly, the credits for them are

Hint: the single most important visitor to your site does not have
javascript enabled.

Do you know anyone who disables javascript on purpose? FWIW.. most people
have no idea how to do that, let alone would disable js unless they are just
specifically looking to do so.. and then, such people would know how to turn
it back on.

The problem I have with all this stuff is that there is no code that will be
perfect to work in every scenario for every browser and every viewer that
hits a page. If someone disables javascript on a page that uses it, then
it's too bad for them. If they want to view the page.. let them enable
javascript.