CODEWITHSUNDEEP
asp.nethtmlcssimagebutton
JMon
JMon

Reputation: 3447

Text on an ImageButton with css

I wish to display some text on a button that has a background. However this cannot be tied to absolute positions, since I am going to reuse this button in multiple parts of the screen, only changing the text that I am displaying.

At the moment I have the following:-

<div class="ReportButton">
  <div class="ReportImageButton">
      <asp:Image runat="server" ImageUrl="Images/button_arrow.png" ID="ImgReportButton" ImageAlign="AbsMiddle" Height="40px" />
  </div>
  <div class="ReportImageButtonText">Text Goes Here</div>
</div>

and CSS:

.ReportButton {
  width: 100px;
  height: 40px;
}

.ReportImageButton {
  height: 40px;
  position: absolute;
}

.ReportImageButtonText {
  height: 40px;
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  left: 330px;
  top: 330px;
}

This works fine however i wish to avoid using the absolute positions if possible, for the reasons I stated before.

Is it possible?

Upvotes: 1

Views: 541

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

You can add position: relative without moving .ReportButton and adjust the position of the text accordingly. This will position .ReportImageButtonText properly within the boundary of the wrapper div 

.ReportButton {
    position: relative;
    width: 100px;
    height: 40px;
}

JSFiddle

Upvotes: 0

Thomas W
Thomas W

Reputation: 14164

You can't do this with the CSS for ReportButton?

.ReportButton {
    width: 100px;
    height: 40px;
    background: url("/images/button-bg.png") no-repeat top left;
    cursor: pointer;
}

Then, just:

<div class="ReportButton" onclick="doSomething();" >
    Text Goes Here
</div>

Upvotes: 1

Related Questions