...

View Full Version : From table mess to CSS



walkie
07-09-2010, 11:09 AM
Hi everyone,

I have a html webdesign (a free one) which is made in a messy old table structure, and i am looking for someone who can turn it into a nice css design instead.
It is just a single page and a fairly simple design and it need to look the same.

I don't have any money to offer for the job. If you feel you helping out, please contact me here for more details or send me a private message.

Thanks in advance
Morten

coothead
07-09-2010, 11:53 AM
Hi there walkie,

and a warm welcome to these forums. ;)

Why don't you post a link to the site, you may be surprised at the advice that you receive. :D

coothead

walkie
07-09-2010, 12:23 PM
Thank you very much coothead :)

You can see the design here -> http://walkie.jaded.dk/

SB65
07-09-2010, 02:54 PM
Ah sheesh, go on then:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
*{margin:0;padding:0}
body{background:url("http://walkie.jaded.dk/images/site-background.gif") repeat scroll 0 0 #FFFFFF;margin:0;font-family:tahoma,verdana;font-size:11px;}
h1{font-size:21px}
h2{font-size:13px}
#outer{width:797px;padding-right:17px;margin:0 auto;background:url("http://walkie.jaded.dk/images/site-shade-right.gif") repeat-y scroll top right transparent;}
#wrapper{padding-left:17px;background:url("http://walkie.jaded.dk/images/site-shade-left.gif") repeat-y scroll 0 0 transparent;}
#header{color:white;text-transform:uppercase;height:49px;padding:35px 33px;background:url("http://walkie.jaded.dk/images/top-background.jpg") repeat-x scroll 0 0 transparent;}
#logo{float:left;margin-top:5px}
#header h1,#header h2{margin-left:35px}
#header h2{font-size:9px}
#nav{height:46px;padding-left:37px;background:url("http://walkie.jaded.dk/images/top-bar-background.gif") repeat-x scroll 0 0 transparent;}
#nav ul{margin:0;padding:0;list-style-type:none;text-transform:uppercase;font-weight:bold;line-height:46px;font-size:12px}
#nav li{float:left;background:url("http://walkie.jaded.dk/images/icon-arrowbutton.gif") no-repeat center left;padding:0 20px 0 29px}
#nav li a{color:black;text-decoration:none}
#nav li a:hover{color:red;text-decoration:underline}
#news{height:211px;padding-left:487px;background:url("http://walkie.jaded.dk/images/middle-left2.jpg") repeat-x scroll 0 0 transparent;}
#newspanel_wrap{background:url("http://walkie.jaded.dk/images/middle-right2.jpg") repeat scroll top right transparent;}
#newspanel{width:220px;padding:15px 15px 0 15px;height:196px;background:url("http://walkie.jaded.dk/images/middle-background.gif") repeat scroll 0 0 transparent;}
#newspanel h2{background:url("http://walkie.jaded.dk/images/icon-greyarrow.gif") no-repeat center left;padding-left:24px;margin-bottom:15px}
#newspanel ul{list-style-type:disc;list-style-position:inside;margin:0;padding:0;font-weight:bold}
#newspanel li{margin-top:15px;}
#newspanel li a{display:block;padding-top:15px;text-decoration:none;color:#FF6600}
#content{background-color:#AFC0D0;padding:25px 0;overflow:auto;height:1%;border-top:1px solid white;border-bottom:1px solid white}
#content_left{float:left;width:454px;padding-left:38px;background:url("http://walkie.jaded.dk/images/content-dotted.gif") repeat-y scroll top right transparent;}
#content_left img{float:left;clear:left;margin-bottom:10px}
#content_left p{margin:0 40px 0 133px}
#content_right{margin-left:487px;padding-left:29px;font-weight:bold;}
#content_right ul{list-style-type:disc;list-style-position:inside;margin:0 75px 15px 0;padding:0;}
#content h2{background:url("http://walkie.jaded.dk/images/icon-whitearrow.gif") no-repeat center left;padding-left:24px;margin-bottom:15px}
#footer{border-top:19px solid #28549E;height:57px;background-color:white}
#footer #copyright{float:left;line-height:57px;width:259px;text-align:center}
#footer ul{list-style-type:none;margin:0;padding:0;margin-left:300px}
#footer li{float:left;display:inline;line-height:57px;font-weight:bold;margin-right:25px}

</style>
</head>

<body>
<div id="outer">
<div id="wrapper">

<div id="header">
<img id="logo" alt="logo" src="http://walkie.jaded.dk/images/logo.gif"/>
<h1>Company Logo</h1>
<h2>www.company.com</h2>
</div>

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>

<div id="news">
<div id="newspanel_wrap">
<div id="newspanel">
<h2>Latest News</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.<a href="#">Read More</a></li><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.<a href="#">Read More</a></li>
</ul>
</div>
</div>
</div>

<div id="content">
<div id="content_left">
<h2>Welcome To Our Company</h2>
<img src="http://walkie.jaded.dk/images/content-frame.jpg" alt="image" title="image"/>
<img src="http://walkie.jaded.dk/images/content-frame.jpg" alt="image" title="image"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
</div>
<div id="content_right">
<h2>Company text</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</li>
</ul>
<p>Read more</p>
</div>
</div>

<div id="footer">
<p id="copyright">Copyright 2003 CompanyName.com</p>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Support</li>
<li>Services</li>
<li>Contacts</li>
<li>Help</li>
<li>FAQ</li>
</ul>
</div>

</div><!-- end wrapper -->
</div><!-- end outer -->
</body>
</html>




Looks OK in FF3 and IE7...not absolutely pixel exact.

And 106 lines of code instead of 230. A lesson to anyone who (still) thinks tables are good for layout.

EDIT: And now tweaked for IE6.

walkie
07-09-2010, 08:09 PM
yeah, that sure is alot better than doing it with tables. Alot nicer and easier!
I don't know what to say other than thanks alot SB65.

Thank you very very much :)

walkie

slappyjaw
07-10-2010, 06:30 AM
nice job on that! tables are such a mess.:thumbsup:

Major Payne
07-10-2010, 07:59 PM
Might help now and in the future:

How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/convert-your-html-tables-to-css

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design

Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Why inline CSS and JavaScript code is such a bad thing: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum