I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK
Related
I have an Angular application. In a component HTML page, I am displaying flags and times of different places against a colored background. I am not being able to change the background color of the iframe. Tried suggestions at
Change background color of iframe issue and some other sources
Here is the sample HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet" />
<table cellspacing="0" style="font: normal 11pt Verdana; float:left; margin-top:-60px;
margin-bottom:150px;">
<tr>
<td style="text-align: center; padding: 0px 4px;">
<span class="flag-icon flag-icon-us"></span>
<br />
<span style="color:whitesmoke; font-size:11px;font-weight:200;">Los Angeles</span><br />
<iframe allowtransparency="true" style="background-color:inherit;" src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1"
frameborder="0" width="34" height="14"></iframe>
</td>
<td style="text-align: center; padding: 0px 4px;">
<span class="flag-icon flag-icon-mx"></span>
<br />
<span style="color:whitesmoke;font-size:11px;font-weight:200;">Mexico City</span><br />
<iframe src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1" frameborder="0" width="34" height="14"></iframe>
</td>
</tr>
</table>
And here is the image. Please guide
Using iframe settings did not work. However, I was able to conveniently make adjustments on their website and use the HTML generated:
https://www.timeanddate.com/clocks/free.html
I have a table, inside the table I have an asp:TextBox and an asp:Literal inside of the same data cell. Is there a way to place the Literal underneath the Textbox instead of beside the Textbox?
<td align="center">
<asp:TextBox ID="txtTons" CssClass="tonnage" runat="server"
OnChange="txtTons_TextChanged(this)"MaxLength="6"
Width="40" pattern="^\d{1,3}(?:\.\d{1,2})?$"></asp:TextBox>
<asp:Literal ID="litMaxTons" runat="server"></asp:Literal>
</td>
I solved this by placing both the asp:Textbox and asp:Literal inside of a div and then applying a style to each div.
<div style="position:relative; height:100%;">
<asp:TextBox ID="txtTons" CssClass="tonnage" runat="server"
OnChange="txtTons_TextChanged(this)"
MaxLength="6" Width="40" pattern="^\d{1,3}(?:\.\d{1,2})?$">
</asp:TextBox>
</div>
<div style="position:relative; bottom:0; color:red">
<asp:Literal ID="litMaxTons" runat="server"></asp:Literal>
</div>
I have a asp.net grid view,and i want this gridview show center of the div,i write this css and html code:
<div style="color: #FFFFFF;" class='center' >
شرکت هایی که درمعاونت تجاری ثبت نشده اند<br />
<br />
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
</div>
and center css is:
.center {
width:800px;
border-radius: 5px;
width: 60%;
height:200px;
margin: 0 auto;
}
but gridview show this:
how can i solve that?thanks.
Add align="center" in
Like this
<div align="center" style="color: #FFFFFF;" class='center' >
And remove extra style from .center class. You have assigned width 2 time. % and px.
I am trying to make a floating menu that sticks to the top of the screen and has a few icons you can click, most of which will submit a form. As it stands though, the filechoosebutton is hidden via css, but even though it is not rendering, it still causes my download button to disappear offscreen. How can I fix this?
Thanks for any clues
Here is the html for the menu
<div id='floating_menu'>
<table >
<tr>
<td >
<form action='' method='post' id='trash1' >
<img src='http://s27.postimg.org/jua3mu9q9/trash.jpg' width="35" height="45" alt='delete' />
</form>
</td>
<td >
<img id='storagebutton' src='http://i60.tinypic.com/2igya9d.jpg' width="35" height="45" alt='storage' />
</td>
<td >
<form id="uploadtsvform" enctype="multipart/form-data" method="post" action="">
<input id="filechoosebutton" name="uploadFile" type="file" onchange="this.form.submit()" />
<img id='uploadbutton' onClick='chooseFile()' src='http://oi59.tinypic.com/2lm0yky.jpg' width="35" height="45" alt='upload tsv' />
</form>
</td>
<td >
<img id='downloadbutton' src='http://i62.tinypic.com/zu4n03.jpg' width="35" height="45" alt='download tsv' />
</td>
</tr>
</table>
</div>
Here is the css that creates the floating menu
#floating_menu {
background:white;
width:250px;
height:25px;
position:fixed;
top:10px;
right:0;
}
Here is the css that hides the usual Browse upload button
#filechoosebutton {
height:0px;
width:0px;
overflow:hidden;
}
Here is a Fiddle
You form is eating up the space of the download button. Try adding
#uploadtsvform {
display: inline-block;
width: 50px;
}
I am creating an html email which uses image buttons as
<input type="image" src="images/right_nav1.bmp" width="200" height="37" name="right_nav1" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav2.bmp" width="200" height="37" name="right_nav2" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav3.bmp" width="200" height="37" name="right_nav3" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav4.bmp" width="200" height="37" name="right_nav4" style="border:0; padding:0; margin:0; display:block;" />
The images are not getting displayed. Is there a work around for displaying image buttons?
Two things:
you need to use absolute paths. The E-Mail has no connection to your web site and its paths. <img src="http://.....">
Don't use BMP images, support is going to be spotty. Use JPG, GIF or PNG images instead.