I have an image that's serving as a link. The issue is that the clickable region is much larger than the image itself. Why is this and how do I fix it?
<a target="_blank" href="http://my.ge.com"><img class="logo" src="../Content/images/always_on_logo.jpg"></a>
<style type="text/css">
img.logo {
display: block;
margin-left: 351px;
margin-right: 351px;
height: 50px;
width: 135px;
}
</style>
Remove display:block;
img.logo {
margin-left: 351px;
margin-right: 351px;
height: 50px;
width: 135px;
}
<a target="_blank" href="http://my.ge.com">
<img class="logo" src="../Content/images/always_on_logo.jpg" />
</a>
Related
I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect.
This only demonstrates how to change the color of InputFile, not exactly what I need.
I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
BlazorRepl
I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.
I'm having issues centering an ASP menu, it is 100% of the time aligning to the left of the window. I have it enclosed in a Div, and then nested in another Div.
I can get it to align right if I have the nested Div to float:right. I've been reading on including !important to override some styles from other divs that may be causing this Header div to not align properly.
CSS
body {
}
#Header
{
width: 100%;
height: 40px;
font-family: Calibri;
text-align:center !important;
}
#LeftColumn
{
font-family: Verdana;
font-size: small;
text-align: left;
float: left;
padding-top: 20px;
padding-left: 2%;
width: 19%;
height: 250px;
}
#MainContent
{
font-family: Verdana;
font-size: medium;
padding-top: 20px;
width: 79%;
height: 250px;
float: right;
text-align: center;
position: relative;
}
#Footer
{
font-family: Verdana;
font-size: x-small;
color: white;
padding-left: 20%;
width: 79%;
height: 15px;
float:
}
Default.aspx
<div id="Header">
<div style="text-align:center !important">
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="MenuItem1" Value="MenuItem1">
<asp:MenuItem Text="Test1" Value="Test1" />
<asp:MenuItem Text="Test2" Value="Test2" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
Asp:Menu alignment depends on "dir" attribute of parent element which is "ltr" by default.
Set dir="rtl" attribute on a parent element for asp:Menu right alignment, for example:
<div dir="rtl">
<asp:Menu>
</asp:Menu>
</div>
I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working.
This is my asp button:
<tr>
<td>
<div class="form_row">
<asp:Button ID="ButtonSend" CssClass="BtnSend" runat="server" Text="Send" OnClick="ButtonSend_Click" />
</div>
</td>
</tr>
This is my CSS:
.BtnSend {
width: 53px;
height: 24px;
display: block;
float: right;
margin: 0 0 0 10px;
background: url(../../Images/contact_bt.gif) no-repeat center;
text-decoration: none;
text-align: center;
line-height: 24px;
color: #fff;
}
If I'm not wrong, I should use something like this:
input[type="submit"]
{
//css coding
}
but I don't know where to put it and how to affect only this button.
Based on your comment, add/change this in your css:
.BtnSend {
border: none;
background: transparent url(../../Images/contact_bt.gif) no-repeat center;
}
All of the objects on the screen are centered with the exception of the CrystalReportViewer.
Does the CrystalReportViewer not work with CSS?
Here's my CSS class that I'm using for this part of the page:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
The report is all the way to the left of the screen, I just want to center it.
Again, all other controls are centered on the screen.
The report is also embedded on a paragraph tag.
Here's the actual control:
<form runat="server" class="reportForm">
<p>
<CR:CrystalReportViewer ID="crvSchedules" runat="server" AutoDataBind="True" DisplayStatusbar="False" EnableDatabaseLogonPrompt="False" EnableDrillDown="False" EnableParameterPrompt="False" EnableTheming="False" EnableToolTips="False" HasCrystalLogo="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasZoomFactorList="False" Height="1153px" ToolPanelView="None" Width="868px" GroupTreeImagesFolderUrl="" ToolbarImagesFolderUrl="" ToolPanelWidth="200px" HasExportButton="False" HasPrintButton="False" />
</p>
</form>
This is the ENTIRE CSS file:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 0.8em;
font-weight: 600;
padding: 6px;
margin-right: 8px;
width: auto;
}
I couldn't figure out what the issue was with this so I just put the report in a table and centered it.
I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}
Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.
Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.