Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    I've designed up the navigation for my site in an image format, though im not sure how to go about getting it into proper coding (well.. I tried, and I can only get it to work in firefox, and even then im not sure how I managed it...), using css and xhtml. Any chance of advice/help on getting it to work properly.

    http://img.photobucket.com/albums/v4...nal_by_Hol.png
    (sorry for the large image...)

    its the navigation up at the top, the tab like thing.

    Help appreciated, thanks

  2.  

  3. #2
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    Would be easier to see your code to understand what effect you need, but using this CSS may be what you are after:
    Code:
    a { background: url(YOUR LINK PICTURE URL) no-repeat center bottom; }
    
    a:hover { background: url(YOUR HOVER PICTURE URL) no-repeat center bottom; }
    I'de be willing to look at your code.

  4. #3
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    Quote Originally Posted by audiofreak9
    Would be easier to see your code to understand what effect you need, but using this CSS may be what you are after:
    Code:
    a { background: url(YOUR LINK PICTURE URL) no-repeat center bottom; }
    
    a:hover { background: url(YOUR HOVER PICTURE URL) no-repeat center bottom; }
    I'de be willing to look at your code.
    I had been trying to use a combination of li , divs and spans, but your way should work, thanks.

  5. #4
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    It still will work with li, div, and span. Be sure to specify a class for the navigation so that every link on your page won't have the background pictures. The way I wrote it above will be global for all links on the webpage. For example, if you wrap the navigation links (a href's) in a div with a class name of "nav", then the CSS would be:
    Code:
    .nav a { background: url(YOUR LINK PICTURE URL) no-repeat center bottom; }
    
    .nav a:hover { background: url(YOUR HOVER PICTURE URL) no-repeat center bottom; }
    Alternatively if you put the navigation links (a href's) in an unordered list inside a div with a class of "nav" then the CSS could be:
    Code:
    .nav li a { background: url(YOUR LINK PICTURE URL) no-repeat center bottom; }
    
    .nav li a:hover { background: url(YOUR HOVER PICTURE URL) no-repeat center bottom; }
    You could also wrap a span around the navigation link that would be for the current page you are on, giving it a class of "hot" for example. Do not add the <a href=...> information to this link since you are viewing that page. This span could let that specific link signify the "current page". The additional CSS would be:
    Code:
    .hot { background: url(YOUR CURRENT PAGE PICTURE URL) no-repeat center bottom; }
    I hope this isn't information overload...? Also it may be pertinent to add a:link and a:visited to your CSS.

  6. #5
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    Right, did a bit of work on it, best that I've done so far. It looks right in Firefox, but its still not working in IE, but its a lot closer than it was. Right, heres a screenshot:

    http://img.photobucket.com/albums/v4...sh-problem.jpg

    it isnt exactly like this:
    http://img.photobucket.com/albums/v4...nal_by_Hol.png

    My theory is that the two navigation boxes are in the right place, if I could get the stuff to move up to the top (as its doing in firefox) everything would be inline. I tried using absolute positioning but it throwed a hissy fit and broke everything. Have attached the html (will be eventually changing to XHTML) and css files, along with the images to let you have a go on the site, in a zip file.

    Thanks for the help so far.

  7. #6
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    Ok, I played around with it quite a bit and got you to a good point. I made changes to your html and CSS.
    Just a few issues remain:
    The height of the "titleAndNavigation" div may not be correct. - I'll let you fix that...
    The "titleLogo" may not be spaced right. - Change the width of "titleLogo" to move it left to right.

    SEE ATTACHED

  8. #7
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    The method mentioned will "blink" as the hover image loads. Also, IE has a bug where a:hover causes the background to reload, causing a blink even though the hover image did not change.

    Try these alternatives to remedy those problems:

    Code:
    .nav a { background: url(YOUR LINK + HOVER PICTURE URL) no-repeat center bottom; }
    
    .nav a:hover { background: url(YOUR LINK + HOVER PICTURE URL) no-repeat center top; }
    the idea behind this one is that the hover and normal states are contained in one image. You're just shifting it up and down.

    Code:
    .nav li { background: url(YOUR HOVER PICTURE URL) no-repeat center bottom; }
    
    .nav li a { background: url(YOUR LINK PICTURE URL) no-repeat center bottom; }
    
    .nav li a:hover { background: transparent; }
    This might look a bit more complicated, but it gets rid of the IE blink. You're basically putting the hover image in the li, and when you hover over the anchor the anchor's background disappears, revealing the hover image below.

  9. #8
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    Quote Originally Posted by audiofreak9
    Ok, I played around with it quite a bit and got you to a good point. I made changes to your html and CSS.
    Just a few issues remain:
    The height of the "titleAndNavigation" div may not be correct. - I'll let you fix that...
    The "titleLogo" may not be spaced right. - Change the width of "titleLogo" to move it left to right.

    SEE ATTACHED
    Managed to get it to work from there (as well as fix the weird problem with IE not displaying images at the right colour and hence displaying the red background on the tab images a different colour to the hex code colour of the navigation background block.

  10. #9
    Junior Member
    Join Date
    Mar 2006
    Posts
    19
    Member #
    12935
    if you have photoshop or imageready you could try to slice it up and export it as html or css.
    Then you make a ton of changes to personalize it. Hope that helps

  11. #10
    Junior Member
    Join Date
    May 2006
    Posts
    15
    Member #
    13191
    thanks for the information, i also seek for this for few days :laugh:


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:02 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com