Do not use tables for positioning!

@JSchwarzAug 26.2005

I know, I know… you’re not supposed to use tables for positioning. But I have two problems with that. 1) I inherited this application, and it already used tables to create the header on top of every page, and 2) I’m not that comfortable with CSS yet.

Sooooo…. could someone provide me an example of how to recreate this header (table id=”headertable”) properly to start me off (note, you don’t have to re-write the whole thing — I would have to pay you what they’re paying me for that — just help me get started):

[CODE]<html><body><form> <table id=outtertable width=”100%” height=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″> <tr id=headerrow> <td height=”69″ background=’/Business/CVPrivacySurveyHome.nsf/banner.jpg’> <table id=”headertable” width=”100%” height=”69″ cellpadding=”0″ cellspacing=”0″ border=”0″ style=”border:0 solid red”> <tr><td colspan=3 align=”left” style=”border:0 solid black”><b><font color=”#FFFFFF”><img width=30 height=0 src=’/Business/CVPrivacySurveyHome.nsf/spacer.gif?OpenImageResource’>This site is a beta version and is still subject to further testing and may not have full functionality</font></b></td><td align=”right” ><b><font size=”2″ color=”#C0C0C0″><font size=-1>Client View</font> (BETA)</font>&nbsp&nbsp&nbsp&nbsp</b></td></tr> <tr > <td rowspan=”2″ width=”160″ height=”69″ style=”border:0 solid black”><img src=’/Business/CVPrivacySurveyHome.nsf/logo.gif?OpenImageResource’ alt=’Cleary Gottlieb’ border=0></td> <td colspan=1 height=”49″ align=”right” style=”border:0 solid black”><p class=”navigation”><b>International Laws Applicable To Online Financial Products And Services Survey</b></p></td> <td rowspan=”2″ width=”30″ height=”69″ style=”border:0 solid black”><img src=’/Business/CVPrivacySurveyHome.nsf/spacer.gif?OpenImageResource’></td> </tr> <tr><div> <td height=”20″ align=”right” style=”border:0 solid red”> <p class=”navigation”> <b> <a class=”nav” href= /Business/CVPrivacySurveyHome.nsf/ClientHome?ReadForm&Client&SID=SRV50009>Home</a>       <a class=”nav” href=/Business/CVPrivacySurveyHome.nsf/allforms/ClientInstructions?OpenDocument&Client&SID=SRV50009>Instructions</a>       <a class=”nav” Href=”mailto:[email protected]?subject=Client Survey”>Contact Technical Support</a>       <a class=”nav” href=/Business/CVPrivacySurveyHome.nsf/allforms/ClientTOU?OpenDocument&Client&SID=SRV50009>Terms of Use</a>       <a class=”nav” href=”javascript:print();”>Print</a> </b> </p> </td> </div></tr> </table> </td> </tr> <tr> … the page content goes here … </table> </form></body><html>[/CODE]

to post a comment

CSS

7 Comments(s) _↴

@The_Little_GuyAug 28.2005 — #Im not exactally sure I know what your talking about, so could you please explain a little more?

@BlueRainAug 28.2005 — #See if this will do what you want.

[CODE]<style type="text/css">
 <!--
 div#header{width:100%;height:69px:}
 a.nav{padding:0 10px;}
 p.navigation{text-align:right;font-weight:600;padding-right:60px;}
 p.t1{text-indent:30px;color:#ffffff;font-weight:600;}
 img.left{float:left; width:160px;height:60px;}
 div#cv{width:80px;float:right;color:#C0C0C0; text-align:right;font-size:.8em;float:right;font-weight:600;}
 -->
 </style>[/CODE]

[code=html]<div id="header">
 <p class="t1">This site is a beta version and is still subject to further testing and may not have full functionality</p>
 <div id="cv">Client View (BETA)</div>
 <img class="left" src="/Business/CVPrivacySurveyHome.nsf/logo.gif?OpenImageResource" alt="Cleary Gottlieb" border="0">
 <p class="navigation">International Laws Applicable To Online Financial Products And Services Survey</p>
 <p class="navigation">
 <a class="nav" href="/Business/CVPrivacySurveyHome.nsf/ClientHome?ReadForm&Client&SID=SRV50009">Home</a>
 <a class="nav" href="/Business/CVPrivacySurveyHome.nsf/allforms/ClientInstructions?OpenDocument&Client&SID=SRV50009">Instructions</a>
 <a class="nav" href="mailto:[email protected]?subject=Client Survey">Contact Technical Support</a>
 <a class="nav" href="/Business/CVPrivacySurveyHome.nsf/allforms/ClientTOU?OpenDocument&Client&SID=SRV50009">Terms of Use</a>
 <a class="nav" href="javascript:print();">Print</a></p>
 </div[/code]

@JSchwarzauthorSep 30.2005 — #BlueRain, sorry I didn't thank you for the code. Mostly, I'm sorry because I need more help.

Can you position the paragraph tags?

I started with what you supplied, but I can't position the text to show up where it should. Here is what I have (note that the boxes shouldn't be there, they are just there to help me design). I need to accurately position the paragraphs (t1, navigation, and navigation) and the div "cv". The images are positioned correctly, but I'd like to know how to move them around, too.

Can you tell me how to do that? Help is much appreciated.

-Jeff

[CODE]<link rel="stylesheet" href="/Business/CVPrivacySurveyHome.nsf/citisurvey.css">
 <style type='text/css'> <!-- 
 div#header{width:100%;height:36px; border:1 solid black} 
 a.nav{padding:0 10px;} 
 p.navigation{text-align:right;font-weight:600;padding-right:60px; border:1 solid blue} 
 p.t1{text-indent:30px;color:#000000;font-weight:600; border:1 solid aqua} 
 img.top{width:100%;height:36px; border:1 solid blue} 
 img.left{float:left; width:160px;height:60px; padding:0; margin:0; border:1 solid green} 
 div#cv{width:80px;float:right;color:#C0C0C0; text-align:right;font-size:.8em;float:right;font-weight:600; border:1 solid red} 
 --> </style>[/CODE]

[CODE]<body><form><table><tr ><td>   <--- I can't change this line
 <div id="header">
 <img class="top" src="/Business/CVPrivacySurveyHome.nsf/h_wave.gif?OpenImageResource" alt="Citigroup">
 <img class="left" src="/Business/CVPrivacySurveyHome.nsf/h_cg.gif?OpenImageResource" alt="Citigroup">
 <p class="t1">This site is a beta version and is still subject to further testing and may not have full functionality</p>
 <div id="cv"><font size=-1>Client View</font> (BETA)</div><tt><font size="2"><br>
 </font></tt><p class="navigation"></p>
 <p class="navigation">
 <a class="nav" href= /Business/CVPrivacySurveyHome.nsf/ClientHome?ReadForm&Client&SID=SRV50009>Home</a>
 <a class="nav" href=/Business/CVPrivacySurveyHome.nsf/allforms/ClientInstructions?OpenDocument&Client&SID=SRV50009>Instructions</a>
 <a class="nav" Href="mailto:[email protected]?subject=Client Survey">Contact Technical Support</a>
 <a class="nav" href=/Business/CVPrivacySurveyHome.nsf/allforms/ClientTOU?OpenDocument&Client&SID=SRV50009>Terms of Use</a>
 <a class="nav" href="javascript:print();">Print</a>
 </p>
 </div>[/CODE]

@LJKOct 01.2005 — #Hi -

Not sure if you know some of the basics:

margin:0 auto;

[the distance between this and the next block element -

vertical spacing for top and bottom - 1st #

and hz. spacing for side to side - 2nd #.]

padding:0 0 0 10px;

[the distance betw. the element and its own 'border' -

one number to apply to all 4 sides, two numbers to

apply to top/bottom and right/left, and four numbers

to control specific sides - top, right, bottom, left -

same as w/ margin: or border:.]

width:60%;

[determines the div, p or h1, etc. width - in px or %

or em w/ text.]

position:relative; top:20px;

[would move an element 20px downwards from its

normal position - good for tweaking - again, top, right,

bottom or left but as a sep. property:value; pair.]

Try altering one or some of these to better position

the paragraphs where you want them...

Good luck,

El

@JSchwarzauthorOct 03.2005 — #LJK, thanks for the hints. I guess I didn't have the right combination of position and other settings. But I've started to get them to move around.

-Jeff

@JSchwarzauthorOct 03.2005 — #Can someone tell me why one of my paragraphs does not move?

Paragraph ID="links" in the below example doesn't move. And if I change it from a paragraph to a DIV or SPAN, then the links themselves lose formatting.

Anyone know what's wrong?

Thanks.

[CODE]<div id="header">
 <img class="top" src="/Business/CVPrivacySurveyHome.nsf/h_wave.gif?OpenImageResource" alt="Citigroup">
 <img class="left" src="/Business/CVPrivacySurveyHome.nsf/h_cg.gif?OpenImageResource" alt="Citigroup">
 <div id="cv"><Computed Value></div>
 <p class="t1"><Computed Value></p>
 <p class="navigation" id="title"><Computed Value></p>
 <p class="navigation" id="links">
 <a class="nav" href= <Computed Value>>Home</a>
 <a class="nav" href=<Computed Value>>Instructions</a>
 <a class="nav" Href="mailto:[email protected]?subject=<Computed Value>">Contact Technical Support</a>
 <a class="nav" href=<Computed Value>>Terms of Use</a>
 <a class="nav" href="javascript:print();">Print</a>
 </p>
 </div>[/CODE]

[CODE]<style type='text/css'> 
 <!--
 div#header {margin:0;  padding:0; width:100%; border:0 solid red}
 a.nav {padding:0 10px; border:01 solid red}
 p.navigation {text-align:right;font-weight:600;padding-right:60px; border:0 solid blue}
 p.t1 {position:relative; top:-22px; width=100%; text-align:center; font-weight:200; border-width:1 0; border-style:solid; border-color: aqua}
 p.title {position:relative; text-align:center; font-weight:200; border:0 solid black}
 p.links {position:relative; top:-20; text-align:right; font-weight:200; border:01 solid DarkGoldenRod }
 img.top {margin:0;  padding:0; width:100%; height:36px; border:0 solid green}
 img.left {margin:0;  padding:0; float:left; width:140px; height:45px; padding:0; margin:0; border:0 solid green}
 div#cv {position:relative; top:0; width:100px; float:right;color:#000000; text-align:right;font-size:.8em;float:right; font-weight:600; border:0 solid red} 
 -->
 </style>[/CODE]

@JSchwarzauthorOct 03.2005 — #Answer: "title" and "links" are IDs, and therefore should have a '#' (instead of a '.').

Also in #CSS _↴

CSS in Tables?CSS elements not being applied to the div tag Floating image in text problem

Success!

Help @JSchwarz spread the word by sharing this article on Twitter...

Tweet This

Do not use tables for positioning!

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Do not use tables for positioning!

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴