CSS not standard on pages

  The GnoMe 19:30 06 Dec 03
Locked

Hi all, I have done my site click here

with all your help, but I have now added css style sheets to it, external.

I have used a few kinds, one for the text, one for the main titles, one for the smaller titles and some for the hyperlinks.

All of them work fine exept the ones for the links, i set them to be, normal-normal font i use for the rest of the page, over-one font size down and itallic, used-the same as normal

but if you see the links and when you hover over them, some of them are going smaller in font and itallic, some of them are merely going itallic.

How can i set them as standard, even though the whole site is using the same css sheets for the links, i dont understand this

i use dreamweaver, and have just got my head around css style sheets.

Any help is greatly valued


G

  Sir Radfordin 19:44 06 Dec 03

Looking at the source code I'm not sure you've got the Style sheet set up right.

You seem to have 5 style sheets on each page - you only need one and put all the styles in that one .css file.

If you look at ahover.css you will see the following is in there:

a:hover {
font-family: Verdana;
font-size: 12px;
font-style: italic;
color: #0033CC;
}

whereas alink.css is

a:link {
font-family: Verdana;
font-size: 14px;
color: #0033CC;
}

So when you hover your font is changing down by 2px and becoming italic. This is why it looks odd.

  Sir Radfordin 19:47 06 Dec 03

click here for proof you got the CSS bit right just need to tidy it up!

  The GnoMe 19:58 06 Dec 03

so can you create lots of different styles and store them ALL in the one css sheet?

can i do this with the titles,text,links etc and just keep them all in the one sheet, if so how can it tell the difference between the styles?

I mean if i work out how to create the title, text, links etc in the one sheet how do i set it so that the title will be the title etc, if you know what i mean, i am sorry to be confusing but at the moment i created the css sheet for title, then highlighted the title and click the css sheet to apply it, same with the text etc

thanks

G

  Taran 20:25 06 Dec 03

You can actually run (and link to) more than one CSS file per page.

It can be efficient in certain circumstances but I have to admit that I rarely do this and I personally prefer to have everything in one place.

Looking at your source code I'm not sure you have the CSS concept fully in hand.

Your page still has lots of HTML tags it doesn't need if you are using CSS to its best advantage and in its most efficient manner.

Your page still has lots of <font color="#999999" size="2" face="Verdana, Arial, Helvetica, sans-serif"> and <body bgcolor="#FFFFFF" background="images/backg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" type tags and you can control all of this using CSS.

You can set all of your page elements and reference them as class or id so that you end up with almost no HTML tags in the page at all and certainly none of them are for formatting.

If you run into problems, give me a shout and we'll see if we can work it out for you. I love CSS but mainly stick with CSS1. Most browsers fully support it but only partially support CSS2.

Put some thought into setting up your page background colours or images, header, footer, font styles, hyperlink styles, margins and so on into the CSS.

I put my table effect layouts, 3D navigation buttons and all page formatting into a CSS file so my page body code ends up being a series of <div>, <li> and <p> tags for the most part with no additional formatting required.

Without being cheeky, if you don't use CSS to remove as much junk from the page as you can (in terms of all that unnecessary HTML) then it's not really worth using as a half way house.

Post back if you get stuck.

Regards

Taran

  The GnoMe 20:30 06 Dec 03

Your advice is always spot on, i dont really think i have the concept.

so the css can replace all the formatting in my site?

How can i create it with tiles, text etc and then get rid of the html?

Could you be able to help me sort it out? please?

  Taran 20:40 06 Dec 03

I'm going offline for the evening in a moment but I'll happily help you with it.

How about I swipe a copy of your index page offline tmorrow morning and I'll see what you've done with your CSS files. I'll put the whole lot into one file, remove the surplus and contradictory HTML from the page and you can see how it all goes together.

There isn't much you can't style on your page using CSS but you have to be careful with it. Too many people go all gooey over it and run amok. Trouble often ensues.

In essence, you create all the formatting elements for your page in the CSS file and reference them in your HTML tags like this:

<div class="">

<p id=""></p>

<div>

You no longer need <font> tags and similar.

It's superbly efficient, but you have to be very careful and very thorough.

I'll be back online with a result for you tomorrow.

Regards

Taran

  Sir Radfordin 21:02 06 Dec 03

"It's superbly efficient, but you have to be very careful and very thorough"

Too right do you!

To what extent does using CSS defeat many of the advantages of WYSIWYG editors for basic sites? Having been someone who has blagged my way though web design (actually make that anything IT related) I frequently find out there is a better way of doing things. I've also ended up using a real mixture of things. Even though I've used DW for nearly 4 years now I still revert back to notepad for some stuff!

  Taran 21:17 06 Dec 03

Just before I go offline, I wrote a new site over this last few days using HTML Kit for the pages and CSS file (to CSS1 specification).

The CSS emulates a table layot with left, right and main centre body areas, a header, footer, copyright, oh, and the 3D navigation buttons over the top of the page are all done with CSS as well, and the whole lot degrades 100% back to version 4 browsers.

The page content HTML (well, XHTML actually) between the body tags is as follows:

<h1></h1>

<p></p>
<div>


<ul>

<li><a href= ></a></li>
<li><a href= ></a></li>
<li><a href= ></a></li>
<li><a href= ></a></li>
<li><a href= ></a></li>
<li><a href= ></a></li>

</ul>
</div>

<div>

<div></div>

<img src= />

<br />

<p></p>

<br />

</div>
<p></p>
<a href= /></a>
<a href= /></a>

And that's it.

The only things I've missed out are the class="" and id="" CSS references, but that's all the page has as far as underlying code is concerned yet it contains 3 images, a six button navigation bar, 4 paragraphs of text, a left hand subtitle column and a floating right hand column containing an image.

It's an entirely fluid layout and as fast as you could imagine.

I like CSS....

T

  The GnoMe 21:22 06 Dec 03

thanks very much i eagerly await you help

thanks

  Sir Radfordin 21:50 06 Dec 03

:| I'll add it to that ever growing list of things I need to learn properly at some point!

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…