I use VS 2010 . I add button to webfrom that created, but I can't change his position.
I read in previous questions that I need to change the layout to absolute , but it didn't work. when I drag the button to the center it's back automatically to left-center..
you can see that in the picture:
how can I fix that?
Thank you!!
solution:
Tools -> Options, and set HTML Designer -> CSS Styling to "Change positioning to absolute.."
Changing the position to absolute seems more like a workaround which would introduce further problems after "solving" this one. Unless you really know what you're doing for styling, don't do that.
Centering an element on a webpage is really a matter for the CSS styling. Take a look at the markup (HTML) view and find where that button is. You can add a class to that button for the CSS styling:
<asp:Button runat="server" ID="Button1" CssClass="centeredButton" ...
Then in your site's CSS file (Site.css might be the standard in the ASP.NET template? I don't remember) you can apply the styling you're looking for. There's a lot you can do at that point. Not knowing how the rest of the page is laid out, I can only offer very random suggestions. Something like this for example:
.centeredButton {
display: block;
margin: auto;
}
That's one way to center that particular element. There are definitely more, depending on how the rest of the markup/layout is structured.
First of all i recommend not to use this drag options. Because what happens behind this whenever you drag a button or anything, will make you more confused. You can do it using div or table.
Related
I'm working on a little project with ASP and C#.
In my project I'm using a masterpage for the navigationbar on the top of my pages, looking like that:
The navigationbar contains some normal navigation-points and one to log out with float: right;
On all of my diffenrent pages this works excepted for one.
The only difference is, that on this special page I have some textbox-elements like this:
<asp:TextBox ID="tbTOP1sum" runat="server"></asp:TextBox>
As soon as I only enter one of this textboxes my navigationbar looks like that:
It doesn't matter what sort of element im adding, everything is okay, excepted with this textboxes.
I noticed that this only happens in Google-chrome, not with Firefox and not with Internet-Explorer or Edge. Another thing i found out is, that disabling and enabling the CSS-rule in Chrome-Page-Inspector fixes the problem.
I have no idea what to do...
Thanks in advance for your help!
I have the same issue sometimes. When you change it in the inspector go into your code and make the same change and save/build, go to the web browser and do a hard refresh with "ctrl+F5". If it still does not work, wrap your logout a link in a div and then call it in CSS. Set the position to relative, and then put the top: -55px;
It finally turned out, that adding display: inline; to the of the navigationbars <ul> is all to do.
Another way is to do it with table columns. One for the normal content and one for the logout.
Thanks for the other answers!
I'm going crazy with this. I got the twitter-bootstrap menu running in my c# code and it looks and works great. However, the menu is overwriting my text of the site I've built. It seems no matter what I do the body of the site appears under the menu.... I'm thinking it's a CSS issue because if I resize the page to mobile size the body is then placed under the menu.
I'm not even sure what code I should cut and paste...?
I've tried various or row, ... etc...
How do I get my body text to show below the menu vs. underneath it?
Thanks
I had this problem too, I had to do a padding in my _layout.cshtml. This solved it for me.
<body style="padding-top: 40px;">
I am doing a website using asp.net C# and I would like to popup a small window with information as soon as mouse hover a particular word. I know that I have to use jquery but I don't know exactly how to do it.
Any suggestions please?
There are many plugins out there that will help you achieve what you are looking for. However it is also very possible to implement this functionality yourself. I wouldn't be surprised either if some of the plugins you come across also use similar code.
The following is my attempt to demystify tooltip/popup plugin behaviour.
You could wrap the desired word in a <span> element and give it a .hover class.
<div>
This is some text with a <span class="hover">special</span>
word that has hovercraft capabilities.
</div>
Your jQuery (ver 1.7+) would look something like this :
$(".hover").on('mouseenter',function(){
// The popup must be shown here (mouse is over element).
}).on('mouseleave',function(){
// The popup must be hidden here (mouse has left element).
});
I should add here that I am using a great and yet sometimes forgotten capability of jQuery called "chaining". The on() function actually returns the object that it was attached to. In this case $(".hover") - so if I want to call another function on that object I can just add it as another function at the end. Another example of this would be :
$("#myElement").text("An error has occured!").css("color","#FF0000");
That line of code would also at the text to #myElement and also turn the colour red.
With regard to your actual popup - I would suggest two things :
Have an element at the bottom of your markup (written last so highest index - or manually set the highest z-index)
You could also have the popup in a hidden element right next to the element that is supposed to trigger the popup.
What you're after sounds like a 'tool tip'.
The solutions using jQuery are somewhat involved - so I'll just direct you to external resources.
Possible solutions:
ToolTip Plugin for jQuery
Build a Better Tooltip with jQuery Awesomeness
I've got this DIV tag that has a class definition in it.
<div class="clear hideSkiplink">
I've searched the entire project, but I can't find this class anywhere by using the text search feature.
Currently, the DIV is too wide, and I need to trim it down a bit.
Whenever I remove the class="clear hideSkiplink" reference, the DIV tag immediately grows much too large.
I inherited this project after the website developer left. I'm good with C# and WinForms, but not really this web stuff.
Could someone help me out, please?
Solved!
I found .clear { clear: both; } burried in the file StyleSheet.css, but I could not find the hideSkiplink word anywhere in my project.
So, I took the hideSkiplink word off, and the rendered page did not change in the browser.
Apparently, all I was seeing was controlled by the one clear word in the DIV tag.
My tag now reads:
<div class="clear">
Thanks, JLevett!
'clear' and 'hideSkiplink' are too different classes, not one.
Try searching for those individual phrases within your project.
if you have firebug, go to HTML tab, find your element and click on int, I made you a screen of this page as an example, the red circles show the class names and the green circles show you the css source file. You might as well ctrl+click on the source files and they open in a new browser window :)
i am doing mini ERP project., in that i have 3 frames.
frame is used as Header where i have "Home" and "logout" image button
when i click "Home" the frame3 goes to Home page and when i click "Logout" button, all the frames disappears and main window of "Login" screen comes.
i have used "Home " and "Logout" button in image using Hyperlink control in ASP.NET
the problem is due to Hyperlink the button gets blue border around it.
i want to remove that border around the image button.
can any one knows how to remove that border
here my codes
<asp:HyperLink ID="HomeButtonlink"
BorderWidth="0px"
Font-Overline = "False"
ImageUrl="~/Images/Untitled-5.png"
runat="server"
Height="100%"
Target ="frame3"
NavigateUrl="~/About.aspx"
BorderStyle="None"></asp:HyperLink>
thanks in advances
A.S.Rajkumar.Rajguru
I would create a new css class for this instead:
<asp:HyperLink ID="HomeButtonlink" CssClass="linkbutton"
ImageUrl="~/Images/Untitled-5.png"
runat="server" Target="frame3" NavigateUrl="~/About.aspx"></asp:HyperLink>
and you can define your class like this:
a.linkbutton, a.linkbutton:visited, a.linkbutton img
{
border: none;
outline: none;
}
You gain very little by using the asp.net server control. You can do the same like this:
<a href="<%=ResolveUrl("~/about.aspx")%>" target="frame3" class="linkbutton">
<img src="<%=ResolveUrl("~/images/untitled-5.png") %>" />
</a>
The border around images that are links is part of the default HTML stylesheet.
To get rid of it for all images, add a simple bit of CSS to your page as follows:
img {border:none;}
This is a common thing to want to do, as very few people actually want the default behaviour these days. You may want to look into adding a 'reset' stylesheet to your site to get rid of all the unwanted default behaviours. It will also make your page work more consistently between different browers.
Here's a link to a related question to help you find out more: https://stackoverflow.com/questions/116754/best-css-reset
If for some reason you don't want to affect all the image links on your site, you could also do a more specific stylesheet for it since you've given it an ID:
#HomeButtonlink {border:none;}
You could also add a CSS class to the object, and then reference that in your stylesheet if you wanted to apply it to a group of buttons.
...but frankly, I'd just go with the full reset if I were you.