Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: My "A" headache

  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question My "A" headache

    Hi all.

    I'm sure what I'm doing is a stupid little mistake, but I'm not catching it.

    I'm working on the following site for a friend. It's currently location is its "beta" form: http://members.cox.net/juliegleaton/jamie/index.html

    My problem is that I'm trying to set up different "links" - like my roll overs I have in my style sheet - for example, the about button I have this:

    #about {
    left: 0px;
    width: 125px;
    height: 325px;
    background:url(../graphics/about.jpg);
    cursor: pointer;
    position: absolute;
    }

    ..then this...

    #about a:hover {
    background: url(../graphics/about_ro.jpg);

    }

    ...and the roll over isn't working.

    I'm also trying to assign a "small" link id for links like the my name at the very bottom of the front page... and I set that up like this:

    #small a:link
    {
    FONT-SIZE: 9px;
    COLOR: #999999;
    FONT-family: Arial, Helvetica, sans-serif;
    border: 0px;
    text-decoration: none;

    }

    (with the same for active, visited, hover) - and those don't work either - they just follow the format that I have for the a:link.

    Any advise would be greatly appreciated.

    Thanks.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this for the roll over

    Code:
    #about a {
    left: 0px;
    width: 125px;
    height: 325px;
    background:url(../graphics/about.jpg);
    cursor: pointer;
    position: absolute;
    }
    
    #about a:hover {
    background: url(../graphics/about_ro.jpg);
    
    }
    can you post your html for the other question. lets take a look at what you have.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I code my css with this:
    background-image: url("/RIN/images/BannerBackground.jpg");

    using the background-image and quotes on the url. Try it, it might help. There is one extra "<" on line 36 you might want to remove.

    Can't see the css, but are the "a" tags in the right order? (link, visited, hover, active)
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure - an example would be the last div on the page...

    Code:
    <div class="tinytype">Copyright &copy; 2008 - All Rights Reserved &nbsp;-&nbsp;&nbsp;Website by <a id="small" href="http://members.cox.net/juliegleaton" target="julie">Julie Gleaton</a></div>
    And my CSS has this:

    Code:
    .tinytype {
    font-family:Arial, Helvetica, sans-serif;
    color: #999999;
    font-size: 10px;
    vertical-align: middle;
    text-align:center; 
    padding-top: 5px;
    }
    
    #small a:link 
    {
    font-size: 10px;
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    border: 0px;
    text-decoration: none;
        	
    }
    (#small a:active/visited/hover are all the same)

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I put the A in after the #about, and my button disappeared. (I'm working on a local site so you won't see it on the cox.net linked I posted above)

    If it helps, here's my code in the index.html:

    Code:
    	<div id="container">
       	  <div id="links">
    	  	<a id="about" href="about.htm"></a>
    	  	<a id="portfolio" href="portfolio.htm"></a>
    	  	<a id="weddings" href="weddings.htm"></a>
    	  	<a id="contact" href="contact.htm"></a>    	
          </div>
       </div>

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    The issue is that an "A" is an inline element therefore it woun't hold a width or a height. It's size is determined by it's contents. Since you have no contents you need to make it a block element.

    If your making a horizontal navigation add:
    Code:
    float: left;
    If your nav is vertical add:
    Code:
    display: block;
    see if those do anything for it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This will make your rollovers work for your navigation, you seem to be misunderstanding how cascading works.
    Code:
    #about {
    left: 0px;
    width: 125px;
    height: 325px;
    background:url(../graphics/about.jpg);
    cursor: pointer;
    position: absolute;
    }
    a#about:hover {
    background: url(../graphics/about_ro.jpg);
    
    }
    This will work for your small link
    Code:
    .tinytype {
    font-family:Arial, Helvetica, sans-serif;
    color: #999999;
    font-size: 10px;
    vertical-align: middle;
    text-align:center; 
    padding-top: 5px;
    }
    
    a#small
    {
    font-size: 10px;
    color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    border: 0px;
    text-decoration: none;
        	
    }
    Last edited by _Aerospace_Eng_; 07-18-2008 at 08:04 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    julieg (07-18-2008)

  • #8
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jerry62704 View Post
    I code my css with this:
    background-image: url("/RIN/images/BannerBackground.jpg");

    There is one extra "<" on line 36 you might want to remove.

    Can't see the css, but are the "a" tags in the right order? (link, visited, hover, active)
    All my other CSS used background, and the images display fine. But I tried it for poops and giggles... and still no roll overs.

    I removed the < on my local copy already - I need to update that site with what I've done... I'm trying to get this baby ready to roll over the weekend.

    My As were NOT in the correct order, but I changed them and it's still the incorrect size.

    I'll log in and update my files on line.

    Also, there are addons for Mozilla you can get to view a site's CSS/JS/etc - this is my fave https://addons.mozilla.org/en-US/fir...JSView&cat=all - I know some peeps are anti Mozilla (and anti IE), but that tool is awesome.

    Thx for the help... I'll update my files inna sec...

  • #9
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you Aerospace - that did work.

    And yeah, there is much I misunderstand because I'm "self taught". I worked for a company that threw their website at me and said, "g'luck!"... and it was just me and my little HTML for dummies book. I've come a long way, but there's still much I don't know and am still trying to master.

    In the meantime, I'm trying to use my skills for good and build solid websites for my friends to improve my portfolio.

    Thanks again for your help!

    -Julie


  •  

    Posting Permissions

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