Center header image and make it clickable

Permalink May 16, 2013 at 6:59 PM

I am trying to center my header image and make it clickable.

here is the code I am trying to use
in header.php

<header>
        <div id="header-area">
        <a href="http://www.carolinestreetptso.org"><img src="<?php echo $this->getThemePath()?>/images/layout_top.png" alt="header image" align="middle" /></a>
        </div><!-- #header-area ends -->
    </header><!-- header ends -->

in my css

header {
        display: block; margin-left: auto; margin-right: auto;
}

The other issue I am having is when I use a non-clickable image, depending on the browser the image is not centered. Here is the code I was using for that

php

<header>
        <div id="header-area">
                <?php
                        $a = new Area('Header Top');
                        $a->display($c);
                        ?>
        </div><!-- #header-area ends -->
    </header><!-- header ends -->

header {
  background: url(images/layout_top.png) no-repeat top left;
        position: relative;
        padding-top:220px;
        margin-left:220px;
}

Right now I have the first set of code implemented.

the website is:http://www.carolinestreetptso.org...

webpresso replied on May 17, 2013 at 7:56 am Permalink Best Answer Reply

Hi

First Isssu:
Css:

header {
    display: block;
    height: auto;
    margin:0 auto;
    width: 100%;
}
#header-area {
    margin: 0 auto;
    text-align: left;
    width: 60%;
}

Second Issu:
Not Testet:

header {
background-image: url(images/layout_top.png);
background-repeat: no-repeat;
background-position: top center;
background-size:contain;
width:100%;
height:172px;
}

Best,
Tino

globalnerds replied on May 17, 2013 at 8:45 am Permalink Reply

I used your first suggestion:

header {
    display: block;
    height: auto;
    margin:0 auto;
    width: 100%;
}
#header-area {
    margin: 0 auto;
    text-align: left;
    width: 60%;
}