Search code examples
javascripthtmlcssstylesheet

CSS styling a hyperlink

I'm trying to apply some style to an anchor tag <a> without success, I want to create a URL in the first hexagon with the style of the other hexagons. I need to have MyURL styled like "This is a title" in the other hexagons.

  <li>
    <div>
    <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
      <h1><a href="#">MyURL</a></h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </div>
  </li>

(solved) pen -> http://codepen.io/anon/pen/PZNWGN

This is based on the thread below:

Responsive grid of hexagons

Can anyone give me some help?

Solution

  • It's inheriting position:absolute from the styles for #categories li *. Override it by adding:

    #categories li h1 * { position: relative; }

    Alternatively, replace #categories li * with something more specific.