css block links and images

Posted by Andrew Heath on Stack Overflow See other posts from Stack Overflow or by Andrew Heath
Published on 2010-03-16T13:55:41Z Indexed on 2010/03/16 14:06 UTC
Read the original article Hit count: 344

Filed under:

css

|

block

|

link

|

div

Given this html:

<div class="nation">
    <a href="library.php?type=nation&amp;id=America">
        <div class="nation-image">
            <img src="nations/America.png" alt="snip" />
        </div>
        <h3>America</h3>
    </a>
</div>

the following CSS results in the entire <div class="nation"> becoming a clickable block link:

.nation {float: left; text-align: center; width: 189px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

but if I make the following single addition:

.nation {float: left; text-align: center; width: 189px;}

    .nation-image {height: 138px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

to specify the height of <div class="nation-image"> then the image (and only the image) is no longer a link, but the rest of the div (margin around it, h3 etc) remain a block link...

/I am teh confussd :-?

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about block

LVM / Device Mapper maps wrong device

as seen on Server Fault - Search for 'Server Fault'
Hi, I run a LVM setup on a raid1 created by mdadm. md2 is based on sda6 (major:minor 8:6) and sdb6 (8:22). md2 is partition 9:2. The VG on top of md2 has 4 LVs, var, home, usr, tmp. First the problem: While booting it seems as if the device mapper takes the wrong partition for the mapping! Immediately… >>> More
Apache FOP - Table top and bottom borders missing pagebreak inside table

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using Apache FOP to generate a PDF from a XLS FO document. I have created a test XLS FO document that contains a table with collapsed borders that with several tall rows. One of the rows starts on one page and ends on the next and this works as expected. The problem is that the bottom border… >>> More
Full Screen Video Tumblr

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a tumblr theme seen on http://www.kodilane.com and i am trying to make my Video Posts full screen. I have tried editing the code but i can only get the pictures to stretch. I have attached the template i have so far, if you can spot the changes that need to be done to make the video posts stretch… >>> More
std::map for storing static const Objects

as seen on Game Development - Search for 'Game Development'
I am making a game similar to Minecraft, and I am trying to fine a way to keep a map of Block objects sorted by their id. This is almost identical to the way that Minecraft does it, in that they declare a bunch of static final Block objects and initialize them, and then the constructor of each block… >>> More
Running in to some issues with Tumblr's Theme Parser

as seen on Stack Overflow - Search for 'Stack Overflow'
Below part of a tumblr theme I'm working on and you will notice that I use the {block:PostType} syntax to declare the opening tag of each post, which is a <li> element in an Ordered List. This allows me to not only dynamicly set the li's class based on the type of post but cuts down on the number… >>> More