Convert tables to CSS Div/Span 1

[dwarvenmilitia]

Hi... I know this will be a simple problem cause I don't know much css.

I have a web page with main data but for aesthetics I want 2 bars up and down either side of the main page.

In tables I would do it like this:

<table>
  <tr>
    <td height="100%"> imageleft.jpg </td>
    <td> main page with lots of asp coding and div blocks further down the page</td>
    <td height="100%"> imageright.jpg </td>
  </tr>
</table

This is working fine at the moment and I have div tags for some asp scripting later in the page, also the colour of the main page is white but the edge tables would be a light grey... Problem is as soon as I go to print the page it cuts off when the first div tag starts and I want to print the entire page.

Is it easier to convert that table from above to div or span tags (how ever that is done) or is there some other printing thing I'm not aware of.

Any help appreciated

 

[Vragabond]

Is what runs down both sides an image or just a color or a gradient? Seeing that you use 100%, I can't imagine a normal image being stretched that way and looking good.

 

[dwarvenmilitia]

Hey it is just a simple pixel image. Basically a border. From a predesign stage.

Left image is 1px wide but right image is 2px wide so no border detail.

In design I usually use the table idea with bigger variations of this so it still looks good.

Ideas still?

 

[dwarvenmilitia]

Regardless if I use a pixel image or not if I used a normal image I would just take off 100% but still I dont know how I could do that table style with CSS div/span tags.

Think of tek-tips site but the left column is just for aesthetics but the middle is active content. The issue for me though is I can display it fine in tables but when it comes to print the page it splits the page at the start of the div tags used for aligning db retrieved info in the middle table.

Hence where my problem ocurrs.

Im fine with using tables for web display but when printing the page it stuffs up.

Hope that explains it a bit better.

Cheers

 

[Vragabond]

I don't really know what you mean. First you're talking about two strips running down each side of your main content container. This is painfully easy to do, say like this:

<style type="text/css">
#mainContainer {
  border-left: 1px solid blue;
  border-right: 2px solid blue;
}

This would create something you describe in your second post.

However, if you're looking at a three column approach, I suggest you go with floats.

 

[dwarvenmilitia]

Hey... Thanks for this but you are missing my point entirely. I'm not very good at explaining things.

Say I want to have a page 3 columns across and a image in the left and right columns with content in the middle column. Just like the tables example above.

With the middle column containing content (asp called db stuff) that column is long (ie one or more pages scrolled down).

The way I have it at the moment is in the table example in my first post however when I start called the data from the db it splits the "printable" page area there so I basically get a header on one page and all my content on the next few pages but I want content to start directly underneath the header...

NOTE: This is all for printing sake.

Link to example.

http://www.humangarden.co.nz/profile.asp

Cheers

 

[dwarvenmilitia]

Sorry missed the floats part in your post.

Yes I am using floats in the later content but that is where it starts to cut off my content. This is what I have no idea about. I thought if I get rid of tables altogether it might work.

Evidently it might be easier some other way.

The page with the link above visually in the web is fine but as soon as it is printed for print preview... then you can see when the issue lies.

Cheers

 

[Vragabond]

To tell you the truth, printing floated elements is a pain as it is badly implemented in the browsers. However, think about the printing. CSS allows you to specify printing stylesheet that is only visible when printing (or print previewing) the document and not on the screen itself. There you can remove all the non-necessary elements and style your main column to be 100% wide. If not, I suggest you reprogram the columns so that the content prints first and the floated left and right columns print after that.

 

[dwarvenmilitia]

Hey Vragabond... Cheers for the help.

I managed to sort out the printing on to one page. Dreamweaver has this nice little button "render for print" which is wierd cause no code change but it works fine. Odd! :-s

I was just to find a way to eliminate tables altogether using div/span just for web display purposes but for printing it would break the middle table in half (although being one big string of data) at the float tag.

I have no idea why this was happening but I was trying to find a way to do a CSS printing style sheet without actually doing one... thus rewriting tables into div/spans so basically was a 2 fold question.

But thanks again for the help!

Cheers