Struggling to convert tables to CSS

wickedmoon · #1 Aug 10th, 2007, 11:19

I'm trying to figure out if it's possible to convert the tables at http://wickedmoon.com/wickedmoon_v2b.php into CSS. I've put some descriptions on the page next to the graphics. One of the graphics needs to be tiled, but only as far as the page content goes. The content needs to overlay this graphic. Tables make it easy to do, as I can set the graphic as a table background. As I add more content to the table cell, more of the graphic is revealed and the image is designed to tile seamlessly down the page.

Jason

karinne · #2 Aug 10th, 2007, 11:32

For some reason this stupid firewall at work is blocking the site

But ... ALL site can be converted to CSS

Resources for learning how to use CSS for layout

wickedmoon · #3 Aug 10th, 2007, 11:35

Thanks for the reassurance

I have some experience with CSS, but this is beyond me.

karinne · #4 Aug 10th, 2007, 11:37

If you could give a nice clean screenshot I can point you in the right direction, then going to the link I posted above there are a bunch of example of css layouts you can use and re-arrange.

wickedmoon · #5 Aug 10th, 2007, 11:42

The page is too long really for a snapshot. I've attached the source code below if you can use that?

Jason

Code: Select all

<!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=iso-8859-1" />

<title>Wicked Moon</title>


<meta name="Description" content="" />
<meta name="Keywords" content="" />


<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#330000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p align="center">Header</p>
<p align="center">Ecards. Videos. Games. Pictures. Forum.</p>
<p align="center">Username: 
  <input name="textfield" type="text" class="textfield" size="20" />
  Password: 
  <input name="textfield" type="text" class="textfield" size="20" />
Login. Sign up. Lost password. </p>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="gfx/layout2007summer/scroll_top.jpg" width="995" height="93" /></td>
  </tr>
  <tr>
    <td background="gfx/layout2007summer/scroll_middle.jpg"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="120" valign="top"><p>Left column</p>
      </td>
    <td valign="top">
<h1 align="center">Page title</h1>
<p align="center">Main page content. </p>
<p align="center">300x250 pixel advert is right justified, with page content wrapped around it to the left and underneath: </p>
<script type="text/javascript"><!--
google_ad_client = "pub-9248981396278238";
google_alternate_color = "FFFFFF";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "9999FF";
google_color_bg = "FFFFFF";
google_color_link = "940F04";
google_color_text = "003366";
google_color_url = "063E3F";
google_ui_features = "rc:6";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</td>
    <td width="120" valign="top"><p>Right column </p>
      <p>New users</p>
      <p>Who's online </p></td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td><img src="gfx/layout2007summer/scroll_bottom.jpg" width="995" height="76" /></td>
  </tr>
</table>
<p align="center" class="text_borders_small"><a href="http://rydia.net">Hosting 
managed by Rydia.net</a></p>
<p align="center" class="text_borders_small">&copy; <a href="http://wickedmoon.com">Wicked Moon</a> 2007. All rights reserved.</p>
<p align="center" class="text_borders_small">&nbsp;</p>
<p align="center">Breakdown of page:</p>
<p align="center">Top of scroll:</p>
<p align="center"><img src="gfx/layout2007summer/scroll_top.jpg" width="995" height="93" /></p>
<p align="center">Middle of scroll: </p>
<p align="center">The middle of the scroll needs to tile down the page. The image is designed to tile seamlessly. How far it tiles should depend on how much page content there is. This is easily acheived with tables. The image is set as the table background, so the more content is added to that table cell, the more of the scroll is visible and it just continues to tile. There is never more scroll than necessary. When the page content ends, the scroll ends.</p>
<p align="center">Page content needs to overlay the middle of the scroll using CSS. Content shouldn't overlay the top and bottom scroll graphics. Content can overlap the left and right edges of the middle of the scroll, so it goes across the page. I am going to fade out the sides of the scroll, so this will look ok.</p>
<p align="center"><img src="gfx/layout2007summer/scroll_middle.jpg" width="995" height="384" /></p>
<p align="center">Bottom of scroll:</p>
<p align="center">The middle of the scroll ends with the following image. This is designed to look good no matter where the middle of the scroll is cut off by the table. </p>
<p align="center"><img src="gfx/layout2007summer/scroll_bottom.jpg" width="995" height="76" /> </p>
<p align="center" class="text_borders_small">&nbsp;</p>
</body>
</html>

karinne · #6 Aug 10th, 2007, 11:45

I need a visual .... Firefox has a nice Screengrab! extension which allows you to grab the complete page

Kropotkin · #7 Aug 10th, 2007, 11:59

Hi

Basically I think as karinne says this should be easy. If you can flow your div elements the middle one with the expanding image can have background-image:url(middle.jpg) ; background-repeat: repeat-y;

To get the 3 columns of your inner table you use something like:

<div style="float:left;width:200px;" >col 1 </div>
<div style="float:left;width:200px;" >col 2 </div>
<div style="float:left;width:200px;" >col 3 </div>

To get the overall effect is going to be difficult becuase of your nested tables. Maybe if you put the above 3 columns in a div with the background set as above that would work: something like:

Code: Select all

<html>
<body>
<div id="top" style="background-image:url(top.jpg) ;background-repeat:no-repeat;">
top

</div>
<div id="miiddle" style="background-image:url(middle.jpg) ; background-repeat: repeat-y;" >
<div style="float:left;width:200px;" >col 1 </div>
<div style="float:left;width:200px;"  >col 2 </div>
<div style="float:left;width:200px;"  >col 3 </div>
</div>
 
<div id="bottom" style="clear:both;style="background-image:url(bottom.jpg) ;background-repeat:no-repeat;">">

bottom
</div>
</body>
</html>

regards
Justin

Lchad · #8 Aug 10th, 2007, 12:22

Here's some code for ya... it's similar to Justin's but I do it a bit differently. See if either of these shed light on your situation.

I didn't add a footer at the bottom. I figured you could do that. Just be sure if you use a footer div, you add a clear:both; to it because the div's above it are floated.
Keep what you have for code and add this to the css:
CSS

Code: Select all

#scrolltop {
    width: 995px;
    height: 93px;
    margin: 0 auto; <!--centers scrolltop -->
    }
#wrapper {
    width: 995px;
    margin: 0 auto;
    background-image:url(gfx/layout2007summer/scroll_middle.jpg) repeat-y;
    }    
    
#left {
    width: 150px;
    float: left;
    }    
#middle {
    width: 695px;
    float: left;
    }
#right {
    width: 150px;
    float: left;<!--this can be floated right ...doesn't matter.  Next bit of code must have a clear added to it. --> 
    }

Html

Code: Select all

<body bgcolor="#330000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<p align="center">Header</p>
<p align="center">Ecards. Videos. Games. Pictures. Forum.</p>
<p align="center">Username: 
  <input name="textfield" type="text" class="textfield" size="20" />
  Password: 
  <input name="textfield" type="text" class="textfield" size="20" />
Login. Sign up. Lost password. </p>
<div id="scrolltop"><img src="gfx/layout2007summer/scroll_top.jpg" width="995" height="93" /></div>
<div id="wrapper">
    <div id="left">Left Column</div>
    <div id="middle"> 
      <p>All your page content here</p>
     
    </div>
    <div id="right">Right column</div>

</div><!--end wrapper div -->
<div id="scrollbottom"><img src="gfx/layout2007summer/scroll_bottom.jpg" width="995" height="76" /></div>

Skelbo · #9 Aug 10th, 2007, 14:03

I commend your decision to move to CSS, but first you need to have a basic undersstanding of how it works before actually building live sites.

Try reading some posts in this forum, or, better yet try www.w3schools.com.

This is what your page looks like in IE6:

Once again, test your pages in more than one bowser.

If your pages completely bomb on the most used browser on the Internet, there really is no point in asking for help to tweak a design.

wickedmoon · #10 Aug 10th, 2007, 14:04

Thanks for the firefox add-on, nice

I think we have it sorted with the existing posts, I'm going to try them now.

wickedmoon · #11 Aug 10th, 2007, 14:10

Quote:

Originally Posted by Skelbo

Once again, test your pages in more than one bowser.

If your pages completely bomb on the most used browser on the Internet, there really is no point in asking for help to tweak a design.

That's how it's meant to look, it's only a test page

Skelbo · #12 Aug 10th, 2007, 14:11

Anyway...I never answered your question in my previous post.

Here's how I would solve this problem.

I would make the page into 3 basic DIVs
The top DIV would contain the top of the scroll.
The middle DIV would have the expandable paper set as the background and the text would be constrained within so it doesn't go past the 'paper' edge
The bottom DIV contains the bottom of the scroll

Using this method, as the content got longer, the 'paper' would tile and give the appearance of expanding the scroll. It's kind of like pulling down a window blind...

I won't actually write the code FOR you, but that should get you pointed in the right direction.

I hope this helps.

wickedmoon · #13 Aug 10th, 2007, 15:19

Quote:

Originally Posted by Lchad

Here's some code for ya... it's similar to Justin's but I do it a bit differently. See if either of these shed light on your situation.

I was trying this solution but can't get the middle image to appear. I'm testing it at http://wickedmoon.com/wickedmoon_v2c.php. The style sheet is at http://wickedmoon.com/styletest.css.

Lchad · #14 Aug 10th, 2007, 17:14

oops.. I think the url for the background image is incorrect

Code: Select all

#wrapper {
    width: 995px;
    margin: 0 auto;
    background-image:url(gfx/layout2007summer/scroll_middle.jpg) repeat-y;
    }

Check the path to this graphic called scroll_middle.jpg (the part in red) Is that the path to your image on your computer?
also change background-image to background...

try:

Code: Select all

#wrapper {
    width: 995px;
    margin: 0 auto;
    background:url(gfx/layout2007summer/scroll_middle.jpg) repeat-y;
    }

wickedmoon · #15 Aug 10th, 2007, 17:56

That works in IE6, but not FF2 (I didn't try it in IE before the changes we just made, so I don't know if it was working before or not). I tried emptying the browser cache. The image URL is correct. Any ideas what FF needs to display this image?

Lchad · #16 Aug 10th, 2007, 18:02

Do you have any words in the middle div? If not, you probably won't see the background in FF. Put some fake content in.

wickedmoon · #17 Aug 10th, 2007, 19:28

Yes, there was some text in. I've just put an image in, but there's still no background image. http://wickedmoon.com/wickedmoon_v2c.php. It looks like it might not be possible with CSS?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Struggling to convert tables to CSS