CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 71

Image beside text with h1 and p

I'm in the process of creating a website, and am trying to align text beside an image. It sounds easy, but for some reason, I just can't seem to get it.

Here is an image of how I'm trying to get the images and text to appear:

https://i.sstatic.net/wJjmP.png

So far I've tried the following HTML:

<div class="example">
    <div class="eg1">
        <img src="eg1.gif" />
        <h2>Example 1</h2>
        <p>This is an example</p>
    </div>
    <div class="eg2">
        <img src="eg2.gif" />
        <h2>Example 2</h2>
        <p>This is another example</p>
    </div>
</div>

and CSS:

.example {
    display: inline-block;  
}

.eg1, .eg2 > img {
    float: left;
}

.eg1, .eg2 > h2 {
    float: left;
}

.eg1, .eg2 > p {
    float: left;
}

At the moment is appears all messed up. They appear underneath each other, and the text appears on the wrong side of the image.

What is the best way to achieve this?

Upvotes: 3

Views: 1507

Answers (2)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

may be like this?

<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>
<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>

http://jsfiddle.net/g57bB/7/

Upvotes: 1

Phlume
Phlume

Reputation: 3131

I recently set up navigation on a site like that. The key is in setting the image as the background and offsetting it with the center left no-repeat Though it was in a ul and a li format, I used the CSS in this format:

CSS

li a {
  font-size:20px;
  color:#f6f9db;
  padding-left:75px;
  background:url(icon-up.png) center left no-repeat;
  text-decoration:none;
  line-height:30px;
  text-shadow: -2px 2px 1px #551508;
}

li a:hover {
  color:#551508;
  display:inline-block;
  padding-left:75px;
  background:url(icon.png) center left no-repeat;
  text-shadow: -1px 1px 0px #f6f9db;
  }

Upvotes: 0

Related Questions