Simple Text Link not Working

[dmwhipp]

I'm working on a site re-design, and am having an issue with a link. Here is the sample page: http://gidgetsboutique.com/template1.php

In the gray bar which contains the logo, I would like the Free Shipping text to link to the Shipping page, but cannot get it to work. The logo link works, as does the GidgetsBoutique.com link in the same section. Here is the coding I have for that section:

<div style="width:960px; height:180px; margin:0px auto;">
<div class="bannerbar" style="position:absolute; margin-top:75px; height:30px;"></div>
<div style="width:940px; position:absolute; margin-top:90px; padding-left:20px; text-align:left;"><a class="bannerlink" href="/shipping.php">Free Shipping on All Orders!</a></div>
<a href="http://gidgetsboutique.com"><img src="/graphics/logo01.png" alt="Gidget's Boutique" style="position:absolute; margin:0px 367px; width:225px; height:180px;"></a>
<div style="width:940px; position:absolute; margin-top:90px; padding-right:20px; text-align:right;"><a class="bannerlink" href="http://gidgetsboutique.com">GidgetsBoutique.com</a></div>
</div>

Any help would be appreciated.
Deborah

[styxlawyer]

You have two <div>s each 940px wide placed on top of one another. The second one is overlaying the first so the link cannot be clicked. If you change the background colour of the second <div> you should see the problem straight away.

Reduce the width of each <div> to 458px (which is 960/2 - 22 to allow for the 20px padding), change the "position:absolute;" to "display:block;" and float one left and the other right.

[dmwhipp]

You have two <div>s each 940px wide placed on top of one another. The second one is overlaying the first so the link cannot be clicked. If you change the background colour of the second <div> you should see the problem straight away.

Reduce the width of each <div> to 458px (which is 960/2 - 22 to allow for the 20px padding), change the "position:absolute;" to "display:block;" and float one left and the other right.

I definitely still get confused over layering divs... I tried your suggestion, but the logo moved to the right and the text disappeared (2nd example), so I'm guessing something in my CSS is messing this up.

I winged it on the third example and got it to work, but only by using a negative top margin to get the logo in the right place. Is that okay to do?
http://gidgetsboutique.com/template1.php

[dmwhipp]

So the first of the 3 examples looks correct, but the link to the right doesn't work because I have the first layer on top of it. The second is a no go. The 3rd is close, and works in Chrome, Edge and IE, but the link/text to the right (GidgetsBoutique.com) doesn't even appear on my iPad or smart phone. Ugh.

[styxlawyer]

Sorry, my bad. I forgot to allow for the width of the logo image which is 225px! The divs with the links only need to be as wide as the text they contain (add a few px to be sure). So with the total width being 960px and the logo being 225px you have a remaining space of 735px with which to play. You have split this as 367 & 368 which is fine but you could easily get away with 300px on each side. I would float both the links first (one left and one right) then insert the image block between the two. The top of the image is referenced to the grey bar so adding a negative top margin will move it up to where you want it.


See if this works:



<div style="width:960px; height:180px; margin:0px auto;">
<div style="position:absolute; margin-top:90px; height:50px; background:#999;">
<div style="display:block; width:300px; float:left; padding:13px 0px 0px 20px; text-align:left;"><a class="bannerlink" href="/shipping.php">Free Shipping on All Orders!</a></div>
<div style="display:block;width:300px; float:right; padding:13px 20px 0px 0px; text-align:right;"><a class="bannerlink" href="http://gidgetsboutique.com">GidgetsBoutique.com</a></div>
<div style="width:225px; margin:-65px auto 0 auto;"><a href="http://gidgetsboutique.com"><img src="/graphics/logo01.png" alt="Gidget's Boutique"></a></div>
</div>
</div>

[styxlawyer]

Changing the nesting and the display order of the objects makes it work better:

Create the container of 960x180
Create the grey bar with a top margin of 65px and a height of 50px
Insert the two links floating the first one left and the second one right.
Finally insert the image. It's horizontal position will be relative to the container and the top of the image will be immediately below the grey bar so it will need a top margin of -115px to bring it back to the top of the container. I have put a green box around the container so you can see where it is. Delete the "border:" styling when you're happy.



<div style="width:960px; height:180px; margin:0 auto; border: 1px solid green;">
<div style="width:960px; margin-top:65px; height:50px; background:#999;">
<div style="display:block; float:left; width:300px; padding:13px 0px 0px 20px; text-align:left;"><a class="bannerlink" href="/shipping.php">Free Shipping on All Orders!</a>
</div>
<div style="display:block; float:right; width:300px; padding:13px 20px 0px 0px; text-align:right;"><a class="bannerlink" href="http://gidgetsboutique.com">GidgetsBoutique.com</a>
</div>
</div>
<div style="display:block; width:225px; height:180px; margin:-115px auto 0 auto;"><a href="http://gidgetsboutique.com"><img src="logo01.png" alt="Gidget's Boutique"></a>
</div>
</div>

[dmwhipp]

It worked perfectly after I added
width:960px; to the gray bar div. I then tweaked it a bit further since I redid the logo to make it smaller. I understand the first 2 divs with the text... that makes perfect sense to my brain. Where I get confused, is adding the logo as the third div when it displays in the center.

I made up another page for myself to try to dissect this so I can understand it and not run into this problem again: http://gidgetsboutique.com/template2.php. I got it to work, but I'm still a bit confused about the logo placement. The negative margin worked to correctly align the logo vertically, but I had to add
text-align:center; to get the logo to center in its given div, when it seems
margin:-55px auto 0px auto; should have worked. Just when I begin to think I know what I'm doing... Is there an obvious reason why the margin settings don't center the logo that I'm missing?

Thank you so much for your help!
Deborah

[molendijk]

This is more intuitive, because it emulates a tablr

<div style="display: table; width: 960px; margin: auto; ">

<div style="display: table-cell; vertical-align: middle; text-align: center; ">
<div style="height: 20px; padding-top: 10px; padding-bottom: 10px; background: #ff0000" >
<a class="bannerlink" style="color: white" href="http://gidgetsboutique.com/shipping.php">Free Shipping on All Orders!</a>
</div>
</div>

<div style="display: table-cell; background:#00ff00; text-align: center">
<a href="http://gidgetsboutique.com" ><img src="http://gidgetsboutique.com/graphics/logo02.png" alt="Gidget's Boutique"></a>
</div>

<div style="display: table-cell; ; vertical-align: middle; text-align: center">
<div style="height: 20px; padding-top: 10px; padding-bottom: 10px; background:#0000ff" >
<a class="bannerlink" style="color: white" href="http://gidgetsboutique.com/shipping.php">Free Shipping on All Orders!</a>
</div>
</div>

</div>