Our Logo Image

Fernhill Linux Project

A non-profit organisation who promote and encourage the use of Linux based operating systems & open source
software by providing free IT solutions, software, support, guides and advice.

Home
About Us
About Linux
Services & Support
Guides & How To's
Software
Linux Distros
News
Links
Feedback
Donations
Contact Us
Facebook
Forums


CSS Menu Buttons


  This guide describes how we created our menu buttons using CSS ( Cascading Sheet Styles ).
It is intended to be a simple, useful introduction to CSS for beginners.

In order to create menu buttons for your website like the ones we have used on the left, you will need to write or find a CSS script to style those buttons. The CSS script can be inserted in to your web page source code between the head tags, in Kompozer click the 'Source' button, then navigate to the closing </head> tag and insert the code above it. You can also upload your CSS script and reference it's location between the head tags. Here is the script we used.

<style type="text/css">

a.menuitem
{
display: block;
border: 1px solid black;
border-radius: 5px;
background-color: #C0C0C0;
color: #333333;
text-decoration: none;
margin: 0px;
padding: 5px;
text-align: center;
}
a.menuitem:hover
{
background-color: #CCCCCC;
color: #000000;
text-decoration: none;
border: 1px solid #333333;
}
</style>




This section styles the 'menuitem'.


change the border width & colour
change the rounded corners
change the background colour
change the text colour


change the padding
-------------------------------------------------

This section styles the 'menuitem' when hovered on.


change the background colour
change the text colour

change the border width & colour

Next you need to insert the html. We did this by creating a table, and then inserted the html in to each cell using Kompozers 'insert html' option, below is an example of the code we used, you need to edit the bold sections to suit your pages.

<a href="http://fernhilllinuxproject.com/index.html" class="menuitem">Home</a>



Here is a short video of how to insert & edit the above CSS & HTML in to your website using Kompozer.



Kompozer also has a graphical CSS editor, which can be accessed by clicking the CSS icon on the top menu bar.
You can then easily edit the styling through a point & click interface.


kompozercsseditor.png



Fernhill Linux Project would like to thank BPWebSolutions for their help and support. By using this link BPWebSolutions will also donate a small percentage of any purchases to Fernhill Linux Project.