I thought I had finished the page but now have an interesting, annoying problem:
If you look at the bottom of the page I have a couple of links: one for the map and below for the affiliate links.
Both, work fine if you click where you should, but the links are active also all the way to either side of the page. That is, if you click way outside, say, the map, it will also open!
http://pintotours.net/TEMP1/ParaPalma.html
Why is this?
Thanks
Hi there qim,
please recheck your posted it link so
that members may see your problem.
coothead
My apologies: Amended!
I think I mentioned that to you once upon a time. In fact, the code that I sent you included a pink background that showed the clickable area outside of the image. The clickable area mimicked your original code, so is not really a new discovery.
The cause of this problem is easy to spot with Firebug, and should have been easy to spot from the HTML… if it weren’t hidden offscreen. It only took a minute to reformat the HTML so I did that anyway because it needs to be changed. Why?
Well, because the anchor is around everything in the <div class="map"> container; therefore, the entire area is clickable… image and white space. I swapped the level of the anchor and <div class="pic400"> so the anchor is only around the image and not the surrounding white space. I then changed the CSS considerably to fit the revised arrangement. It’s my same old formula. You’ve ignored it before, now you can do it again 
The HTML should look like this: (I changed the width and height dimensions to match the .jpg, too.)
<div class="map">
<div class="pic400">
<a href="http://pintotours.net/Americas/DomRepublic/MapPalmaReal.html" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="http://pintotours.net/Americas/DomRepublic/images/MapPalmaReal.jpg" alt="Paradisus Palma Real" width="300" height="165">
</a>
</div>
</div> <!-- close map -->
The CSS should look like this: (it replaces the existing .pic400, .pic400 img and .map a rules)
.pic400 {
margin:0 auto;
}
.pic400 img {
display:block;
width:100%;
height:auto;
}
.map a {
display:block;
max-width:400px;
border:7px solid gray;
margin:0 auto;
}
a img {border:0 none;} /* this rule is new */
Notice that the border, padding and width restrictions were removed from around the image… again.
Someone else can help with the affiliate links portion.
Dear ronpat
Thank you very much for sorting out my latest problem.
Let me assure you that I did not ignore your earlier advice; I simply could not remember it. I have serious problems with my memory. I keep going to the kitchen to get something but return empty-handed because by the time I get there (20seconds) I can’t remember what it was I needed. It is only after considerable effort and 3 or 4 times later that I succeed. There is a medical term for that, I’m afraid…
Also, yesterday I spent quite some time playing with the new toy (Firebug) but could not see anything wrong other than unnecessary font-family mentions. I selected and unselected all the boxes to no avail.
I’ve made the changes you suggested and the problem has gone, although as always a new one cames up. The reason I coded like that was because I wanted the two images at the bottom, associated with affiliate code to be clickable without repeating the affiliate code. That meant all the text in-between became clickable too. I’ve now sorted that out by losing the clickability (a neologism…) of the bottom logo, but came up with another puzzle:
I want to limit the width of the text in .guarantee and inserted max-width:60% in various places, and despite having text-align:center; all I achieve is that the text goes to the left. Why?
Many thanks and apologies for coming back to the same issues.
First, at narrow widths, the map image bumps into the edges of the page. If you would like a little space along the edges of the map at narrow widths, then change .pic400 from margin:0 auto; to margin:0 5%. I prefer this method of applying a margin along the edges of an image (or container) rather than assigning a width with a percent value such as 90% to the image.
.pic400 {
margin:0 5%; /* changed from "0 auto" to "0 5%" */
}
Moving along…
I see that the .guarantee text is centered and that it extends fairly wide at narrow widths. An anchor was the first container inside of .guarantee, so the the text and white space were clickable. You can keep the anchor and make the text box smaller, or you can forfeit the anchor as you seem to have done. Which do you prefer?
(1) Eliminate the anchor around the affiliate text. Just make the text box narrower.
(2) Keep the anchor around the affiliate text and make the clickable text box narrower.
Yes, I prefer to keep things as they are, but do not understand why a text-align:center goes to the left simply because the max-width was added.
Thanks
You added the max-width to div.guarantee. .guarantee is a block element. To center a block element one must apply {margin:0 auto} to that element, like this:
.guarantee {
margin:0 auto;
}
{text-align:center} within .guarantee applies only to inline elements within .guarantee such as images (if they have not been assigned {display:block}).
Perfect1
Many thanks!
I recognise the problem, but help is at hand.
In the icons at the bottom of every post is a thing which looks to me like a medal ribbon (next to the reply button). It’s actually a bookmark, so you can use this to mark posts you need to return to at a later stage. You can find your bookmarks again in your profile, or by pressing g, b (in succesion, not simultaneously). The link (irritatingly) will only take you to the topic, not the post, but you can easily scroll down and find your blue bookmarks.
Thanks. I’ll try that, if I don’t forget…
Interestingly, I tried on your post, clicked away at the blue shield, and nothing happened!
Qim, the REAL bookmark icon is next to the red Reply button.
That blue one in TechnoBear’s post is an image that she attached to show you how a clicked bookmark should look.
Got it, thanks!
Ahhh, I have this same problem. Can anyone address it ? I tried changing the HTML but I couldn’t adjust it properly.
Can anyone look at this link and check edited link removed
If you look at the first page you’ll see what I mean.
Appreciate any help
You mean the menu running into the logo?
The menu has absolute positioning, so you can give it a left: value to clear the logo.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.