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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I gots divs inside anchors - need alternative ideas

    :wave: Hi all,

    Nooby two shoes here again to boggle your minds with my utter css cluelessness.

    I'm trying to create the effect of images contained in round cornered boxes that change colour when hovered over. I have got it looking right (nb: only tested in firefox atm).

    http://www.accesscomms.com.au/Newsite2/newproducts.htm

    the html (for just 1 box)

    Code:
    <!--IEC-C19 Power Cord -->   
    <div class="roundbox4">
     <a href="products/K3744.htm">
       <div class="roundtop4">
    	 <img src="Borders/tlround.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div>
       <img src="newproducts/K3744.gif" alt=""  class="floatRightGall"/>  
       <p>IEC-C19 Power Cord</p>   
       <div class="roundbottom1a">
    	 <img src="Borders/bl2.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div></a>
    </div>
    The css:

    Code:
    .roundbox4 {
    	margin: 0px 0px 7px 4px;
    	width: 142px;
    	background-color: #f0f0f0;
    	color: #53565d;
    	float: right;
    }
    
    
    .roundtop4 { 
    	background: url(../Borders/trgall4.gif) no-repeat right top; 
    }
    
    .roundbottom1a {
    	background: url(../Borders/br1a.gif) no-repeat right top; 
    }
    
    img.corner {
       width: 15px;
       height: 15px;
       border: none;
       display: block !important;
    }
    
    .roundbox4 p {
    	margin: 0 5px;
    	padding: 5px 2px 2px 5px;
    	min-height: 28px;
    	text-align: left;
    	font-size: 8pt;
    }
    
    img.floatRight { 
        float: right; 
        margin-left: 15px;
        margin-right: 3px;
        margin-top: -5px;
        position: relative; 
    }
    BUT (and it's a big butt, not unlike my own) because I have put divs inside anchors to make it work, it won't validate. This idea of the entire box changing colour on hover is an effect I really like, but unfortunately my lack of css proficiency means I can't figure out how to code it in a way that will validate.

    Was hoping that someone else may have played with this idea or similar (or is interested enough to have a look now) and has better ideas on to acheive the same effect with code that will validate.
    Last edited by Lollygag; 05-30-2007 at 06:22 AM. Reason: put code tags in

  • #2
    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
    Use spans instead of paragraphs and divs. Make them display:block so they act like a div.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Aerospace Eng.

    Exactly the info I needed.
    I'm on it. (Well I'm on to google to look up spans and learn how to use 'em first, then I'm on it).

    I'll let you know how she goes.

  • #4
    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
    Spans by default are inline elements so they can be inside of links. Divs and paragraphs are block level elements and can't be inside of links as you have already discovered. You can style a span however you like.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    :tup: Muchas Gracias Aerospace,

    I've spent a few weeks reading up on css, but I'd missed spans entirely, beginning with css is like drinking from the proverbial fire hydrant, there's a hell of a lot of new info to assimilate, I didn't know where to begin to look to solve this one - reckon you probably saved me a week of fruitless googling.

    Just changed from divs to span, I still need to play around a bit more to get it right, but looks like the spans method'll work out nicely.

    Thanks again, very much appreciated.

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace you're a legend! Its perfect now.
    And came with some extra added unexpected bonuses - omg it even works in ie7!

    Thankyouthankyouthankyou!!



  •  

    Posting Permissions

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