CSS

  123joey123 14:04 14 Jan 07
Locked

I am trying, for the first time to use CSS for navigation buttons in my web sites.
I can get the buttons OK but they don't animate.
I am using Serif Web Plus and tried loading the CSS and HTML codes in the body and one each in the body and head.If anyone exoert has a suggestion I'll be grateful.Thanks

  Eric10 14:48 14 Jan 07

This is a quite simple and versatile button that I have used on my websites for a few years now. You don't need any images and it is drawn on screen by the CSS.
The following goes in the <head> section or in an external stylesheet which is linked in the <head> of your pages.

<style type="text/css">
.button {
font: bold 9px verdana;
margin: 3px 0px 3px 0;
}

.button a {
padding: 2px;
width: 100px;
text-align: center;
text-decoration: none;
display: block;
background-color: #e9bc41;
color: black;
border-left: 3px #ffdc65 solid;
border-top: 3px #ffdc65 solid;
border-right: 3px #bd8101 solid;
border-bottom: 3px #bd8101 solid;
}

.button a:hover {
background-color: #d2a10f;
color: black;
border-left: 3px #907104 solid;
border-top: 3px #907104 solid;
border-right: 3px #ffdc65 solid;
border-bottom: 3px #ffdc65 solid;
text-decoration: none;
}
</style>

Then in the <body> you place the buttons where you need them with code like this:

<div class="button"><a href="link1.htm">Link 1</a></div>
<div class="button"><a href="link2.htm">Link 2</a></div>
<div class="button"><a href="link3.htm">Link 3</a></div>

The code can be made more compact by using indent and outdent for the border styles but I found that this caused the buttons to display differently in browsers other than IE so I adopted the separate border definitions.

  barryoneoff.co.uk 15:01 14 Jan 07

if you use the above code, please correct the spelling of 'Veranda' as it will not be recognised by browsers as is (in case you copy and paste).

  beynac 15:07 14 Jan 07

The code is correct. The font name is "verdana" and not "Veranda".

  123joey123 15:16 14 Jan 07

Thanks Eric10,that works nicely

  barryoneoff.co.uk 22:52 14 Jan 07

will have verdana installed on their PC, and due to it's size difference to other fonts is not a very good choice on a web site. That is why I thought you meant to use Veranda.

The problem is that when a PC substitutes it at a given size, the replacement font is too small to read.

  123joey123 09:43 15 Jan 07

Actually, I understand that verdana is the recommended font for web sites

  Eric10 11:21 15 Jan 07

Verdana is indeed the recommended font for websites as it is highly legible and is installed with every version of Windows and Macintosh OS. Since everyone does indeed have it on their computer there won't be any problem with substitution which is precisely why it is recommended. Of course you will have realised that the font can easily be changed in the code to any other of your choice, as can its size and colour along with every other aspect of the button and this is the benefit of using CSS. You can even specify your own preferred substitutes in the CSS code as:

font: bold 9px verdana,Arial,san-serif;


click here for other Windows/Macintosh compatible fonts.

Veranda on the other hand appears to be a paid-for font so is far from being common so the arguments put forward against 'Verdana' actually apply to 'Veranda' instead.

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

Sony Xperia XZ Premium review: Hands-on with the new 4K HDR phone with Motion Eye camera and Snapdr5…

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

Best laptop for design and art 2017: we test Apple, Dell, HP, Lenovo and Microsoft's best models…

CarPlay tips & troubleshooting guide: CarPlay tips & troubleshooting guide: Get the most from…