i have a simple markup with a navigation div, a content div and a footer div.
If I open my "page", everything seems okay. But if I open the page and then resize the browser window to e.g. 30%, then the content div slides down.
It seems only to occur in internet explorer.
The test markup:
<html>
<body>
<div id="container">
<div id="navi" style="float:left;width:197px;background-color:blue;">
NaviContent
<br /><br />
more NaviContent
</div>
<div id="content" style="width:820px;background-color:yellow">
<table>
<tr>
<td>Content
<br /><br />
more ContentContent
<br /><br /><br /><br />
<br /><br /><br /><br />
more ContentContent
<br /><br /><br /><br />
<br /><br /><br /><br />
more ContentContent
</td>
</tr>
</table>
</div>
<div id="footer" style="clear:both;">
Footer Content
</div>
</div>
</body>
</html>
Images of the problem:
browser in 100% view:
http://www.suckmypic.net/25729/1.png
browser window resized: http://www.suckmypic.net/25730/2.png
Please help
You need to give your #container a width
This is because sum content + navi > window width.
Related
After a long hiatus I'm currently trying to do a page with a menu and a scrolling pane on the right side.
It works well except that the scroll bar does not go down the full height of the page instead going about 400-600 px vertically (all content else is scrolled). The menu though that I have works well with staying fixated on top. Now my question is how can I do a scrollbar that goes down the remaining window (except the menu space)?
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mytitle</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="header">
<div name="phone">
<img src="images/phone" alt="phone" /> 000-000-000-000
</div>
<div name="eMail">
<a href="mailto:mymail#mail.com">
<img src="images/email.png" alt="email">
office#blahblah
</a>
</div>
<div id="menu">
<img src="images/logo.png" />
<div name="Mh">
Home
</div>
<div name="Mw">
blah
</div>
<div name="MOffers">
Offers
</div>
<div name="mD">
T
</div>
<div name="mI">
Infos
</div>
<div name="mC">
Kontakt
</div>
<div name="mI">
Impressum
</div>
</div>
<div id="banner">
BANNER
</div>
<div id="content">
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
b <br />
<div name="w">
</div>
<div name="a">
</div>
<div name="o">
</div>
<div name="d">
</div>
<div name="Infos">
</div>
<div name="Contact">
</div>
<div name="Impressum">
</div>
</div>
</div>
</body>
</html>
css file:
body {
}
#header {
position: fixed;
width: 100%;
}
#content {
width: 99%;
height: 100%;
overflow-y: scroll;
overflow-x:hidden;
}
As a note here: The #content part I only added after seeing that even though there was an overflow there was no scroll bar appearing.
Try with this, as said Gerdi the way is flexbox: https://jsfiddle.net/Lm2dr14o/1/
body, html {
height:100%;
overflow:hidden;
}
#header {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
display:flex;
flex-direction:column;
}
#header>div {
flex-grow: 1;
}
#content {
width: 98%;
height:98%;
margin: 1%;
overflow-y: scroll;
overflow-x:hidden;
flex-grow: 2;
}
Hope this help you.
I have the task of modifying some already developed web app's aspx pages. Those pages Needs to be converted to use the new Bootstrap layout. So what is meant by bootstrapping page? one of the pages is below. Please give me some idea.
<%# Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="OptIt.aspx.vb" Inherits="OptIt" %>
<%# MasterType VirtualPath="~/MasterExternal.master" %>
<asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
<style type="text/css">
#middleContentContentParent {position:relative;left:50px;width:900px;}
.dtText {font-size:22px;height:35px;line-height:35px;width:50px}
input[type=text] {padding:0;}
</style>
</asp:Content>
<asp:Content ID="c3" ContentPlaceHolderID="cp3" Runat="Server">
<form runat="server" id="aspnet">
<div style="position:relative;width:860px;height:450px;margin:0 20px 0 20px">
<h1>Opt-In to TXT Messaging</h1>
<hr />
<div style="text-align:left;" >
<div runat="server" id="divFields">
<p>
Enter your cell phone noted in the email you just received to receive your TXT confirmation. Then follow the directions in the TXT message.
</p>
<br />
<div style="width:360px;margin:0 auto;text-align:center">
<asp:ValidationSummary class="valSummaryLg" ID="valSummary" runat="server" />
<h4>Mobile Number</h4>
<p style="text-align:left">
(<input runat="server" type="text" size="3" class="dtText" maxlength="3" id="CellPhone1_1" value="" /> ) <input class="dtText" runat="server" type="text" maxlength="3" size="3" id="CellPhone1_2" value="" /> - <input runat="server" type="text" maxlength="4" size="4" id="CellPhone1_3" class="dtText" value="" />
<asp:CustomValidator runat="server" ID="valPhone" Text="*"></asp:CustomValidator>
<br />
<br />
<asp:Button runat="server" CssClass="button1Lg" ID="btnSubmit" Text="Submit" />
</p>
</div>
</div>
<div runat="server" id="lblMessage" visible="false">
<br /><br />
<h2>Almost done... </h2>
<p>
Follow the instructions in the TXT you just received. If you don't receive a TXT confirmation message, please see the "Commons Problems" below.
</p>
<br /><br />
<h4>Common Problems with TXTing (using SHORT CODES):</h4>
<p>
FFPS uses a 5 digit "short code" to send TXT messages. Short codes are used for businesses to ensure the sender is respecting the recipient's TXTing preferences. Some carriers (like Sprint) require individuals to call and UNBLOCK SHORT CODES. Some of the common problems with receiving FFPS TXT messages include:
</p>
<div style="margin:0 0 0 20px">
<h5>You are using Wal-Mart Family Mobile</h5>
<p><b>How to Fix:</b> Sorry, Wal-Mart does not support TXTing with Short Codes</p>
<h5>You are using Sprint and they have blocked Short Codes</h5>
<p><b>How to Fix:</b> Call Sprint and request to "Unblock Short Codes"</p>
</div>
</div>
</div>
</div>
</form>
</asp:Content>
This is an answer for my own question. I have changed this to use bootstrap. I have added row classes for every row. Please have a look and give some ideas.
<%# Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Scholarship_Default" %>
<%# MasterType VirtualPath="~/MasterExternal.master" %>
<asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
<%--<style type="text/css">
#middleContentContentParent {position:relative;left:50px;width:860px;}
#divDownloadForms img {vertical-align:middle}
</style>--%>
</asp:Content>
<asp:Content ID="c3" ContentPlaceHolderID="cp2" Runat="Server">
<%--<div style="position:relative;width:820px;height:400px;margin:0 auto;">--%>
<div>
<div class="row">
<h1>Scholarship Form</h1>
</div>
<div class="row">
<h2>Instructions</h2>
</div>
<div class="row">
In order to apply for a scholarship, you will need to complete the Scholarship/Signup forms. Please mail the 4 page form by the deadline stated below (otherwise, may cause delays or prevent placement). Detailed instructions and the mailing address are found on the form (link below).<br />
</div>
<div class="row">
<h2>Form Deadline</h2>
</div>
<div id="divDownloadForms">
<div class="row">
For
<b><asp:Label runat="server" ID="lblSeason"></asp:Label></b>,
FFPS must receive your scholarship form by <b><asp:Label runat="server" ID="lblDate"></asp:Label></b>.
</div>
<div class="row">
<h5>Download the Scholarship/Signup Form - High Resolution (pdf)</h5>
</div>
<div class="row">
<img src="../images/icons/attach.gif" alt="" /> Download File
</div>
</div>
</div>
</asp:Content>
Sham, If you can show the existing design, then I can help you. You need to add column grid in between row's for suitably viewing in all view-ports.
On my website, i got the background image to stay always centered and the navigation to always stay on the same spot horizontally, so it does not matter the HORIZONTAL size, it's always on the same spot i did that by using:
#nav {
list-style: none;
position:fixed;
right:50%;
margin-right:155px;
margin-top:220px;
}
My issue is with the VERTICAL part. When the Window is small vertically and it gets scrolled down, the menu moves with the page, an i don't want that. I wanted to make it stay up there with the logo, but using a percentage for "top" doesn't seem to work.
I am not very familiar with javascript so if it could be don with CSS, it would be easier for me to understand!
HEEELP!
here is my example!
jsfiddle.net
Change your nav class to:
#nav {
list-style: none;
position:absolute;
right:50%;
margin-right:155px;
margin-top:220px;
}
Not sure if I understand you correctly, but is this what you are looking for:
#nav {
list-style: none;
position:fixed;
left: 0;
top:220px;
}
And your fiddle: http://jsfiddle.net/wQdVv/16/
Do note that position:fixed on mobile is a bad idea, as support is not good and will produce strange/unwanted results. Use static on mobile in stead (with a media query)
it's because
position:fixed;
that means you want your nav to move with your screen.
you can read about positions here
but if you want your nav to be beside your logo you should create a div and put both nav and logo in it.
.header
{
background-color:transparent;/* you can write any color you want but in this way it gets hidden */
text-align:center;
position:relative;
}
#nav
{
position:absolute;
bottom:-15px;
right:42%;
display:inline-block;
}
ul
{
list-style:none;
}
<html>
<body>
<div class="header"><!--div that contain both logo and nav-->
<img src="logo.png" alt="logo" /><!--logo image-->
<!--nav codes here-->
<div id="nav">
<ul><li>nav</li></ul>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center><h2><p>As You can see it doesn't move with page scrolling</p></h2></center>
</body>
</html>
the code above is a simple example.
The problem is the
position: fixed;
in your CSS.
fixed means stay in this part of the screen, even when scrolling. Change it to:
position: absolute;
and the navbar will stay wherever you position it and won't move, even when scrolling.
You can read more about positioning at W3 Schools
I'm doing a fixed sidebar that I resolved here in stack overflow, so now I have a fixed bar with this code:
<div id="main" style="width:100%;background:red;">
<div id="sidemenu" style="float:left;height:200px;background:#000;">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:200px;overflow-y:scroll;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
It has a height of 200px (just to see how it works), but the sidebar I need has to have a height of 100% all the time. I have seen various posts here in stackoverflow that say that faux columns is a option: http://www.alistapart.com/articles/fauxcolumns/ . But inside my <div id="sidebar"> I'll have, in some cases, 2 more DIVs: #menu and #submenu, so the width will vary.
What can I do? I don't need support for old browsers: IE9, latest Chrome and latest Firefox is OK.
I'd add a border-left to the body, get the longest menu item and match it's width in ems, then set a negative margin on the sidemenu. Then it'll appear to match whatever height the content div takes up (either if you set it explicitly, or if content expands it):
<body style="border-left: 10em solid #666;">
<div id="main" style="background:red;">
<div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:400px;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
For a sidebar with a textured background (one method), you could set the width in pixels to match the width of the texture (not as flexible as ems but if set to the widest item, should be okay) and the texture repeats along the y-axis:
<div id="main" style="background: url(pattern_157.gif) repeat-y;">
<div id="sidemenu" style="float:left;width:200px;background: transparent;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:600px;background:transparent;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
Is the problem that your column background has some kind of gradient? If it's just solid colour, could you not just leave the widths of the 2 columns unset, and tile the background image on the x axis as well as on the y axis?
Here is another idea for this using fixed positioning and height of 100%. I also put enough breaks in there to show how the content will scroll, but the sidebar and its contents will stay where they are.
<body style="margin:0;">
<div id="main">
<div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="background:transparent; float:left; margin:0 0 0 220px;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
I am using DataList control to show three products per line horizontally. But there is layout problem and it pushes up the product image container element like the below :
Data List Layout problem http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg
Here is the code :
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
<ItemTemplate>
<a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
<asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
<br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
</ItemTemplate>
</asp:DataList>
How can I get over the problem ?
Thanks in advance.
I was having a similar issue. I ended up having to break the linked image and and text into their own div and style them accordingly:
<ItemTemplate>
<div class="outer">
<div class="top">
<asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
</asp:HyperLink>
</div>
<div class="bottom">
<asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
</div>
</div>
</ItemTemplate>
I'm sure there are cleaner ways to do this and this is just example of what the HTML output might look like. This is just "off the cuff" but if you put in an empty htm file it will display.
<div style="width: 100px;">
<!-- first row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="background-color: Aqua;">
<span style="height:50px; vertical-align:bottom;">text</span>
</div>
</div>
<!-- second row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
</div>
You can most likely use RepeatLayout="Flow" ItemStyle="float:left;" in your DataList control to help as well.
I'm not sure off the top of my head how to fix this, but I would start by putting each item in a <div> or <span> and use CSS classes, instead of the control's styling. E.g.:
<Item Template>
<div class="myClass">...</div>
</Item Template>
Using this with Firebug to then debug is usually easier than figuring out how you're violating the control's height, etc.