Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

first css sheet... please review? 1

Status
Not open for further replies.
tinaalice

tinaalice

Technical User
Jan 29, 2001
55
GB
Hi

I've made my first CSS sheet ... and applied it to a new template and new section of my site... I'm not too sure what I'm doing with css... and welcome any pointers .. and to be told what I'm doing wrong if you spot anything..

is the section it's applied to..

and

is the sheet

I'm a bit confused on using
.name

or #name..

what the difference is between them.. I'm sure I'm not using the css sheet to the best advantage ... and that I have been including stuff I don't need to.. to get sections to look how I want I used the .name tag ...

I'm not sure I've ordered instructions (don't know the words to use) in the right order..

My main problem was getting it to look like the font I wanted it to which was mainly sans serif in netscape 4.73.. which is the version I have to do testing..

I'm using px.. but should I be using em? .. it did not seem to be doing anything in ie when I used em..

Thanks for any feedback...

Tina Site - Journal - Ezine & Forums - + FREE FP E-Books
Articles -
 
Sort by date Sort by votes
First off, here are some cool CSS help sites:
1) 2) Now I took a look at your site and it looks like the CSS is applied right...but these are my comments:

a) You use the syntax .name

b) I would also use the font-family in the A: tags, this when the links will also obey your specified font-family and not the default...
 I have not failed; I have merely found 100,000 different ways of not succeding...
 
Upvote 0 Downvote
ah.. so If I put another command on the content between one set of tags then I have to specify everything for that as well like the hyperlinks ... in the A tag...

that right?

what do you mean about

a) You use the syntax .name

Thanks... for the links

Tina Site - Journal - Ezine & Forums - + FREE FP E-Books
Articles -
 
Upvote 0 Downvote
tinaalice, that is correct...
As for the .name you use that cuase that's the correct syntax for creating class names...you had asked weather you use .name or #name... I have not failed; I have merely found 100,000 different ways of not succeding...
 
Upvote 0 Downvote
Ah right sorry (it's Tina btw:)

that's what I was getting confused on.. is this the best way to write the sheets.. is that how everyone does it generally? or is that the most basic way? .. is there a better way to do it?

thanks Tina Site - Journal - Ezine & Forums - + FREE FP E-Books
Articles -
 
Upvote 0 Downvote
you use #name when dealing with layers as #name would target the frame that is id="name"
whereas you are used to class="name"

also try and tie together similar classes....ie if you have 3 classes with font verdana and size 12px then you can so this

a, td, H1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px;}

that's a lot cleaner than having each one lined out seperately.

so once again #name would work like such

here is the syntax for a hypothetical #name

#name {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #CCCCCC;
letter-spacing: normal;
word-spacing: normal;
border: 1px solid #999999;
overflow: scroll;
position: absolute;
visibility: hidden;
z-index: 4;
left: 20px;
top: 30px;
}

and here is some code to put in a page to test it out

<div id=&quot;name&quot;)>this is my test layer. All the dimensions for this layer are held in my style sheet and is called #name</div> [soapbox]
sleep is good
 
Upvote 0 Downvote
Ah (lightbulb moment - I hope)

LAYERS.... what ever is in the layer ....ie #name everything in that layer area (or areas covered by #name) on the page is covered by the #name tag ... instead of writing in the html <p class=&quot;blueheader&quot;>text</p> I can use this div tag... which is much easier to work with as it shows the outline (I'm using FrontPage) it shows up a outline in normal view... but that means it's an inline style? I wanted to use the style sheet as much as possible.

I'm a bit confused on your first sentence.. I never use frames...

good tip on using similar classes ... to put them together...

AH.. AGAIN.... reading your post again...

the #name ... works just like a class.. but makes a layer instead.. so what's the difference between the two? They do the same job?... I would have to put #name style into the html in order to designate what I want each particlar bit of content to do... and that goes the same with classes... so I'm not understand what is fundmentaly different between the too...

Thanks for being patient with me... your really helping me here.

Tina

Site - Journal - Ezine & Forums - + FREE FP E-Books
Articles -
 
Upvote 0 Downvote
#name will match an element id which must be unique in the document. Basically it functions the same way classes do but can't be repeated on multiple elements.

When you get into the &quot;Cascading&quot; part of CSS you'll also find that referencing an element by id is more specific than by class. &quot;They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety.&quot;
- Benjamin Franklin, Historical Review of Pennsylvania, 1759.
 
Upvote 0 Downvote
my mistake i meant to say layers not frame

and what red said is on point
It took me a while to get used to but after you get used to it I never use <p> tag anymore i just stick with Divs
<div id=&quot;name&quot;>content</div> [soapbox]
sleep is good
 
Upvote 0 Downvote
How do you get two div's to stay side by side? and to work in netscape? ... what version would you design for? 4 and above? ... I've just bought topstyle ... so hopefully I will be able to proceed at a better pace...

Thanks Tina Site - Journal - Ezine & Forums - + FREE FP E-Books
Articles -
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
761
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
393
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
314
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
347
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
133
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top