WhiskyLima Posted March 4, 2010 Share Posted March 4, 2010 Hi guys, just wondered if there is a way to do this:Basically, I have a title bar of sorts, across the top of some text. This bar is nothing more than some title text on the left and a small image on the right.What I wanted to do is to make the whole bar a link without the use of a large image. At the moment I have two scenarios:1: The whole bar is a link, but the text dosn't change colour on hover... <a href="services.html"><h3><img src="images/content/big.jpg" align="right" class="point">Services</h3></a> Here the 'point' class on the image is simply for position. the image is a small arrow about 11 x 11 px.2: The name changes colour, however it only works if you point at the small image or the text itself.... <h3><a href="services.html"><img src="images/content/big.jpg" align="right" class="point">Services</a></h3> Basically the whole thing looks like this:This is the CSS for the h3 tag and the point class: .point{position: relative;top: 6px;right: 3px;}h3{font-family: arial;text-align:left;font-size: 16px;color: #1d5ac5;font-weight: bold;margin-bottom: 8px;border-bottom: 1px solid;} Any help would be greatly appreciated!Whisky Lima Link to comment Share on other sites More sharing options...
thescientist Posted March 4, 2010 Share Posted March 4, 2010 in your first example, what where you trying to use to get the color to change? The first one won't validate because you can't put a block level element (<h3>) inside an inline element (<a>).You could try setting your <a> to display: block, and then you could set the background image with arrow you have. Link to comment Share on other sites More sharing options...
MGmirkin Posted March 6, 2010 Share Posted March 6, 2010 I'm a newbie, but a sharp tack; let me have a go at it: <html><head><style type="text/css">body { margin:0px; padding:10px; color:red;}h1 { width:100%; text-align:center; font-variant:small-caps; color:yellow; background-color:green;}h3 { text-align:left; font-family: arial; font-size: 16px; font-weight: bold; font-variant:small-caps; color:blue; background-color:#00ccaa;}h1 > a { display:block; width:100%; text-decoration:none; color:yellow; background:green;}h3 > a { /*display:block;*/ width:100%; margin:0px; padding:0px; text-decoration:none; border-bottom: 2px blue solid;}h1 > a:hover { color:green; background-color:yellow;}h3 > a:hover { background-color:blue; color:#00ccaa; border-bottom: 2px #00ccaa solid;}p.ex { color:blue;}</style></head><body><h1><a href="#HeaderLink" name="HeaderLink">This is a Heading 1</a></h1><h3><a href="#HeaderLink" name="HeaderLink">This is a Heading 3</a></h3><p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p><p class="ex">This is a paragraph with class="ex". This text is blue.</p></body></html> go here:http://w3schools.com/css/tryit.asp?filename=trycss_colorPaste the example code (above), replacing the contents entirely and apply it. Hover over the h3 link. Notice how it only lights up directly over it and the border only extends as far as the text?Next edit the code to remove the comment /* */ from the h3 > a {... display:block; ...} section so that the anchor (usually an "inline" element) is displayed like a "block" element.Apply the change. Notice the bottom border now extends all the way across the width of the header? Try hovering. Notice how you can now hover and click anywhere in the header?Effectively, what I did, and you can see all the code above, was to put the link INSIDE the header, make it display as a block, set its width to 100% of the width of its parent (the header). This way the link entirely fills the header, effectively making the entire header a link!I also added some pseudo-class :hover code for effect. I made it invert the colors on the background, text and bottom border, so you can visually see that it does, in fact, work as advertised.Cheers,~MG Link to comment Share on other sites More sharing options...
MGmirkin Posted March 7, 2010 Share Posted March 7, 2010 Though, as I think about it, the above example wouldn't necessarily include the arrow image... More tweaking needed. Will ponder for a bit.Again, go here:http://w3schools.com/css/tryit.asp?filename=trycss_colorTry this: <html><head><style type="text/css">body { margin:0px; padding:10px;}a.HeaderLink { display:block; width:100%; margin:0px; padding:0px; text-decoration:none;}a.HeaderLink > h3 { width:100%; margin:0px; padding:5px; text-align:left; font-family: arial; font-variant:small-caps; font-size: 16px; font-weight: bold; color:blue; background-color:#00ccaa; border-bottom: 2px blue solid;}a.HeaderLink > h3:hover { color:#00ccaa; background-color:blue; border-bottom: 2px #00ccaa solid;}div.ArrowSprite { float:right; width:19px; height:19px; margin:0px; padding:0px; background:url(http://i339.photobucket.com/albums/n451/williamleafe/Untitled-3.jpg) -539px -3px;}</style></head><body><a href="#HeaderLink2" name="HeaderLink2" class="HeaderLink"><h3>This is a Heading 3<div class="ArrowSprite"></div></h3></a></body></html> Your mileage may vary... But it seems to get the job done. Used a div and some sprite tweaking to get your arrow put in there. Assume you can code your arrow in whatever fashion to which you're normally accustomed.Best,~MG Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.