SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a question about a link block

    Hi there,

    Dose anyone know how I could turn the following in to a single clickable block link, so when a user rolls over anywhere in the block it changes colour and becomes a link.

    Code:
    <div class="one_third">	
    <h2><a href="#">News Letters Suday test post</a></h2>
    <small>May 15th, 2011</small>
    <div class="thumbnail"><a href="#" title="News Letters Suday test post"><img width="190" height="140" src="image_link.jpg" class="medium-thumbnail" alt="front-news" title="front-page3" /></a></div>	
    <div class="entry">
    <p><a rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/.">Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis</a></p>
    </div>
    </div>
    I have done some css and I've got close to what I'm after but not quite there, the link elements work and block fades but is not active? (sorry for length of code)

    Code:
    .one_third small, .one_third_last small {
    	font-size: 11px;
    	margin-left: 20px;
    }
    .one_third, .one_third_last {
    	float: left;
    	width: 280px;
    	margin-left: 34px;
    	background-color: #eee;
    	padding-bottom: 230px;
    }
    
    .one_third a, .one_third_last a {
    	display: block;
    }
    
    .one_third h2, .one_third_last h2 {
    	font-size: 16px;
    	padding-left: 20px;
    	padding-top: 10px;
    }
    
    .one_third h2 a, .one_third_last h2 a {
    	color: #626262;
    	display: block;
    }
    
    .one_third h2 :hover, .one_third_last h2 :hover {
    	color: #a30ffc;
    }
    
    .one_third, .one_third_last {
    -webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
    -moz-transition: background-color 500ms ease-in; /* FF3.7+ */
    -o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
    transition: background-color 500ms ease-in; /* futureproofing */
        background-color: #eff4ed;
        height: 186px;
    	margin-top: -7px;
    }
     
    .one_third:hover, .one_third:focus {
        background-color: #f9fdfd;
    }
    
    .one_third_last:hover, .one_third_last:focus {
        background-color: #f9fdfd;
    }
    
    .entry {
    	clear: both;
    }
    
    .entry a {
    	margin: 0;
    	padding: 10px 20px 0;
    	font-size: 13px;
    	line-height: 1.5em;
    	color: #626262;
    	display: block;
    }

    Thanks for your help, also the site is not online yet or I'd post a link to it.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Nsokyi. Welcome to SitePoint.

    Not all of the links point to the same thing. Do you want everything there to point to the same destination?

    You can't really do this easily in HTML4, though HTML5 apparently will let you wrap a link around block level elements.

    I'm not sure it's such a good idea to have so many different links point to the same thing anyway. Perhaps take the heading out of the equation (i.e. de-link it) and do something like:

    Code CSS:
    <style>
    small, img, span, a {display:block;}
    </style>

    Code HTML4Strict:
    <div class="one_third">	
    <h2>News Letters Suday test post</h2>
    <p><a rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/"><small>May 15th, 2011</small>
    <img width="190" height="140" src="image_link.jpg" class="medium-thumbnail" alt="front-news" title="front-page3" />
    <span>Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis</span></a></p>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    Thanks for your reply, yes all the links are going to the same place, at one point I did have it so that the title was just plane old h2 with no link and it kinda looked a little detached from the post excerpt but I might as well go back to it as I'm not having much joy with this.
    I also read that html 5 will allow an anchor to wrap different elements that be handy when I get round to learning html5.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    The easiest and most accessible way to make a link block clickable is to have a regular <a href="/file.htm"> on the most obvious element (probably the title, that's what's most often clickable on that kind of teaser), and then have
    <div class="one_third" onClick="window.open( '/file.htm','_top' ); return false;">

    That uses Javascript to make the whole block into a clickable block activating the link, but you've still got the regular link as a back-up for people who aren't running Javascript.

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stevie, I'll give that a go.


Tags for this Thread

Bookmarks

Posting Permissions

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