Asp: Wrap image inside a Table - asp.net

what I'm trying to do is create a marque of images going up to down
Here is my code
<table>
<tr>
<td></td>
<td style="table-layout:fixed;border-collapse:collapse;">
<marquee direction="down">
<table >
<tr>
<td>
<img src="../Advertise/Add1.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" />
</td>
</tr>
</table></marquee>
<td/>
</tr>
</table>
Add1,Add2,Add3 are inside a folder
Now the problem is the size of the image was same as it is actually
i want to wrap it according to the size of my <td>
please give me suggestions how to do it
thanks in advance.

set height and width to 100% as mentioned below :
<img src="../Advertise/Add1.jpg" style="height:100%;width:100%" />
HTML:
<table>
<tr>
<td></td>
<td style="table-layout: fixed; border-collapse: collapse;">
<marquee direction="down">
<table>
<tr>
<td>
<img src="../Advertise/Add1.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>

Related

change color of title of af:document in jsf page of ADF

I have created a jsf page using af:document with title(which is required) but by default this tile is coming with black color due to default skin but i need it red.
I tried with inline CSS but it didn't work.code snippets is below:
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="#{bundle['XXSG_OSA_CANCEL_ORDER']}" id="d1"
inlineStyle="background-color:#F7F7F8;background-image:none;color:red;font-weight:normal;"
styleClass="color-set">
<af:messages id="m1" inlineStyle="background-color:#F7F7F8;color:red;font-weight:normal;"/>
<af:form id="f1" inlineStyle="background-color:#F7F7F8;">
Can anyone tell me if there is a key which can be override in SKIN to change the title of af:document?
Code of the pop-up (of JSF page) which is used in another page:
<div id="j_id16" class="x1d3">
<div class="x1ee" data-afr-panelwindowbackground="1" style="display: none;"></div>
<div class="x1ee" data-afr-panelwindowbackground="1" style="display: none;"></div>
<div class="x1ee" data-afr-panelwindowbackground="1" style="display: none;"></div>
<div class="x1ee" data-afr-panelwindowbackground="1" style="display: none;"></div>
<table summary="" role="presentation" class="x1dj" data-afr-shaddec="sd$4" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="p_AFResizable x1d8" id="j_id16::_hse"> </td>
<td class="p_AFResizable x1da" id="j_id16::_hce">
<table style="cursor:default" summary="" role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div id="j_id16::_ticn" class="x1e6" style="display:none"></div>
</td>
<td class="x1dl" id="j_id16::tb" style="-moz-user-select: none;">
<div id="j_id16::_ttxt" class="x17g">Order Cancellation</div>
</td>
<td>
<div class="x1e8"><a aria-label="Close" href="#" onclick="return false" class="x17e" id="j_id16::close" title="Close"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="p_AFResizable x1dc" id="j_id16::_hee"> </td>
</tr>
<tr>
<td class="p_AFResizable x1dq" id="j_id16::_cse"> </td>
<td class="p_AFResizable x1dn" id="j_id16::contentContainer" tabindex="-1">
<div id="j_id16::_ccntr" class="x1do" style="width:400px;height:300px;position:relative;overflow:hidden;">
<div id="j_id17" class="xt4 " style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px"><iframe id="j_id17::f" title="Content" src="/osaportal/faces/adf.dialog-request?_rtrnId=1496388287220&_afrPage=s2" onload="AdfDhtmlInlineFramePeer.__iframeLoadHandler(event)" style="position:absolute;width:100%;height:100%" _adfloaded="1" data-afr-panelwindowid="j_id16" data-afr-rtnid="1496388287220" frameborder="0"></iframe></div>
</div>
</td>
<td class="p_AFResizable x1ds" id="j_id16::_cee"> </td>
</tr>
<tr>
<td class="p_AFResizable x1du" id="j_id16::_fse">
<div></div>
</td>
<td class="p_AFResizable x1dv" id="j_id16::_fce">
<table summary="" role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="p_AFResizable x1dy" id="j_id16::_fcc"></td>
<td valign="bottom" align="left">
<div class="p_AFResizable x1e3"><a tabindex="-1" class="x1e1" id="j_id16::_ree" title="Resize"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="p_AFResizable x1dw" id="j_id16::_fee">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
Are you talking about the color of the title in the window bar (where things like minimize/maximize icons are)?
I think this is controlled at the client machine windows os level, not at the ADF level.
This issue is resolved by changing the skin property of af|panelWindow::title where i can change the color title for such cases.

Background color doesn't add

I have a table as :
<div class="Bar" >
<table width="100%">
<tr>
<td width="20%">
<asp:LinkButton ID="LnkHome" runat="server" ForeColor="Black" Text="Home"></asp:LinkButton>
</td>
<td width="20%">
</td>
<td width="20%">
</td>
<td width="20%">
</td>
<td width="20%">
</td>
</tr>
</table>
</div>
i tried adding Background color through css on table as
.Bar table tr td
{
background-color:Maroon;
}
but doesn't give the background color.Thanks for assistance.
css
.Bar table tr td
{
background-color: Maroon;
height:50px;
}
Html
<div class="Bar">
<table width="100%">
<tr>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
</tr>
</table>
</div>
I tried, it works
fiddle
<div class="Bar" >
<table width="100%">
<tr>
<td width="20%">aaaaaaaaaaaa</td>
<td width="20%"></td>
<td width="20%">aaa
</td>
<td width="20%">
</td>
<td width="20%">
</td>
</tr>
</table>
</div>
.Bar table tr td
{
background-color:Maroon;
color: white;
}
it works properly. i think your problem is from <td></td> tag, that is empty. see here http://jsfiddle.net/sYfLR/

how to make div overflow when there're some tables in the div content

My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.

Placing image on bottom right corner of table cell does not work in Firefox and Safari

I have the following table structure in my aspx page. I need to place the image at bottom right corner of a table cell. The code below works fine for IE and Chrome. But in Firefox and Safari, the image is displayed at the bottom right corner of the row, and not the cell.
<table style="width:100%">
<tr>
<td valign="top" style="width:20%; position:relative">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>
Please help with this!!
Thanks.
I solved this problem by adding another row for the image and setting its alignment.
<tr>
<td style="width: 20%;" align="right" valign="bottom">
<asp:Image ID="Img1" runat="server" />
</td>
</tr>
I think you need to remove the position:relative of the parent td for this image as the absolute of the images is done relative to the td that has the position:relative
<table style="width:100%">
<tr>
<td valign="top" style="width:20%;">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>

any suggestions on this css print problem

I have this code on my print.css:
#header, #tae, #nav, .noprint {display: none;}
width: 100%; margin: 0; float: none;
In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output.
Here it is:
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="30" height="30" /></td>
</tr>
</tr>
<tr>
<td class="text2">
</div>
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
What's wrong with my code? Does the php script depend on the one where I put the div tag in?
What do I do? All I want to show up in my page when printed is the mysql table. I'm using
Universal Document Converter to simulate printing.
The HTML in that snippet is broken and the entire document is contained in #tae, thus nothing will print as everything is in a container that is display: none;
Here's a cleaned up version of that markup.
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5">
<table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/spacer.gif" alt="" width="30" height="30" />
</td>
</tr>
<tr>
<td class="text2"></td>
</tr>
<!-- All this is missing, from here... -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ...to here. -->
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>

Resources