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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    need help to convert table to divs.

    i have tried to convert but gave up after spending most of the day doing trial and error.

    just can not get my head around it as all the divs seem to go one line each.

    i have a left side menu and the right side main content area with a header at the top and footer at the bottom... like most sites ;-)

    wanting the whole page to expand when the windows expands but when the page is made smaler it stops reducing the content after it gets so far in, meaning that its width is never smaller than say 500px or something otherwise the content just gets messed up.

    also to have the whole page centered.

    can someone give me a heads up on how to start this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .mytable { width: 100%; border-collapse: collapse; border-width: 0px; }
    
    td.container { width: 1164px; height: auto; }
    
    /*   top right bottom left     */
    td.padding-5-5 { padding: 6px 0px 0px 6px; }
    
    div.menuindent { margin: 0px 0px 0px 4px; }
    
    td.menubutton { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
    td.menubutton:hover { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
    
    td.menubutton-active { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
    td.menubutton-active:hover { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
    
    td.SUBmenubutton { background: url(images/SUBmenubut ton.gif); background-repeat: no-repeat; background-position: center center; }
    td.SUBmenubutton:hover { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
    
    td.SUBmenubutton-active { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
    td.SUBmenubutton-active:hover { background: url(images/SUBmenubutton.gif); background-repeat: no-repeat; background-position: center center; }
    
    a.one { color: #fff; text-decoration: none; }
    td a.one { display:block; height:100%; }
    
    img.floatImgLeft { float: left; margin-top: 0px; }
    img.floatImgRight { float: left; margin-top: 0px; }
    
    table.bottomborderlineoftd { border-collapse: collapse; border-bottom: 1px solid #000000; }
    table.bottomborderlineoftd td { border-bottom: 1px solid #000000; }
    </style>
    </head>
    <body>
    <table class="mytable" width="1146">
      <tr> 
        <td colspan="3" style="height: 41px; background: #7AB3D2;"> 
          <blockquote>
    	  	<h1><font size="7" face="Blackadder ITC">header</font></h1>
    	  </blockquote>
    	</td>
      </tr>
      <tr> 
        <td valign="top" align="center" style="background: #7AB3D2;">
    		<table width="155" align="center" cellpadding="5" style="border-collapse: collapse; border-width: 0">
    		<tr><td class="menubutton" NOWRAP><a href="" class="one">Home</a></td></tr>
    		<tr><td class="menubutton" NOWRAP><a href="" class="one">Contact us</a></td></tr>
    		<tr><td class="menubutton" NOWRAP><a href="" class="one">Photos</a></td></tr>
    		</table>
    	<br><br><br><br>
    	</td>
        <td width="100%" colspan="2" valign="top" background="images/top_left_inner.gif" class="padding-5-5" style="border-collapse: collapse; border-width: 0px; background-repeat: no-repeat; background-position: left top;">&nbsp; 
        </td>
      </tr>
      <tr style="background: #7AB3D2;"> 
        <td height="28" valign="baseline" background="images/bottom_left_trans.png" style="background-repeat: no-repeat; background-position: left bottom;">&nbsp;</td>
        <td align="right" valign="top"><a href="">disclaimer</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">privacy 
          policy</a></td>
        <td background="images/bottom_right_trans.png" style="background-repeat: no-repeat; background-position: right bottom;">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails need help to convert table to divs.-untitled1.png  

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by jasonpc1 View Post
    just can not get my head around it as all the divs seem to go one line each.
    A DIV is a block element. Elements can either be block or inline elements. Block elements always appear on their own line (hence the name block), and inline elements can appear next to each other (hence the name inline). So by default all DIV's you create will always appear on their own line, however we can easily change this with the use of CSS floats.

    Quote Originally Posted by jasonpc1 View Post
    i have a left side menu and the right side main content area with a header at the top and footer at the bottom... like most sites ;-)
    So in this case you want to float the menu to the left (float:left; ) and then the header and content DIV will appear next to it.

    Quote Originally Posted by jasonpc1 View Post
    wanting the whole page to expand when the windows expands but when the page is made smaler it stops reducing the content after it gets so far in, meaning that its width is never smaller than say 500px or something otherwise the content just gets messed up.
    If you want the page to automatically expand with the browser window then you need to specify fluid widths on the elements you want this to happen on. Then to stop it getting smaller at a certain point you specify a min-width on the element so that it doesn't get shorter than this set width.

    Quote Originally Posted by jasonpc1 View Post
    also to have the whole page centered.
    To center block elements with a set width in CSS you use margin:0 auto; and to center inline elements you use text-align:center; as a basic rule.

    To expand further read up on CSS floats, and also take some basic CSS templates off the internet to see how they work e.g one-col two-col templates as it can help your understanding.

    Edit: Here's a quick example based on your attachment

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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:#333;
    }
    #wrap{
    	width:90%;
    	margin:0 auto;
    	min-width:700px;
    }
    #header{
    	margin:20px 0 0;
    	background:#09F;
    }
    #header h1{
    	padding:10px;
    	font-style:italic;
    }
    #menu{
    	list-style:none;
    	background:#09F;
    	padding:10px;
    	float:left;
    	width:200px;
    }
    #menu li a{
    	display:block;
    	margin:10px 0;
    	width:180px;
    	color:#FFF;
    	background:#069;
    	text-decoration:none;
    	text-align:center;
    }
    #content{
    	margin-left:220px;
    	background:#FFF;
    }
    #content p{
    	padding:10px;
    }
    #footer{
    	clear:both;
    	background:#09F;
    	text-align:right;
    	padding:3px 0;
    }
    #footer a{
    	text-align:right;
    	padding:0 10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <div id="header">
    	<h1>Header</h1>
    </div>
    <ul id="menu">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Photos</a></li>
    </ul>
    <div id="content">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum placerat neque a scelerisque. Duis nisi lectus, mollis nec placerat sit amet, aliquet quis ligula. Quisque lectus dolor, gravida sed dapibus id, consequat sed lorem. Sed mattis euismod nisl ac varius. Suspendisse eu eros lacus, non pretium risus. Curabitur dapibus mollis bibendum. Aliquam sit amet nunc dolor, et sagittis mauris. Fusce dignissim orci ligula, nec dignissim odio. Aliquam erat volutpat. Nam id nisi est. Nunc tellus augue, congue id molestie sed, congue et est. Sed elementum odio id est consequat a adipiscing enim malesuada. Suspendisse sed turpis ligula, non aliquet magna.</p>
        <p>Duis nec quam odio, at scelerisque mauris. Mauris felis massa, congue at varius et, blandit ut eros. Pellentesque eget odio turpis, et auctor enim. Etiam vitae iaculis metus. Aliquam varius porta dignissim. Sed mattis molestie augue. Quisque non dolor interdum diam pretium varius vehicula ac risus. Mauris a laoreet risus. Duis varius enim in eros rhoncus ullamcorper. Donec commodo viverra sapien a malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor imperdiet tortor, non iaculis urna suscipit sed. Ut sollicitudin justo non augue mollis ac adipiscing mauris aliquet. Vivamus purus tellus, interdum id elementum vitae, adipiscing id massa. Donec vulputate odio non eros porta sollicitudin. Suspendisse at elit ipsum, vel sollicitudin dui. Aenean cursus ultricies tellus, eget iaculis elit tristique quis.</p>
    </div>
    <div id="footer">
    	<a href="#">Disclaimer</a>
        <a href="#">Privacy Policy</a>
    </div>
    </div>
    </body>
    </html>
    Last edited by Scriptet; 05-05-2010 at 10:18 PM.

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thank you Scriptet,

    Please can you advise how I can have the rounded corners added in like in my screen shot for the top inner content div and the bottom left and right footer.

    edit:

    i have messed around a bit and figured part of this myself, with your help of course.
    added the following to the 'menu li a'
    Code:
    background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration:none; text-align: center;
    but when i tried to do the same for the footer i thought there is going to be a problem here...

    how do i add two background images to the same div?
    Last edited by jasonpc1; 05-06-2010 at 11:11 AM.

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post

    Convert table into divs

    <div>
    <div style="height: 41px; background: #7AB3D2;" class="mytable" width="100%">
    <blockquote>
    <h1><font size="7" face="Blackadder ITC">header</font></h1>
    </blockquote>
    </div>
    <div style="clear:both;float:left;">
    <div style="background: #7AB3D2; width:155px;float:left;">
    <div class="menubutton" NOWRAP><a href="" class="one">Home</a></div>
    <div class="menubutton" NOWRAP><a href="" class="one">Contact us</a></div>
    <div class="menubutton" NOWRAP><a href="" class="one">Photos</a></div>
    </div>
    <div style="background:images/top_left_inner.gif;background-repeat: no-repeat; background-position: left top;width:100%;">
    &nbsp;
    </div>
    </div>
    <div style="background: #7AB3D2;">
    <div height="28" valign="baseline" background="images/bottom_left_trans.png" style="background-repeat: no-repeat; background-position: left bottom;">&nbsp;</div>
    <div align="right" valign="top"><a href="">disclaimer</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">privacy
    policy</a></div>
    <div background="images/bottom_right_trans.png" style="background-repeat: no-repeat; background-position: right bottom;">&nbsp;</div>
    </div>
    </div>

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post
    Use this for rounded corners

    <style type="text/css">
    body{padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
    h1,h2,p{margin: 0 10px}
    h1{font-size: 250%;color: #FFF}
    h2{font-size: 200%;color: #f0f0f0}
    p{padding-bottom:1em}
    h2{padding-top: 0.3em}
    div#nifty{ margin: 0 10%;background: #9BD1FA}

    div.rtop, div.rbottom{display:block;background: #FFF}
    div.rtop b, div.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
    div.r1{margin: 0 5px}
    div.r2{margin: 0 3px}
    div.r3{margin: 0 2px}
    div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
    </style>
    </head>
    <body>
    <div id="nifty">
    <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
    <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
    </div>

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by jasonpc1 View Post
    Thank you Scriptet,

    Please can you advise how I can have the rounded corners added in like in my screen shot for the top inner content div and the bottom left and right footer.

    edit:

    i have messed around a bit and figured part of this myself, with your help of course.
    added the following to the 'menu li a'
    Code:
    background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration:none; text-align: center;
    but when i tried to do the same for the footer i thought there is going to be a problem here...

    how do i add two background images to the same div?
    At the moment you can't add more than one background image to an element (although it may be possible with CSS3), so the workaround is to add the second background to another element.

    Now if there is already another element without any background images added to it that could be used then try and use this, otherwise you have to create another empty element whose purpose is just for holding the background image.

    So in the case of the footer, you can just create another extra empty element like:

    Code:
    <div id="footer">
        <span class="bl"></span>
    	<a href="#">Disclaimer</a>
        <a href="#">Privacy Policy</a>
    </div>
    Now this extra span will be used to hold the bottom left rounded corner image as its background.. And the footer DIV itself can have the bottom right rounded corner image as its background..So this would make the CSS for that part:

    Code:
    #footer{
    	clear:both;
    	background:#09F url('bottomright.png') right bottom no-repeat;
    	text-align:right;
    	padding:3px 0;
    }
    #footer a{
    	text-align:right;
    	padding:0 10px;
    }
    #footer .bl{
    	background:url('bottomleft.png') left bottom no-repeat;
    }
    By the way I specified the background color/image position and repeat all in one statement which is just the shorthand for what you did but in 3 different statements (see shorthand here:http://www.w3schools.com/css/css_background.asp).


  •  

    Posting Permissions

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