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


Tags: css,textbox,alignment

Problem :

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;
}


Solution :

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


    CSS Howto..

    how to apply stylesheet to wp frontend, via plugin i created?

    How can I fill with the color and make it square using CSS?

    How to call an HTML css style in a computed text field

    How to create an email template from a responsive website?

    CSS - How do I get my list element to fill 100% of the block

    How fixed a navigation to the center on scroll?

    How to align an absolute DIV of unknown height outside a “relative” parent by CSS?

    How to have a background image properly fade in with CSS

    How to strech vertically the container of inline-blocks?

    How to use body_class to change css according to page hierarchy

    how to make header title with buttons

    How to use vertical align in bootstrap

    How to deal with collapsing margins on html & body?

    Icon with overhead label - how to get both to respond to hover, with CSS?

    How do I add a special CSS class to run only on IE for a div component?

    How to disable JS function via CSS for certain page?

    How do I align an icon right next to “Click here”?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to reset the style properties to their CSS defaults in javascript?

    how to animate “simple jquery filtering” by using css only

    How do I get rid of an element's offset using CSS?

    Does anyone know how to getr this background effect with css?

    How to change css for span in span?

    How to stop css animation in current position on hover?

    How to rearrange these elements with CSS?

    How to make `margin: top;` based on browser height?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to write CSS to convert div elements into a 3 or 4 column table?

    how to elegantly use css sprites in an inline element?

    How to position an image to the right of a center aligned title with HTML & CSS