XHTML

Using XHTML and CSS3 and absolute positioning

steps:

  • search the web for text overlay with xhtml and css
  • choose some tutorial among the given search results
  • find out that the css position attribute of the tag is the most important key to lay a text over an image
  • position: absolute - does the trick
  • use "top", "left", "bottom" or "right" to position the text over the image
  • put the image and the element in an containing DIV element
  • set the DIV's CSS width attribute to 100%

    • The CSS

    h1#text{
    position: absolute;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    color: #FFFFFF;
    display: inline;
    left: 0;
    top: 75%;
    margin-left: 7px;
    padding: 5px 30px 5px 10px;
    }

    div#container{
    width:100%;
    height:100%;
    }

    The HTML:

    The Web of Tomorrow!


    that's it.

    Submitted by Thomas Ziegelbecker on Wed, 12/18/2013 - 13:44
    Related Question: 
    Image with a text overlay that is dynamically generated

    Taggings:

    Using XHTML and CSS3 and absolute positioning

    steps:

  • search the web for text overlay with xhtml and css
  • choose some tutorial among the given search results
  • find out that the css position attribute of the tag is the most important key to lay a text over an image
  • position: absolute - does the trick
  • use "top", "left", "bottom" or "right" to position the text over the image
  • put the image and the element in an containing DIV element
  • set the DIV's CSS width attribute to 100%

    • The CSS

    h1#text{
    position: absolute;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
    color: #FFFFFF;
    display: inline;
    left: 0;
    top: 75%;
    margin-left: 7px;
    padding: 5px 30px 5px 10px;
    }

    div#container{
    width:100%;
    height:100%;
    }

    The HTML:

    The Web of Tomorrow!


    that's it.

    Submitted by Thomas Ziegelbecker on Thu, 12/12/2013 - 22:58
    Related Question: 
    Complex Queries in CakePHP 2.x

    Taggings:

    Subscribe to XHTML