F
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.