overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style


Tags: html,css

Problem :

I know how to place some text over an image, but when that text contains different classes, different text styles, text lines overlap one on top of another.

Here is the simple html code with only one text style that works:

<li style="" class="portfolio-content-CV">
    <div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
    </div>
</li>

Here is the code that doesn't work:

<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
        <p class="auto-style1"><span lang="es">bla bla bla</span></p>
    </div>
</li>

The css is formated as follows:

#portfolio-list .portfolio-content-CV a{
    width: 510px;
    float: left;
    height:500px;
    display:?table;
    border:0.5px solid grey;
}

.contentCV {
    width: 510px;
    position: relative;
    float: left;
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    background: #FFF;
    border: 0px solid #E2E2E2;
    margin-right: 10px;
    margin-bottom: 10px;
    display:table-cell;
    vertical-align:bottom;
}

.contentCV a.titlesmall {   display: none; }

.auto-style2 {
    margin-left: 20px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

.auto-style1{
    margin-left: 16px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

Any idea how can I get a complex text with different text styles to overlap over an image? o_O



Solution :

The reason they overlap is because they have the same positioning:

top: 6px; 
left: -8px; 

and absolute positioned elements tend to overlap each other.

So you can create a div wrapper and put the p tags in it:

<div class="textWrapper">
   <p class="auto-style2"><span lang="es">yada yada</span></p>
   <p class="auto-style1"><span lang="es">bla bla bla</span></p>
</div>

css:

.textWrapper{
    position: absolute;   
    top: 6px; 
    left: -8px; 
}

Make sure to remove the position absolute from the <p> tags


    CSS Howto..

    How to get length of elements with a certain css attribute?

    How can i change or remove title and page address?

    How to define dynamic height in css (or html)?

    How to auto margin-left for the message bar

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How could i center unordered lists in a footer?

    How do I combine two columns with different formatting?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to add css to dynamic div Id

    How do I continue to allow the user to click until a certain point?

    How to position a div that already has a float?

    How to include .otf in css?

    How to select all elements after specific element in CSS

    Javascript/CSS, How to keep changes?

    how does responsive design work?

    How do I remove applied css on a div by JQuery?

    How to add comments to inline CSS? [closed]

    How to implement :root { font-size: calc(100vw / 40); } to scale font-size(s)

    Devtools audit shows unwanted/injected css rules

    CSS block link - how to get it work properly?

    How to make a vertically extendable DIV box from this image?

    How to bump up text?

    How to hide a div in the Repeater

    How do I allow CSS files to be referenced from other domains?

    How to implement :parent selector in css

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to create grid position elements like in this image css

    How to copy the CSS to another tab in Chrome?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    How to attribute different ids to child elements depending on the number of parent-like elements in that container