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">
Related
Scenario :
I cannot make my asp:DropDownList style correctly.
It works perfectly but it doesn't match the rest of the form. Specifically, the rest of the form has a smaller footprint, no background, and a border.
Todo :
We want dropdowns with a border and white background (like those found on bootstraps form page) (I am sorry - I can't post images yet).
Tried Case :
To debug, I made a naked page with only a dropdown and a text box to compare to. Here is that code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/bootstrap-select.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.structure.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="col-5">
<asp:TextBox runat="server" id="notmuch0" CssClass="form-control"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" CssClass="form-control-sm" runat="server"><asp:ListItem>1</asp:ListItem></asp:DropDownList>
</div>
</form>
<!-- Javascript-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
<script src="js/popper.min.js"></script>
</body>
</html>
When we run the code, it creates the following mess for the drop down:
<div class="col-5">
<input name="notmuch0" type="text" id="notmuch0" class="form-control">
<select name="DropDownList1" id="DropDownList1" class="form-control-sm select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1">1</option>
</select><span class="select2 select2-container select2-container--bootstrap select2-container--below" dir="ltr" style="width: 48px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-DropDownList1-container"><span class="select2-selection__rendered" id="select2-DropDownList1-container" title="1">1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
And it looks the wrong way still (no border, still a background)
I have tried working with the bootstrap selectpicker - but it seems that .net ignores EVERYTHING we do to change the class.
I have about 4 hours of research into this - and still nothing Can you help please? Will try anything.
Please suggest. Thank you.
Try remove jquery-ui.
Only use bootstrap.
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/
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.