10 replies [Last post]
FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Hey I am in the process of converting a site for someone from tables to css and I would like some feedback on the code aspect of it. I have designed a few sites in css myself but seems trickier when trying to convert an already designed table based site.

Anyways any feedback would be appreciated. Mainly looking at the code part because I'm not the designer of the site. Had some trouble with the footer and had to use some empty divs so any suggestions about that would be good.

http://ejfernandez.com/gglaser_css/

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Don't "convert". Forget the

Don't "convert".
Forget the tables.

Take the content and recode it semantically.
After it is coded semantically, then look at the design and figure out how you can use CSS to implement the design.

Content first, then Design.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Thanks for the tip. I tried

Thanks for the tip. I tried to take that approach and I think it is semantically correct. Just trying to have the experienced people on here check it out and let me know if I'm doing things correctly or not.

The site is at http://ejfernandez.com/gglaser_css/

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 11 years 14 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

Did you have chance to check

Did you have chance to check with IE6?

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You have done a good job,

You have done a good job, and it's a smart looking design, if I were to point anything out it might be the use of text-indent on the main tabs which, if images are disabled, leaves nothing in their place, preferable is the overlaid approach using position absolute to place the graphic, I also am not sure I like the

....

used as a horizontal rule.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

<h3 id="welcome">Welcome to

Welcome to the website of Greg Glaser, Attorney at Law

Either that should be an h1 (on the first main page anyway) or something...

or possibly, for the first page, the images you have at the top could be the h1, and another element on the other pages where that name is not the document title. Images off is a pretty serious problem-- the alt text and the anchors are very hard to read. Either case, starting a document off without a h1 then h2 headers isn't very logical.

the menu at the bottom is bad practice. The user only finds it by pure accident (and if they are lucky enough to have a large screen like me-- even then, I didn't see it until clicking on contact). Moving it closer to the bottom of the main white content area would be good.

I'm no expert, but I fake one on teh Internets

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

@skoizumi..I have not had

@skoizumi..I have not had the chance to check it in IE6 yet. I have Vista so I have to figure out how to get IE6 on here. If anyone has access to IE6 could you let me know how messed up it is.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Hey Hugo thanks for the

Hey Hugo thanks for the feedback. I have not heard of the overlaid approach but I'll look into it. I didn't like using the

.....

as a hr either but I couldn't figure out how to use a horizontal rule that was not as wide as the column. Any ideas?

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

@Stomme..thanks for the

@Stomme..thanks for the input. So yeah my intentions were to use those images at the top as h1 & h2 but when I tried it was messing up the layout and couldn't figure it out. That is why I started with h3. I'll try to fix that situation.

The footer issue was annoying as well. I want it to stick to the bottom of the page because otherwise on short pages it goes to the off white background and looks weird. Still need to fix it in IE because for some reason you need to scroll down to see the footer. The menu at the bottom was already in the original design and I'm not looking to change it but I do agree it isn't very obvious.

Thanks everyone for the comments.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Hey Hugo thanks for

Quote:

Hey Hugo thanks for the feedback. I have not heard of the overlaid approach but I'll look into it. I didn't like using the

.....

as a hr either but I couldn't figure out how to use a horizontal rule that was not as wide as the column. Any ideas?

Since Hugo educated me on this one I guess it's time to pass it on Smile .....

You can style an hr in the css as in fact I have here (under heading and in left column).

The hr in the side bar is styled thus -

.side-hr {
 
	width: 80%;
 
	height: 2px;
 
	text-align: center;
 
	color: #a1360e;
 
	margin: 2em auto 2em auto;
 
}

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 29 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Thanks for the tip on the hr

Thanks for the tip on the hr css.

So I was messing around with it and this is what makes css so frustrating at times...So i want a dotted line about 50% of the column width and this is easy enough to do but you need to set it to a border, which is fine..but I wanted larger spacing between the dots on the border. Doesn't seem there is a way to do this in css so I made an image with a dot and a wider gap and set that to repeat-x and turned the border off for the hr. It looks just the way I wanted in firefox but stupid IE apparently doesn't recognize a background image on an hr so found out I would need to add an extra div and set the bg image to that.

One stupid thing that should be easy to accomplish turns out to be way harder than what its worth. And instead of one non-semantic code that is simple like <p>. . .</p> I have to create an image add an extra class and div for IE and then add several lines of css.

Not aiming this at u guys at all just semantic xhtml and css can be annoying at times..