Skip to main content
R
r_tist
Inspiring
January 12, 2018
Answered

link a logo via div

  • January 12, 2018
  • 2 replies
  • 892 views

CSS-Tricks mentioned that to hyperlink your logo you can surround a div with the <a> tags.

<a href="http://example.com"> <div> anything </div> </a>

How would it work in this case?

<div class="col-sm-12 col-lg-12 clearfix">

       <a target="_blank" href="#"><div class="logo"><img src="images/logo.png" class="img-responsive" alt="Logo"></div></a>            

</div>

I tried this but it did not seem to work. I tried it on a local server for testing. Can you advise if something is incorrect here?

Thank you!

    This topic has been closed for replies.
    Correct answer WolfShade

    Seems pretty straightforward.  No reason it shouldn't work.

    <DIV>
        <A>
            <DIV>
                <img />
            </div>
        </a>
    </div>

    V/r,

    ^ _ ^

    2 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 12, 2018

    Adding to WolfShade​ reply, you will have to replace the '#' in <a target="_blank" href="#"> with the destination such as

    <a target="_blank" href="myPage.html"><div class="logo"><img src="images/logo.png" class="img-responsive" alt="Logo"></div></a> 

    As a side note: Because Bootstrap 3+ is a mobile first framework it is not neccessar to add all of the classes as in <div class="col-sm-12 col-lg-12 clearfix">. You can remove the class for lg as in

    <div class="col-sm-12 clearfix">

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    R
    r_tistAuthor
    Inspiring
    February 7, 2018

    I cannot get this specific use case to work:

    <div class="col-sm-12 clearfix">

        <div class="logo">

         <a target="_blank" href="https://www.google.com"><img src="images/logo.png" class="img-responsive" alt="The Logo"></a>

         </div>

    </div>

    I just need the .png of logo to link out actively. As is, it does not work at all. Do the <a> tags get pulled out and surround the logo div class instead?

    Thank you.

    WolfShade
    WolfShade
    Legend
    February 7, 2018

    No.  Unless there is some extenuating circumstance, the code you provided should work.  What, precisely, isn't working?

    V/r,

    ^ _ ^

    WolfShade
    WolfShadeCorrect answer
    Legend
    January 12, 2018

    Seems pretty straightforward.  No reason it shouldn't work.

    <DIV>
        <A>
            <DIV>
                <img />
            </div>
        </a>
    </div>

    V/r,

    ^ _ ^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices