CODEWITHSUNDEEP
csstextboxalignment
Greg
Greg

Reputation: 3063

Css - how to add an image outside a text box (on the left side but touching the box)

On my website http://goo.gl/ok43H I'd like to add the small "+" icon next to each white text box (I made a mockup of what i'm trying to achieve here: http://goo.gl/ftRpZ ) but I have no idea how to do that. What would be your suggestions? Many thanks,

Here is the html code:

<div class="presentation-plusbox">
<p>Expertise dans l'industrie</p>
<p>blblablabla</p>
<p>blabla</p>
</div>

and here is the css code: .presentation-plusbox

{
    width: 500px;
    background-color:#FFFFFF;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Upvotes: 0

Views: 2560

Answers (3)

Emad Farag
Emad Farag

Reputation: 46

I haven't tried it, but that should work.

p { position: relative; }
p:after { 
  height: 20px;
  width: 20px;
  background-image: url('image.url.goes.here.jpg');
  position: absolute;
  top: 5px;
  left: -20px;
}

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47687

You can use the :before - http://jsfiddle.net/fgRRw/

div:before {
    content: "+";
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background: orange;
    color: #fff;
    display: block;
    left: -30px;
    position: absolute;
}

Just a note - :before is not supported in IE7 and below LINK

Upvotes: 1

Adam Grant
Adam Grant

Reputation: 13125

Define your + box as a div inside of .presentation-plusbox

Also add position: relative to .presentation-plusbox

Then apply the following css to the plus box

.plusBox {
  position: absolute;
  top: 20px;
  left: -50px;
}

Of course, you'll need to adjust top and left to get it just right.

Upvotes: 1

Related Questions