Position Header Banner and Make It Clickable

  • ajb_80

    (@ajb_80)


    10 years, 10 months ago

    Hi,

    My site is: http://latinophysiciansofca.org/

    I’m trying to position a banner ad on my site to the far left of the container, but it’s hidden partway underneath the navigation bar. And I can’t get it to move via css.

    To header.php, I’ve added:
    <head>
    <div class=”headerbanner”><img src=”<?php bloginfo (‘template_directory’); ?>/images/LHC-Banner-Cropped.jpg” alt=”<?php bloginfo(‘name’); ?>” /></div>

    And to css.style, I’ve added:
    .headerbanner{
    width: 575px;
    height: 140px;
    position: relative;
    right: 550px;
    top: 5px;
    }

    I’m not sure *where* exactly in either of these files I should be placing these things, or if it even matters.

    The only time I can get the banner ad to work somewhat properly (in that it becomes clickable and goes to the correct link) is when I add a “float: left” or “float: right” to the css. But then the ad ends up all the way over to the left or right of my site, which of course isn’t what I want.

    What am I missing? Is there a simpler way for me to do this?

    Thanks for any help!

Viewing 1 replies (of 1 total)
  • linux4me2

    (@linux4me2)

    10 years, 10 months ago

    I’m a little confused about where you want your banner. You are talking about the Latino Health Conference 2015 banner, right? It looks like it would be best off to the right of your logo up against the right margin.

    First, if you’re going to doing this, you should be using a child theme so your changes aren’t overwritten with a theme update.

    Next, you’ve got the code in the wrong place in your header.php. Let’s say I’m looking at the correct banner and you want it to the extreme right of the page opposite of your logo.

    I think in your header.php, you’d put the following between the div for wrap and the one for logo so it looks like this:

    <div class="wrap">
  <div class="headerbanner"><a href="link to the conference page here"><img src="<?php bloginfo('template_directory'); ?>/images/LHC-Banner-Cropped.jpg" alt="<?php bloginfo('name'); ?>" width="575" height="140" /></a></div>
  <div class="logo">

    And then in the style.css for your child theme, you’d have something like this:

    .headerbanner {
  float: right;
  margin: 5px;
}

    Try that, and then you can tweak the CSS if needed.

Viewing 1 replies (of 1 total)

The topic ‘Position Header Banner and Make It Clickable’ is closed to new replies.