13 replies [Last post]
Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Hi all

I am part of the staff for www.startrek-gamers.com it's a fairly chunky site and has a LOT of tables which give it the layout. The site itself is able to strech out and look the same in almost all resolutions from 1024 x 768 up. However, the underlaying code for the site is massive.

None of the sites staff have any experience with CSS. Theres some elements of tacked on css in the header which was added by people on our forums who helped us out.

How hard would it be to convert a site of this size so it looks exactly the same as it does just now now and is still able to sort itself out with most major screen resolutions?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 20 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Converting an huge site to CSS

Acutally as table-based layout goes - the site isn't all that bad. There is no nesting of tables 4 deep and the like. The basic layout is 4 boxes: Banner, left column, content and footer. There are several layout styles for content items depending on whether they are in the left column or main content areas. It would not be a big redevelopment effort to create the basic template but if you are using a content management system I would be more worried.

My advice is to develop the basic 4 box template using a floated left column (and check out Tony's clearing fix) You will need to do a little work with the sliced images for your banner, although you may be able to handle combining the upper right images to be used as a background.

I'd be interested in what other folks think but the bottom line is - it's very doable and the code would clean up a great deal.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

Yeah, the whole site is done based off a single template in dreamweaver. I tried using dreamweaver MX 2004 and the CSS bits in that but it was justt oo confusing.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Converting an huge site to CSS

Don't bother with dreamweaver, it's CSS editing is [email protected]

Open the page in Notepad, read a few tutorials, and have a go at rebuilding one page in CSS.

Verschwindende wrote:
  • CSS doesn't make pies

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

Well, i went from DreamWeaver MX to the old DreamWeaver 4 and just messed around. I got all the font tags removed from all the pages and moved the existing CSS to the external file. Seesm to work and its cut a few kb off the coding of the page Smile

I'm gonna get a book from the library and read up on CSS code Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Converting an huge site to CSS

That's a good start. Keep with simple things like that, and you'll shave loads of filesize off your HTML.

Verschwindende wrote:
  • CSS doesn't make pies

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

The effetcs are now starting to show, about 10k shaved off most pages and in some of the long "how to" anchor linked pages more than 50k shaved off Smile

Should have done this months ago.

Now all i need to do is figure out how columns work and i can get rid of the tables Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Converting an huge site to CSS

Divs and floats.

Verschwindende wrote:
  • CSS doesn't make pies

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

Youve lost me Sad

But ill figure it out Smile

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 20 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Converting an huge site to CSS

Using the CSSCREATOR on this site, here is a slightly modified example that would accomodate your macro layout. That is what the 'head was talking about with the divs and floats bit.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

Coooool

Now that would do the base template, but how would it handle how i done the menu? div inside divs with columns? Ive attached the design view of the main template and one of the menu blocks.

*edit...ok attachement didnt work...lmao

http://www.startrek-gamers.com/site.zip

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 20 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Converting an huge site to CSS

You would basically put your menu into the left column but strip it down to the basic list without any of the < i >; and <em> tags. That could be handled with contextual selectors, something like:
#leftmenu li {list-style-type:none;font-style:italic;}

The 'New" heading should probably be styled with a <h3> tag or something like that. This is an opportunity to simplify your code a great deal and also make it semantically correct. Using a few basic classes you can replace a great number of tables with divs that are properly margined and padded for your purposes.

You might also consider changing the backgrounds used for your menu to something that is more in a PADD style (Personal Access Display Device for you non-trekkers out there) but that could be phase II since it would mean creating new graphics. I also think you should make your menu narrower and place your header google ad somewhere different. These two actions would allow you to display without a horizontal scrollbar down to 800px screenwidths. I don't know if that is a priority for you but there are still people stuck in the 20th century. :roll:

Once you start the process of simplification your entire site will become more clear as you see more content in relation to the presentation. It is a worthy project and you are to be commended for taking it on. This forum used to use a table-based template but Tony, our illustrious leader Tongue , felt you shouldn't have a table based CSS-forum and undertook the process of recoding it to be CSS-based. There is a thread detailing this somewhere, I'll try to track it down.

Cheers,

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Katherine
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2005-05-19
Posts: 7
Points: 0

Converting an huge site to CSS

That would be handy.

The site's changed a lot since the old days of it being LCARS based, making new graphics isnt a problem, that can be done in a few hours with good old Photoshop and ImageReady Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Converting an huge site to CSS

I love the LCARS design of things . . . there's even a CSS Zen Garden submission of LCARS.

Verschwindende wrote:
  • CSS doesn't make pies