Simple CSS file - spacing problem 2

[beedubau]

This is my first attempt at using css.

I have 6 heading styles in my css.

I find that the <hn> element causes a CR.

As I wish to use a separate style for say an item and one for the contents like

<h1>Drawer 1 : <h2>Loose files
<h1>Drawer 2 : <h2>Accounting etc

These items are got from a database and I write the code in VFP to write out the HTML.

How can I get 2 styles on one line?

I use 3 css files varying in initial font viz size 10pt 12pt and 14pt

The one chosen in the App is copied as mystyle.css

my css file is


body {font-family: "Comic Sans MS";font-size:10pt;}


h1,h2,h4,h5,h6,h7,c1,c2,c3,c4,c5,c6,c7,k1 { font-family: "Comic Sans MS" }

c1 { font-size:150%; font-weight:bold; text-align:left }
c2 { font-size:100%; font-weight:normal; text-align:left }
c3 { font-size:70%; font-weight:normal; text-align:left }
c4 { font-size:50%; font-weight:normal; text-align:left }
c5 { font-size:70%; font-weight:normal; text-align:left }

h1 { font-size:110%; font-weight:bold; text-align:left }
h2 { font-size:80%; font-weight:bold; text-align:left; text-decoration:underline }
h3 { font-size:77%; font-weight:bold; text-decoration:underline }
h4 { font-size:80%; font-weight:normal font-variant: small-caps }
h5 { font-size:77%; font-weight:normal}
h6 { font-size:60%; font-weight:normal }
h7 { font-size:50%; font-weight:bold }


Regards

Bryan

 

[Vragabond]

What are c1-c5? There are no html tags called that, AFAIK. Also, what is h7 -- I thought h* tags only went up to h6.

The question is, do you really need to do this with headings. And, is nesting headings allowed? I would say no, but I have not tested it yet.

I would suggest you use a heading for the 'drawer' and use span inside that to define special styling for the contents of the drawer. Other than that, you could use something like the definition list to provide the styling you want.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

As I wish to use a separate style for say an item and one for the contents like

<h1>Drawer 1 : <h2>Loose files
<h1>Drawer 2 : <h2>Accounting etc

Surely you're missing the point here of headings - these aren't "items that have contents" - they're headings... so this:

<h1>Drawer 1: Loose files</h1>

and this:

<h1>Drawer 2: Accounting etc</h1>

are your headings. Whatever you want under them (paragraphs, subheadings, etc) aren't the heading - they're the content associated with that heading.

You are falling into the trap of wanting to use certain elements to determine the style of your page, when you should not be.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[beedubau]

Thanks to the above guys - I did say it was my first attempt.

Obviously I need to look at span...

Thanks

Bryan

 

[beedubau]

OK - I now understand the c1 etc are invalid. I seem to find that <span .....></span> need to be put in the actual code line.

How do I use span in the style sheet I showed above or do I have to go through my code and add the <span etc> to the examples above - ie

<h1>Drawer 1: </h1> <span ...>Loose files</span>

An example of the types of pages is at

http://beesoft.soho.on.net/beesoft/HTMLTEST/PWBETA SMALL_ExhibitCatalogue_LM.htm

You can see on here that the headings are fixed ( in a selected language ) in the app and the details are from the database.

maybe I have the wrong end of the stick?

Bryan

 

[BillyRayPreachersSon]

It depends on what you want the second part of each heading to look like. For example, if you always wanted them to be non-bold and slightly smaller, you might use a class, something like this:

h1 {
   font-size: 110%;
}

h1 span.smaller {
   font-size: 90%;
   font-weight: normal;
}

...

<h1>Drawer 1: </h1> <span class="smaller">Loose files</span></h1>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Dan's example has an extra </h1> that shouldn't be there -- the first one. The other thing is, if you will not have different span elements in the headings, you might even avoid the class:

h1 {
   font-size: 110%;
}

h1 span {
   font-size: 90%;
   font-weight: normal;
}

...

<h1>Drawer 1: <span>Loose files</span></h1>

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[beedubau]

Thanks Guys..

The use of <span> has solved my problem beautifully.


Regards

Bryan