A:hover problem

HTML & CSS
1

Hi

I’ve spent hours on this, which must be very, very simple, ans I’m ashamed to come for help on this…

I made the hover colour in the sidebar white, but having tried every possibility I cannot see why it does not work for the bottom 2 images

http://pintotours.net/TEMP/FRONT/Front.html

> <div class="row">

> <div class="box1"><img src="/Pinto/Ads/Avis.jpg" alt="" width="300" height="250"></div>

> <div class="box1"><img src="/Pinto/Ads/Allianz.jpg" alt="" width="300" height="250"></div>
> <br>
> <a href="http://www.anrdoezrs.net/click-7089264-10563574-1429054181000" target="_blank"><div class="mgn1"><p>RENT-A-CAR</p></div> </a>
> <a href="http://www.tkqlhce.com/click-7089264-11474692-1397581010000" target="_blank"><div class="mgn1"><p>TRAVEL INSURANCE</p></div></a> 


> </div><!-- close row -->

The more immediate css is below, and I looked at the containing divs #main and #wrapper and cannot see what’s stopping it

.mgn1 p{
text-align:center;
color:white;
font-size:20px;
padding-top:10px;
padding-bottom: 20px;
margin-top:0;
 white-space: nowrap;
}

.mgn1 a:hover{
color:gold !important;
}

.box1 img{
display:block;
height:auto;
max-height:250px;
width:80%;
margin:10% auto;
}
1 Like
2

Unless I’m missing it, I don’t see any tags with the .mgn1 class that have an a tag as a child to style.

3

Hi

My head has stopped working…

This is the code and I believe the a tag is there.

.mgn1{
display:inline-block;
width:45%;
max-width:350px;
margin:0 15px;
height:50px;
border:1px solid gray;
background-color:#008B8B;
}


.mgn1 p{
text-align:center;
color:white;
font-size:20px;
padding-top:10px;
padding-bottom: 20px;
margin-top:0;
 white-space: nowrap;
}

.mgn1 a{
color:white;
}
.mgn1 a:hover{
color:gold !important;
}

Could you be more specific, please?

Please…

EDIT

I may have added it recently after you saw the stylesheet. But it still does not work

4

I wasn’t talking about your CSS, but your HTML

5

This is my html. the links are within the a tags. At least that’s what I thought,

<a href="http://www.anrdoezrs.net/click-7089264-10563574-1429054181000" target="_blank"><div class="mgn1"><p>RENT-A-CAR</p></div> </a>
<a href="http://www.tkqlhce.com/click-7089264-11474692-1397581010000" target="_blank"><div class="mgn1"><p>TRAVEL INSURANCE</p></div></a>

What do I have to do, please?

Do you mean that it is the p tag I have to target? p:hover? I never heard of it!

I don’t believe it! It works!

many thanks

6

Depends on what you want to do.

But you will need to either change the CSS to match the HTML or change the HTML to match the CSS

Personally, though I guess HTML5 allows it, it doesn’t feel right to me to have block level elements inside of inline

EDIT

Great!

7

Hi

We crossed messages.

It’s working! I learned something new.

Many thanks

8

HTML5 does allow ANCHORS to be the parent of block elements. IIRC that’s the only one.

9

Yes but it doesn’t work when the CSS assumes that the anchor is inside the block element - you have to define it the same way around in both places.

10

Hi

Could you tell me how I could change it and get to work exactly as it does now, please?

Sorry to acknowledge that after 3 years I still don’t understand css/html speak. I take it that the anchor is th a tag, and that the block element is the mgn div Is that so?

But as the a tag is at the extremes of the line and the mgn div inside them, I don’t understand what you are saying. Could you explain, please?

see here http://pintotours.net/TEMP/FRONT/box1.html

.row {
text-align:center;
}


.mgn{
display:inline-block;
width:45%;
max-width:350px;
margin:0 15px;
height:50px;
border:1px solid gray;
background-color:#008B8B;
}


.mgn p{
text-align:center;
font-weight:bold;
color:white;
font-size:20px;
padding-top:10px;
padding-bottom: 20px;
margin-top:0;
 white-space: nowrap;
}


.mgn p:hover{
color:#ffd700;
}




<div class="row">

<div class="box"><img src="/Pinto/Ads/ParkPlaza.gif" alt="" width="200" height="200"></div>

<div class="box"><img src="/Pinto/Ads/Sandals.gif" alt="" width="250" height="250"></div>

<div class="box"><img src="/Pinto/Ads/Emirates.jpg" alt="picture" width="250" height="250"></div>

<br>

<a href="http://www.tkqlhce.com/click-7089264-11055787-1434055526000" target="_blank"><div class="mgn"><p>WORLDWIDE</p></div> </a>

<a href="http://www.kqzyfj.com/click-7089264-10992962-1333028183000" target="_blank"><div class="mgn"><p>CARIBBEAN</p></div></a> 

<a href="http://www.tkqlhce.com/click-7089264-11473814-1442303969000" target="_blank"><div class="mgn"><p>FLY EMIRATES</p></div></a>


</div><!-- close row -->
11

It works and HTML5 should allow block elements wrapped by anchor tags (an inline element). @felgall, can you give an example of when this could fail? I avoid using that way, but I’ve never seen it broken on HTML5 - only on HTML4.01.

@qim, to make things clear. This is how I would do:

<style>
  .box img { margin: 10% auto; }
  
  .box p {
    display: block;
    border-top: 1px solid gray;
    background-color: #008B8B;
    margin: 0;
    padding: 12px 0;
    font-size: 20px;
    font-weight: bold;
  }

  .box a {
    color: white;
    text-decoration: none;
  }

  .box a:hover { color: gold; }
</style>
<div class="row">
  <div class="box">
    <img src="/Pinto/Ads/ParkPlaza.gif" alt="" width="200" height="200" naptha_cursor="text">
    <p><a href="http://www.tkqlhce.com/click-7089264-11055787-1434055526000" target="_blank">WORLDWIDE</a></p>
  </div>

  <div class="box">
    <img src="/Pinto/Ads/Sandals.gif" alt="" width="200" height="200">
    <p><a href="http://www.kqzyfj.com/click-7089264-10992962-1333028183000" target="_blank">CARIBBEAN</a></p>
  </div>

  <div class="box">
    <img src="/Pinto/Ads/Emirates.jpg" alt="picture" width="200" height="200" naptha_cursor="region">
    <p><a href="http://www.tkqlhce.com/click-7089264-11473814-1442303969000" target="_blank">FLY EMIRATES</a></p>
  </div>
</div>

In your case, wrapping divs in your anchor tags shouldn’t be needed, although I don’t see it as a huge problem. In addition to that, you don’t even need p tags wrapping an anchor tag since HTML5 doesn’t require that.

Another thing I have changed was to add the anchor tags inside each box div, instead of creating a new row (separated by the break tag) and lining them up almost blindly.

1 Like
12

H Mateus

Thank you for persevering! It kept me awake half the night!

When you say it works, do you mean it will work with your changes, or it works as it is?

Also, before I start: you are referring to the test page http://pintotours.net/TEMP/TEST/index2.html where all’s now well except for the sidebar that is pushed down; rather than to the published index page http://pintotours.net/. Right?

I’ll get cracking straight away.

EDIT

I just realized that this is not the current thread on my latest problem to do with the image slider in IE8.

Yes, ssoemthing else that did not get resolved properly. I will come back to this later. Thank you

13

I think felgal was referring to the case in the OP where the css selectors were set up wrong, different to the html structure, then it will fail or course. Set up properly, it should always work.

14

[quote=“qim, post:3, topic:207993”][quote=“SamA74, post:13, topic:207993”]
I think felgal was referring to the case in the OP where the css selectors were set up wrong,
[/quote]

Precicely.

.mgn1 a { }

in the CSS will “fail” when the HTML is

<a><div class="mgn1"></div></a>

because there is no <a> nested inside the element with the class for it to target.

Both need to either have the <a> inside the <div> or both need to have the <a> outside the <div> - it will fail if you have one inside and one outside.as was in the original code.

15

Hi Mateus

Sorry, I spent most of the day trying to sort out a big mess with IE8.

I’ve applied your code to a test page

http://pintotours.net/TEMP/REV/

Let me sleep on it, as I’ve changed and added quite a few things to the page which is now live.

Do you think my unorthodox (so it seems) code might cause problems?

Thank you again Mateus

PS: one question: what is this naptha_cursor about?

The one thing that I would want to add is the bottom blue “border”. How can that be done with your code?

16

HTML5 does allow block elements in nested in <a> tags, so it’s not that unorthodox if you are using html5. The reason people are reluctant to accept this is because <a> is an inline element, and it is wrong to put block elements (Eg, <div>) inside an inline one.
While I understand why it’s wrong, I see the benefits of allowing it from a design point of view. You can have chunky “card style” links. Though if I do this I would set the <a>s to display:block just to be more correct about it.
The problem was just that the html did not match the css, so one or the other had to change.

17

Hi Thanks Sam

Did you have a chance to look into the other problem caused by the forward/backward buttons?

18

No, I have not found time, and javascript is not my thing.

19

Shall I open a new thread in js forum?
Thanks for all the help you gave me.

20

It’s not unorthodox, really it’s all about preference in this case (and perhaps some tradition). Unless you need to support legacy browsers that strictly support HTML 4.01 or XHTML, your way is absolutely fine. I have this thing of trying to support as many browsers as I can purely on a whim.