I am trying to add background images to only a few pages where as the other pages will not have one. Do I need a separate masterpage for the pages with background images or can I do this by overriding the existing styles?
My last attempt has a nested div with the image...
page with background:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>
masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.MasterPage" %>
<!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></title>
<link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="PageWrapper">
<div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>
<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
<DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
<DynamicMenuStyle BackColor="#310062" />
<StaticSelectedStyle BackColor="#CC3300" />
<DynamicSelectedStyle BackColor="#310062" />
<DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
<StaticHoverStyle ForeColor="White" BackColor="#310062" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<div id="MainContent">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
<br />
<h1>Title</h1>
<br />
<br />
<asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
</div>
</form>
</body>
</html>
maincontent style:
#MainContent
{
background-color: #310062;
width: 940px;
height: 480px;
color: #ffffff;
min-height: 480px;
padding: 10px;
font-size: 0.8em;
float: left;
}
Thanks for any help!
put a contentplaceholder in the head, and in each page put a style tag with the extra div styling in it. probably not the best way to do it, but would work for a few pages only.
<style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>
this should override the style you set in your external css file.
(although ideally all css should be placed in external css files, and not style tags)
Create a style sheet just for the child page. Use the body tag to apply the CSS style.
body {
background-image: url('images/background-image.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
vertical-align: top;
background-position: 0% 20%;
}
Tested and working solution.
Related
The last node in the TreeView (ASP) control is being displayed at a different location, though the hierarchical logic remains and I can collapse the node.
The TreeView is nested within a Panel, which is inside a <div>. I have made enough place for it to expand, and even maximized the TreeView size, but same issue. Now after some days of searching for help here, and because I'm new in Web designing. Also, there is no Scrollbar Property for the TreeView.
I'm coding using .NET 3.5
CODE:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Genographic._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></title>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
width: 50%;
height: 600px;
background-color: white;
}
.labelDiv
{
width: 39%;
height: 600px;
background-color: control;
}
div > div
{
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<asp:Panel ID="Panel_Menu" runat="server" BackColor="#336699" Width="100%" Height="155px">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
</asp:Panel>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" Height="600px" Width="600px" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Panel ID="Panel1" runat="server" Height="582px" Width="640px" Style="display: inline-block;">
<br>
<asp:Label ID="Label2" runat="server" Text="Level: "></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Height="300px" Width="251px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>
<br>
<asp:TreeView ID="TreeView_2" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</asp:Panel>
</div>
</div>
</form>
</body>
</html>
I got it working using absolute positioning.
<!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></title>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
position: absolute;
top: 180px;
left: 510px;
width: 600px;
height: 100%;
background-color: green;
}
.labelDiv
{
position:absolute;
top: 180px;
left: 5px;
width: 500px;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv" style="background-color: #3366CC">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Label ID="Label2" runat="server" Text="Level:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Width="416px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text="...:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_H" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>
How to show an image in ContentPlaceHolder4 on click of a Link Button which is placed on ContentPlaceHolder3.
I Have a Master Page and one content page. On master page i have a link INSTRUMENTS by clicking on which i am redirected to content page INSTRUMENTS. Now i have 10 LINK BUTTON controls on my Content Page and i want on the click of each link button corresponding image should open on same content page but in different CntentPlaceHolder. Please guide me how to add code for Link Button Click and how to render iamge on click of Link Button.
Following is the code i have added till now.
**This is My Master Page**
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
}
.style2
{
width: 162px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <img src="IMAGES/main.png" style="background-color: #99FF99; border-top-color: #800000; width: 1082px; height: 105px;" />
</div>
HOME INSTRUMENTS LOGIN
ADDRESS
<table style="width: 100%; height: 288px; margin-top: 11px;">
<tr>
<td bgcolor="#FF0066" align="center" class="style2"
style="text-align: center; vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
<td bgcolor="#33CCCC" class="style1">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
**This is My Content Page**
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INSTRUMENTS.aspx.cs" Inherits="INSTRUMENTS" %>
<asp:Content id="content3" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lkbutton_click">Sitar</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server">Harmonium</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server">Tabla</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server">Drum</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton5" runat="server">Guitar</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton6" runat="server">Sarod</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton7" runat="server">Flute</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton8" runat="server">Santoor</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton9" runat="server" onclick="LinkButton9_Click">Keyboard</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton10" runat="server">LinkButton</asp:LinkButton>
</asp:Content>
<asp:content ID ="C2" ContentPlaceHolderID ="ContentPlaceHolder4" runat="Server">
<asp:Image ID ="I1" ImageUrl ="~/IMAGES/F.png" >
<asp:Image />
</asp:content>
in your design page use like this.
<asp:Content ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
<img id="img1" runat="server" />
</asp:Content>
and in code behind link button click event like below:
protected void lkbutton_click(object sender, EventArgs e)
{
img1.Src = "~/images/sonata-logo.png";
}
i tested it it's working fine.
but put the correct path of image then only it will show.
Thanks
<asp:LinkButton ID="LinkButton1" runat="server" width="250px" height="250">
<img runat="server" id="IL"src="~/Class/Adds/0/4.jpg" width="250" height="250" />
</asp:LinkButton>
With this you can change the picture with server code.
il.SRC = "~/Class/Adds/0/7.jpg"
My apologies for how basic this question is but I'm in the early stages of trying to learn ASP.NET, having had a largely WinForms background.
I am creating a Master Page with a Menu Bar on it and am failing to even get the Menu to center on the page.
My mark up is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Title</title>
<link href="CSS/Master.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="HomeForm" runat="server">
<div id="MainDiv">
<asp:Panel ID="HeaderPanel" HorizontalAlign="Center" runat="server">
<header>
<img src="/Artwork/Webhead.jpg" />
</header>
</asp:Panel>
<div id="MenuDiv">
<asp:Menu ID="MainMenu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And my CSS is as follows -
*
{
font-family: Calibri
}
#MainDiv
{
margin: auto;
background-color: cyan;
}
#HeaderPanel
{
}
#MenuDiv
{
margin: auto;
}
#MainMenu
{
margin: auto;
background-color: yellow;
align-self: center;
}
The logo in the section centers ok, but the Menu doesn't.
Any help would be much appreciated.
try this
#MainMenu{
display: table;
margin: 0 auto;
}
I need to set a background for my website so that each web form child of the master page would show the background image.
I've googled it and found a few answers but they didn't do anything.
I am attaching my Master Page html code and an image showing the background I want:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Pages_MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Qwik ProjecTrace</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
text-align: center;
font-size: 40pt;
color: #0066CC;
}
.style3
{
font-size: x-large;
}
body
{
background:url('/style/images/IMS-Backgroung.jpg') no-repeat left top;
}
</style>
<link href="../Style/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table class="style1">
<tr>
<td runat="server" style="direction: ltr">
<asp:Image ID="mes1" runat="server" style="text-align: left" />
</td>
<td class="style2">
<strong style="font-size: 40">Qwik ProjecTrace<br />
<span class="style3">you see what we do 24/7</span></strong></td>
<td runat="server" style="direction: rtl">
<asp:Image ID="mes2" runat="server" style="text-align: right" />
</td>
</tr>
</table>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<p></p>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Does anyone know what is wrong with my code ? And how to set that background?
Thanks ahead
Change body style like this:
body
{
background-image: url('/style/images/IMS-Backgroung.jpg');
background-repeat:no-repeat;
}
Make sure that page from where your are accesing is "sitting" in parent folder of "/style/images/".
I would advice you to use asp.net themes where you can point to image like this: background-image: url('IMS-Backgroung.jpg') and will work for entire web app structure.
More about Themes can be found on ASP.NET Themes and Skins
Here's the code solution (It seems that in my case, I had some kind of a problem with the containing folders):
body
{
background-image: url('../style/images/Background.jpg');
background-repeat:no-repeat;
}
I am working on an Asp .net project and i Am using RadSplitter to split me website. I want to remove the borders from the splitter. Here is my asp code below, i remove the borders but they are still appear. Can anyone help me please?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webbetv1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html runat="server">
<head >
<style type="text/css">
.RadSplitter .pane,
.RadSplitter .paneHorizontal
{
border: 0px !important;
padding: 0px !important;
}
.style1
{
width: 100%;
margin-bottom: 33px;
}
</style>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
</head>
<form id="Form1" runat="server">
<body>
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div style="height:800px; width: auto;">
<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Height="100%" ExpandMode="FullExpandItem"
Orientation="Horizontal" LiveResize="false" BorderSize="0" BorderWidth="0px" BorderStyle="None" CssClass="pane" >
<telerik:RadPane ID="TopPane" runat="server" Height="120" MinHeight="85" MaxHeight="150" BorderWidth="0px"
Scrolling="none" CssClass="pane" >
<asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
<table class="style1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
sadasd</td>
<td>
</td>
</tr>
</table>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" Height="100%" BorderWidth="0px" BorderStyle="None" />
</telerik:RadSplitter>
</div>
</body>
</form>
</html>
Try adding
border: none;
to your .pane css class.
I had the same problem and I had to add that to the css class as well as setting BorderStyle="None" and BorderSize="0" . I'm working with a master page and I suspected that the property was being overwritten somewhere.
No css should be necessary in order to remove the borders:
On the RadSplitter set:
PanesBorderSize="0" BorderWidth="0"
On the RadPane set:
BorderWidth="0"
Now that the image is visible, maybe you just want to hidden the RadSplitBar. In that case you can both remove it or just set Visible="False".