Here is a sample code I'm working on:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.menu
{
border: 1px solid #C0C0C0;
color: #FFFFFF;
background-color: #66A6CC;
font-family: Cambria;
text-align: justify;
font-size: medium;
width: 200px;
padding:8px;
padding-left:0px;
text-indent:10px;
display:inline-table;
}
.menu:hover
{
background-color: #FFFFA6;
color: #000000;
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float:left; margin:10px;">
<asp:Menu ID="Menu1" runat="server" StaticMenuItemStyle-CssClass="menu" >
<Items>
<asp:MenuItem Text="Menu row" Value="menurow"
NavigateUrl="Default2.aspx" ></asp:MenuItem>
<asp:MenuItem Text="Menu row" Value="menurow1"
NavigateUrl="Default2.aspx" ></asp:MenuItem>
<asp:MenuItem Text="Menu row" Value="menurow2"
NavigateUrl="Default2.aspx" ></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
I have a problem with hover. Here it is.
The whole cell should turn into yellow but it doesn't do because of padding.
EDIT: I removed padding but same thing happens again. I think it's because of display type. I tried most of display types but they are not convenient for a menu.
Solution: There is a problem with Chrome about rendering some components. There are online solutions, please Google "ASP.NET chrome menu problem".
I got it working from copying your HTML code. The only thing I changed was adding a missing closing bracket to the ".menu:hover" class.
I tested the page in Firefox and Internet Explorer 8.
Padding shouldn't be causing any issues with the yellow hover. What browser are you using?
this your code output in my chrome with padding 18px :
Related
I'm sending an html formatted responsive email to my clients after they sign up from my .net MVC app. My problem is that the picture which in this case is my logo doesn't get centered no matter what css or bootstrap class I apply to it. It looks fine when rendering on a computer or even in another different mail client on ios. The problem seems to be the default mail app. Here is how it is showing. The first picture is how it appears on the mail app and the second picture is how it appears on a desktop which displays correctly. Please note that the white text is the picture. The purple background is just a div that I made purple.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Welcome To Church Musician!</title>
<style>
.header {
background-color: darkviolet;
height: 200px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container{
background-color: white !important;
}
body{
background-color: whitesmoke !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" >
<div class="header">
<img class="img-fluid"src="cid:id1" />
</div>
<hr />
<p>This is a test</p>
</div>
</body>
</html>
I have html content that has to start at the absolute top left corner of the page. However, the HtmlConverter automatically adds a 0.5in gap from the top and left side of the pdf page. How do I override this default margin?
You can set the margins of a page through CSS using #page. The following declaration sets all the page-margins to 0, as well as draws a border around paragraphs for visual reference:
#page{
margin:0pt;
}
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
}
Use the following as input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin example</title>
<link href="margin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<p>This page should have the margins set at 0</p>
</div>
</body>
</html>
And you'll see that the paragraph's border is touching the left side of the page, but not yet the top side. That's because the paragraph has some innate margin as a blockelement as well. Setting this to 0 will do the trick:
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
margin-top: 0pt;
}
#page{
margin:0pt;
}
And the output:
opc web trend (asp.net) controls are not displayed and showing Cross marks when configured with IIS7. Working fine in visual studio but when i publish this with IIS, it just shows cross marks. Below is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %>
<%# Register assembly="OPCWebTrends" namespace="OPCWebTrends" tagprefix="cc1" %>
<%# Register assembly="OPCWebControls" namespace="OPCWebControls" tagprefix="cc2" %>
<%# Register assembly="Dart.PowerWEB.LiveControls" namespace="Dart.PowerWEB.LiveControls" tagprefix="cc3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="z-index: 1; left: 10px; top: 15px; position: relative; height: 616px; width: 1298px; background-color: #FFCC99">
<br />
<br />
<div style="border-style: outset; border-width: inherit; border-color: #0000FF; height: 435px">
<cc1:OPCWebTrend ID="OPCWebTrend2" runat="server" Height="379px" Width="490px" />
<cc2:OPCWebRefresh ID="OPCWebRefresh1" runat="server">
</cc2:OPCWebRefresh>
</div>
<br />
<br />
<br />
</div>
</form>
</body>
</html>
I'm having a difficult time finding a solution to my problem that relates to asp:Menu control and centering in a page. I'm really surprised all the solutions I search on Google are either not using asp:Menu control or just using lists or tables only.
I know margin:0 auto` and adding a width works but when I put it for the menu control I can't get it working.
This is my master page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header></header>
<nav>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
<asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
</nav>
<section id="MainContent">
<asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
</section>
<footer></footer>
</div>
</form>
</body>
</html>
CSS:
body
{
margin: 0;
background-color: gray;
}
#PageWrapper
{
width: 1366px;
background-color: white;
margin: auto;
}
nav
{
width: 1366px;
height: 36px;
background-color: seagreen;
}
nav a
{
color: #fff;
}
.MainMenu
{
border: 1px solid #999999;
width: 1366px;
height: 19px;
background-color: #555555;
}
ul.level1
{
display: block;
width: 300px;
text-align: center;
margin: 0 auto;
}
Sitemap:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/">
<siteMapNode url="~/Default.aspx" title="Home" description="Go to the homepage" />
<siteMapNode url="~/NewTicket.aspx" title="New Ticket" description="Create a new ticket" />
<siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
</siteMapNode>
</siteMap>
Funny thing is when I create a label and place it in a placeholder, margin: 0 auto and width: auto works in centering.
Thank you everyone.
I finally was able to figure it out.
I edited the styling to my nav parent element:
nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}
So instead of having it displayed as a block I set it as a table. Funny thing is it is still rendered as a list.
I have it to clear because I have elements before it that was floated to the left.
I definitely learned a lot more about CSS with this issue.
Kind of crazy for so much trouble just for one styling. Surprised
I don't remeber the generated markup for asp:menu but I think the problem is in your .MainMenu selector, you are defining it with width: 1366px; what maches the nav width, so even if you set margin-right/left auto it won't work.
To center it you can or you set a width smaller than its parent's or you can set display: inline-block; for the menu and text-align:center; in the nav.
Example for the two options: http://jsfiddle.net/T9SvT/
I duplicated your example above. #PageWrapper is 1366px wide and centered on the page. It contains the Menu control which is also 1366px wide and its cells are spaced evenly across the width. I tested this in Chrome and IE9. I only have 3 items in my sitemap, however. That may be related to your problem: how wide is the menu?
Keep in mind that asp:Menu renders as an HTML table, so when you apply a style to it, that is basically what you are working with. I would recommend sizing the <nav> area to where you want the Menu to be and simply making the Menu fill that space with Width="100%".
Certainly "float" should not be necessary.
I have an image control on ASPX page. I want to show "Change Picture" option on top it like Facebook. When click on it should go different page.
Any idea how to do this?
Try this code
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
#profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
#profile_pic_wrapper:hover a{ display:block; }
#profile_pic_wrapper:hover a:hover{text-decoration:none;}
.profile_pic{ width:200px; height:200px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="profile_pic_wrapper">
<asp:Image ID="imgProfilePic" runat="server" ImageUrl="profile.jpg" CssClass="profile_pic"/>
<asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="ChangeProfilePic.aspx">Change Picture</asp:HyperLink>
</div>
</div>
</form>
</body>
In the above example, I've included the css styles in aspx page for illustrative purpose only. For real world implementation, it is always recommended to have your styles in a separate css file.
May be this is some thing you want:
http://demo.fearlessflyer.com/html/demo/pretty-hovers/
http://thirdroute.com/projects/captify/
Hope this helps.
You can find a how-to here http://www.dreamweavertutorial.co.uk/dreamweaver/articles/transparent-layer-overlay.htm
They are called overlays.
Another example here
http://css-tricks.com/3118-text-blocks-over-image/
You would need some client-side code to actually manage the mouseover event and then to show the overlayed A tag (with the text/image you want)
Wrap the imagebutton in a div and tie jquery handlers to show or hide the link.
Edit: Here is a simple example:
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="mynamediv" style="width: 50px;">
<div id="mydiv" style="display: none;">Change Image</div>
<asp:ImageButton runat="server" ID="myimage" ImageUrl="~/myimage.gif" />
</div>
</form>
<script language="javascript">
$("#mynamediv").mouseover(function () {
$("#mydiv").show();
});
$("#mynamediv").mouseout(function () {
$("#mydiv").hide();
});
</script>
Here's a balloon tip you might like
http://file.urin.take-uma.net/jquery.balloon.js-Demo.html