PDA

View Full Version : turning this tabled layout into div...

redhead
02-08-2003, 04:09 PM
ive been trying out divs more lately... but i cant seem to convert this table correctly... its the header graphic of a page cut up... stretched 100%... and the middle chunk cut out for a menu...

kinda huge request here: can anyone sort this into a tableless layout? i cant ;)... if noone can then i'll just stick to tables.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="176"><img src="images/header_0.jpg" width="176" height="77" border="0"></td>
<td width="100%"><img src="images/header_1.jpg" width="100%" height="77" border="0"></td>
<td width="295"><img src="images/header_2.jpg" width="295" height="77" border="0"></td>
</tr>
<tr>
<td width="176"><img src="images/header_3.jpg" width="176" height="15" border="0"></td>
<td width="100%" colspan="2" style="font-family: verdana; font-size: 8pt;">home // link // link // link // link</td>
</tr>
<tr>
<td width="176"><img src="images/header_6.jpg" width="176" height="49" border="0"></td>
<td width="100%" colspan="2"><img src="images/header_7.jpg" width="100%" height="49" border="0"></td>
</tr>
</table>

thanks in advance :thumbsup:
Graeme Hackston
02-08-2003, 06:30 PM
IMHO tabless layouts are good but so are tables. At least for now, divisions can't do some of the things that tables can do (not without JS or an over use of divisions).

Because you’re not trying to vertical align your td content this could probably be done with divisions. But why? Divisions are block level elements, you'd need to force them to display inline, use margins and float etc. Seems to me to be a convoluted replacement for something that already works just fine.

Rather than trying hard to completely rid yourself of tables I'd use them in places where they make life easy. As you're probably aware you can move your widths and padding etc. into CSS.
redhead
02-08-2003, 06:39 PM
indeed, but if at all possible i'd like to avoid using something that isnt supossed to be used. its been bought up loads of times that tables are not for layout - so id like to avoid using them for layout.

why is vertical align such a problem? style="vertical-align: top;" or whatever can easily replace valign="top"... :confused: i am aware about width, padding and everything... it was just getting the divs to create the same layout that was my problem ;)

thanks for the feedback
Graeme Hackston
02-08-2003, 06:48 PM
As far as I know vertical-align only works on tds. Am I wrong?

<html>
<head>
<title></title>
</head>
<body>
<div style="vertical-align:middle; text-align:center; height:100%; width:100%">
<div style="height:100px; width:100px">
content
</div>
</div>
</body>
</html>

<edit> I know veritcal-align works on page elements other than <td>. I mean as opposed to divisions </edit>
redhead
02-08-2003, 07:16 PM
As far as I know vertical-align only works on tdsI know veritcal-align works on page elements other than <td>erm... vertical align is not my problem... and that completely contridicted itself ;)
Graeme Hackston
02-08-2003, 07:34 PM
I suppose if you quote snippits of what I said it's a contradiction. Otherwise, if you read the very next sentence

I mean as opposed to divisions

It's not hard to see that it is a qualification of my earlier statement.

As far as I know vertical-align only works on tds

erm... vertical align is not my problem...

Where did I say that was your problem. I merely refered to it as a major stumbling block in a table to division conversion. Which leads me to this:

why is vertical align such a problem? style="vertical-align: top;" or whatever can easily replace valign="top"

As far as I know (in the context of divisions) it can't. But regardless, it's not the issue here.
redhead
02-08-2003, 10:49 PM
heh ok no worries. looks like my selective quoting came back again... ;) i guess im gonna have to stick with tables anyways for now as no one's had a shot at it... i'll try again tomorrow when i can concentrate... ;)

thanks :thumbsup:
Graeme Hackston
02-09-2003, 03:48 PM
Hope you get a CSS solution
redhead
02-09-2003, 05:03 PM
ive made it into a tableless layout, but it only works in IE, and as the most popular browser that is what im coding for. looks like im gonna be sticking to tables ;)
cg9com
02-09-2003, 05:42 PM
i had to convert like that for another site once.
i absolutely positioned them, no problems
redhead
02-09-2003, 05:44 PM
Originally posted by cg9com
i absolutely positioned them, no problems hmm.... *thinks*
cg9com
02-09-2003, 06:03 PM
:)

its actually not as tedious as you would think, if you are using tables, your layout is based on rectangles and squares right?

well, i just used common math to tell if i was aligning everything up exactly, not hard considering the shapes you would be working with.
jkd
02-09-2003, 06:15 PM
Originally posted by cg9com
i had to convert like that for another site once.
i absolutely positioned them, no problems

What about other resolutions then? So much easier just to size everything with percentages, and use floats to positions things, then absolutely positioning them...
cg9com
02-09-2003, 06:43 PM
it was made with room to spare on the right side, to accomidate that.
that is a good point though, but if the table layout is best viewed at a certain screen res. anyway, you could just accomidate for that (like 800x600) and all bigger resolutions can view it also.

ive tried using percentages for absolute positioning, for the width and height of the div, and for the top and left alignment. both gave me few problems, and could be a little more compromising on your layout than jkd's solution. however its still a good option in my opinion.
redhead
02-10-2003, 08:19 AM
okey... im considering all these ideas... when ive got some more free time i'll try them absolutely positioned... thanks guys :thumbsup: