CODEWITHSUNDEEP
htmlcssalignment
jezzipin
jezzipin

Reputation: 4254

Align header element alongside image

I have a small menu panel that needs to be included on my page that looks like the image below:

Menu Panel

I have the code in a jsFiddle that I have created so far and I know some of the images are incorrect but the issue is I cannot get the header to align neatly to the right of the image as shown in the image.

Any clues?

Upvotes: 0

Views: 80

Answers (2)

Baronth
Baronth

Reputation: 989

Changed 2 properties:

ul.block-with-icons span {
    display: block;
    font-size: 11px;
    line-height: 1.2em;
    position: relative;
    top: 12px;
}

h5 {
    font-size: 16px;
    position: absolute;
    left: 98px;
    top: 30px;
}

http://jsfiddle.net/wRkdL/25/

Upvotes: 1

Aljullu
Aljullu

Reputation: 444

If you are developing in HTML5, I think the best option is to move <h5> inside <a> tag like this:

<li class="b1">
<a href="#">
<h5>Our background</h5>
<span>A little background info on who we are...</span>
</a>
</li>

In HTML4 it's not allowed to insert a block element inside anchors.

Upvotes: 0

Related Questions