Image Menu using CSS ??

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

http://www.hamburglibrary.org/KidsKorner/SeriesBooks/series.htm

The menu on the left side of the screen is one image with the links
image-mapped on. My question is:

How can I use CSS easily so I can go to one file, change something in the
picutre (say adding another catagory between 'Kids Series' and 'Kids Links')
and not have to go back and change each menu on each page individually. When
I'm finished, I'll have about 25 pages or so with the same menu.

Thanks,
Laura
 
short_and_cute said:
http://www.hamburglibrary.org/KidsKorner/SeriesBooks/series.htm

The menu on the left side of the screen is one image with the links
image-mapped on. My question is:

How can I use CSS easily so I can go to one file, change something in the
picutre (say adding another catagory between 'Kids Series' and 'Kids Links')
and not have to go back and change each menu on each page individually. When
I'm finished, I'll have about 25 pages or so with the same menu.

Thanks,
Laura
Click to expand...

CSS is for formatting ...

If you want to add text ... you need to use something like FrontPage
includes which will let you change one file .. or a dwt...

see

FrontPage DWT Ebook
http://frontpage-ebooks.com/dwt-ebook.htm

FrontPage Include Tutorial
http://anyfrontpage.com/ezine/va/frontpage-includes.htm

Tina

Current Tip: (10th Feb, 2006)
DO YOU WANT TO KEEP YOUR CUSTOM MENUS?
http://frontpage-tips.com/ - FrontPage Tips
Frontpage Tips Ebook, Vol I AND Vol 2. AVAILABLE NOW!
Join http://groups.yahoo.com/group/frontpage-tips/
for F ree weekly FrontPage Tips
MORE EBOOKS COMING SOON.
 
You wouldn't use CSS for this,you would use a include page that would contain your image, then when
you need to change the navigation, just change the image and redo your hotspots.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
Here is a simple way to make a Menu using CSS and 2 images..
You will need one image 125X10px and name it button_up.gif
You will need one image 125X10px and name it button_dn.gif
(They only need to be the color you want NO text)
If you just want to see it work--try it without the images...

The first image is what normally shows and the second is the on hover...

Now at the top of your page in the <head> before the </head> put this CSS
style..

<style>
div#navigation
{
float: left;
width: 125px;
padding-top: 2em;
border-right: 1px;
}
div#navigation ul
{
list-style-type: none;
padding: 4px;
margin: 0;
}
div#navigation ul li { margin-top: 6px; }
#navigation ul li a
{
display: block;
width: 125px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: white;
background-image: url(button_up.gif);
background-repeat: repeat-y;
}
#navigation ul li a:hover
{
color: blue;
background-image: url(button_dn.gif);
background-repeat: repeat-y;
}
</style>

Then on your page after <body> put:

<div id="navigation">
<ul>
<li><a href="index.htm" title="Home"><b>Home</b></a></li>
<li><a href="info.htm" title="Info"><b>Info</b></a></li>
<li><a href="news.htm" title="News"><b>News</b></a></li>
<li><a href="links.htm" title="Links"><b>Links</b></a></li>
<li><a href="contact.htm" title="Contact"><b>Contact</b></a></li>
</ul>
</div><!-- /navigation -->


Try this on a blank page and see what you think...

To add links (Buttons) Just add to the list... (In code view ) Like

<li><a href="onemorelink.htm" title="One More"><b>Link One</b></a></li>

You will see the text from the link on the button image...

bob
| http://www.hamburglibrary.org/KidsKorner/SeriesBooks/series.htm
|
| The menu on the left side of the screen is one image with the links
| image-mapped on. My question is:
|
| How can I use CSS easily so I can go to one file, change something in the
| picutre (say adding another catagory between 'Kids Series' and 'Kids
Links')
| and not have to go back and change each menu on each page individually.
When
| I'm finished, I'll have about 25 pages or so with the same menu.
|
| Thanks,
| Laura
 
Forgot --- Then use that page as an include navigation

Easy to change... adding or removing links and only 2 very small images are
used over & over...

Just a thought

bob
| Here is a simple way to make a Menu using CSS and 2 images..
| You will need one image 125X10px and name it button_up.gif
| You will need one image 125X10px and name it button_dn.gif
| (They only need to be the color you want NO text)
| If you just want to see it work--try it without the images...
|
| The first image is what normally shows and the second is the on hover...
|
| Now at the top of your page in the <head> before the </head> put this CSS
| style..
|
| <style>
| div#navigation
| {
| float: left;
| width: 125px;
| padding-top: 2em;
| border-right: 1px;
| }
| div#navigation ul
| {
| list-style-type: none;
| padding: 4px;
| margin: 0;
| }
| div#navigation ul li { margin-top: 6px; }
| #navigation ul li a
| {
| display: block;
| width: 125px;
| padding: 3px 5px 3px 10px;
| text-decoration: none;
| color: white;
| background-image: url(button_up.gif);
| background-repeat: repeat-y;
| }
| #navigation ul li a:hover
| {
| color: blue;
| background-image: url(button_dn.gif);
| background-repeat: repeat-y;
| }
| </style>
|
| Then on your page after <body> put:
|
| <div id="navigation">
| <ul>
| <li><a href="index.htm" title="Home"><b>Home</b></a></li>
| <li><a href="info.htm" title="Info"><b>Info</b></a></li>
| <li><a href="news.htm" title="News"><b>News</b></a></li>
| <li><a href="links.htm" title="Links"><b>Links</b></a></li>
| <li><a href="contact.htm" title="Contact"><b>Contact</b></a></li>
| </ul>
| </div><!-- /navigation -->
|
|
| Try this on a blank page and see what you think...
|
| To add links (Buttons) Just add to the list... (In code view ) Like
|
| <li><a href="onemorelink.htm" title="One More"><b>Link One</b></a></li>
|
| You will see the text from the link on the button image...
|
| bob
message
| || http://www.hamburglibrary.org/KidsKorner/SeriesBooks/series.htm
||
|| The menu on the left side of the screen is one image with the links
|| image-mapped on. My question is:
||
|| How can I use CSS easily so I can go to one file, change something in the
|| picutre (say adding another catagory between 'Kids Series' and 'Kids
| Links')
|| and not have to go back and change each menu on each page individually.
| When
|| I'm finished, I'll have about 25 pages or so with the same menu.
||
|| Thanks,
|| Laura
|
|
 
I forgot that I used white lettering in the CSS SO
Try this if not using a dark Image.....

<style>
div#navigation
{
float: left;
width: 125px;
padding-top: 2em;
border-right: 1px;
}
div#navigation ul
{
list-style-type: none;
padding: 4px;
margin: 0;
}
div#navigation ul li { margin-top: 6px; }
#navigation ul li a
{
display: block;
width: 125px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: black;
background-image: url(button_up.gif);
background-repeat: repeat-y;
}
#navigation ul li a:hover
{
color: blue;
background-image: url(button_dn.gif);
background-repeat: repeat-y;
}
</style>

That will give you black text (normal) and Blue (on hover)

So you can see the text if trying this without the images...
The whole day has been this way.. Ha hahaha

bob
| Here is a simple way to make a Menu using CSS and 2 images..
| You will need one image 125X10px and name it button_up.gif
| You will need one image 125X10px and name it button_dn.gif
| (They only need to be the color you want NO text)
| If you just want to see it work--try it without the images...
|
| The first image is what normally shows and the second is the on hover...
|
| Now at the top of your page in the <head> before the </head> put this CSS
| style..
|
| <style>
| div#navigation
| {
| float: left;
| width: 125px;
| padding-top: 2em;
| border-right: 1px;
| }
| div#navigation ul
| {
| list-style-type: none;
| padding: 4px;
| margin: 0;
| }
| div#navigation ul li { margin-top: 6px; }
| #navigation ul li a
| {
| display: block;
| width: 125px;
| padding: 3px 5px 3px 10px;
| text-decoration: none;
| color: white;
| background-image: url(button_up.gif);
| background-repeat: repeat-y;
| }
| #navigation ul li a:hover
| {
| color: blue;
| background-image: url(button_dn.gif);
| background-repeat: repeat-y;
| }
| </style>
|
| Then on your page after <body> put:
|
| <div id="navigation">
| <ul>
| <li><a href="index.htm" title="Home"><b>Home</b></a></li>
| <li><a href="info.htm" title="Info"><b>Info</b></a></li>
| <li><a href="news.htm" title="News"><b>News</b></a></li>
| <li><a href="links.htm" title="Links"><b>Links</b></a></li>
| <li><a href="contact.htm" title="Contact"><b>Contact</b></a></li>
| </ul>
| </div><!-- /navigation -->
|
|
| Try this on a blank page and see what you think...
|
| To add links (Buttons) Just add to the list... (In code view ) Like
|
| <li><a href="onemorelink.htm" title="One More"><b>Link One</b></a></li>
|
| You will see the text from the link on the button image...
|
| bob
message
| || http://www.hamburglibrary.org/KidsKorner/SeriesBooks/series.htm
||
|| The menu on the left side of the screen is one image with the links
|| image-mapped on. My question is:
||
|| How can I use CSS easily so I can go to one file, change something in the
|| picutre (say adding another catagory between 'Kids Series' and 'Kids
| Links')
|| and not have to go back and change each menu on each page individually.
| When
|| I'm finished, I'll have about 25 pages or so with the same menu.
||
|| Thanks,
|| Laura
|
|
 
Back
Top