Scenario: I want to display the following through ASPX page
State : <dropdown>
zip : <textbutton>
Note that the ":" for both State & City should be same in all lines. Currently I am getting something below.
State : <dropdown>
zip : <textbutton>
I must be doing something wrong but don't know yet. Appreciate any inputs,
Here is my code so far,
<div style="text-align:center" >
<asp:Label runat="server" id="StateCategory" Text ="State:" CssClass="LabelLeftAligned" />
<asp:DropDownList runat="server" ID="StateDDown" DataTextField="Name" AppendDataBoundItems="true"></asp:DropDownList>
</div>
<div style="text-align:center" >
<asp:Label runat="server" id="lblzipCode" Text ="Zip:" CssClass="LabelLeftAligned" />
<asp:TextBox ID="txtboxZipcode" runat="server" MaxLength="5" />
</div>
and the class LabelLeftAligned is defined below in the stylesheet.
.LabelLeftAligned {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
font-weight: bold;
text-align: left;
}
Turn the label into a block level element, give it a width and right align it.
Something like: (full example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.LabelRightAligned {
display:block;
width: 150px;
text-align:right;
float:left;
}
.ddl {
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">State:</span>
<select class="ddl">
<option value="volvo" />
<option value="chevy" />
</select>
</div>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">zip:</span>
<input type="text" name="zip" id="zip" value="23423" class="ddl" />
</div>
</body>
</html>
example below:
You can use table formatting in CSS to achieve this. You would use layout for your rows and cells, and text-align to control the horizontal alignment.
Click here for a working demonstration.
<style type="text/css">
.table {
display:table;
border-collapse:collapse;
}
.table-row {
display:table-row;
}
.left-col {
text-align:right;
}
.right-col {
text-align:left;
}
.left-col, .right-col {
display:table-cell;
}
</style>
<div class="table">
<div class="table-row">
<div class="left-col">
Foobar:
</div>
<div class="right-col">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
<div class="table-row">
<div class="left-col">
Bar:
</div>
<div class="right-col">
<asp:TextBox ID="txtTestB" runat="server"></asp:TextBox>
</div>
</div>
</div>
either table the data which in this case shouldn't be a problem based on the little bit I am seeing
<table>
<tr>
<td>State</td>
<td>:</td>
<td><dropdown></td>
</tr>
<tr>
<td>Zip</td>
<td>:</td>
<td><textbutton></td>
</tr>
</table>
OR
wrap the state and zip in a div and then float it left with a width on it
<div class="floatLeft">State</div> : <dropdown>
<div class="floatLeft">Zip</div> : <textbutton>
<style>
.floatLeft {float: left; width: 300px; }
</style>
Related
body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}
/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}
h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6">Home</b></td></tr>
<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
Menu<br>
<br></br>
Delivery<br>
<br></br>
Testimonials<br>
<br></br>
Contact information<br>
</td>
<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>
<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>
<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>
<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>
Hey, so after I've finally got something going I've gone to place a google map (not fully implemented yet), just trying to get the right placement for it. It seems tho I can't get the google map to move to the bottom of the page where I'd like it? Or even how do I get the image to move? It seems to have gone above the border at the top, this is really poor positioning and I have to move it to the bottom. Any help to whats going wrong here would be greatly appreciated!
use the following:
<tr><td><div id="map-canvas"></div></td></tr>
at the end of your page, instead of:
<div id="map-canvas"></div>
it will place your map at the bottom of the page, it was at the top because you didn't assign a <tr> and <td> to it
good luck coding! ^^
edit: http://jsfiddle.net/h261cgc9/ Here's a fiddle to see the change i've made in action
But as I've mentioned in my comment, it's much better to create a website without the use of tables, only use tables when you actually want to put something in one, putting a whole body in the table is a bad idea, see: http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/
In the fiddle I removed the which contained the styles, as there is no need for it, you could just put the styles at the top of the page in between the <head> and <body>
I just started developing a personal homepage for my own. Everything went well until I wanted to write text outside the menu border and header (that means somehow center of the page). If I add any paragraph in HTML file, it actually moves the menu items & Header and then places the text. I don't know what's going wrong.
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header{
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph{
text-align:center;
}
#menu_area{
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
}
body{
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer{
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home{
font:bold 20px Tahoma;
text-align:left;
}
#about_me{
font:bold 20px Tahoma;
text-align:left;
}
#gallery{
font:bold 20px Tahoma;
text-align:left;
}
#contact_me{
font:bold 20px Tahoma;
text-align:left;
}
#my_diary{
font:bold 20px Tahoma;
text-align:left;
}
#blog{
font:bold 20px Tahoma;
text-align:left;
}
</html>
if you add the p before your header and menu-area, it will appear before header and menu-area, if you want it to appear after header and menu-area, add it after them
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<div id="footer">Developed by Jabir Al Fatah</div>
P.S: if you want your p to appear next to menu-area and not below it, change display of menu-area and p to inline-block
something like this: http://jsfiddle.net/ZCmg8/
UPDATE: http://jsfiddle.net/ZCmg8/1/
I've been working on our company website this morning and I've hit a bit of a problem. I have the page formatted into two cells, one on the right and one on the left. The one on the right contains an image which is around 790 pixels wide. When I shrink the browser window to the point to where it will no longer fit, the whole cell jumps below the first cell. How can I prevent this from happening?
Code...
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}
Try to set an id to the div that wraps everything (e.g. <div id="wrapper" style="padding-left:15%;">) and create a CSS selector for it where you specify a minimum width:
#wrapper {
min-width: 900px;
}
The width you should choose according to the minimum width where the image div doesn't wrap. Of course, now that you have a selector for the wrapper, you could move the padding-left into the CSS as well instead of having it inline.
Here's and example fiddle
You can try to make the width of your cells dynamic. If you use a percentage instead of a fixed width it will automatically adjust to the window size.
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
Just Don't provide the width of imageSide because it must adjust with remaining width of browser window while loginSide must stick to its own solid width.
Try this fiddle.
One more thing, you are using float: left in both loginSide and imageSide, just use it at loginSide, imageSide will than adjust automatically.
Here is the updated fiddle.
And, finally if you want your own code without any much altration, i got this also for you. :)
Here is the your second updated fiddle with imageSide width:792px also..
Cheers.. :)
Figured it out, I wrapped the image in this div:
<div style = "overflow: hidden;">
aspx code
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="learnvb1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Welcome to</title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top_image_logo">
<asp:ImageButton ID="ImageButton1" runat="server"
AlternateText="ccccccccccccccccccccccccccccc" ImageUrl="~/Logo/XCss02.png"
PostBackUrl="~/Default.aspx" ToolTip="ccccccccccccccccccccccccccccc" />
</div>
<div id="navigation_top">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">Home</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Products</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Services</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#">Technology</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#">Customers</asp:HyperLink>
<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#">News</asp:HyperLink>
</div>
<div id="navigation_bottom">
<asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#">Contact_Us</asp:HyperLink>
<asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="#">Career</asp:HyperLink>
<asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="#">Web_Mail</asp:HyperLink>
<asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#">Site_Map</asp:HyperLink>
</div>
<div id="top_name">
<asp:Label ID="Label2" runat="server" Text="ccccccccccccccccccccccccccccc"></asp:Label>
</div>
<div id="top_name_bar">
<asp:Image ID="Image1" runat="server" AlternateText="UNDERLINED"
CssClass="top_name_bar_image" ImageUrl="~/Gradient_Bar/gradientbar.gif" />
</div>
<div id="top_navigation_links_box">
<div id="top_navigation_links">
<asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/Default.aspx" Target="first_iframe">Home</asp:HyperLink>
<asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="~/Contact_Us.aspx" Target="first_iframe">Contact Us</asp:HyperLink>
<asp:HyperLink ID="HyperLink13" runat="server" Target="first_iframe">Web Mail</asp:HyperLink>
<asp:HyperLink ID="HyperLink14" runat="server" Target="first_iframe">Career</asp:HyperLink>
<asp:HyperLink ID="HyperLink15" runat="server" Target="first_iframe">Login</asp:HyperLink>
</div>
</div>
<div id="top_flash_area">
This is the flash area.
</div>
<div id="navigation_left">
<div id="navigation_div1">
<asp:HyperLink ID="HyperLink16" runat="server" Target="first_iframe"
NavigateUrl="~/PRODUCTS.aspx">Products</asp:HyperLink>
</div>
<div id="navigation_div2">
<asp:HyperLink ID="HyperLink17" runat="server" Target="first_iframe">Services</asp:HyperLink>
</div>
<div id="navigation_div3">
<asp:HyperLink ID="HyperLink18" runat="server" Target="first_iframe">Demo</asp:HyperLink>
</div>
<div id="navigation_div4">
<asp:HyperLink ID="HyperLink19" runat="server" Target="first_iframe">HyperLink1</asp:HyperLink>
</div>
<div id="navigation_div5">
<asp:HyperLink ID="HyperLink20" runat="server" Target="first_iframe">HyperLink20</asp:HyperLink>
</div>
<div id="navigation_div6">
<asp:HyperLink ID="HyperLink21" runat="server" Target="first_iframe">HyperLink21</asp:HyperLink>
</div>
<div id="navigation_div7">
<asp:HyperLink ID="HyperLink22" runat="server" Target="first_iframe">HyperLink22</asp:HyperLink>
</div>
<div id="navigation_div8">
<asp:HyperLink ID="HyperLink23" runat="server" Target="first_iframe">HyperLink23</asp:HyperLink>
</div>
<div id="navigation_div9">
<asp:HyperLink ID="HyperLink24" runat="server">HyperLink24</asp:HyperLink>
</div>
<div id="navigation_div10">
<asp:HyperLink ID="HyperLink25" runat="server">HyperLink25</asp:HyperLink>
</div>
</div>
<div id="copyright_div">
<asp:Label ID="Label1" runat="server" Text="Copyright © 2011 ccccccccccccccccccccccccccccc. All rights reserved."></asp:Label>
</div>
<!-- copyright_div div ends -->
<div id="iframe_div">
<iframe id="iframe1" runat="server" scrolling="auto" name="first_iframe"
src="Default.aspx">
</iframe>
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:Aqua;
height: 100%;
padding: 0;
overflow:auto;
}
/*<works for all properly, except IE>
<IE works with margin-top, but no other browsers work with that setting!>
<therefore not using the following>
#div_id
{
position:fixed;
margin-top:90%;
padding-top:0.3%;
background-color:Yellow;
color:Green;
overflow:auto;
width:100%;
}
*/
#top_image_logo
#ImageButton1
{
background-color:Green;
position:fixed;
top:10px;
left:60px;
width:85px;
height:75px;
}
#top_name
{
background-color:Lime;
position:fixed;
top:10px;
left:170px;
font-family:Bookman Old Style;
font-size:40px;
font-style:oblique;
font-weight:bolder;
letter-spacing:3px;
white-space:nowrap;
}
#top_name_bar
{
position:fixed;
top:58px;
left:170px;
min-width:740px;
min-height:7px;
height:7px;
max-width:740PX;
max-height:7px;
}
.top_name_bar_image
{
position:fixed;
top:58px;
left:170px;
min-width:740px;
min-height:7px;
height:7px;
max-width:740PX;
max-height:7px;
}
#top_navigation_links
{
position:fixed;
top:63px;
left:610px;
white-space:nowrap;
}
#top_navigation_links_box
{
position:fixed;
top:65px;
left:606px;
width:300px;
height:20px;
border-bottom-color:Black;
border-bottom-style:solid;
border-bottom-width:thin;
border-left-color:Black;
border-left-style:solid;
border-left-width:thin;
border-right-color:Black;
border-right-style:solid;
border-right-width:thin;
}
#top_flash_area
{
position:fixed;
top:65px;
left:170px;
width:736px;
height:80px;
z-index:-15;
border-bottom-color:Black;
border-bottom-style:solid;
border-bottom-width:thin;
border-left-color:Black;
border-left-style:solid;
border-left-width:thin;
border-right-color:Black;
border-right-style:solid;
border-right-width:thin;
}
#navigation_top
{
position:fixed;
background-color:Olive;
left:20%;
top:5%;
display: inline;
white-space:nowrap;
/*to prevent wraping when is resized*/
word-spacing:10px;
}
#copyright_div
{
position:fixed;
left: 320px;
top:530px;
background-color:Yellow;
color:Green;
z-index:-15;
width:425px;
}
#navigation_bottom
{
position:fixed;
top:550px;
background-color:Aqua;
display: inline;
white-space:nowrap;
/*to prevent wraping when is resized*/
word-spacing:20px;
left:370px;
font-size:small;
}
#navigation_left
{
position:fixed;
left:60px;
top:170px;
}
#navigation_div1
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div2
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div3
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div4
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div5
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div6
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div7
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div8
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div9
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#navigation_div10
{
width:82px;
height:20px;
background-color:Teal;
border-bottom-color:White;
border-bottom-style:solid;
border-bottom-width:medium;
}
#iframe1
{
position:fixed;
left:170px;
top:170px;
width:738px;
height:350px;
}
the source from ie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Welcome to
</title><link href="StyleSheet1.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4MzE3NDc0MjZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQxJbWFnZUJ1dHRvbjERT5N2pheAVdxE9A2afRBRX8sOKA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=zf50eo2Vd7XbF74AU25pGg2&t=634219951313125000" type="text/javascript"></script>
<div>
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="NUZS9KyyGJqfjbacfPFnZw2" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK88ompCgLSwpnTCLE/HF2YL42fL1hS8OvmaG+pY4oB" />
</div>
<div>
<div id="top_image_logo">
<input type="image" name="ImageButton1" id="ImageButton1" title="ccccccccccccccccccccccccccccc" src="Logo/XCss02.png" alt="ccccccccccccccccccccccccccccc" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ImageButton1", "", false, "", "Default.aspx", false, false))" style="border-width:0px;" />
</div>
<div id="navigation_top">
<a id="HyperLink1" href="#">Home</a>
<a id="HyperLink2" href="#">Products</a>
<a id="HyperLink3" href="#">Services</a>
<a id="HyperLink4" href="#">Technology</a>
<a id="HyperLink5" href="#">Customers</a>
<a id="HyperLink6" href="#">News</a>
</div>
<div id="navigation_bottom">
<a id="HyperLink7" href="#">Contact_Us</a>
<a id="HyperLink8" href="#">Career</a>
<a id="HyperLink9" href="#">Web_Mail</a>
<a id="HyperLink10" href="#">Site_Map</a>
</div>
<div id="top_name">
<span id="Label2">ccccccccccccccccccccccccccccc</span>
</div>
<div id="top_name_bar">
<img id="Image1" class="top_name_bar_image" src="Gradient_Bar/gradientbar.gif" alt="UNDERLINED" style="border-width:0px;" />
</div>
<div id="top_navigation_links_box">
<div id="top_navigation_links">
<a id="HyperLink11" href="Default.aspx" target="first_iframe">Home</a>
<a id="HyperLink12" href="Contact_Us.aspx" target="first_iframe">Contact Us</a>
<a id="HyperLink13" target="first_iframe">Web Mail</a>
<a id="HyperLink14" target="first_iframe">Career</a>
<a id="HyperLink15" target="first_iframe">Login</a>
</div>
</div>
<div id="top_flash_area">
This is the flash area.
</div>
<div id="navigation_left">
<div id="navigation_div1">
<a id="HyperLink16" href="PRODUCTS.aspx" target="first_iframe">Products</a>
</div>
<div id="navigation_div2">
<a id="HyperLink17" target="first_iframe">Services</a>
</div>
<div id="navigation_div3">
<a id="HyperLink18" target="first_iframe">Demo</a>
</div>
<div id="navigation_div4">
<a id="HyperLink19" target="first_iframe">HyperLink1</a>
</div>
<div id="navigation_div5">
<a id="HyperLink20" target="first_iframe">HyperLink20</a>
</div>
<div id="navigation_div6">
<a id="HyperLink21" target="first_iframe">HyperLink21</a>
</div>
<div id="navigation_div7">
<a id="HyperLink22" target="first_iframe">HyperLink22</a>
</div>
<div id="navigation_div8">
<a id="HyperLink23" target="first_iframe">HyperLink23</a>
</div>
<div id="navigation_div9">
<a id="HyperLink24">HyperLink24</a>
</div>
<div id="navigation_div10">
<a id="HyperLink25">HyperLink25</a>
</div>
</div>
<div id="copyright_div">
<span id="Label1">Copyright © 2011 ccccccccccccccccccccccccccccc. All rights reserved.</span>
</div>
<!-- copyright_div div ends -->
<div id="iframe_div">
<iframe id="iframe1" scrolling="auto" name="first_iframe" src="Default.aspx">
</iframe>
</div>
</div>
</form>
</body>
</html>
note
I have tried it on all browsers.
The CSS on your page is not very good. I would personally just scrap it and start again.
You shouldn't be using position: fixed for everything - this is the reason you cannot scroll.
That being said, the easiest way to get something which looks almost right (the menu looks wrong) and will let you scroll is to replace all instances of position:fixed with position: absolute.
I think its the
body
{
background-color:Aqua;
height: 100%;
padding: 0;
overflow:auto;
}
That is causing the problem.
Try removing overflow:auto;
Is there any particular reason you are using height: 100%? I would suspect that the combination of that, and your overflow: auto rule are the cause of the problem.
You could try using overflow: scroll to try forcing the display of scrollbars.
But I would suggest that instead, you consider removing the height and overflow rules completely if you can. It would be helpful to know why you need to use them.
While converting a desktop application to a web app, I've run across my ignorance when attempting to implement a multi-column data entry form using CSS. I'm resolved to avoid using tables for this type of thing, and while I found a good reference to laying out a data entry form, I can find nothing that applies to multiple-column layouts like this one:
Can anyone point me in the right direction?
Example on jsFiddle
Here's a screen shot, please notice how I demonstrated the tab order with numbers:
Please note that RedFilter's answer has a different tab order, which I have demonstrated in the screenshot below:
(code below complete with ASP.NET validators)
CSS (cross browser friendly)
p
{
margin:1em 0;
}
label
{
float:left;
width:5em;
text-align:right;
margin-right:0.5em;
}
input[type="text"]
{
width: 10em;
}
.left-column, right-column
{
float:left;
}
.left-column
{
margin-right:1em;
}
.textarea-label
{
float:none;
}
textarea
{
height:5em;
width:35em;
}
HTML
<div class="left-column">
<p>
<label for="tbDepartment">Department:</label>
<asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbFund">Fund:</label>
<asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbProgram">Program:</label>
<asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram"> *</asp:RequiredFieldValidator>
</p>
</div>
<div class="right-column">
<p>
<label for="tbProject">Project:</label>
<asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbSpeedKey">Speed Key:</label>
<asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbAward">Award:</label>
<asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward"> *</asp:RequiredFieldValidator>
</p>
</div>
<div>
<p>
<label class="textarea-label" for="taProjectDesc">Project Description:</label>
</p>
<p>
<asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
<asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc"> *</asp:RequiredFieldValidator>
<p>
</div>
There are many ways to do this - I have given you a very stripped-down solution below. There are a number of tweaks you need to do to make this cross-browser compliant, improve spacing, etc., but this should give you the basic idea as to how you can lay the elements out:
<html>
<head>
<style>
body {
font-family:arial;
font-size: 0.8em;
}
div.form p {
clear: both;
}
div.form label {
float: left;
width: 10em;
}
div.form input[type="text"] {
float: left;
width: 16em;
font-family:arial;
font-size: 1.0em;
}
div.form textarea {
width: 52em;
font-family:arial;
font-size: 1.0em;
}
</style>
</head>
<body>
<div class="form">
<p>
<label>Department:</label>
<input type=text>
<label>Project:</label>
<input type=text id=Project name=Project>
</p>
<p>
<label>Fund:</label>
<input type=text id=FundID name=FundID>
<label>SpeedKey:</label>
<input type=text id=SpeedKey name=SpeedKey>
</p>
<p>
<label>Program:</label>
<input type=text id=Program name=Program>
<label>Award:</label>
<input type=text id=Award name=Award>
</p>
<p>
<label>Project Description:</label>
</p>
<p>
<textarea id=ProjectDescription name=ProjectDescription></textarea>
</p>
</div>
</body>
</html>
Much the same as the previous answers, I offer you:
CSS:
fieldset {
clear: both;
padding: 0.4em;
border: 1px solid #000;
width: 80%;
min-width: 600px;
margin: 1em auto;
overflow: hidden;
}
ul {
width: 48%;
border: 1px solid #ccc;
margin: 0.5em;
}
ul:nth-child(odd) {
float: right;
}
label {
display: inline-block;
width: 30%;
text-align: right;
}
html:
<fieldset>
<ul>
<li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
<li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>
<ul>
<li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
<li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
Demo at: http://www.davidrhysthomas.co.uk/so/formCols.html
This solution does use CSS3 (the nth-child(odd)), which limits its cross-browser friendliness (though works in Opera, Chrome, Safari and Firefox on Ubuntu 10.04), so for IE-friendliness you'd have to explicitly add a class name to whichever column(s) you wanted to float: right.