<a href=""> partly not working

HTML & CSS
1

Hi, I am new to the forum (at least I signed up after reading some time here) and just re-started building a website from scratch. Some time ago I was busy with Html and CSS. My idea is to set up a page which working well and structured well before I try to change it into proper Html5. By doing so, I learn the differences.

But ok, first issue I cannot figure out is why a <a href="" title="">text</a> is working at one part of the website, but in a different div (section) it is not doing any (even the mouse not change into a hand hovering the link).

Here the html:

<div id="contentleft">
		    <h2>lorum ipsum</h2>
			<p>lorum ipsum.</p>
			<p style="margin-bottom:40px;">As your<strong> DMC (Destination Management Company)</strong> we provide tailormade Incentive solutions and business
			travel options.</p>
		 </div>



<div class="equaliser"></div> 
   <div class="prodrow">
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="aa.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="" title="">lorum ipsum</a></p>
	</div>
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="bb.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="">lorum ipsum</a></p>
	</div>
     <div class="box rght">
	      <h2>lorum ipsum</h2>
		  <img src="cc.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="" title="">Nile cruises</a></p>
	
	</div>
	<div class="box">
	      <h2>v</h2>
		  <img src="dd.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="" title="">lorum ipsum</a></p>
	</div>
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="ee.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="" title="">lorum ipsum</a></p>
	</div>
     <div class="box rght">
	      <h2>lorum ipsum</h2>
		  <img src="ff.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Philosophi autem in suis lectulis plerumque moriuntur. Istic sum, inquit. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? </p>
		  <p><a href="" title="">lorum ipsum</a></p>	
	</div>
</div>

The CSS:

.box { float:left;border: 0; width:250px; margin-right:8px; background:#FBFFEC;}
.prodrow{float:left; background:#FBFFEC;}
.prodrow div.rght{margin:0; width:250px; border:none;}

The working part:

<div id="contentleft">
   <h2>text</h2>
  <p>text <a href="" title="">other text</a> more text </p>
</div>

The navigation at top of page is working as well.

Hope the above is enough information to bring me back on track.

Thanks
Dirk

2

have you tried putting links in the empty spaces? even if you just put an id to somewhere on the page e.g if you put

<a href="#contentleft" title="top of page">lorum ipsum</a>

that will just jump you up the page to that id but should work or just put in http://www.example.com to test them.

3

Thanks Noppy,

Yes I put links in them, For coding here I removed that information. To me already strange that when moving the mouse over the link, nothing is happening. As if all is fixed

4

So, which link in the code above works, and which does not? You show some sample code separately that works, but I must be going blind as I don’t see that in the main code segment, at least not exactly.

Have you run it from something like Chrome with the developer console, where you can examine what CSS rules are being applied and where?

I’m very rusty on HTML and CSS, and in fact have only started straying into this area because I want to do the same - I have a couple of sites that are getting on a bit, and I’d like to re-code them in HTML5 and maybe even improve the appearance.

5

Hi there carthago1,

all six links in your code work as expected. :winky:

But I have to ask why you have enclosed them all within p elements". :wonky:

Semantically, it does not make any sense. :unhappy:

coothead

6

just had a thought. Is one of your divs floating over the link stopping you actually getting to the link. I.e. can you highlight the text in the link you can’t click? If you can’t its because there is something overtop of it. Try turning off your css and seeing if the links all work without. You can do that in the browser (FF) view → pagestyle → no style

hth

1 Like
7

Noppy, Coothead, Droopsnoot

Thanks for the replies and without style the links are working well. Good tip Noppy. Just ask myself what is overtop of it.
Coothead, I removed the <p></p> around the <a href=""></a>. I cannot explain why I put them inside the <p></p>

I can PM the three of you with the link to the page. At this moment I not want to have it visible and indexed via this forum.

8

I was about to say the same exact thing :wink:
It sounds like that could be the problem…

9

From something I read elsewhere the other day, I don’t think that it would get indexed from here.

10

Playing little I noticed that the footer moved over the product row area. I included

between both areas and now links are working. Only I also have some whitespace extra as effect.

It has to be solved without this equaliser as well.

http://preview.tinyurl.com/yboy5nsj

Footer need some refining (my next step)

11

Any links placed in this forum will have the rel="nofollow" attribute, so reputable search engines should not follow to or index any pages that are linked.
If someone does not want their pages indexed, they should themselves use robots.txt and/or robots meta tags as appropriate.
However the forum posts themselves will be indexed, so a search for a particular domain name may result in a post here which mentions that domain.

12

In Chrome I miss the product rght box which in FF is displayed as supposed.

Somewhere in the CSS?

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.