1st CSS site finished. Plz provide suggestions

Give me some CSS pointers.

[wetinkpro]

I've recently finished a couple of classes on webdesign and learning CSS. I went back to my sites photoshop files and resliced them with the intent of re-coding the site in CSS.

Plz take a look at the code and give whatever suggestions you can to help me improve my site and knowledge of CSS.

Here is the CSS docs:
<snip>

A few things I'm looking for direct input on:

1. How to make my sliced images part of the background? Right now if you right click on them its like they are regular images and not the backgound of the site.

2. The Education Page; How can I get rid of the space between the title of the degree and the school information (single space). Is that HTML code or something I need to do in CSS?

Any suggestions would be helpful. I'm excited about learning this new way of web design.

:)

[edited by: engine at 9:59 am (utc) on April 1, 2005]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[scottmack]

>>>>>> How can I get rid of the space between the title of the degree and the school information (single space).

The title of the degree is an H1 tag. H1 (and all block elements have a margin property; make the margin-bottom for h1 0px or whatever you like.

[wetinkpro]

Thanks Scott. noted.
Anyone have any other suggestions?

[createErrorMsg]

Please see the CSS Forum Charter [webmasterworld.com], specifically the first item under "Posting CSS & HTML Code" which states...

* We are here to help one another, but we can not, and will not do site or sheet reviews.

Also, see the section on "Linking" in the same document.

If you have any specific questions regarding your css layout, however, please post the code and we'd all be happy to help. :)

cEM

[edited by: createErrorMsg at 4:38 pm (utc) on Mar. 30, 2005]

[wetinkpro]

I've been to CSS zen garden and other examples on the charter page. I'm just trying to learn as much as possible.

To be specific then can someone tell me if I need to adjust the CSS or the HTML to make the sliced images part of the background and if so, what code to use.

Thanks so much as I just found this site today and find it to be very informative.

sorry about breaking the rules on my first post.

[createErrorMsg]

1. How to make my sliced images part of the background? Right now if you right click on them its like they are regular images and not the backgound of the site.

The short answer is that you identify the element on which the image should be the background and add this to the CSS rule declaration for that element...

background: COLOR url(PATH) VERT-POS HORIZ-POS REPEAT;

example:
background: #fff url(images/main.gif) top left repeat-y;

COLOR is the background color to show through transparent portions of the image, or places in the element where the image does not reach.
VERT-POS can be a keyword (top, center, bottom) or a percentage or a unit. It positions the image within the confines of the element.
HORIZ-POS can be a keyword (left, center, right) or a percentage or a unit. It positions the image within the confines of the element.
REPEAT can be repeat-x (to tile horizontally), repeat-y (to tile vertically), repeat (to tile in both directions) or no-repeat (for no tiling).

Any or all of these properties may be applied. The above is a shorthand property which combines several properties into one. Split up, it looks like this...

background-color: COLOR;
background-image: url(path/to/image.gif);
background-position:VERT-POS HORIZ-POS;
background-repeat: REPEAT;

For more information see the W3 specs on the background [w3.org] property.

That's the mechanics. The trickier part is making sure that the sliced peices fit together when set as backgrounds. For that you'll just need to play around with it some until you get a feel for what's going on. One important thing to remember is that the background image will continue into any area set as padding, but it will NOT fill any area set as margin between elements. So if you set images as backgrounds and have gaps between them, it's probably margins getting in the way.

cEM