Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    From table mess to CSS

    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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    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.

    coothead

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much coothead

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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ah sheesh, go on then:

    Code:
    <!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.
    Last edited by SB65; 07-09-2010 at 07:38 PM.

  • Users who have thanked SB65 for this post:

    walkie (07-09-2010)

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder slappyjaw's Avatar
    Join Date
    Mar 2009
    Location
    Wonderland!
    Posts
    146
    Thanks
    14
    Thanked 3 Times in 3 Posts
    nice job on that! tables are such a mess.

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Might help now and in the future:

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

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

    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

    Why inline CSS and JavaScript code is such a bad thing: http://robertnyman.com/2008/11/20/wh...h-a-bad-thing/
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •