page link
im putting togetger a page together and i have a quick question. on the left side of the page where it has the "buttons", i have an image set as the background, i was wondering if there was a way to put the text for a link on each one of those easily, can i do it without making seperate images for each button so it will be possible to easily add links without having to create a new image for a button? and i know the page sucks right now, i just threw this together in like five minutes so i dont need a critique yet.

please help me out,
thanks,
Josh

You can add text without having to create multiple images. The method depends on how you're coding the site.

If you're using css positioning for the layout you would simply position the images and text to appear where you want with {position:absolute; top:#of px; left:#of px;} and also add the text in a layer above the images using the z-index property.

I'm guessing you're using tables though. With tables you'll want to set the button image as the background of the cell and then any text you type into the cell should sit on top of the image. If you add the image using html you'll want to add background="path to your image" on each table cell. It might be easier though to add a class to each cell like class="bkgd" and then in your css add td.bkgd { background-image:url(path to the image) no-repeat;}

In either case you should only need one image for the buttons.

Too many images could crowd up your site and use up alot of space on your server and not allow you to put up all the stuff that you want to put up. So stick woth only one image to reduce the size of your file.

you can easily implement an unordered list, with different id's for each link.

CSS:

ul {
width: 180px;
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 3px;
display: block;
float: left;
width: 174px; /* 180 - 6px padding = 174px wide */
height: 20px;
}
li#homepage {
background: url(images/home.jpg) left no-repeat;
}
li#aboutus {
background: url(images/about.jpg) left no-repeat;
}
li#products {
background: url(images/products.jpg) left no-repeat;
}
li#contact {
background: url(images/contact.jpg) left no-repeat;
}

a {
padding: 4px;
font: 12px Verdana, sans-serif;
}

HTML:

<ul>
<li id="homepage"><a href="home.html">homepage</a></li>
<li id="aboutus"><a href="about.html">about us</a></li>
<li id="products"><a href="products.html">products</a></li>
<li id="contact"><a href="contact.html">contact</a></li>
</ul>

Expanding on what amygdela posted above you could also use just one image for all the buttons. The code would be identical to the above except the background images would all be the same

background:url(/images/menu-button.jpg) no-repeat

I think left is the default so you may not have to explicitly state it. You can have the same image be the background for all the links to save on http requests to the server. You'll need to style your links a little so they are the correct size to display the image.

If I have understood your query I have overlaid "labels" over an image.
You have to use Style Sheets and "absolute" pixel addresses. ( PS does not work in Firefox but I'm looking into that.
See www.playdecimate.com and select "A brief Description". ( The page including the labels is called www.playdecimate.com/examplebase.html.)

The main set up bit of the code is as follows.

<STYLE TYPE="text/css"> <!-- .help { position: absolute; left: 127px; top: 415px; width: 75px; height: 25px}
.info { position: absolute; left: 395px; top: 465px; width: 75px; height: 25px}
.board { position: absolute; left: 50px; top: 500px; width: 75px; height: 25px }
.resource { position: absolute; left: 385px; top: 685px; width: 75px; height: 25px }
.numbers { position: absolute; left: 40px; top: 735px; width: 75px; height: 25px }
.operators { position: absolute; left: 330px; top: 752px; width: 75px; height: 25px }
.control { position: absolute; left: 565px; top: 752px; width: 75px; height: 25px }
--></STYLE>

You call the STYLE later in the HTML like this

<!-- This is the third table -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- This is the big picture -->
<IMG height="542" alt="" src="images/ExampleBaseV2.jpg" width="645" border="0" name="Example of Board">
<DIV CLASS="help"><A href="#FirstInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT></DIV>
<DIV CLASS="info"><A href="#SecondInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
<DIV CLASS="board"><A href="#ThirdInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
<DIV CLASS="resource"><A href="#FourthInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
<DIV CLASS="numbers"><A href="#FifthInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
<DIV CLASS="operators"><A href="#SixthInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
<DIV CLASS="control"><A href="#SeventhInfo"><font face="Georgia" color="#ff0033" size="1"><b>MORE
INFO?</b></A></FONT>
</DIV>
</TD>
</tr>
</table>


If this is the sort of thing you want to do look at the source of www.playdecimate.com/exmplebase.html page

Was this of any help?

Instead of using the image as your background you could enter it right onto the page like this:

<p><img src="navigation.jpg" usemap="#map1" border="0">
<map name="map1">
     <area shape="rect" coords="0,100,0,60" href="main.htm" target="_parent" alt="Home Page">
</map></p>

Using an image map like that will create a rectangular area on your navigation image in which the user will find a link, alt text, everything like a normal hyperlink, just without the fuss of multiple pictures. This allows you to create complex navigations in photoshop (or other image editors) and still get the functionality you were looking for.

Just enter the co-ordinates for the top left and bottom right corners of the rectangle and the browser will do the rest.

Imagemaps are not XHTML1.0Strict valid and therefore I do not use that or tell others to... lists my man, lists!

oh and Wej of OST, your CSS is not readable like this. use some more whitespace to keep it a bit tidy...

Echo the lists recommendation amygdela.

I disagree on the whitespace in the css though. I use the same style in my own css. It's really not less readable than having everything on a separate line and it has the advantage of keeping the file size smaller helping to have your page load faster. I've shaved siginificant time off a page download simply by styling my css this way.

I understand that having everything on a separate line can make things stand out a little more, but styling it on single or double lines with an indent also helps keep most of the css on the screen at the same time reducing scrolling.

I do group my css in an order than is logical (to me at least) and usually separate different blocks with a line space. So the css for my navigation will be in one block, the css for my footer in another block. I'll also try to keep the properties in the same order on each line. I try to start with positioning first and then maybe fonts. Sometimes if the lines get a little long I'll add a bit of whitespace on the line so that the info looks like it's arranged in a table. It's very easy to compare simiar properties on different classes this way.

I really don't think it's unreadable.