Build your own Website: Session 5 
Colours and background images
Color: Black;
Background-color: White;You can also use Background image: URL(/images/Button.jpg) and you can combine the two (and others) using the Background shorthand:.Button {Background: Purple URL(/images/Button.jpg)}Why would you want both? If a browser is set to not display images, you would at least like to specify the background colour. And it means that while the image is loading you have its main colour displayed. The CSS Validator recommends the shorthand Background: Yellow None; to indicate that you want a yellow background and no image, so I've decided to go with that on my site.If you want to create your own graphics, I suggest you download the free version of DrawPlus from www.freeserifsoftware.
<a class=Button href="contact.htm">Contact us</a>
By now you've probably decided that this is all far too complicated, and I quite understand that. There are lots of options, but that's because CSS is a reaction against HTML where the browser took most of the decisions on how to display a web page. With CSS you can specify exactly what you want — and sometimes that requires a lot of options. But in the normal case you find yourself using the same few options over and over again. A quick scan through the main style-sheet of my site finds the following options that I have not yet covered in these notes:
Line-height, Width, Text-decoration, Display, Float, Vertical-align, Clear, List-style-image, Border-collapse
which really isn't that bad.
Exercises: How did I get the two different styles in the Site Map on my website?
UL {List-style-image: URL(images/LI.gif);}
UL UL {List-style-image: URL(images/LI2.gif);}
The cascading breaks down when CSS and HTML styles are in competition — CSS wins. So if your general style-sheet says Body {background-color: white} it's no use having a page with <Body Color=Yellow>. (That's not even something I've taught you, but you may see it used.) The Yellow is ignored, even though it's more specific, because it isn't CSS. What you need is: <body style="background-color: Yellow"> instead.
One more useful little example — to indent the start of every paragraph:P {Text-indent: 20px}
Menus and CSS
I said in session 3 that I would show you how to display your menu without changing the HTML used to create it. You will however need to put the main part of your webpage in a <Div> so that you can refer to each part in the CSS. Here we go.Suppose this is your index.htm file (it will actually have a few things added by WebEdit):<html>As it stands we will see the menu at the top of the page as a sequence of two links, and the body below it.
<head>
<title>Test website</title>
</head>
<body>
<div class="Menu"><a href="/">Home</a> <a href="contact.htm">Contact us</a></div>
<h1>Colin Hume's Test Website</h1>
This is the home page.
</body>
</html>
We need to add a link to a style sheet, and put the main part of the page in a division which I will call Main. You can use id or class, so long as the CSS corresponds to this.<html>Notice that if a user has a browser without CSS support (or has turned it off for some reason) this will work perfectly well as it stands; the menu will be displayed as links across the top of the page. That may not be pretty, but at least it's functional. Some people create amazing menus using JavaScript, but then a user with JavaScript turned off can't navigate to any other pages.
<head>
<title>Test website</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="Menu"><a href="/">Home</a> <a href="contact.htm">Contact us</a></div>
<div id="Main">
<h1>Colin Hume's Test Website</h1>
This is the home page.
</div>
</body>
</html>
Now we need the concept of…
Absolute and relative positioning
By default you get relative positioning — each element of a web page is positioned relative to the previous elements. You can specify absolute positioning for any element, which means it's taken out of the flow and as far as the other elements are concerned it has no effect on their positioning. Unless they overlap, it doesn't matter what order you give absolutely-positioned elements in — each one lives in a world of its own. You can also have a relatively-positioned element containing absolutely-positioned elements and vice-versa.I've discovered that the above is not quite true! By mistake I specified absolute positioning for the Body section — which was a waste of time because by default the Body starts at the top left of the screen which is where I wanted it to be. But if you then specify Margin for Body (or let the browser use its default margins) you find that an absolutely positioned element (which of course appears within the Body of the HTML) also inherits these margins. I don't see why, but both Firefox and IE7 do it so I'm willing to believe it must be correct.
If you want to position absolutely within a block, the containing block must be specified as relative rather than defaulting to static.
In the CSS, the first thing to do is to take the Main division out of the sequence and put it where we want it. We also remove the margin round the page as a whole, so that the menu can be at the extreme top left of the browser window. And we might as well specify a font and foreground and background colours for the whole page, so our first shot at style.css is:Body {This says that the Main division has a space of 120 pixels on the left, to allow for the menu, and padding of 8 pixels on all four sides so that the text has a slight gap round it. I want to see where the division is, so I've temporarily specified Background-color: Green as well. Don't be tempted to use any of the Border attributes; they won't do the same job!
Margin: 0;
Padding: 0;
Font-family: Arial, Helvetica, Sans-serif;
Color: #000000;
Background-color: #D0FFFF;
}
#Main {
Left: 120px;
Top: 0;
Font-size: 1.2em;
Position: Absolute;
Padding: 8px;
Background-color: Green;
}
Now we want to make the menu look like a menu rather than a sequence of links. We might also want to specify the font size, a foreground and background colour, and perhaps a border. Let's start by adding one more section of CSS:.Menu {That defines the menu as a whole; now we need to talk about the individual elements, the <A> tags which specify the links.
Width: 120px;
Background-color: #FFFF00;
}.Menu A {Again the padding means that the words in the menu aren't slap up against the edge of the menu. I've also put an orange border round each item.
Padding: 4px;
Border: 1px Solid #FF9000;
}
This will position the menu at the very top left of the screen. If you want it anywhere else you need to specify Left and Top values, and therefore you also need to specify Position: Relative or these will have no effect.
If you used <Menu> rather than <Div Class=Menu> you need to specify Menu in the CSS rather than .Menu, and you need to add Margin: 0 to remove the indenting which a list usually has.
When we try this out we find that we don't necessarily get each menu item on a new line, and that the item isn't clickable unless we position the mouse on the text itself. We could get round the first problem by putting a <Br> tag between each menu item in the HTML rather than a space, or by adding non-breaking spaces to the menu text, but there's a better way which involves another CSS property and another concept. We need to add another line to the Menu A entry: Display: Block;
Block and Inline Elements
This is an area I have trouble with! The Display property has (currently) 17 different values, but I'm only going to mention Block, Inline, Inline-block and None. An Inline element is one which flows sequentially; a Block element is one which breaks the flow. For instance <B> and <I> are inline elements — you can have a sentence containing bold and italic portions and the sentence will still be on one line. <Table> is a block element — a table has a blank line before and after it — which is why you need trickery like putting two tables within a third table to get the two tables lined up side-by-side. Every HTML element is one or the other — but you can treat it as the other one! Each type seems to have limitations, and I don't understand all the ramifications. (In fact I don't think all this was properly thought out, and later they had to introduce Inline-block which is a sort of hybrid and can sometimes save you when all seems lost!) In this case we are talking about an <A> element, which would normally be an Inline element — you can have several <A> tags on the same line. But magically, by telling CSS to treat it as a Block element, each item appears on a separate line and the background colour now applies to the whole of the menu item.(I fear that's not the whole story, and sometimes you have to specify a Width as well.)
And what about None? This does what you would expect — it doesn't display the element at all! You might think that's totally useless, but there are cases where it's very handy, particularly when printing out a web page — I'll cover that later.
It looks OK, but when we hover the mouse over the menu item it does the default action for a link — on my machine this means it changes colour and is underlined, the IE default (which the user may have changed). On my laptop the menu items are underlined even without the mouse hovering. And the user just might have changed his link colour to the same colour as your menu background, in which case he won't see anything at all in the menu! We would like to change both the colour and the background colour, and not make it underlined. So to play safe we add: Color: #000000;to the Menu A section and a new section:.Menu A:Hover {This means that when the mouse is hovering over the specified item the specified options will be applied. For instance you can enlarge the font size, which I don't like at all as it causes all the following menu items to jump down, and various other tricks. A:Hover (no space after the colon) is known as a Pseudo-class Selector, and there's also A:Visited for a visited hyperlink (you've recently viewed the page it links to), A:Link for an unvisited hyperlink and A:Active for a hyperlink the user has just clicked. Given this, you can do what I do for the purple buttons on my Home Page (not the menu itself) — the background becomes lighter when you hover the mouse over a button (a different image) and when you click a button it gives the impression of being pressed in (dark border at top and left, and the button shifted the same amount down and right while keeping the total size the same so that nothing else moves).
Color: #808080;
Background: #E6AAEC None;
Text-decoration: None;
}
If you want to learn much more about designing menus using CSS, there's a good article at http://www.sitepoint.com/article/navigation-using-css that will teach you a lot — and it explains things gradually so as not to scare you off.
When I first ran this course I was using the <Menu> tag for the menu, and I found there were several differences between the IE display and the Firefox display. Now I've changed that and various other things, and I suspect Firefox has also changed, and the differences are not so apparent. But they do still exist, and I'm sure the same applies to other browsers that people may be using to view your website. What's going on? Well, if you find differences between the way browsers “render” a web page, it may be that the specification allows browsers some flexibility on some points, it may be that your HTML is invalid, but it's more likely that IE is doing it wrong. Microsoft probably thought that since IE was the dominant browser they didn't need to worry too much about the official standards. They've now realised that this was a mistake, but there are vast numbers of web pages out there which were laid out according to the way IE worked so they can't just change the rules. Instead they've made use of something which was not designed for the purpose at all…
DocType
DocType (Document Type) is a special kind of HTML tag. It starts with an exclamation mark just to tell you it's special, and it contains just elements (some in quotes) rather than pairs of the form keyword=value — a strange beast indeed. Here's an example:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">I don't want to explain it in detail — just accept it! It says that the HTML in this document is version 4.01 Transitional. There is also version 4.01 Strict, which means you promise not to use various tags which used to be acceptable but are now frowned upon, version 3.2, and several others. In fact the one I now use and recommend is much simpler:<!DOCTYPE HTML>You don't need to worry about what it's supposed to mean, and you don't need to do much to set it up — just go into the WebEdit Options menu and you'll see a DocType option which by default is set to “None”. Click on “HTML 5” and any time you validate a web page which does not have a DocType the above line will be inserted at the top. If there's already a DocType it will be left unchanged, so if you're editing someone else's web page which specified “HTML 4.01 Transitional” you won't mess this up. The menu also gives a couple of “XHTML” options which I will probably not cover. I recommend that you always use this DocType. If you're not using WebEdit, just paste the above line into each web page at the very top.
My understanding is that DocType was originally designed for validator programs, so that they could check that your web page really did contain the sort of HTML you said it did. But Microsoft and other browser writers now use it as an indicator. If you have no DocType, or it's less than 4.0, IE runs in what is commonly called Quirks Mode — in other words its behaviour is sometimes quirky rather than following the rules. Other browsers have now copied this approach, since people expect browsers to display pages the way IE does! You can read about Quirks Mode in many places, including en.wikipedia.org/wiki/Quirks_mode. If you use 4.01 Transitional, 4.01 Strict or 5, you're telling IE to follow the standards properly. (Actually Firefox uses something called “Almost Standards Mode” but let's not worry about that.)
So put in HTML 5 and display the page again. You may find slight differences, but it means that other browsers should display it in the same way. One difference which may catch you out is that in HTML 4.01and 5 Class and Id values are case-sensitive — in other words if you have Class=Menu in your HTML and .menu {---} in your CSS the CSS will be ignored. There is a check for this in the Web | Validate HTML+CSS routine.
This next section is no longer true!
Another difference worth mentioning is that in IE without a DocType the Center tag will centre a table but will not center the individual table elements. (I don't think this is true on newer versions of IE.) This may well be what you want, but the standards say that it should centre everything so when you add the DocType that's what you'll get. And it's no use switching to <Div Align=center> — that does the same. One way round this is to use <TR Align=left> for each data row:
|
|
A better approach if you really want all your tables centred is to add style-sheet elements:TD {Text-align: Left}I don't understand why you need the second line, but without it Firefox, IE and Google Chrome all left-justify the header cells as well as the data cells. Nevertheless this is a better approach, since you just do it in one place and it works on all your tables. But I actually do something quite different. I specify
TH {Text-align: Center}
<Table Class=C>
and in my style-sheet I define this as
.C {
Margin: 0 Auto;
Display: Table;
}
which does the centring without using the Center tag which the purists object to. You can see it for instance on swad1.htm. The (invisible) container is centred, and the graphic and the table of contents are within that.
If you've used the <Menu> tag you need to switch off the bullet image for the menu by:Menu LI {The first property sets the List-style-image to None and the List-style-type to None. Yes, you need to specify both for IE7 even though you shouldn't have to. Yes, Firefox needs Menu LI rather than just Menu. I can't explain this; it's just what I've discovered. I also struggled for some time to find out why Firefox displayed the start of the menu off the left of the screen, and eventually found it was the Padding: 4px which was doing it. Again I don't know why, but I moved this from the Menu to the Menu LI element and that solved the problem. But as I've said before, the fact that I've had to struggle with it means that you can profit by my mistakes.
List-style: None None;
By the way, if you're changing your CSS and then trying to see what effect the change has, the best approach in WebEdit is to press Ctrl [F9] which will save the current file (the style sheet) and redisplay the current HTML page just as it was. Now press [F5] to refresh the screen, and you can see exactly what happens.
On my site the main menu is across the top, so I don't want Display: Block. I used to use a silver background with top and left border white and bottom and right border black to give a three-dimensional button effect. Border: Solid 1px #000000;Now I'm doing some different clever stuff which I have no intention of explaining!
Border-left-color: #FFFFFF;
Border-top-color: #FFFFFF;
Some of my pages (including the Home page) contain a lower-level menu, and for these buttons I use a background image, and change the opacity when the mouse is hovering over the button. The choices are endless.
Updating the menu structure
I think I've now given you enough information about creating menus. Finally, let's look at the practicality of having the menu on every page. With WebEdit it isn't a problem. Suppose you start with four pages, each containing the same menu. All of the messing about with the display is in the style sheet, so you're not constantly needing to change four web pages to keep them in step. But now suppose you want to add a fifth page. What I would do is save one of the existing pages under the name of the new page, so you have the basic structure including <Head>, <Body> and either <Menu> or <Div Class=Menu>. Now make the changes to convert it to the new page — different <Title>, different <H1> and different text and images in the body of the page. Check that this page displays the way you want it to. Now update the menu in this page to add a link to this page. And now click Web | Update Menu. The menu will be displayed in a dialogue box for confirmation, with the message “Copy this menu to all HTML files?”. Click “OK” and the program will scan through all the web pages in the folder. If it finds a <Menu> (or <Div Class=Menu>) tag it replaces the contents by the menu it showed you; if not it does nothing. It will then list the files and say which it has updated and which it hasn't. Easy!A further improvement is that you can indicate the current menu item by giving it a different colour and/or background colour. Web | Update Menu looks for the current page in the menu, and if found it adds Class=NoMenu. You can ignore this and it will have no effect, but if you wish you can specify .NoMenu in your CSS and give it whatever settings you like. I used this on the original version of the Settlement website, but I had problems! Every page has a logo, which I had included in my Menu structure, so the HTML was
<div class="Menu">and the CSS was
<img src="images/Logo.gif" alt="Letchworth Settlement"
title="Letchworth Settlement" class="Logo" width="94" height="97" />
<p />
<div><a href="/">Home</a>
General<a href="info.htm">General Information</a>
<a href="directions.htm">Directions</a> - - - etc..Menu {
Position: Absolute;
Left: 10px;
Top: 10px;
Width: 140px;
Font-size: 85%;
Font-weight: Bold;
}
.Menu .Logo {
Display: Block;
Background-color: #D0C7FC;
}
.Menu div {
Padding: 2px;
Border: 2px Solid #000077;
Background-color: #FFFFFF;
}
.Menu a {
Color: #000099;
Background-color: #bbbbff;
Font-weight: Bold;
Text-decoration: None;
Width: 100%;
Display: Block;
Border: 1px Solid White;
}
.Menu a:hover {
Color: #ddddff;
Background-color: #000099;
}
I added a CSS section:Div .NoMenu {and this worked on Firefox and Chrome — but not on IE7. Remember that it's the most specific CSS element which is chosen if there's any conflict. It seems the browsers have different opinions about which CSS element is the most specific: Menu A or Div .NoMenu (and maybe you can't blame them). I tried .Menu Div .NoMenu thinking that three levels of nesting would be more specific than two, but this had no effect. Eventually I decided to “tell it like it is” — the logo is not part of the menu so I put it into a separate Div. I also had to move .NoMenu before .Menu A (and for security put .Menu in front of it), and I could remove the <p /> and the inner Div, so my final HTML is
Color: #bbbbff;
Background-color: #000099;
}<body>and CSS
<img src="images/Logo.gif" alt="Letchworth Settlement" title="Letchworth Settlement"
class="Logo" width="94" height="97" />
<div class="Menu"><a href="/">Home</a>
General<a href="info.htm">General Information</a>
<a href="directions.htm">Directions</a> - - - etc..Logo {
Position: Absolute;
Left: 10px;
Top: 10px;
Display: Block;
Background-color: #D0C7FC;
}
.Menu {
Position: Absolute;
Left: 10px;
Top: 120px;
Width: 140px;
Font-size: 85%;
Font-weight: Bold;
Padding: 2px;
Border: 2px Solid #000077;
Background-color: #FFFFFF;
}
.Menu .NoMenu {
Color: #bbbbff;
Background-color: #000099;
}
.Menu a {
- - -
If you have problems…
CSS is not easy, and it's very frustrating when you can't see why something isn't working. If you've struggled and got nowhere, it's time to get some advice — either by emailing me or by studying a site that does what you want. You may know a site that has a menu down the left-hand side which changes colour when you move the mouse over it, and is pretty much what you want. Grab copies of index.htm and the style-sheet and put them in the directory where you're building your website (probably renamed to avoid overwriting your own files). Remove all the unnecessary stuff, until the HTML will validate correctly and display as you want it to. Now there are two ways to go. One is to change the new style sheet until it does exactly what you want and then use it to replace your existing style sheet. The other is to copy bits of the new style sheet into your existing one until the existing one does what you want. Generally I recommend the second approach, though I have used both methods many times. Back-up your work frequently using the File | Save as… command, and try to make sure that at all times you have a working version. Think clearly — you may need to write down the steps you take. All of this is standard practise for computer programming, but it may be your first experience of it.If you want a menu where hovering on the top-level item displays a lower-level menu for that item, have a look at http://www.howtocreate.co.uk/tutorials/testMenu.html (which also has links to other sites near the bottom of the page) or search the web as I did. In fact I've now done this for a client, and you can see a simplified version of my code at build5M.htm.
Homework for this session: Change your menu so that it looks like a menu. You might then want to try adding an additional page and updating the menu the way I've described above.