CSS Basics - Apologies 1st

  The Paul 09:18 04 Mar 04
Locked

Good morning I have started a new thread as I had ticked as resolved my thread from yesterday.

I didnt want to post this on the Forum as I feared being castigated as the biggest glipe ever. Then I realised that the cap fitted!!

I have rebuilt the index page 4 times. Each time I get the table inserted and the Style Sheet which gives me font-family, size, weight and background, the thing shows with the background visible both at local level and at remote level.

As soon as I add a logo and/or some text - off it goes. Gone. The code changes that Taran gave me are still showing i.e. the changes to the body> tag.

When establishing a Style Sheet, am I right in thinking that it controls the view of those elements which the sheet controls and not any additional elements such as text, logo and so on.

Once I have established a style sheet, can I add things to the page that are not included in the parameters of the style sheet - again such as additional text, logos, images and so on.

Or should I keep wearing this cap?

  PurplePenny 10:06 04 Mar 04

"biggest glipe ever"

I shall reserve judgement until I know what a glipe is :-))))))

What is it that has gone? The whole page, the styling, the background or the logo?

Many CSS values are inherited - I'm not sure quite how to explain it - elements for which you haven't assigned a style can inherit the style that you assigned to an element higher up the page heirachy.

If you have a style sheet you should be putting all the formatting in there. You can specify other styles for different elements just by defining a new style in your style sheet then referencing it in your HTML. For instance suppose that you wanted some words to come out bigger than all the rest. (I'll put extra lines and spaces in as I'm not sure how it will appear on here). In your style sheet you define what you want it to look like:

p.bigtext {

font-size: x-large;

}

That is defining the font size of all paragraphs with the class "bigtext" so in your HTML you reference it like this:

<p class="bigtext">All of this is going to come out extra large.</p>

If you miss out the "p" in front of ".bigtext"you don't restrict the style to a particular element. You could use the style like this:

<p>Most of this is normal but this bit is <span class="bigtext">very important</span> so I want it bigger than the rest</p>

There's a lot more to it than that of course and I'm not sure that it can really be explained in a few lines.

Read the W3Schools CSS tutorial, it will explain things far better than I can:

click here

It also has try-it-yourself examples where you can change the code and see what the effect is.

Hope I haven't confused things even more.

PP

  Taran 12:03 04 Mar 04

Are you still using a Dreamweaver template for your page ?

If so, ditch it for now and just start with a blank, plain vanilla HTML or XHTML page.

When learning anything new it's best to remove all the variables from the mix that you possibly can. Dreamweaver templates are all well and good in the right context but let's take a step back for now and go plain and simple.

Which version of Dreamweaver are you using ?

Can you list the text type, size, background colurs, link effects and so on you would like to use on your web ?

Who'd be a web designer ?

;o)

  The Paul 13:37 04 Mar 04

Definition of Glipe "an eegit only a whole heap worser" My definition of course.

The thing that keeps disappearing is the background image. Initially I was trying to run 2 background images - 1 in the upper table cell and one in the lower. Given my performance yesterday - I ditched that and went for 1 image for the 2 cells. As we speak - its showing on the local server but not on the remote.

There are no other elements - that I am aware of - that should prevent this from remaining in the table as background. At the moment, I have only one style sheet and have added nothing over and above the elements within the style sheet. I had added a logo and text but removed them once it went pear shaped again.

I am not using any Dreamweaver templates Taran - I always start of New > Basic > HTML and work from there.

DReamweaver MX - I have it about a year or so now.

I had been using the following: Text type - Verdana; size - default (I hadnt entered anything in the CSS Style Definition box); background colours - none set as I was using an image (background.gif); link effects - I had originally used a naviagtion bar and added some buttons to it. Once the thing fell apart I removed them all.

With the exception of the background image and the selection of the font type - Verdana - I have enetered nothing else in the CSS Style Definition box.

Guys (without gender ref) I appreciate your time and efforts to help me here. I have spent all morning downloading and printing over 200 A4 sheets of info - mainly from the link PruplePenny gave me yesterday - and I intend to spend most of the weekend cramming hard (except for watching my green boys show the Red Rose brigade how to really play rugby - I might live to regret that).

I dont believe this - there is something seriously weird going on - I have just checked on the remote server so that I could post the link - guess what - its showing again!!!!! click here

  Taran 15:27 04 Mar 04

That's odd - I'm almost sure there were some Dreamweaver template editable regions in the source code that I lookd at yesterday.

Ah, well. Never mind.

Right, to the meat of it.

You can create unique entries in a CSS file and reference them accordingly in your HTML tags for pretty much anything. The range of standard tags deal with anything that falls under that tags heading, thus a hyperlink format in CSS using the standard

a {}

tag will affect ALL hyperlinks on the page.

I often have a large selection of elements in a CSS file which control different text blocks size, colour and whatnot, and you can assign multiple background images to different parts of a table, with a few conditions.

I was going to post loads of code in here then thought better of it.

Here's an example:

click here

Now, all I've put in the CSS is a set of text instructions for the page body and some simple hyperlink effects using normal CSS tags. The two custom elements I've introduced are called .tblTop and .tblFoot which will be the table top and table foot format instructions.

Download the sample files here:

click here

If you check out the CSS file you'll find that using the tag

table {

margin: 0 auto;

}

will centre your table in the page without needing any instruction in the html tags.

You could, if you wanted, include the width, height and main background of the table [among other things] into the CSS file, so removing even more of the page HTML and this is the ultimate goal of CSS.

Here's another link to a reworked page I did for another forum member:

click here

In this one I removed almost all of the underlying HTML from the page and the formatting is all in the CSS file. This is a far more complex example where a table layout is emulated in the web page but no table HTML code is used. The hyperlink button rollover effect is all done with CSS as well - no image files used anywhere.

Everything on the page is wrapped in a couple of <div> tags and the <div> tags reference their format from the CSS file. There's a download link on the bottom left of that page for the sample files if you want to study them, but be warned, they are not for a beginner to CSS.

Anyway, look at the first example I've linked to above and see what you make of it.

One final point - I've encountered some serious problems working with CSS using Dreamweaver MX on several different computers using different versions of Windows. I'm not sure if I'm just incredibly unlucky or whether there may be a bug, sorry, make that an "idiosyncrasy" in Dreamweaver MX but I've had to clear browser chaches every few minutes and even restart the PC to get the CSS and HTML to work together. I've not had similar problems with Dreamweaver 4 or Dreamweaver MX 2004. That's why I either use MX 2004, HomeSite or the excellent [and free] HTML Kit click here

Go figure.

  The Paul 16:59 04 Mar 04

As far as I am aware (nothing concrete in that) I selected the New > Basic Page > HTML > Create option. Maybe this still gets me some basic template format from Dreamweaver. Could this be the case?

I have printed out your last thread and will spend the next few hours getting to grips with all that you have written. Thanks again for this Taran.

Thanks Taran. I'll come back later (much later) and update this thread as to any progress. I bet you cant wait!!!

  PurplePenny 20:07 04 Mar 04

I looked at your site whilst I was at work - no parchment background. Came home and looked at it here - yes parchment background. Now if I'd been using two different browsers I could have understood it but I've got Opera on both PCs.

One thing that might be causing a problem (but I don't see why it would intermittant) - you have a "." in class=".background".

PP

  The Paul 21:15 04 Mar 04

If I read you right - I have removed the .

I am sitting reading all of the 200 pages that I downloaded from the W3schools site. My head hurts but I can see a wee bit of light at the end of the tunnel.

Strange how you did and didnt see the parchment background - at least it means I'm not all together tick (Irish pronunciation)

  Taran 21:28 04 Mar 04

Go into the light....

Go into the light....

;o)

  The Paul 07:50 05 Mar 04

Seriously - I've read like an eegit and now I'm ready to do this thing.

Basically, what I have been doing is (apart from lazy and mindless) is using Dreamweaver to do ALL the work and expect to get away with it. NO thought processess from me - just a click here - a drag there and so on.

I had been opening a blank HTML sheet - setting up a CSS style for background only along with a wee bot of text formatting and assuming that I had a full handle on CSS. MORNING PAUL - real world calling.

I am going to spend the weekend (in between various rugby matches - watching not playing - far too old) reading again and establishing external style sheets and REALLY learning how to do this and then link them to my page. I like this concept of being able to control your site via style sheets and its time for me to get real and LEARN.

Guys - Go raibh Mile maith agat (a thousand thank yous in irish). This has possibly been the best thread I've ever posted - I have learned so much. I really do wish I could send you a bottle of Margaux and I know that you wont email your addresses (although I wish you would) - but this all demonstartes why PCA FORUM is probably the greatest place on the WEB.

Cheers folks - Paul

  Taran 08:35 05 Mar 04

Good luck with it Paul, and give us the URL when you're done.

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

What is Amazon Go and will it come to the UK? The store without checkouts or queues

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

Why ecommerce hasn't taken off on social media

New MacBook Pro 2016 review | MacBook Pro with Touch Bar review: Apple's expensive and powerful…