CODEWITHSUNDEEP
htmlcsshyperlink
petiteco24601
petiteco24601

Reputation: 85

link on top half of page won't work

I know this a rather specific question and basic html question, but it's been happening on a few of my pages now, and I'm curious as to what exactly is going on.

I have a series of div boxes lined up vertically on a page, each one contains a picture that is a link to a different page on the website. The problem is when I add more than 3 of these div boxes, suddenly all the links on above the bottom three stop working.

http://webstage.emich.edu/dining-new/locations/easterneateries.php

I've tried the same code in jsfiddle, as seen below:

.locationsbx {
    position:absolute;
    width: 540px;
    height:70px;
    z-index:5;
    margin-left: auto;
    margin-right:auto;
    background-color: #363636;
    margin-top:110px;
}
.primetriangle {
    border-top:25px solid green;
    height: 0;
    position:absolute;
    width: 0;
    z-index:3;
    border-right: 25px solid transparent;
    height: 0;
    position:absolute;
    width: 0;
    z-index:5;
    border-top-color: #CCC;
}
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 20px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/estreetgrill.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/estreet.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 130px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/sunsetstrips.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top:240px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/freshens.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 350px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/uppercrust.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>

and it's working fine there- so I'm confused as to what might be some of the reasons why putting the code on the actual server would be causing problems with disabling the links.

Any thoughts/explanations would be super super appreciated

**NOTE: I am well aware that it is not in good form to have inline styles, especially when I have the external CSS sheet anyways. However, the inline styles are just there until I can resolve the actual problem with the links. ** ALSO: The link to the page is very obviously under construction still. I have been dealing with the disabled links over multiple pages now and am much more concerned with why they're disabling than the rest of the page

Upvotes: 0

Views: 170

Answers (1)

Besart Bytyqi
Besart Bytyqi

Reputation: 59

I went to check the source of your page you linked to and you're not closing the <div> with the class="locationsbx" on your page. I think you're doing in the code you pasted above but not on the actual page.

EDIT: Not really a complete answer. I would have just left a comment but I need 50 points for that, I don't have those.

Upvotes: 1

Related Questions