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 5 of 5
  1. #1
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    I'm not quite sure why this is displaying the way it is.
    www.scottmoniz.com/DeathNote/index.php
    HTML Code:
    <a id="homeLink" href="index.php"><img src="Images/spacer.gif" alt="Home"/></a>
    <a id="episodesLink" href="index.php"><img src="Images/spacer.gif" alt="Episode List"/></a>
    <a id="mangaLink" href="index.php"><img src="Images/spacer.gif" alt="Manga"/></a>
    <a id="movieLink" href="index.php"><img src="Images/spacer.gif" alt="Movie"/></a>
    Code:
    a img{
    width: 175px;
    height: 64px;
    }
    a#homeLink{
    background: url('../Images/home.png') top;
    }
    a#episodesLink{
    background: url('../Images/episodeList.png') top;
    }
    a#mangaLink{
    background: url('../Images/manga.png') top left no-repeat;
    }
    a#movieLink{
    background: url('../Images/movie.png') top left no-repeat;
    }
    I know i could use the a#movieLink:hover to change the images...but these
    images aren't displaying properly at all.
    Your help would be appreciated

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Er... What's wrong with the display?

    FYI, you really don't want to use an img tag in there. Use the text, and then where you set the background also set a [minicode]text-indent: -1000em;[/minicode]. That'll move the text off the page so it's not in the way of your images, while not having a useless image whose sole point is to hide the text. It also ensures that if you turn the stylesheet off, the browser will display the text instead of a blank image that you have to hover over to read.

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    I fixed the display and it works properly now.
    I didn't use an img tag (i was following some tutorial..which turned out not
    to be that great. but ya the new way i have it is

    Code:
    a.homeLink{
            background:url('../Images/homeButton.png') repeat 0px 0px;
            width: 172px; 
            height: 62px; 
            top: 15px;
            display: block;
            position: relative;
            outline: none;
            text-decoration: none;
    }
    a.homeLink:hover{
       background:url('../Images/homeButton.png') repeat 172px 62px;
    }
    
    .navigLink{
    visibility: hidden;
    }
    HTML Code:
    <a class="homeLink" href="index.php"><span class="navigLink">Home</span></a>

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    oh n the reason i couldnt use just text is because the font I want was custom downloaded...and I wasnt really sure on installing new fonts for IE and FF...or how to make users download them.
    Background images were helpful.

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Oh yeah, not using text is perfectly understandable. I'm personally still a fan of the high negative text-indent because it avoids useless markup (such as an img tag or a span tag that means nothing), but they both work quite nicely


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 08:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com