Hello everyone!

 

I'm new to this forum. This is my first post. I'm happy to now be a part of this community.

 

I own a web design company called Urban Elementz. I focus on graphic design but I'm branching out to other forms of website development.

 

I'm currently redesigning my website. It's located at urbanelementz.ca...

I have a couple questions regarding CSS.

 

Here is the main page of the new design I'm working on.

urbanelementz.ca/index2.html

My CSS file is located at urbanelementz.ca/style.css...

Please note: Only half (the top) of the main page is complete. The other half is not done yet so obviously it's only half a site at the moment.

 

I'm an old school web designer and didn't use CSS for the longest time. I'm currently learning CSS and starting to use it on a regular basis.

 

If you go to validator.w3.org (W3C Markup Validation Service) and type in urbanelementz.ca/index2.html, you will see 3 errors at the moment...

 

The first 2 errors are the "LEFTMARGIN" and "TOPMARGIN" tags. If I was to move these tags to my CSS file and remove them from the main HTML of my site, that should fix those 2 errors right? Well I tried to add those tags to my CSS file and it didn't fix the problem. It just moved my page slightly and the images didn't line up correctly with the background of my webpage.

 

As for the 3rd error (attribute "HEIGHT"), I don't see how to fix this problem and I'm not sure why that's listed.

 

As for my last 2 questions... I will be having actual text on my page that I will want to be controlled by the CSS file so it looks proper on all browsers. What is the proper code I need to control certain sections of text on my website. Obviously I don't have any text on the site (other than on images), but when I do, I'll need to know how to do this. Also, how can I control (with CSS of course) certain background images in specific tables. I know how to do that in regular HTML but I have no idea how to do this with my CSS file.

 

Any help would be greatly appreciated. I normally have my partner do the actual website development and coding but I want to educate myself so I can start doing a lot of it myself. I want to learn how to do it properly without using FrontPage or something simple like that. I do also have Dreamweaver if that's required for easy CSS changes.

Also, any feedback on how my site looks so far would be great.

 

Thanks all.

 

Evan Denis

Hi Evan,

 

Try changing your doctype on the first line of your html to this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

That should fix all your errors.

 

Regarding controlling the look of your text, i'm not 100% sure what you mean but if you just put something like the below in style.css:

 

p{font-family: arial, verdana; font-size: 9pt; color: #000000;}

 

Then that will make all your paragraphs black and arial throughout the site.

 

If you want to target a specific td to have a background then you would give the td a class like .mybackground and your css would look like this in style.css:

 

td.mybackground {background-image: url(images/myimage.jpg);}

 

Hope that helps.

I see you've also made your site using tables. If you want to design using css instead of tables i wrote an article about it here: Layout your website using css

Also, how can I control (with CSS of course) certain background images in specific tables.

 

You shouldn't be using tables for layout, is the short answer.

 

Long answer: any element can have a background image set by means of the background-image property, or the shortcut background property:

 

div#someID {
background-image: url(path/to/image.png);
}

div.someClass {
background: url(path/to/image.png) [xoffset] [yoffset] [repeat/repeat-x/repeat-y/no-repeat] [colour];
}

 

HTML Dog is a great resource for best practice HTML and CSS.

If you want to design using css instead of tables i wrote an article about it here: Layout your website using css

 

I think no need add float:left property for header, content and footer blocks in the schema you describe.

 

+1 for will to help beginners.

Hi Evan,

 

Try changing your doctype on the first line of your html to this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" etc, etc. (cant post links yet)>

 

That should fix all your errors.

 

Regarding controlling the look of your text, I'm not 100% sure what you mean but if you just put something like the below in style.css:

 

p{font-family: arial, verdana; font-size: 9pt; color: #000000;}

 

Then that will make all your paragraphs black and arial throughout the site.

 

If you want to target a specific td to have a background then you would give the td a class like .mybackground and your css would look like this in style.css:

 

td.mybackground {background-image: url(images/myimage.jpg);}

 

Hope that helps.

 

 

Thanks for you help so far!

I went ahead and changed my doctype to: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" etc, etc. (cant post links yet)

 

I ended up getting 82 errors. My website is made in FrontPage with tables & regular html and simple CSS. No XHTML or anything like that. However, I would love to rebuild my website in XHTML and just use CSS and no tables. I wouldn't know where to start though. Does Dreamweaver build websites in XHTML & CSS? If so, where do I start?

 

Also, what do you think of the design so far?

 

Thanks!

[".w3.org/WAI/PF/HTML/wiki/Table/layout_TABLE_deprecation"]You shouldn't be using tables for layout, is the short answer.

 

Long answer: any element can have a background image set by means of the background-image property, or the shortcut background property:

 

div#someID {
background-image: url(path/to/image.png);
}

div.someClass {
background: url(path/to/image.png) [xoffset] [yoffset] [repeat/repeat-x/repeat-y/no-repeat] [colour];
}

 

htmldog.com" HTML Dog is a great resource for best practice HTML and CSS.

 

Thanks a lot for your help. The coding above would be consider XHTML, correct? Time to start fresh. I need to rebuild my website without tables and using proper XHTML and CSS. I'm confused as to where to start. I think I'll start with Dreamweaver. Any suggestions would be great. Thanks!

PS - Does anyone like the way the site is coming so far? Design wise? If someone could help boost my reputation a bit that would be great. Thanks guys!