CODEWITHSUNDEEP
htmlcss
George Reason
George Reason

Reputation: 173

Displaying titles inline with logo

Trying to have a center Title with a slogan below then on the right side I want to display my Logo.

Here is the code http://jsfiddle.net/xhRnG/

Any help is greatly appreciated!

Thanks George

<div id="titles">
<h1>Title</h1>
<h2>This is the slogan</h2>
<p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p></div>

Upvotes: 0

Views: 2032

Answers (5)

Sheric
Sheric

Reputation: 416

Replace SOMEWIDTH with a good value, and LOGOWITH with width of your logo. Then replace TOTAL_WIDTH with sum of both;

<div id="titles" style="width: TOTAL_WIDTH; margin: 0 auto;">
    <div style="width:SOMEWITH; float:left;">
        <h1 style="text-align: center;">Title</h1>
        <h2 style="text-align: right;">This is the slogan</h2>
    </div>
    <p style="width: LOGOWIDTH; float: right;">
        <img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/>
    </p>
    <br style="clear: both;" />
</div>

Upvotes: 0

Mat&#237;as C&#225;nepa
Mat&#237;as C&#225;nepa

Reputation: 5974

with a tiny modification....something like this: http://jsfiddle.net/xhRnG/7/?

HTML:

<div id="titles">
    <div>
            <h1>Title</h1>
            <h2>This is the slogan</h2>
    </div>
            <p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p>
        </div>

CSS:

#titles
{
 text-align: center;   
}

#titles div, #titles p
{
    display: inline-block;
}

Upvotes: 1

Floris
Floris

Reputation: 46375

Make a centered table that's 100% wide, with three cells: the one in the middle contains your title, the one on the right the logo, and the one on the left is empty. You need that one on the left so you can center the title on the page.

<div id="titles">
    <table width="100%" align="center">
        <tr>
            <td width="20%"></td>
            <td width="60%" align="center">
                <h1>Title</h1>
                <h2>This is the slogan</h2></td>
            <td width="20%">
                <img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></td>
         </tr>
    </table>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207901

This is one way to do that: jsFiddle example

CSS

h1, h2 {
    text-align:center;
}
#logo {
    position:absolute;
    right:0;
}

HTML

<div id="titles">
    <p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png" /></p>
    <h1>Title</h1>
    <h2>This is the slogan</h2>
</div>

Upvotes: 0

Norbert Pisz
Norbert Pisz

Reputation: 3440

<div id="titles" style="text-align:center">
        <h1>Title</h1>
        <h2>This is the slogan</h2>
        <p style="float:right; position:absolute; top:0px; right:0px"><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p>
    </div>

Upvotes: 1

Related Questions