New to asp.net and I am trying to center the hover portion of my menu control but for the life of me I cannot figure it out.
Here is my code:
<aside>
<nav>
<asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" DynamicEnableDefaultPopOutImage="False" Orientation="Horizontal"
RenderingMode="Table" backcolor="#CB4154" ForeColor="white" Font-Bold="True" >
<StaticMenuItemStyle HorizontalPadding="8px" VerticalPadding="2px" />
<StaticMenuStyle height="25px" Width="800px" />
<StaticSelectedStyle HorizontalPadding="8px" VerticalPadding="2px" />
<StaticHoverStyle Font-Bold="True" height="75%" width="50%" backcolor="#00B7EB" ForeColor="White" CssClass="StaticHoverStyle"/>
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</nav>
</aside>
And the CSS:
#Menu {
text-align: center;
margin-right:auto;
margin-left: auto;
}
.StaticHoverStyle {
text-align: center;
}
Any input on what I am doing wrong would be appreciated.
make it absolute and add right and left tags
#Menu {
position:absolute;
text-align: center;
margin-right:auto;
margin-left: auto;
right:0px;
left:0px; }
}
.StaticHoverStyle {
text-align: center;
}
i just had a quick look at mine (been a while) and it looks like i put text-align in a wrapping div. what happens it you move your text-align to the nav element? (move the data source out, for clarity.)
Related
Hello!
Can anyone tell me how can I place any Gridview in center in Div or panel? I have applied following CSS but its does not working:
<asp:Panel ID="pnlGrid" CssClass="panel" runat="server">
<div style="text-align:center">
<asp:GridView ID="grdReqApproval" runat="server" AutoGenerateColumns="false" CssClass="SimpleGrid">
<Columns>
<asp:BoundField DataField="Approved By" HeaderText="Approved By" />
<asp:BoundField DataField="User Name" HeaderText="User Name" />
<asp:BoundField DataField="Approval Time" HeaderText="Approvel Time" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
.panel
{
width: 330px;
padding: 10px;
min-height: 20px;
border: 1px solid #dcdcdc;
margin-left:auto;
margin-right:auto;
}
HorizontalAlign property of Gridview can solve your problem
<asp:Panel ID="pID" runat="server">
<div>
<asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
HorizontalAlign="Center">
<Columns>
...
...
</Columns>
</asp:GridView>
</div>
Check this is working for me , Ultimatly gridview get converted to table so the apply following stylesheet to your gridview which i applied to table
CSS
.centered-table {
margin-left: auto;
margin-right: auto;
}
HTML
<div>
<table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
JsFiddle Demo
Slight case of thread necromancy, but I was having the same problem and managed to fix it by aligning the code block rather than the gridview itself.
Basically I set the width of the element to 40%, and left to 30% (which means right is also 30%, because maths) and that positions the whole lot, text, grid and all into the middle of the page.
The css looks roughly like this
GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}
on your div text-align: center
as you see here, your class works. Just be sure its parent container is wider so it can center
http://jsfiddle.net/C7ybw/
#container{
width:800px;
border:1px solid #000;
}
.div_text_center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="div_text_center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I have a two column layout page with a Validation Summary (VS) control above the 2 columns. The VS is centered in the container above the columns, which is what I want, but I also want the different bullet points to be vertically aligned, if possible. I have tried several things, including placing the VS inside a div (inside the container div that is center aligned) with text-align:left;, but that moves the entire div to the side of the container. I have also tried making the div text-align:center; and the VS text-align:left;, but that also moves the entire block all the way to the left. I've also tried the same thing with a table, but no luck.
This is in Firefox by the way. I haven't tested in other browsers, but it needs to work in FF.
Here is pic to show the messed up vertical alignment:
And here is the code for my VS control, without my alignment attempts (if more code is needed, let me know):
<div id="container">
<asp:Label ID="lblStatus" runat="server" ForeColor="Red"></asp:Label>
<asp:ValidationSummary ID="VS1" runat="server" CssClass="validator" ValidationGroup="theform" />
<div id="leftCol">
Could somebody help me vertically align those bullet points in the center of the page?
Since bullet points are part of the list items I don't think you will be able to align them. Why not try something like having a top column with 3 divs and place your validationsummary control in the middle one. Try this
HTML Code
<div id="container" class="container">
<div id="top" class="top">
<div id="topLeft" class="topLeft">
</div>
<div id="topMiddle" class="topMiddle">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
<div id="topRight" class="topRight">
</div>
</div>
<div id="bottom" class="bottom">
<div id="bottomLeft" class="bottomLeft">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="input value" ControlToValidate="TextBox1" Text="*"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Need come input for this" ControlToValidate="TextBox2" Text="*"></asp:RequiredFieldValidator><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="bottomRight" class="bottomRight">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="please input text" ControlToValidate="TextBox3" Text="*"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Where is the text?" ControlToValidate="TextBox4" Text="*"></asp:RequiredFieldValidator><br />
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
</div>
</div>
CSS
.container
{
display: block;
width:800px;
margin:0px;
padding:0px;
}
.top
{
display:inline-block;
width:800px;
}
.bottom
{
display:inline-block;
}
.topMiddle
{
display:inline;
background-color:Yellow;
float:left;
width:300px;
}
.topLeft
{
display:inline;
float:left;
width:250px;
}
.topRight
{
display:inline;
float:left;
width:250px;
}
.bottomLeft
{
display:inline;
width:400px;
float:left;
background-color:Orange;
}
.bottomRight
{
display:inline;
width:400px;
float:left;
background-color:Lime;
}
Hey you may define your parent text-align left center right
according to your design
Try using this one....
<style>
.validator ul li { text-align:left; }
</style>
Edit
Set padding left or margin left to ul as you want...
.validator ul { padding-left: 100px; }
I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.
I've been struggling with this asp.net Menu control problem for days and it's driving me crazy. Here the code:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" CssClass="hrMainMenu" DynamicHorizontalOffset="1" >
<DynamicHoverStyle ForeColor="White" Font-Bold="True" />
<DynamicMenuItemStyle ForeColor="White" />
<DynamicMenuStyle Width="97px" HorizontalPadding="1px" />
<DynamicSelectedStyle ForeColor="White" />
<DynamicItemTemplate>
<div class="dinamicMenuItemTemplate">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Text") %>' EnableTheming="True"></asp:Label>
</div>
</DynamicItemTemplate>
<StaticMenuItemStyle ForeColor="White" CssClass="StaticMenuItemStyle" />
<StaticMenuStyle HorizontalPadding="10px" CssClass="StaticMenuStyle" />
<StaticSelectedStyle CssClass="staticMenuItemTemplateSelected" ForeColor="Red" />
<StaticItemTemplate>
<div class="staticMenuItemTemplate">
<div class="innerMenuElement">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Text") %>'></asp:Label></div>
</div>
</StaticItemTemplate>
</asp:Menu>
Now this is my css:
.staticMenuItemTemplate
{
background-position: left;
background-image: url('../../images/mainLayout/menuDefault.png');
background-repeat: no-repeat;
width: 100px;
text-align: center;
height: 25px;
position: relative;
top: 0px;
left: 0px;
}
.staticMenuItemTemplate:hover
{
background-image: url('../../images/mainLayout/menuHover.png');
background-repeat: no-repeat;
background-position: left;
font-weight: bold;
}
.staticMenuItemTemplateSelected
{
background-image: url('../../images/mainLayout/menuSelected.png') !important;
background-repeat: no-repeat !important;
background-position: left !important;
color: #FF00FF !important;
}
I want to display a different image when the menu item has been selected (menuSelected.png) but whilst the class staticMenuItemTemplate:hover seems to work and indeed the image changes, the class staticMenuItemTemplateSelected doesn't. Only the text gets pink as stated but the image won't change.
Thanks for your help.
I think the problem has to do with how the HTML renders for this control. In my tests, I end up with something like:
<td>
<a class="... staticMenuItemTemplateSelected ..." ...>
<div class="staticMenuItemTemplate">
<span>Menu text here</span>
</div>
</a>
</td>
So you can see that the <a> tag is getting the staticMenuItemTemplateSelected applied, but the inner <div> is getting the staticMenuItemTemplate class which ends up overriding the staticMenuItemTemplateSelected style since it is more specific.
If you change your declaration of .staticMenuItemTemplateSelected to
.staticMenuItemTemplateSelected .staticMenuItemTemplate
{
background-image: url('../../images/mainLayout/menuSelected.png') !important;
background-repeat: no-repeat !important;
background-position: left !important;
color: #FF00FF !important;
}
you will make that style more specific than the style for .staticMenuItemTemplate and it should work.
FireBug with FireFox is a great tool for investigating CSS weirdness issues.