dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: Whats the best way to create this

  1. #1
    Join Date
    Jul 2006
    Posts
    663

    Whats the best way to create this

    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/at...tid=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
    Attached Images Attached Images

  2. #2
    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.

  3. #3
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    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.

  4. #4
    Join Date
    Jul 2006
    Posts
    663
    [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

  5. #5
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    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.

  6. #6
    Join Date
    Jul 2006
    Posts
    663
    k thanks man

  7. #7
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    HTML Code:
    <!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">
    <!--
    
    *{
    margin:0;
    padding:0;
    border:0;
    list-style:none;
    font-family: Verdana, sans-serif;
    }
    
    #container{
    padding: 10px 15px;
    }
    
    #navigation{
    }
    
    #navigation ul li{
    float:left;
    background-color:#FFFFFF;
    padding-bottom:5px;
    border-bottom: 5px ridge #00CCFF;
    }
    
    #navigation a{
    display:block;
    padding: 5px 15px;
    background-color:#999999;
    color: #FFFFFF;
    text-decoration:none;
    font-weight: bold;
    margin-bottom: 5px;
    }
    
    -->
    </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.

  8. #8
    Join Date
    Jul 2006
    Posts
    663
    thanks again

  9. #9
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles