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.
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 a project I've been working on for the past couple of months. Everything has been working fine up till today. When I came I noticed that all my button sizes were the same. I like to use the developer tools in Chrome to help debug my websites, and when I looked to see why the buttons weren't displaying properly; nothing seemed amiss. So will you please help me identify what is going on and how I should fix it?
Here is the .aspx code:
<div class="row section text-center">
<h2><%: Page.Title %> Page</h2><br />
<asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
<hr />
</div>
<div class="row col-xs-12 text-center">
<div class="col-xs-6 text-center">
<asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
</div>
<div class="col-xs-6 text-center">
<asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
</div>
Here is what the page looks like now:
This is the CSS for the buttons:
.stButton {
width: 190px;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align:center;
}
.stButton-lg {
width: 325px !important;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align: center;
}
As you can see I have CSS for a normal button and CSS for a larger button. The larger button being what I'm targeting in my .aspx code. I include the "!important" at the end of the width because the buttons aren't displaying correctly; just to see if that would help... obviously it didn't. I've also tried inline styling and that doesn't work either. One important note, I've viewed the page in the following browsers: IE, Chrome, and Edge.
Anyway, here are the links in the Master Page with a view of the files in the folder structure of the project:
I commented out the placeholder for the Script.Render since I'm declaring the links directly above the placeholder. Also, having it uncommented did nothing for me as well.
I think I've covered it all, so if I've missed something please let me know and I'll include it. I appreciate all and any help that is given.
Thank you for your help. I found the answer however and hopefully this helps someone else. The problem was that another less experienced team member had changed the width for the input controls to Max-Width: 150px in the CSS (not shown in the pictures above). That tiny thing through me for almost an entire day, but at least it was found and corrected.
Thank you to those who helped or commented.
I have an asp placeholder object, within a div.
<div id="contentMenu" class="contentMenu">
<asp:PlaceHolder ID="plhMenu" runat="server">
</asp:PlaceHolder>
<div id="divMenuImage" class="menuImage">
<asp:Image ID="imgMenu" runat="server" ImageUrl="images/menu.gif" />
</div>
</div>
the div uses the following css:
.contentMenu
{
color: #ffffff;
left: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: absolute;
top: 85px;
width: 500px;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Items in the menu are added to the placeholder using calls such as:
plhMenu.Controls.Add(btnArrow);
plhMenu.Controls.Add(btnCategory);
Using the text-overflow property in the css is supposed to crop the text and show ellipses.
However, when the property "overflow : hidden" is in the css, all the menu disappears. Remove that propery and the menu appears, but the text-overflow doesn't work (it seems that overflow : hidden is required).
Any help in sorting this out would be very much appreciated as I have spent hours trying to figure out what is going on.
Thanks in advance.
You don't have a height on your container div, if you are adding items to the placeholder dynamically after the page is first drawn, then they might not cause the div to grow vertically.
You could try using overflow-x: hidden;?
![enter image description here][1]How can I change the height of the layout of the my page when the user adds new controllers. I would like to enhance the height of my page when the user adds a new control.
I am using in master page
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
and in my css
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
height: auto;
}
One more question, can I achieve that programmatically in aspx.cs file ?
Any advice would be appreciated.
Thank you.
As long as your asp:Content has elements's in that have content in or a set height it should add to the height of the page
example
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<div>
</div>
</asp:Content>
Also need to check for CSS styles that are altering the height of div's as this will effect any content you place in there
The images for my css header class load correctly in Chrome and FF, but not in IE8 or 7. Anyone know as to what I may be missing?
Here is the css class code:
.TBox {
color:#333333;
font-size:11px;
background: url("../../Images/box_bottom_right.gif") no-repeat bottom right;
margin: 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.TBox .header {
margin: 0;
padding: 0;
background:url("../../Images/box_top_right.gif") no-repeat top right;
text-align: center;
}
.TBox .header h2 {
color:#ffffff;
background:url("../../Images/box_top_left.gif") no-repeat top left;
font-size:14px;
padding-top: 7px;
height:20px;
margin: 0;
}
.TBox .text {
background:url("../../Images/box_bottom_left.gif") no-repeat bottom left;
padding:10px 10px 15px 10px;
margin:0;
height:auto;
text-align:justify;
color:#003399;
line-height:15px;
}
And here is a portion of how I am using it, plus the stuff at the top of the file:
<div class="TBox" style="width: 90%; height: 100%; position:relative; right:-20px;">
<div class="header"> <h2>Terms:</h2> </div>
<asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
How did you create the images? If you used Photoshop, make sure you use the Save to Web... menu selection, NOT Save As...
If all else fails, use an absolute url. If that doesn't work, try the same browser on another computer.
I use it like this and it works in all browsers i tested
background: #fff url('../../images/bkgd_tile.gif') repeat-y 50% top;
Nothing wrong with the CSS itself, so you have a different problem. Maybe it's the images themselves? Can you view them directly in IE?
Maybe it's the relative paths not pointing in the right place. That's not specifically an IE difference, but if IE ended up at a slightly different URL due to routing, the ../.. stuff may end up pointing at the wrong level of folder. Rooted URLs are more reliable when you're using routing in ASP.NET (or elsewhere).