I am trying to make a semi-transparent background image for the entire page with the rest of the content layered over it (opaque). However, when I try to layer the divs, the pagecontent is semi-transparent as well. I've tried switching the z-indexes around and that doesn't change anything.
here are the two relevant styles
#backgroundImage
{
background-image: url('/Images/background.jpg');
background-size: 100%;
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
#PageWrapper
{
z-index: 2;
}
and here is the page markup
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Frontend.master.cs" Inherits="PTMS.MasterPages.Frontend" %>
<!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>
<link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference runat="server" Path="~/Scripts/jquery-1.4.1.min.js"/>
</Scripts>
</asp:ScriptManager>
<div id="backgroundImage">
<div id="PageWrapper" >
<div id="Header">
<asp:SiteMapPath ID="MainMenuSiteMapPath" runat="server"></asp:SiteMapPath>
</div>
<div id="RightSide">
<UserControls:Sidebar ID="RightSidebar" runat="server" />
</div>
<div id="LeftSide">
<UserControls:Navbar ID="LeftSidebar" runat="server" />
</div>
<div id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}" />
<LoggedInTemplate>
(<asp:LoginStatus ID="LoginStatus1" runat="server" />)
</LoggedInTemplate>
</div>
</div>
</div>
</form>
</body>
</html>
Solved the problem. I moved the closing tag for the backgroundImage div so it was no longer wrapping the PageWrapper div, then set the opacity of the backgroundImage div and added position: absolute; to my PageWrapper.
To make the z-index work you also need to have position: absolute, relative, or fixed.
So your PageWrapper style did not have any of this position value, so its not work.
Also the backgroundImage layer must be alone and the pageWrapper must not be inside him.
See the final results: http://jsfiddle.net/EnUaK/
Related
This is my CSS:
body {
text-align:center;
vertical-align:central;
width:480px;
height:800px;
}
#content {
width:100px;
height:200px;
background-image:url("../App_GlobalResources/TopBanner.png");
display:inline-block;
}
And my HTML (Master page):
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="m.mysite" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TestTitle</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
test1234
</div>
<form id="form1" runat="server">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And i have a Default.aspx site which uses my masterpage, but it simple wont show my image..
if i make an img scr tag in the html it shows fine.. so the path is correct.. what else could it be?
'
This is the output HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
TestTitle
</title>
<link href="App_Themes/MobileTheme/MobileLayout.css" type="text/css" rel="stylesheet" /> </head>
<body>
<div id="header">
test1234
</div>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkNWnHplPoHce7cSIeDENrnMaUn20Ibq7H6yKbaedCCPw=" />
</div>
<div id="content">
test
</div>
</form>
</body>
</html>
Okay it works now, seems like Internet explorer was looking in the wrong folder.. must be somekind om Visual studio bug/setting i diden't notice..
I am having some problems with Safari.
While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.
There is also a small problem with some extra padding above the menu (same happens in Chrome)
I'd appreciate any help. thanks in advance.
Here is my master 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 runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
................
</AnonymousTemplate>
<LoggedInTemplate>
................
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
................
</Items>
</asp:Menu>
</div>
</div>
<div class="leftMenu">
<asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And here is the source code and CSS: http://jsfiddle.net/V5aCa/6/
It is because you are using display:table safari treats this differently to other browsers
have a look at this question:
Safari 5.1 breaks CSS table cell spacing
or try using border-box:
CSS does the width include the padding?
Your space above the navigation appears because of the skip nav anchor, if you position this absolutely or float it your space should disappear
Try resetting the Margin and Padding of the browser.
body {
margin: 0px;
padding: 0px;
}
that should force safari to start from your set values rather than build up on its default.
Recently, my company migrated to Windows 7 operating system.
I was using the following master file in Visual Studio 2010 on my Windows XP machine and everything was working fine, now that I migrated the following code to Windows 7 and same Visual Studio 2010, all the images below are moved to left. I can adjust them, but I am curious why all the images are moved to left, I am using the same monitor and Visual Studio 2010 version is same.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Masters_Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../App_Themes/NG/style.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
div ,
div img { display:block }
.fl
{
float:left;
margin-left:15%;
background-color:#8e2826;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f2
{
float:left;
margin-left:15%;
background-color:#e5e0dd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f3
{
float:left;
margin-left:15%;
background-color:#d4cfcd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.style1
{
color: #8e2826;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body >
<form id="form1" runat="server" >
<div style="margin-left:15%; background-color:#343434; width: 68.1%; margin-right:18%; ">
<asp:Image ID="imgIS" ImageUrl="~/images/improved_LOGO.jpg" runat="server" />
</div>
<div class="fl" >
<asp:Image ID="imgTop" runat="server" ImageUrl="~/images/m_banner_top.jpg" />
</div>
<div class="f2">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/m_banner_btm_5.jpg" />
</div>
<div class="f3" ></div>
<div class="f3">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="margin-left:15%; margin-right:18%; width: 68.1%; background-color:#8e2826; text-align:center">
<asp:Image ID="banner" runat="server" ImageUrl="~/images/b_banner_calibri.jpg"/>
</div>
</form>
</body>
</html>
If you want to align them to the center of the page, add the following lines to you CSS:
width://fixed width;
margin-left: auto;
margin-right:auto;
i am having a html form in which i had given a theme. now i want to show that theme in div tag in asp page..
my html page is :
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body background="file:/C:/Documents and Settings/Desktop/themes/images8.jpg">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" style="width:480px; height:150px; background-position:centre;"/>
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" style="width:480px; height:150px; background-position:centre;" />
</div>
</form>
</body>
</html>
and i use the code to display the theme as :
<asp:Image ID="img1" runat="server" Width="80px" Height="80px" ImageUrl="~/themes/form.html"/>
but this is not showing any theme.
please help me out..
You are assigning an html page to ImageUrl attribute so it won't work.
Please map it to the required Image file if you want that image to be displayed in the webpage.
When the following markup renders, the menu renders as table topMainMenu with a height of 51. When I remove the Blueprint stylesheet, topMainMenu renders with a height of 20, the minimum I presume.
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Blueprint/screen.css" />
<script src="<%# ResolveUrl("~/Scripts/jquery-1.4.4.js")%>" type="text/javascript"></script>
</head>
<body>
<form id="form" runat="server">
<div class="prepend-1 span-22 last">
<asp:Menu ID="topMainMenu" runat="server" DataSourceID="mainMenuDataSource" Orientation="Horizontal" Width="100%" Height="16px">
<StaticMenuStyle Height="10px" BackColor="Navy" />
</asp:Menu>
</div>
</form>
</body>
I was under the impression that Blueprint should have no effect on any height in this scenario. Surely a CSS reset wont be doing this? No styling I have tried can shrink the menu height below 51. What can I do?
This should override your blueprint css
<div class="prepend-1 span-22 last" style="height:20px;line-height:20px;">
OR
<style>
.adjustHeight {
height:20px; line-height:20px; margin:0; padding:0;
}
</style>
<div class="prepend-1 span-22 last adjustHeight">