Whats the best way to create this [Archive]

Click to See Complete Forum and Search --> : Whats the best way to create this

oo7ml

11-08-2006, 06:23 AM

Whats the best way to create this

i want a navigation bar at the top of my page as seen in the example below

http://www.webdeveloper.com/forum/attachment.php?attachmentid=7933&stc=1
example.gif

What is the best way to achieve this - should i

- save the image (without the text) as a background and just position the text over it as links

- take 3 snipets of the bar (left_end, middle, right_end) and make the bar that way - if so how do you do this, i dont want it in blocks i want a bar 615 pixels long

- or is there a more apropiate way

thanks in advance

mooi

11-08-2006, 06:28 AM

The second suggestion sounds okay.. three different images in three different cells of a table, with the middle image 1px wide and repeated horizontally. Then just set the cell width to the length you want it.

scragar

11-08-2006, 06:29 AM

I would wind up making the bar a background image and simply putting text links inside it, possibly with a nice image floated to one side or the other to make it fade of slowly and pretty like.

oo7ml

11-08-2006, 06:42 AM

[QUOTE=scragar]I would wind up making the bar a background image and simply putting text links inside it, possibly with a nice image floated to one side or the other to make it fade of slowly and pretty like.[/QUOTE

I know this is a stupid question but, how do you put the bar as a background image in a table cell without having it repeated, and believe me i have searched a while for this and i still haven't found a suitable result

scragar

11-08-2006, 06:48 AM

exactly, you want a small image that will be x-repeated for the entire length of the tr/div, then just add images to finish of making it look nice.

oo7ml

11-08-2006, 06:50 AM

k thanks man

abz

11-08-2006, 06:57 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Navigation</title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">

<div id="navigation">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
<li><a href="#" title="Link 4">Link 4</a></li>
<li><a href="#" title="Link 5">Link 5</a></li>
</ul>
</div>

</div>
</body>
</html>

Give or take your colors and fonts, positions etc. play with the css to get it exactly what you want.

oo7ml

11-08-2006, 07:00 AM

thanks again

abz

11-08-2006, 10:25 AM

oo7ml, please keep your questions to your thread, rahter than using Private messages.

Im not exactly sure what you want to do. If you want to tile an image along the top, you would use this CSS line:

background: #999999 url('images/img.gif') repeat-x top;

that would repeat your image horizontally along the top. you can tile vertically using repeat-y, adn change the image position with top/bottom, left/right. Look up CSS backgrounds on google and you will be flooded with info.