HotPotatoes Tutorials and How-to's

Check the Full Tag Cloud

News:

Realities
Realities

Changing servers
Changing hosting provider

Family stuff
Family stuff

Most Recent:

Realities 2010.05.13 Realities video and pictures
Miscellaneous 2009.11.10 Other Miscellaneous
JCross: change background colour of cells 2009.11.07 JCross: change background colour of cells in Hotpotatoes JCross Crossword
JCross: Center thy Clues 2009.11.07 Center the Clues in Hotpotatoes JCross Crossword
Templates and Themes 2009.11.05 Templates and Themes

Login:

Meta:

Valid css | MODx

You are here: Home » Tutorials » for HotPotatoes » Image in the Navigation bar

Image in the Navigation bar

Posted by Stan Bogdanov on 06 December 2007 - 11:20
Last updated 30 May 2008 - 18:27

You may want to have a nice image for the navigation bar. Here's how to do this.

Generate your exercise (htm file) and open it in a simple text editor like Notepad, or better, open it with Notepad++.

Scroll down and find this piece of code

/*BeginNavBarStyle*/
 
div.NavButtonBar{
     ...
     text-align: center;
     margin: 2px 0px 2px 0px;
     clear: both;
     ...
}

Now add the following:

background-color: #336699;
background-image: url(tile.gif);
background-position: center left;
background-repeat: repeat-x;
border:1px solid #369;

With the above change you should have something like the following:

/*BeginNavBarStyle*/
 
div.NavButtonBar{
  text-align: center;
  margin: 2px 0px 2px 0px;
  clear: both;
  font-size: 10pt;
 /*Image in the Navigation bar*/
  background-color: #336699;
 /*have a colour in case the image doesn't load*/
  background-image: url(tile.gif);
  background-position: center left;
  background-repeat: repeat-x; /* tile the image horizontally*/
  border:1px solid #369;
 /*choose a border colour to match or contrast the image*/
}

Save the file and view it in your browser. See my example in action.

The background image can also appear on the navigation and function buttons - just add the code to the respective CSS class.