Question

i’m trying to modify a Joomla template to create a link out of a defined ‘div’ on the index.php page and am not having any luck. in the original source, there was an an object, ‘bglogo’ which is a static .jpg, and a separate area within it that contained the link. i got rid of the separate area, and now want to make bglogo a link. i can’t figure out how to do this, the php code is below and the webpage is tagalong.in (bglogo being the image in the top right corner of a name tag)

<div id="entries">
    <jdoc:include type="modules" name="content-top-a" style="xhtml" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <div class="clr"></div>
    <jdoc:include type="modules" name="content-bottom-a" style="xhtml" />
</div>

<div id="sidebar">

    <!-- logo about etc here -->
    <div class="bglogo">
        <a href= "http:www.meetup.com/tag-along" > </a>
    </div>

    <!-- menu -->
    <?php if( $this->countModules('sidebar-a') ) { ?>
    <div id="sidebartop">
        <jdoc:include type="modules" name="sidebar-a" style="xhtml" />
    </div>
    <?php } ?>

    <?php if( $this->countModules('sidebar-b') ) { ?>
    <div id="sidebarright">
        <jdoc:include type="modules" name="sidebar-b" style="xhtml" />
    </div>
    <?php } ?>


    <div id="sidebarleft">
        <?php if( $this->countModules('sidebar-c') ) { ?>
        <jdoc:include type="modules" name="sidebar-c" style="xhtml" />
        <?php } ?>
        <?php echo '<h3>Copyright</h3>'.$copyright . $warningerrorx; ?>
    </div>


</div>

Answer 1

Okay I see where you are going.

You will need to add http the colon and two forward slashes to the beginning of the link. (had to describe it that way as they get stripped – as per my original comment).

The link is present already – but has nothing inside of it – because the image is a background image on the div. What you need to do is create some css that will apply only to the link within the div with the class of bglogo. This should then be given a width and height so it overlays your background image.

Because the parent bglogo div is already the right height and width I’d suggest width: 100%; and height:100%. Be aware that links are generally inline elements and don’t normally take a height or width. So we must also tell the anchor (link) to behave like a block level element.

All together that gives us:

.bglogo a{display:block; width: 100%; height:100%;}