PHP shouldn’t play a part of this.
I would create structure something like
<div id=”header”>
<div id=”headerimg1″></div>
<h1>Title</h1>
<h2>tagLine</h2>
<div id=”headerimg2>include search</div>
</div>
then float the headerimg1 to the left,
and float the headerimg2 to the right.
Just make sure the height of the second image is short enough for the search box.
Then set the images as the backgrounds for each div.
You may need to adjust the margin and padding for #header h1 and #header h2 to fit between the images.
That sounds great, and do-able, but I’m not quite sure how to make it fit in with this in the header:
<div id="header">
<div id="headerimg">
<div id="searchdiv">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
Calling up this in the css:
#headerimg {
padding-left: 180px;
margin: 3px;
height: 250px;
border-bottom: 1px solid #061506;
font-family: verdana, arial, sans-serif;
color: #fff;
font-size:150%;
font-weight:bold;
background: #061506 url("images/icon.jpg") no-repeat left;
background-position: 1%
I tried to add an #headerimg02 to the css and call it in the header.php, but couldn’t swing it without wiping everything out. I’m seriously modding this template, so each thing I tinker with throws lots of stuff off.
Thanks again for any help.
I think you are going to have to scrap the existing header code and CSS, and create your own, thus my suggestion. Unfortunately, I don’t have to time to completely write it for you, you’ll need to do a little leg work yourself, but my framework *should* work….
Hey, thanks for the help.
It took 4 hours of messing, but I finally implimented something along the lines of what you suggested. The search bar cuts into the image at the moment, but I might tweak with that.
I actually had to call 3 images for the head to look the way it was–the icon left image; the black background; and the right photo. I even got a rotate script to change the second image on reload.
Now I just have to get back my page links list, which I had to pull because it wouldn’t sit in the black area between the photos under the blog name. Any ideas?
Thanks a million! Happy New Year!
