You can to add a border to a single image
<a href="#"><img style="border 5px solid blue" src="image.gif" width="100" height="50" alt="image">
You can set the colour and the size of the border as desired.
There are also a number of alternatives to the solid border and they are as follows:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Here is an example of a solid green border that has been given a margin of 5px and has the border set to 2 px dashed.
img { margin: 5px; border: 2px dashed #00FF99; }
Put this into your style:
img { border:0 }
If you want to remove the border from a single image only you can use an inline style in the img tag:
So to remove the border from the image in the middle we use style="border:0" in the img tag.
<a href="#"><img style="border:0" src="image.gif" width="120" height="80" alt="image"></a>
You can to change the text colour without css style
<div style="color:blue"> This whole div will be blue</div>
<p style="color:red"> This paragraph is red</div>
<span style="color:blue"> The text covered with span is blue</span>
CSS Code
This is a view of the code used for the css menu. You will need to make sure that the paths to the images within this code are either relative or direct to wherever you store the image files on your site.
<style type="text/css">
#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}
#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold; font-family:Arial,Verdana,Helvitica,sans-serif;}
#foxmenu ul{margin:0;padding:0;list-style-type:none;width:auto;}
#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}
#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none; padding:5px 20px 0 20px;height:19px; background:transparent url(images/foxmenu_bg-OFF.gif) no-repeat top left;}
#foxmenu ul li a:hover{color:#fff; background:transparent url(images/foxmenu_bg-OVER.gif) no-repeat top right;}
#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;}
</style>
HTML Code
As you can see, you will need to wrap your unordered list with a div to identify the menu style. The "services" tab has the ON state by adding the "current" class to the A tag.
<div id="foxmenucontainer">
<div id="foxmenu">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
</div>
FAQ
- The background color can be changed in the style sheet - the button colors changed in the Photoshop file.
- This menu comes with the original Photoshop file.
- You can customize this menu to be any color you wish.
- Entire menu system is less than 3KB.
- 2 image files, 1 css file, 1 html file
- Has been tested and works in over 150 browser/operating system combos
- It's FREE for you to use
Inicio | CSS Examples Contacto |
Últimos envíos
Add a border to a single image | To remove the border on all linked images in a page | Change text color with div or p | Free menu css style |
TAGS
