I would much appreciate if someone helps me out. I am new to asp.net as this might seem a simple question to you rather. But I am stuck.
I have a web form and at the back a master page. The header, menu, site-content(white area), footer are all in the master page, I have placed the contentplaceholder in the site-content of the master page.
What I want to do is I want to place the "[LoginName]" and The HyperLink "Logout" at the top right corner of the contentplaceholder with some space inbetween. My problem is when I start to zoom-in/ zoom-out the page in a browser the two controls( LoginName, HyperLink) seem to move from their places to the right. So Is there a way to keep them in-place every time no matter I zoom-in / zoom-out the page in browser ?
I hope you get my question. Waiting for an answer.
Thank You.
My code will follow.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPages/AdminMasterPage.Master" AutoEventWireup="true" CodeBehind="AdminHome.aspx.cs" Inherits="OLibraryManagementSystem.Pages.Admin.AdminHome" %>
<asp:Content ID="AdminContent1" ContentPlaceHolderID="AdminContentPlaceHolder" runat="server">
<div style=" width:auto; height:550px; position:relative;">
<asp:LoginName ID="LoginName1" runat="server" Font-Overline="false" FormatString="Welcome! [LoginName]" Font-Size="16px" ForeColor="Black" Style=" position: absolute; left: 70%; top: 2%;" />
<asp:HyperLink ID="HyperLink1" runat="server" Width="40px" NavigateUrl="~/Index.aspx" Style=" position: absolute; left: 91%; top: 2%;">Logout</asp:HyperLink>
</div>
</asp:Content>
Related
Description:
I'm having an issue with my website's footer blocking content on mobile browsers (and on longer pages on desktops).
I've seen threads about this before, but these focus on hiding the footer until the user scrolls all the way down. I want to have the footer "float" below the content, but have it go below the content when the user scrolls all the way down the page. I also need this to allow clicking on items right above the footer. On my site, you can't click on a button, even if it's a few lines above the footer - which needs to also be fixed.
Examples:
You can view an example of this issue at my own site: http://mbt.aeio.io/twitter.php
Note that when you scroll all the way down, it is impossible to click "Load More Tweets", even on desktops, where the button is clearly visible.
I cannot find an example of what I'm trying to accomplish; that's why I'm posting about this -- and not just copying someone else's code.
Code:
This is my code for ARRANGING the footer:
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
This is my ACTUAL code for the footer:
<div class="footer">
<div class="content">
<div class="container" style="
/* display: inline-block; */
">
<div class="well animated slideInUp" style="
display: inline-block;
">
<center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and Others | Copyright © 2015-2017 | All Rights Reserved</center>
</div>
</div>
</div>
</div>
I know this is super-janky and that I shouldn't be using containers to make a footer, so if you have any suggestions for improving/cleaning up the code too, that would also be appreciated.
And if you need to look at the CSS for whatever reason, it is using Bootstrap and can be found here: http://mbt.aeio.io/assets/css/
Thanks for all the help!
The best thing (and the right thing) to do is to give some bottom padding to body. Giving the following code:
body {
background: #eee;
padding-bottom: 75px;
}
We get this:
I've been working on a simple website for a friend and decided to use Weebly (yes I know, nooby) since I didn't want to start from scratch for a simple website. I've added a fixed navigation bar on the right side of the page in form of circular buttons with links attached to them. Unfortunately, as I'm scrolling, the links and hover effects stop working (buttons still scroll properly) once I reach a text box on the page. As soon as it passes it, they work again. Since I'm using Weebly I can't fully access all of the html in the page but I have full access to the CSS files. This is what my code looks like for the nav bar with 3 buttons:
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<p><a href="#A"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#B"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#L384"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
</ul>
</div>
And here's the CSS:
nav {
position: fixed;
float: right;
right: 0px;
!important;
}
And here's a couple images of it in action, showing the issue:
Again, I unfortunately can't access the code for the textbox because it's in Weebly.
Any help would be much appreciated. Thanks!
Your css is wrong. It should be something like this:
ul.nav {
position: fixed;
z-index: 1000;
right: 0px;
top: 20%; /* Change this to your needs */
}
Does anyone have a code for a page up button with endless scrolling? So no matter where the visitor is on the page, they will always see the button to bring them back to the top of the page.
Give this a try:
<div id="toTop" style="position: fixed; right: 20px; bottom: 20px;" onclick="javascript: scroll(0, 0);">Top</div>
You can fancy it up with more CSS and a smooth JavaScript scroll behavior if you want, but this should at least get you started.
I have a fixed header with navigation menu on the site:
#header_wrapper
{
height: 75px;
background-color: #FD735B;
z-index: 999;
position: fixed;
width: 100%;
}
#header_wrapper .control_wrapper
{
position: absolute;
right: 0px;
}
#header_wrapper .control_wrapper .control
{
float: left;
padding-left: 35px;
padding-top: 25px;
font-weight: bold;
}
.inner_content
{
height: 100%;
margin: 0px auto;
width: 85%;
position: relative;
z-index: 1;
}
Here is the HTML of the header:
<div id="header_wrapper">
<div class="inner_content">
<div class="control_wrapper">
<div class="control local">
<a class="white_font" id="link_user_experience">USER EXPERIENCE</a>
</div>
<div class="control local">
<a class="white_font" id="link_restocking">RESTOCKING EXPERIENCE</a>
</div>
<div class="control local">
<a class="white_font" id="link_analytics">ANALYTICS</a>
</div>
<div class="control">
<a class="white_font" id="link_team" href="team">TEAM</a>
</div>
</div>
</div>
The problem is that when you resize window and make it narrow part on navigation menu is cut off. And if you trying to scroll horizontally it remains cut off.
Here is an image of the cut off header:
I'm trying to scroll to the right side - the content is scrolled, but the header remains the same:
How I can make the header look good after resizing?
UPDATE:
I tried to recreate my problem on jsfiddle. I set big width to page and header in order to imitate narrow window (my problem appears only when user resize window and make it narrow).
I put 3 titles in header. When you load fiddle you will see only 2 of them. The third one is out of viewable area. I thought that you should just scroll horizontally and fixed header will scroll with the rest of the page. But fixed header is not scrolled and you can not see title #3.
In other words, I need fixed header to scroll horizontally like any other element.
Looks like your navigation content is position:absolute; right:0px; which would cause your navigation to go as far right as possible even when the browser is resized.
If you create a li and float:right, display:inline-block it should give you the functionality that you're looking for.
<nav>
<ul>
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
nav{width:100%;position:absolute;background-color:red;}
nav li{float:right;display:inline-block; padding-right:10px;}
Here's a JSFiddle:
http://jsfiddle.net/gBYZ4/3/
edit: cleaned up my html and fiddle. Had the header floated right by accident.
Maybe you could try the solution I wrote on Fixed top bar that scrolls horizontally with the rest of the page which seems to be also what you want.
There is a AJAX Control which helps to overcome this problem. You can use "AlwaysVisibleControlExtender". I have used it in my page and it works perfectly fine.
The below is the asp code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.header{width:100%;height:100px;position:fixed;z-index:1000;}
.content{padding-top:160px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="lnkHome" HorizontalOffset="70" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" runat="server" TargetControlID="lnkLogout" HorizontalOffset="20" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server" TargetControlID="lblName" HorizontalOffset="110" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender5" runat="server" TargetControlID="Image1" HorizontalSide="Center" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<asp:Image ID="Image1" runat="server" Height="150px" ImageUrl="~/Image/ABC.jpg" Width="1594px" />
<p style="margin-left: 1240px; width: 187px;">
<asp:Label ID="lblName" runat="server" Font-Size="Small" Font-Names="Arial" ForeColor="White">
</asp:Label>
<asp:LinkButton ID="lnkHome" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogout" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Logout</asp:LinkButton>
</p>
You need to drag and drop Alwaysvisible extender control and give the target control id as above. Hope this helps.
I have a 'background graphic' which is basically a design with two premade 'white boxes' where I would like to position my login/password textboxes. Stubbornly they refused to move from the top left of that image.
I'm using 960 grid system but I think the question probably isn't affected by that.
I've tried various things - trying absolute positioning, padding/margin settings. Even in visual studio I used the menus (gasp!) to select position as absolute and dragged the box down. In the designer it looked to be in the right spot, css had been added but in the browser, there it was at the top left again. Any suggestions before my computer learns about a new type of 'windows'?
My goal is to be able to specify the x,y coordinates of where each textbox should be. I'd rather not resort to slicing and tables and all that stuff.
The css is the standard grid960 setup, I won't post it due to size. For the box containing the login image:
#loginPanel {
background: url('/images/Main_Login2.png');
height: 300px;
}
[have put various positioning settings against #loginPanel and #txtLogin but no luck so far]
The markup:
<div id="test" class="grid_2 ">
<br />
</div>
<div id="loginPanel" class="grid_8 ">
<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>
</div>
Any help appreciated!
Mark
Lots of views but no news. I figured this would be an easy one. Anyway, I've found the solution, not sure why the absolute positioning didn't work for me initially but I think the secret was positioning the container Divs rather than using the positioning on the textbox itself. The below code works a charm, hope it helps someone.
<div id="loginPanel" class="grid_8 push_2">
<div style="position: absolute; top: 122px; left: 240px; width: 200px;">
<asp:TextBox ID="TextBox1" runat="server" Height="16px" Font-Size="Small" Width="190px"
BorderStyle="None"></asp:TextBox>
</div>
<div style="position: absolute; top: 152px; left: 240px; width: 200px;">
<asp:TextBox ID="txtPassword" runat="server" Height="16px" Font-Size="Small" Width="190px"
BorderStyle="None"></asp:TextBox>
</div>
</div>