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.
Related
I'm developing a mobile app, and I'm having an issue with relative divs going above the top and bottom header that are fixed with a z-index. I did some research and tried to put a z-index in the relative div, but it did not fix anything.
Here's the Relative Div:
<div class="pure-u-1-3">
<div class="TopMobBlock">
<div class="TopMobName">Open Slot</div>
<center>
<div class="TopMobImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Open&w=100&h=100" height="100%" width="100%" />
</div>
</center>
<center><input type="submit" class="TopMobBlank" value="Claim Bonus" /></center>
<center><input type="submit" class="TopMobBlank" value="Send Energy" /></center>
<div class="TopMobOpenBlock">
<div class="TopMobOpenText">Open Slot</div>
</div>
</div>
</div>
Here's an edited version to just show the issue:
JsFiddle
Since your relative elements are using z-indexes, your fixed position elements will need to have a greater index to appear on top.
In your example JSFiddle, if I add z-index: 3; or greater to .StatsBar and .TabsBar it seems to fix it.
From your example I can see that StatsBar and TabsBar are fixed but without a z-index.
If you always want them to appear above everything else try adding a z-index value to them. For example 20.
Then add .ActivePage { z-index: 10; position:relative; }.
This will keep your header and footer always at the top of your ActivePage div.
Add position: relative; and z-index: -1; to .pure-u-1-3:
.pure-u-1-3 {
width: 32%;
width: 31.9690%;
position: relative;
z-index: -1;
}
https://jsfiddle.net/3Ljtywov/1/
I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.
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>
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>
I cant figure it out. How do i align the textbox? I thought using float: left on the labels on the left (then doing it on the input when i notice the input was now on the left without that) but that was completely wrong.
How do i get the textbox align along with the labels on the left of them next to the textbox instead of the far left?
The picture is an example of what i'd like it to look like.
You have two boxes, left and right, for each label/input pair. Both boxes are in one row and have fixed width. Now, you just have to make label text float to the right with text-align: right;
Here's a simple example:
http://jsfiddle.net/qP46X/
Using a table would be one (and easy) option.
Other options are all about setting fixed width on the and making it text-aligned to the right:
label {
width: 200px;
display: inline-block;
text-align: right;
}
or, as was pointed out, make them all float instead of inline.
you can do a multi div layout like this
<div class="fieldcontainer">
<div class="label"></div>
<div class="field"></div>
</div>
where
.fieldcontainer { clear: both; }
.label { float: left; width: ___ }
.field { float: left; }
Or, I actually prefer tables for forms like this. This is very much tabular data and it comes out very clean. Both will work though.
I like to set the 'line-height' in the css for the divs to get them to line up properly. Here is an example of how I do it using asp and css:
ASP:
<div id="profileRow1">
<div id="profileRow1Col1" class="righty">
<asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br />
<asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br />
<asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br />
<asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br />
<asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br />
<asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br />
</div>
<div id="profileRow1Col2">
<asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
</div>
</div>
And here is the code in the CSS file to make all of the above fields look nice and neat:
#profileRow1{width:100%;line-height:40px;}
#profileRow1Col1{float:left; width:25%; margin-right:20px;}
#profileRow1Col2{float:left; width:25%;}
.righty{text-align:right;}
you can basically pull everything but the DIV tags and replace with your own content.
Trust me when I say it looks aligned the way the image in the original post does!
I would post a screenshot but Stack wont let me:
Oops! Your edit couldn't be submitted because:
We're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn more than 10 reputation to post images.
:)
I have found better option,
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/