html css style not working

Question

I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!

Here is a link to jsfiddle: http://jsfiddle.net/XrXZj/1/

have the following in my css file:

.spotlight {
     color:#FFFFFF;
     display:table;
     height:120px;
     margin-bottom:15px;
     margin-left:0px;
     overflow:hidden;
     padding:0 50px;
     position:relative;
     width:840px;
}

.spotlight .wrapper {
     position:absolute;
}

.spotlight .middle {
      display:table-cell;
      height:50px;
      vertical-align:middle;
 }

.spotlight .spotlight-copy {
     font-size:15px;
     line-height:25px;
     width:500px;
}

and here is the content of html file:

 <div class="spotlight">
 <img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>"                 border="0" />
 <div class="wrapper">
        <div class="middle">
            <div class="spotlight-copy">
                <spring:message code="content.location.title" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
  </div>

have a look at position:absolute and zindex.

putvande
– putvande

2013-09-04 22:44:27 +00:00
Commented Sep 4, 2013 at 22:44 — putvande
– putvande, Commented Sep 4, 2013 at 22:44

Tatiana Israpilova · Accepted Answer · 2013-09-04 22:49:02Z

1

.spotlight .wrapper {
    position:absolute;
    top: 0;
}

answered Sep 4, 2013 at 22:49

Tatiana Israpilova

341 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

kumar Over a year ago

Thanks. This perfectly works. Though the text is not centered or middle of the image. "spotlight .middle" - this style is not working.

Tatiana Israpilova Over a year ago

I cannot see your image. Try use this:

.spotlight .middle { 	  display:table-cell; 	  height:120px; /* your height */ 	  width:500px; /* your width */ 	  vertical-align:middle; 	  text-align: center; 	 }

mickro · Accepted Answer · 2013-09-04 22:59:45Z

I put there a solution http://jsfiddle.net/NPh76/

HTML is:

<div class="wrapper">
    <div class="middle">
        <div class="spotlight">
        <img src="http://www.springsource.org/files/header/logo-spring-103x60.png"                 border="0" />
        <div class="spotlight-copy">
            message in spotlight copy
        </div>
    </div>
</div>
<div style="clear: both;"></div>

notice about HTML:

<IMG> is into .middle to be at same level as .spotlight-copy

CSS is:

.spotlight {
 color:#FFFFFF;
 display:table;
 height:120px;
 margin-bottom:15px;
 margin-left:0px;
 overflow:hidden;
 padding:0 50px;
position:absolute;
 width:840px;
}

.spotlight .wrapper {
 position:absolute;
}

.spotlight .middle {
 display:table-cell;
 height:50px;
 vertical-align:middle;
}

.spotlight .spotlight-copy {
 position:absolute;
 top: 0px;
 font-size:15px;
 line-height:25px;
 width:500px;
 color:#FF0000;
}

notice about CSS

position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)

Collectives™ on Stack Overflow

html css style not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related