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;">
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 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.
I have a aspx page. By default, when the page loads the focus is on first textbox. I want to remove the focus to nothing. I am developing this website for a mobile device.
We have come to this nothing conclusion due to some cross browser restrictions we faced with IE.
Page.Focus(); in the init is not working and I don't want to set up the focus to anything.
This information is all I have. Hope it is sufficient for possible resolution.
I will appreciate your feedback and time spend on this query...
An alternative can be to create a hidden control and move the focus to that control
If you're able to use jQuery why don't you do
$('#idOfInputWhichKeepsOnGettingFocus').blur();
If not, create a new first field
<input id="youCannotSeeMe" style="position:absolute; left:9001px;" />
This works:
Page.SetFocus(this);
I am having a problem in ASP.NET to style buttons like the Facebook Buttons, found here:
http://nicolasgallagher.com/lab/css3-facebook-buttons/
I tried using asp:Button with CssClass set, which works most of the time, except for the buttons that contain images, for example:
class="uibutton icon add"
If i use:
Button
then things look fine, however I can't connect to the C# code without using JavaScript to do the work.
I'm hoping there is something simple I am missing (I have tried using 'background' and 'background image' in CSS with no luck.
As there's only one element it should work. Could you post a JSFiddle?
Bootstrap suffers the same problem, and the only way (sort of) around it is by using a LinkButton as described here.
Looking at the link provided, it seems you can't use the icons with an <input> tag, only with <button> or <a> tags. Fortunately, <asp:LinkButton> will act the same as an <asp:Button> on the server, but render as an <a> tag on the client.
So try using <asp:LinkButton CssClass="uibutton icon add" ... > and it should work fine.
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 :)