CODEWITHSUNDEEP
htmlcss
Johnny Hankgard
Johnny Hankgard

Reputation: 469

Image and text in one container

I am trying to add an image together with some text and want both of them in the same background.

Meaning that I have a container where I put both the image and the text. And want to be able to steer the text however i want to. This might seem easy but I can not make it work, and would like to find out if anyone else knows how to get this job done.

Here comes the html and css i have put together, feel free to change it.

div.imagecaption{float: left;
             width: 302px;
             margin: 0 1em 1em 1em;
             display: inline;
             padding:
             background: #036;
             color: #fff;
             }

div.imagecaption img{float: left;
                 margin-left: 1em;
                 border: 1px solid #fff;}

<div class="imagecaption">
<img src>
</div>

<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>

I also want the textual part to have a background-color of its own. Now i have really tried making this work, and this is my latest attempt. So, does anyone know what i am doing wrong?

Upvotes: 0

Views: 6687

Answers (2)

Sarin Jacob Sunny
Sarin Jacob Sunny

Reputation: 2138

Try this, Its a part of code which I use in my work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 .mybutton a
{
    display:block;
    line-height:60%;
    text-decoration:none;
    border:0px solid;
    font:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:12px;
    float:left;
    background-color:#f5f5f5;
    cursor:pointer;
    color:#000;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
}

.mybutton a img
{
    width:45px;
    height:45px;
    margin:5px 0px 5px 0 ;
    padding:0px 15px 0px 15px;
    border:none;
}
.mybutton a span
{
    position:relative;
    bottom:3px;
    margin:5px 0px 0px 0px;
    padding-left:10px;
}
.mybutton a.myimg{
    color:#000;
}
.mybutton a.myimg:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.mybutton a.myimg:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
</style>
</head>
<body>

    <div class="mybutton">
        <a href="#" class="myimg">
            <img src="card.jpg" alt=""  align="top"/><br/>
        <span style="padding-left:10px;" >My Button</span>
      </a>
</div>
</body>
</html>

enter image description here

Upvotes: 1

Hadi Mostafapour
Hadi Mostafapour

Reputation: 2276

i don't know what you want exactly, try this :

<style>
    div.imagecaption{
        float: left;
     width: 302px;
     margin: 0 1em 1em 1em;
     display:block;
     padding:2px;
     background: #036;
     color: #fff;
  }

div.imagecaption img{
    float: left;
    border: 1px solid #fff;
}
div.imagecaption p {
    float: right;
    margin-right: 8px;
    width: 180px;
    word-wrap: break-word;
}
</style>
<div class="imagecaption">
    <img src="images/logo_ws2011.png">
    <p>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
    </p>
</div>

Upvotes: 0

Related Questions