3

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?

Community
  • 1
  • 1
odew
  • 581
  • 2
  • 8
  • 18

2 Answers2

2

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.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • #categories li a seems to work – Dave Dec 17 '15 at 22:07
  • `#categories li *` is not an efficient selector. CSS parses selectors starting from the _RIGHT_... This means the `*` will select ALL elements on the page, and then see if it has a parent `li`, better to target some specific elements, rather than `*`. See: [Why do browsers match CSS selectors from right to left?](http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left) – Sergey Dec 17 '15 at 22:09
  • It's a micro-optimization, and not one I would worry about in practice. Either way, the better solution is to replace `#categories li *` with something more specific. – Blazemonger Dec 17 '15 at 22:23
0

In all the other exagon the title is in :

<h1>Title</h1>

But In the first one you are placing the title in an a tag like so:

<a href="#">This is a title</a>

An this will cause the problem

Franco
  • 2,309
  • 1
  • 11
  • 18