WP header.php right align image??

3 replies
  • WEB DESIGN
  • |
I have tried to add an image to the header.php code in a Wordpress theme using various suggestions found through Google searches on the subject.

Although I have found some different types of image code, none seem to allow the image to display to the right of the header text.

It either pushes the text down or replaces the text with the image I am using.

Does anyone know the correct coding to have the image to the right of the text like:

Website Title
Tag Line .................................................. ..............................Image Here


<body>

<div id="wrapper">

<div id="header" class="col last span-12">

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2>some text here <br></br><span class="low">additional text here</span></h2>
</div>

<hr />

Any help would be most appreciated!
#align #headerphp #image
  • Profile picture of the author Kezz
    Hey,

    Could we see a link please to see what's happening in the theme?
    {{ DiscussionBoard.errors[973708].message }}
  • Profile picture of the author CaffeinatedWorld
    Here is the code you need:

    Just the image on the right with text on the left
    <div id="wrapper">
    <div id="header" class="col last span-12">
    <div id="header-container">
    <div style="float: right; clear: none;">
    <img src="YOUR IMAGE SOURCE HERE" alt="YOUR IMAGE INFO HERE" />
    </div>
    <div style="float: left; clear: none;">
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <h2>some text here <br></br><span class="low">additional text here</span></h2>
    </div>
    </div>
    </div>


    Image on the right is also a link to the main page
    <div id="wrapper">
    <div id="header" class="col last span-12">
    <div id="header-container">
    <div style="float: right; clear: none;">
    <a href="<?php bloginfo('url'); ?>
    <img src="YOUR IMAGE SOURCE HERE" alt="YOUR IMAGE INFO HERE" />
    </a>
    </div>
    <div style="float: left; clear: none;">
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <h2>some text here <br></br><span class="low">additional text here</span></h2>
    </div>
    </div>
    </div>
    {{ DiscussionBoard.errors[974295].message }}
  • Profile picture of the author realworldincome
    Thanks CaffeinatedWorld for providing exacting what I needed. Your code is much better than I was able to find elsewhere during Google searches. Brilliant. The header is now displaying correctly thanks to you!

    Kezz - thanks for your offer to help as well.
    {{ DiscussionBoard.errors[976934].message }}

Trending Topics