Please convert table to css [Archive]

Click to See Complete Forum and Search --> : Please convert table to css

Kevey

03-28-2007, 06:51 PM

I have a table shown below that resizes relative to the viewport size. Can someone show me how to do this in css?

<html>

<body>

<table width=100% height=100% border=2>

<td colspan=2 height=6%>header</td>
</tr>
<tr><td width=15%>menu</td><td width=*>content</td></tr>
<tr><td colspan=2 height=6%>footer</td></tr>

</table>

</body>

</html>

WebJoel

03-28-2007, 07:27 PM

something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div style="width:100%; height:auto;">
<div style="width:99%; height:75px; margin:10px auto; border:1px solid red;">Top "Banner"</div>

<div style="width:15%; height:50px; border:3px double green; margin:2px; float:left; ">Left</div>
<div style="width:82%; height:50px; border:3px double green; margin:2px; float:left; ">Right</div>

<div style="width:15%; height:50px; border:3px double green; margin:2px; float:left; ">Left #2</div>
<div style="width:82%; height:50px; border:3px double green; margin:2px; float:left; ">Right #3</div>

<div style="width:99%; height:75px; margin:10px auto; border:1px solid red;">Bottom "footer"</div>
</div>

</body>
</html> Note: you need to keep the valid !doctype to make this thing 'center'

Kevey

03-28-2007, 09:53 PM

Hey WebJoel, that is the design I am after, and thanks for the effort. The main thing it doesn't do that the table is doing is keep from breaking when the viewport size gets smaller than the div. If you check out the table version above it all shrinks with the viewport size, but stays the same size relative to the other cells without wrapping. Doing this is css is really hurting my head. I know better than to use tables for this application, but am running out of ideas quickly!

Thanks again for your quick response....! :)

WebJoel

03-29-2007, 06:35 AM

By putting in a "min-width" Selector, you can stop the 'drop-down to next line' when re-sizing smaller. -But only "compliant browsers" will accept this. You can define another element to have "white-space:nowrap;" and prevent re-sizing down, or make some other tweak.
chances are that, upon adding content to the 15% and that DIV to the right, the drop-down effect would be stymied. -I'd have to try it. But this is resolvable without a doubt. -The problem all comes back to ...internet exploder! If only it would play by the standards!

As for reverting to TABLEs, -I would urge not. :o They are last decade's technology and becoming more and more out of favor.

http://www.hotdesign.com/seybold/index.html

WebJoel

03-29-2007, 07:50 AM

Here is another possibility:

<div style="width:100%; height:auto;">

<div style="position:relative; height:150px; width:96%; margin:10px auto; border:1px solid red;">
<div style="position:absolute; left:0; top:0; width:13%; height:145px; border:3px double green; float:left; ">
<h1>Left</h1>
<p style="padding-left:4px;">Item</p>
<p style="padding-left:4px;">Item</p>
<p style="padding-left:4px;">Item</p>
</div>

<p style="padding:10px 10px 20px 16%; line-height:1.5em;"><span style="font-size:2.0em; font-family:arial; font-style:italic;">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>

</div> (again, -use a valid !doctype to make this work)

Kevey

03-29-2007, 09:02 AM

As for reverting to TABLEs, -I would urge not. :o They are last decade's technology and becoming more and more out of favor.

http://www.hotdesign.com/seybold/index.html

I agree. I don't want to inflict tables on anyone. Thanks for all of your help. I know I am getting closer. If he would agree to let the page scroll it wouldn't be a problem, but everyone has their own idea of beauty and function, so I can't fault him there.

Thanks again WebJoel! :)