PDA

View Full Version : New to CSS

rccorbo
03-19-2004, 09:46 PM
Hi guys. I’m looking for some help with some CSS. I’m new to all this and could really use the advise and a friendly assisting hand.

The page I'm working with is: http://www.rmrchobbies.com/CGTemplates/Item_Template4.htm

The CSS Style Sheet is at: http://www.rmrchobbies.com/Table1.css

I want to take the table with the picture of the RC car and position it using absolute positioning on the page. It should be in the upper right hand corner of the document.

I had it positioned there using tables and cells, but whenever I type my text in the left column, it moves the table with the car in it further down the page. So, I deleted the tables, and realized the proper way to do it was with CSS.

Can anybody help me with this one? Please copy and past the code and show me the syntax you recommend.

Thank you kindly in advance guys...thank god for forums and the experienced pros who contribute to them! =D

Corbin
coder_seth
03-19-2004, 11:35 PM
for starters:

ID vs. Class
You've got in your stylesheet a rule for any elements of the class "Table1", as specified by ".Table1 {}", but class should really be used for more generic rules that might be applied to many different elements. Such as a class that maybe changes the color of a paragraph.

IDs should be used for unique elements with unique rules. So, for this very specific table that you have containing the image and information, you should give it an ID in the table tag, and specify your style rule for it using #Table1 {}

<font>!?!?
DO NOT USE FONT TAGS. I understand you are new to CSS, so I won't hold it against you.. ;) But that is one of the most basic and most useful applications of CSS: to control font colors, sizes, families, etc. Never, ever again shall you use the font tag, YOU HEAR ME???? :D

I won't overload you too much at this point, and I am by no means an expert, but those are a few good ground rules.

As for how to get that table over to where you want it.. absolute positioning will probably work once you get it figured out, but you might want to consider using the float property as well.


#Table1 {
float: right;
}


For instance.. there are some key things you should be aware of with the behavior of floats and then consequently the elements that go around them.. but again, I don't want to overload you. :)

Check out http://www.alistapart.com for a bevy of great CSS articles and tutorials. Some searches on Google will also yield many valuable results. Start simple, and build on it. :)

Hope that was helpful and not just a lot of blabbing. I have a problem with that...
coder_seth
03-19-2004, 11:37 PM
i should add though, now that i think of it.. on the matter of Class vs. ID.. you might have several pages with a similar table like that, in which case using a Class might be the best way.

but when i checked this page, you had the Class rule, but no class specified on your table, so regardless of what you use, nothing would be applied!
rccorbo
03-19-2004, 11:41 PM
Ok great start! =D thanks so much!! This is making sense.
So, where would I place the refference to the .css file in the HTML file Im working with? Thats another place I get confused..exactly where the call goes. Would it be possible for you to snip some of my code and show me how its done? Im a visual learner. Cant wait to be able to do this myself :) And, you are my new hero. =D
coder_seth
03-20-2004, 09:02 AM
haw.. some hero ;)

the main way of linking your stylesheet is to put this tag in the <head></head>:

<link rel="stylesheet" type="text/css" href="styles.css" />

styles.css of course being the path to your stylesheet. there are some other ways to link your styles that have benefits and drawbacks this method doesn't. you CAN also specify

media="screen"

or other types like that, but for starters, the basics up there are good.