How can I change the background image for a single tab on the navigation bar

I create a film site for LEVEL and for the navigation bar, I intend to have a different character for each tab. However, I can't put one image of each separate tab. Instead, a single image appears on each of the tabs. Here is an example of the CSS source.

< td width = "200" > < ul id = "navigation" > < br / >

"< li > < a href ="... / pages/index.html "> home < /a > < /li > < br / >"

"< li > < a href ="... / pages/cast.html "> Cast < /a > < /li > < br / >"

"< li > < a href ="... / pages/pictures.html "> photos < /a > < /li > < br / >"

"< li > < a href ="... / pages/soundtrack.html "> music < /a > < /li > < br / >"

"< li > < a href ="... / pages/interview.html "> Interviews < /a > < /li > < br / >"

"< li > < a href ="... / pages/links.html "> links < /a > < /li > < br / >"

< /ul >

< table >

#navigation {}

list-style-type: none;

padding: 0px;

margin: 0px;

}

#navigation li {}

margin: 0px;

padding: 0px;

list-style-type: no

}

#navigation li a: link, #navigation li a: visited {}

display: block;

Width: 200px;

height: 100px;

text-decoration: none;

text-align: center;

line-height: 100px;

do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

make-weight: bold;

-webkit-transition: 1000ms relieve;

-moz-transition: 1000ms relieve;

-ms-transition: 1000ms relieve;

-o - transition: 1000ms relieve;

transition: 1000ms relieve;

color: #648AAE;

background-repeat: no-repeat;

background-image: url (.. / Images/gifs/Batman-still-2.gif);

background-position: center bottom;

text-transform: uppercase;

letter-spacing: 0.79em;

border-radius: 5px;

}

#navigation li a: focus, #navigation li a: hover, #navigation li a: active {}

Color: #000000;

background-image: url (.. / Images/gifs/Batman-animation-2.gif);

background-repeat: no-repeat;

background-position: center bottom;

background-color: #454545;

border-radius: 25px;

}

So, how can I put one image on each of the tabs (home, cast, photos, etc.). Thanks in advance for your help.

Assign a class to the element, and use CSS to apply an image as in

  • class = 'home'; > Home

  • Cast

  • Photos

  • Music

  • Interviews

  • Links

  • and the CSS

    #navigation li a: link. Home, #navigation li a: visited. Home {}

    background-image: url (.. / Images/gifs/Batman-still-2.gif);

    }

    Tags: Dreamweaver

    Similar Questions

    • How can I customize the navigation bar in Firefox 29? I wish I had the back refresh/stop button in front of the navigation bar!

      How can I customize the navigation bar in Firefox 29? I wish I had the back refresh/stop button in front of the navigation bar!

      One of the developers has been around the forum recently try to answer some of these questions then I quote the developer

      For the entire quote and useful links for corrections and explanations please see

      Each setting you see in a computer program you use requires work; when a developer wants to build something new or improve something, he or she has to go through each related (hidden) setting and test if it still works like before and do that on each platform Firefox runs on. That's Apple's Mac OSX, various flavours of Linux and various flavours of Windows, including Windows XP. This costs time, lots of it, and that amount grows exponentially with each setting that's added. This comes on top of our work to continuously fix, improve and innovate Firefox.
      
    • How can I combine the navigation bar and the menu bar on the same line to save space?

      V29 Firefox seems to be a huge not backward in customization. I need to save room for the content so already I disabled the tabs and combined in the menu bar and the navigation bar on the same line. The url space is too long anyway. Now with v29 all my customization is gone and I can't get it back. I can move me is more points on the navigation bar to combine it with the menu bar. Why this was done? It limits only my ability to customize my browser? I'm very frustrated that you had a great browser and ruined.

      You should see Classic theme restaurateur, it contains many parameters. This module applies to customize Firefox 29. https://addons.Mozilla.org/en-us/Firefox/addon/classicthemerestorer/

    • How can I get the navigation bar to switch when I resize the screen?

      Currently, the navigation bar "bootstrap" simply disappears when I it descended under 767 pixels. I use Dreamweaver CC 2015. Everything written on this subject is old and none of the recommendations have worked.

      Without finding a solution, I guess I have to remove the navigation bar "bootstrap" and create one from scratch. Thanks for any help in advance.

      It's a known bug with the default "bootstrap" navigation bar in the current version of Dreamweaver CC 2015.

      Select the nav item and click on the button "+" on the screen of the element in Live View mode to add the class default .navbar.

    • How can I change the navigation between fields filliable

      We have created a form to fill out and when you tab through the fields several times the cursor jumps several areas that need data.  I need to have the tab "" move the cursor to the next in the line field.

      You need to probably just change the tab order, assuming that the fields that are being ignored are not set to read-only. If you use a recent version of Acrobat, you change the tab order by arranging the field names in the Panel fields in form editing mode. You can also set it to 'Order tabs by line', 'Order tabs by Column' or 'order Structure tabs.

    • How can I target the navigation bar at the exact location?

      Hello!

      I made a bar navigation scrolles fixed to a div when clicking on links (home, hoe het works?, France @ VINDDIT)

      Now the view work, but it will on the content rather than above it.

      I used someone else's javascript, so I have no idea how to solve this problem.

      you can also check it out on: http://vinddit.nl/

      (Please note I also have an odd empty space above my navigation bar (you notice when scrolling down)? no idea where that came from!)

      Pictured from fist below how this works now:

      Schermafbeelding 2014-03-01 om 15.12.59.png

      And this it is how should work:

      Schermafbeelding 2014-03-01 om 15.13.13.png

      pls find below my javascript code:

      /**

      * SmoothScroll

      * This script to help created by DWUser.com.  Copyright 2012 DWUser.com.

      * Double-under license GPL and MIT.

      * All the individual scripts remain property of their copyrighters.

      * Date: 10-Sep-2012

      * Version: 1.0.1

      */

      If (! window ['jQuery']) alert (' the jQuery library must appear before the smoothscroll.js file.)  The plugin will not work property. ") ;

      /**

      * jQuery.ScrollTo - only simple scrolling using jQuery.

      * Copyright (c) 2007-2012 Ariel Flesler - aflesler (at) gmail (dot) com: http://flesler.blogspot.com

      * Double licensed MIT and GPL.

      * @author Ariel Flesler

      * @version 1.4.3.1

      */

      ; (function ($) {var h = $.scrollTo = function (a, b, c) {$(window) .scrollTo (a, b, c)}, h.defaults = {axis: 'xy', duration: pa rseFloat($.fn.jquery) > = 1.3? 0:1, limit:true}; h.window = function (a) {return $(window) ._scrollable ()};$.fn._scrollable=function() {return this.map (function () {var a = this, isWin =! a.nodeName | $.inArray (a.nodeName.toLowerCase (), ['iframe', '#document', 'html', 'body'])! = - 1; if(!isWin) return a; var b = (a.contentWindow | .document has) | a.ownerDocument | a;})}}) (Return/WebKit/i.test (navigator.userAg ent) | b.compatMode == 'BackCompat'? b.body:b.documentElement})}; $.fn.scrollTo = function (e, f, g) {if (typeof f == 'object') {g = f; f = 0} if (typeof g == 'function') g = {onAfter:g}; if (e == 'max') e = 9e9; g = $.extend ({}, h.defaults, g); f = f | g.Duration; g.queue = g.queue & & g.axis.length > 1; if (g.queue) f / = 2; g.offset = both (g.offset); g.over = both (g.ov er); this._scrollable () .each (function () return {if(e==null) return; var d = this)} , $elem = $(d), targ = e, toff, attr = {}, win = $elem.is ('html, body'); switch (typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)? (PX) | %) ? ($/ .test (targ)) {targ = the two (t arg); break} targ = $(targ,this); if(!targ.length) return; case 'object': if (targ.is |) {Targ.style) to ff = (targ = $(targ)) .offset ()} $.each (g.axis.split (»), function(i,a) {var b = a == 'x'?'}) (Left) ': 'Top', pos is b.toLowerCase, key = "scroll" + b, old = d [key], max = h.max (d, a); If (tof f) {attr [key] = toff [pos] + (win? 0:old-$elem.offset () [pos]); if (g.margin) {attr [key]-= parseInt (your rg.css ('margin' + b)) | 0; parseInt (targ.css ('border' + b + 'Width')) = attr [key] | 0} attr [Key] += g.o ffset [pos] | 0; if (g.over [pos]) attr [key] += targ [a == 'x'?' width ': 'height'] () * g.over [pos]} else {v ar c = targ [pos]; attr [key] = c.slice & & c.slice(-1) == '%'? parseFloat (c) / 100 * max} {: c} if (g.limit & & / ^ \d+ $/ .test (attr [key])) attr [key] = attr [key] < = 0? 0:Math.min (attr [key], max); ({if (! I & & g.queue) {if (old! = attr [key]) animate (g.onAfterFirst); delete attr [key]}}); animate (g.onAfter); {({function animate (a) {$elem.animate (attr f, g.easing, & & function() {a.call (this, e, g)})}}) .end ()}; = function(a,b) h.max {var c = b == 'x'?'} (Width) ':'Height',Scroll='scroll'+c;if(!$(a).is('html,body')) has [scroll]-$(a) [() return c.toLowerCase]; {var d = 'client' + c, html is a.ownerDocument.documentElement, body = a.ownerDocument.body; return Math.max (html [scroll], [scroll] body) - Math.min ([d] html, body [d])}; ({int both (a) {return typeof == 'object'? a: {top: a, left:a}}}) (jQuery);

      /**

      * jQuery.LocalScroll

      * Copyright (c) 2007-2010 Ariel Flesler - aflesler (at) gmail (dot) com: http://flesler.blogspot.com

      * Double licensed MIT and GPL.

      * Date: 05/31/2010

      * @author Ariel Flesler

      * @version 1.2.8b

      **/

      ; (function (b) {function g (a, e, d) {var h = e.hash.slice (1), f = document.getElementById (h) | document.getElementsByName (h) [0]; if (f) {a & & a.preventDefault (); var c = b (d.target); if (!)}}}) (d.Lock) & & c.is(":animated") | d.onBefore & &! 1 = d.onBefore (a, f, c))) {d.stop & & c._scrollable ().stop(!0); if (d.hash) {var a = f.id == h?}} ' ' ID ': 'name', g = b("<a>_</a>").attr (a, h) .css ({position: 'absolute', top: b (window) .scrollTop (), left: b (window) .scroll Left()}); p [a] = " » ; location = e.hash; g.Remove (); p [a], b("body").prepend (g) = h} igger c.scrollTo(f,d).tr ("notify.serialScroll",

      {([f])}}} var i=location.href.replace(/#.*/,""),c=b.localScroll=function(a){b("body").localScroll(a)}; defaults = {duration: 1E3, axis: "y", event: "click", stop:! 0, target: window, reset:! 0}; c.hash = func c tion (a) {if (location.hash) {a = b.extend ({}, c.defaults, a); a.hash =! 1; if (a.reset) {var e = a.duration; delete a.duration;b(a.target).scrollTo(0,a);a.duration=e}g(0,location,a)}};}}} b.fn.localScroll = func tion (a) {function e() {return! This.href & &! {This.hash & & this.href.replace (this.hash,"" ") == I & &(!a.filter||_b_(thi_s).is (a.filter))}

      a = b.extend ({}, c.defaults, a); ({{return a.lazy? this.bind (a.event, function (d) {var c; c = b([d.target,d.target.parentNode]).filter (e) [0] & & g(d,c,a)}): this filter .find ("one, ' area') (e) .bind (a.event, function (b) {g(b,this,a)}) () () .end .end}}) (jQuery);

      Initialize all .smoothScroll links

      jQuery (function ($) {$.localScroll({filter:'.smoothScroll'});});)})

      var menu = $('#banner'),

      POS = menu.offset ();

      and my html code:

      < div id = "banner" class = "menudefault" >

      < h2 >

      < a href = "index.html" > < img src = "images/Schermafbeelding 2014 - 02 - 25 om 10.09.52.png" width = "220" height = "76" alt = "logo" / > < /a >

      < a href = "#container" class = "smoothScroll" > HOME < /a > |

      < a href = "#leftcollum" class = "smoothScroll" > HOE HET WORKS? < /a > |  < a href = "#leftcollum2" class = "smoothScroll" > d @ VINDDIT < /a > |

      < a href = "#mainbox2" class = "smoothScroll" > PRICES < /a > |   < a href = "over_ons.html" > ON < /a > ONS |     < a href = "contact.html" > CONTACT < /a > |

      < / h2 >

      < / div >


      lisavs12686 wrote:

      I copied this .js file full of a person on the internet.

      Is it not true?

      the addition of ofset as mentioned above does not work

      No, it isn't, I tested it myself. Try the smooth roll on the next page. You can add the offset to it:

      http://CSS-tricks.com/snippets/jQuery/smooth-scrolling/

      http://CSS-tricks.com/examples/SmoothPageScroll/

    • How can I get the navigation bar on the Page under NavigationPane

      How can I get a sort of Navigationbar thing like in the application settings (attached screenshot) on a page without making a sheet?

      If you mean the thing that you framed in red, it's a title bar, not a navigation bar... it isn't really you can navigate anywhere but a few labels on the page.

      https://developer.BlackBerry.com/Cascades/reference/bb__cascades__titlebar.html

    • How can I change the backgrounds menu for several pages?

      Hello

      How can I change the backgrounds menu for several pages in yet?  I want a single image appears on several pages in the background.

      Thank you.

      You must do this for each menu page.

      If the rest of the etc button style will be the same, just add the background you want and duplicate this menu before you change the titles, button names, linking.

    • How can I change the background color for the bar 'help file edit view history bookmark tools' in Firefox 29,0

      How can I change the background color for the bar 'help file edit view history bookmark tools' in Firefox 29,0

      You can add a theme of solid color to change the color of the top of the browser window, which contains the Menu bar.

      https://addons.Mozilla.org/en-us/Firefox/themes/solid

    • How can I change the background to the photos in the windows image viewer.

      original title: How can I change the background to the photos in the windows image viewer.  I hate it in context and would like to have a black background that surrounds photos.

      I had before an Adobe photoedit who saw the pictures surrounded by a black background.  I accidentally deleted the adobe photoedit.  So now, I find my pictures with Windows Picture and Fax Viewer.  However, I hate the white background that surrounds photos.  How can I change the context surrounding the photos of BLACK color?

      Hello

      I suggest that you try to do system restore or reinstall Photoedit and check to see if it helps:

      How to restore Windows XP to a previous state

      http://support.Microsoft.com/kb/306084

      Note: to perform the system restore, you must be running Windows as an administrator.

    • How can I change the type of image file to download on a site like walmart or walgreens for printing?

      How can I change the type of image file to download on a site like walmart or walgreens for printing?

      In general, they will accept the image in the format, that it was taken (if it was taken by the majority of cameras or cell phones).  But if so, you have a few options.

      The most simple and integrated solution is Microsoft Paint.  Yes it is from the 1980s, but it still works and changes of a good job for a time.  Just to right click on the photo file, choose open with and choose paint.  Then go to file > save as and save this return as the file type you want it to be (like PNG or BMP or JPG, quality declining in the JPG option).

      If you need more options like changing the quality he uses during conversion, another free option (of the very very many) is Paint.NET, an open source free image editing program. http://www.dotPDN.com/downloads/PDN.html

      There are also programs that can do it in bulk, so you can highlight 300 photos and do convert them all at once.  You can do this for free or with tools like Photoshop.

    • How can I change the background of the "space needle image"? (not the bureau but the 1st screen)

      How can I change the background of the "space needle image"? (not the bureau but the 1st screen)

      Hello helpmezune,

      Move your cursor to the bottom right of your screen, as if you were about to shut down your PC. Charms bar appears. Click the settings (gear) icon. In the settings window, click on the option change PC settings at the bottom of the window. You can change the image of the needle space of the screen option customize in the settings window of change of PC.

      This forum post is my own opinion and does not necessarily reflect the opinion or the opinion of Microsoft, its employees or other MVPS.

      John Barnett MVP: Windows XP Expert associated with: Windows Expert - consumer: www.winuser.co.uk |  vistasupport.mvps.org | xphelpandsupport.mvps.org | www.silversurfer-Guide.com

    • I have a problem with corruption.  How can I change the timeline on an existing project.  Each image is moved about 2.5 min.;  My preferences are for 180 frames.  It does not seem to consider one after the fact.  Is it possible to copy the entire thing on

      I am new to use the forums.  How to start a discussion?  The ICO next which is grayed out.

      I have a problem with corruption.  How can I change the timeline on an existing project.  Each image is moved about 2.5 min.;  My preferences are for 180 frames.  It does not seem to consider one after the fact.  Is it possible to copy the whole thing and put it in a new, m not corrupted project?

      Hello and welcome.

      I feel for you after reading your story, however, it that are supposed to do? It is a forum for Dreamweaver and to my knowledge, Dreamweaver has no functionality called the chronology.

      Could you please explain the problem so that we can understand?

    • How can I change the background of an image?

      How can I change the background of an image?

      https://www.Google.co.UK/search?q=background+removal+in+Photoshop&OQ=background+removal+in + & aqs = chrome. 1.69i57j0l5.13265j0j8 & sourceid = chrome & espv = 210 & es_sm = 122 & ie = UTF - 8

      A good starting point.

      There are many and varied ways to remove the background from using the background Eraser, creating masks, layer, then the use of the channels.

      It is a big topic, but Google is your friend (the other search engines are available)

      Have fun working through it all.

      See you soon

      John

    • Photos for wallpaper are too big. How can I change the size to fit?

      Photos for wallpaper are too big. How can I change the size to fit?

      Hi demetman,

      Welcome to the Microsoft answers community site.

      Follow the steps below to set the desktop background and select the image to fit the display screen

      1. open the wallpaper by clicking on the Start button , by clicking on Control Panel, appearance and personalization, personalization, and then clicking desktop wallpaper.

      2 click on the image or color you want for your background.

      If the image you want to use is not in the list of background images to display, click the location of the image downwards arrow to view other categories, or click Browse to find the picture on your computer. When you find the image of your choice, double-click it. It will become your desktop wallpaper and appear in the list of desktop backgrounds.

      3. under how the image must be positioned, choose to have the picture fit the screen, tile, or be centered on the screen and then click OK, you can choose here to adapt to the screen.

      Microsoft reference Article: http://Windows.Microsoft.com/en-us/Windows-Vista/change-your-desktop-background-wallpaper

      I also suggest you check these Microsoft Windows Help & How - Articles:
      1: change the screen resolution
      2: get the best display on your monitor
      3: change your desktop wallpaper (wallpaper)
      4: Customizing the desktop: recommended links

      Let me know if it works. Good luck!

      Hope this information is useful.

      Thank you and best regards,
      KKS Vijay

      [If this post can help solve your problem, please click the 'Mark as answer' or 'Useful' at the top of this message.] [Marking a post as answer, or relatively useful, you help others find the answer more quickly.]

    Maybe you are looking for

    • Keep suggesting to randomly connect credentials

      Hi all For some time (but definitely starting with one of the latest Safari, OS X, or the two major updates), whenever I can connect on any Safari Web site displays the user name field already filled in with a randomly generated user name. I always w

    • Trackpad gel

      Hello, Apple community. I recently bought in February a 13.3 inch MacBook Pro retina and it already gives me a problem. He has recently started to freeze the trackpad and the wired mouse that I have connected. He's done a few times already. I don't k

    • Running Fedora core 6 Satego P100-10U would become very hot

      Hi all I run Fedora Core 6 on my laptop Satego P100-10U. But there is a problem usingNVIDIA-Driver. After a few seconds, running Fedora laptop gets very hot.NVIDIA sensors show me a temperature about 100-112 degrees.Is there a solution, how can I fix

    • NI 9205 of i/o data acquisition

      I use 4 channels Ni9205 of DIFF mode. When I did the test with the generator voltage, I have sons only entered the channel 1 (AI0, AI8) and channel 4 (AI4 and AI12), however the data I loggered shows a weired problem. Channel 2 and channel 3 showed t

    • Ati2vag a blue screen appears

      When you run certain programs on XP Professional service pack 3, a blue screen appears saying something being stuck in an infinite loop and the Ati2vag memory dump. This can be corrected and how could I do? Enjoy any viable suggestion! [transferred t