10 replies [Last post]
BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

Here is a link to the page I want to convert to mostly CSS:
http://www.mrbobdouglas.com/support.php

I plan to do this for all of my pages. Problem, I am a little new to the more advanced CSS.

This is what I have modified so far:
http://www.mrbobdouglas.com/temp.php

Using this sheet:
http://www.mrbobdouglas.com/scripts/temp.css

Can I condense my code at all? Would it be too much of a bother to do this? Any suggestions where to start to get the code to use for the tags for css?

Thanks.

An example from my page that I want to change is:

<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
	<td rowspan="10" width="50%" height="100%" background="images/line1.jpg" style="background-position:right top; background-repeat:repeat-y"></td>
	<td rowspan="10" width="1" bgcolor="#000000"></td>
	<td valign="top" height="100%" bgcolor="#4F555B">
	<table cellpadding="0" cellspacing="0" border="0" height="100%">

BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

HTML to CSS

Anyone gunna help? lol

:oops:

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HTML to CSS

Hi BobbyDouglas,
Nice looking site, are you sure you want to mess with it Smile

Here's some ideas to get you started.
Remove the main containing table and replace it with a div.
On either side of the center table and within the new div place a another div for the bars down the side set the width and height plus background-image.
so you would have something like:

<body>  
<div id="container">  
   <div id="left"> </div>  
    <table...  
<div id="right"> </div>  
</div>

#left{width:?; height:?; background-position:right top; background-repeat:repeat-y; background-image:url(images/line1.jpg);}   
#right{width:?; height:?; background-position:right top; background-repeat:repeat-y; background-image:url(images/line2.jpg);}   

I hope thats something to start with. If your keen to have a go at it use absolute paths for images etc on the temp version so we can copy it locally and easily try things out.

BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

HTML to CSS

hmm, I don't really follow this... I am a newb to css. I know the basics, but still learning this more... advanced stuff.

If you could explain some more, and try to use exact code, that would be much helpful. Hope I am not asking too much. Maybe if you can sit down with me for a bit and go over step by step what I can do for one page. In return I will do a favor for you... Like make a website or something. Need hosting? I can get you my hosting package on my site for $35.00 for your first year, domain name i still included.

If you need flash work too I will trade for that. Let me know what ya can do to help.

Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HTML to CSS

Hi BobbyDouglas,
Thanks for the offer, I'd be happy just with a link back to this site so we can help others. I will be happy to guide you when I am available and hope others will join in when they can.

It's would be best to build the site up from the ground and work our way up.

The site seems to be broken up into three columns with the center split into two. So you would declare 5 divs and a footer something like:

<div id="left"> </div>  
<div id="content">  
   <div id="leftcon"> </div>  
   <div id="main"> </div>  
</div>  
<div id="footer"> </div>  
<div id="right"></div>  
Then you just write the css to specify the widths etc of the columns.
Because we have use id's we put a # in front of the name like:
  
#left{width: 20% ; ...} 
Now you have to decide if you want to use percentage or fixed values for widths and if you want to float the columns.

Maybe you can do this much and put up a test page or let us know where you have problems.

BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

HTML to CSS

Test page: http://www.mrbobdouglas.com/test/index.php
Normal page: http://www.mrbobdouglas.com/support.php
CSS: http://www.mrbobdouglas.com/test/scripts/main.css

I still need to add

<td rowspan="10" width="50%" height="100%" background="images/line1.png" style="background-position:right top; background-repeat:repeat-y"></td>
	<td rowspan="10" width="1" bgcolor="#000000"></td>
	<td valign="top" height="100%" bgcolor="#4F555B">
	<table cellpadding="0" cellspacing="0" border="0" height="100%">

to the css.... but the question is....how?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HTML to CSS

Hi Bobby,
I just noticed a typo in my last post, it should have been:

<div id="left"> </div> 
<div id="content"> 
   <div id="leftcon"> </div> 
   <div id="main"> </div> 
   <div style="clear:both;"></div>
   <div id="footer"> </div> 
</div> 
<div id="right"></div>  

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HTML to CSS

Hi Bobby,
Here's a page to help you get going.
I have used absolute paths for the images etc so we can easily have a look.
There is still lots to do but at least its something to work with.

BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

HTML to CSS

How hard is this going to be? It seems like there is going to have a lot of time involved into getting this to work. Should I not bother with it?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HTML to CSS

Hi Bobby,
It really up to you.
How hard it will be is determined by many factors, such as your knowledge, time available, and the results you are after.

If you have time available you will learn much that will be useful at a later date.

Ask yourself why you want to do it and what you hope to get out of it.

BobbyDouglas
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

HTML to CSS

I hope to fix my code to look a bit nicer and more organized using CSS. But I am fairly new to it. So its kinda hard. Whats my next step on my site?