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.
Related
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 have this code and i would like to ask ways how to display the result of my query into my textbox named "Textbox1"
<%# page language="C#" autoeventwireup="true" codeBehind="Default.aspx.cs" inherits="MainPage, App_Web_rlctbjj5" %>
<%# Import Namespace="System.Data" %>
<%# Import Namespace="System.Data.SqlClient" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string connect = ConfigurationManager.ConnectionStrings["TDBSConnectionString"].ConnectionString;
string query = "SELECT news, news_date FROM [IBSI].[dbo].[ibsi.news]";
if (query != null)
{
using (SqlConnection conn = new SqlConnection(connect))
{
using (SqlCommand cmd = new SqlCommand(query, conn))
{
conn.Open();
SqlDataReader rdr = cmd.ExecuteReader();
if (rdr.HasRows)
{
while (rdr.Read())
{
Response.Write("<p>");
Response.Write("<strong>" + rdr["news"].ToString() + "</strong><br />");
Response.Write(rdr["news_date"].ToString() + "</p>");
}
}
}
}
}
else
{
Response.Write("<p>No customer selected</p>");
}
Response.End();
}
</script>
<!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>iBSI SLA Manager</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="keywords" content="iBSI SLA Manager" />
<meta name="description" content="SLA Manager" />
<meta name="author" content="iBSI" />
<meta name="copyright" content="Copyright 2010-2011 by Wenchester M. Visitacion" />
<meta name="company" content="iBSI SLA Manager" />
<%-- <link rel="shortcut icon" href="../styles/images/favicon.ico" />--%>
<link rel="icon" type="image/jpg" href="Styles/images/IBSI_LOGO.png" />
<link rel="Stylesheet" href="Styles/CoreStyle.css?version=1.0.1" type="text/css"
media="all" />
<link rel="Stylesheet" href="dojox/layout/resources/FloatingPane.css" type="text/css" />
<link rel="Stylesheet" href="dojox/layout/resources/ExpandoPane.css" type="text/css" />
<link rel="Stylesheet" href="dojox/widget/Toaster/Toaster.css" type="text/css" />
<link rel="Stylesheet" href="dojo/resources/dojo.css" type="text/css" />
<link rel="Stylesheet" href="dijit/themes/claro/claro.css" type="text/css" />
<link rel="Stylesheet" href="dojox/resources/Grid.css" type="text/css" />
<link rel="Stylesheet" href="dojox/resources/claroGrid.css" type="text/css" />
<link rel="Stylesheet" href="dojox/form/resources/CheckedMultiSelect.css" type="text/css" />
<link rel="Stylesheet" href="dojox/form/resources/FileInput.css" type="text/css" />
<link rel="Stylesheet" href="dojox/grid/enhanced/resources/claroEnhancedGrid.css"
type="text/css" />
<link rel="stylesheet" type="text/css" href="Scripts/style.css" media="all" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="Scripts/carosel.js"></script>
<script>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 3,
auto:500,
speed:3000
});
});
</script>
<script type="text/javascript" src="dojo/dojo.js" djconfig="parseOnLoad: true "></script>
<script type="text/javascript">
dojo.require("dojo.CheckboxTree");
dojo.require("dojo.CheckboxForestStoreModel");
</script>
<script type="text/javascript" src="Scripts/CoreScript.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Dashboard.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Node.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Menu.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Role.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/RoleMembers.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/AccessRights.min.js?version=1.0.1"> </script>
<script type="text/javascript" src="Scripts/User.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Company.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Customer.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/TransactionType.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Transaction.min.js?version=1.0.5"></script>
<script type="text/javascript" src="Scripts/WorkFlowIn.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/WorkFlowOut.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/DocumentControl.min.js?version=1.0.5"></script>
<script type="text/javascript" src="Scripts/Periodic.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/PeriodicInstruction.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerTransaction.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerConcern.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/TransactionInquiry.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerConcernInquiry.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/PeriodicInstructionInquiry.min.js?version=1.0.2"></script>
</head>
<body class="claro" style="background-color: #000000;">
<div dojotype="dojox.widget.Toaster" id="ToasterMessage" positiondirection="br-left"
duration="500" messagetopic="ToasterMessage">
</div>
<div id="bc" style="width: 100%; height: 100%; padding: 0px 5px 5px 5px;" dojotype="dijit.layout.BorderContainer">
<div id="header" dojotype="dijit.layout.ContentPane" region="top" style="background-color: Transparent;
height: 60px; border: 0px; overflow: hidden;">
<div id="divLoginInfo" class="LoginInfo">
<div>
<span id="spanUsername">Hi User!</span> <span id="spanChangePassword" class="LinkDrill">
[Change Password]</span> <span id="spanSignout" class="LinkDrill">[Signout]</span></div>
<div style="margin-top: 10px;">
<div style="text-align: right;">
<span id="spanDate"></span>
</div>
<div style="text-align: right;">
<span id="spanTime"></span>
</div>
</div>
</div>
<img src="Styles/images/sparkbanner.jpg" style="height: 100px; width: auto;" />
</div>
<div jsid="MainLeft" id="MainLeft" dojotype="dojox.layout.ExpandoPane" splitter="true"
duration="275" region="left" title="Menu" previewondblclick="true" maxwidth="230"
style="background-color: Transparent; width: 210px;" easein="dojo.fx.easing.backOut"
easeout="dojo.fx.easing.backInOut">
<div dojotype="dijit.layout.TabContainer" id="TabContainerMain" jsid="TabContainerMain"
region="center" attachparent="true" tabposition="bottom" tabstrip="true" style="background-color: Transparent;
border: 0px;">
<div id="ContentPaneMain_Login" jsid="ContentPaneMain_Login" dojotype="dijit.layout.ContentPane"
style="background-color: Transparent;">
<div style="padding-top: 50px; margin-left: 10px; background-color: Transparent;">
<div>
UserName:
<input jsid="TextBoxUserName" id="TextBoxUserName" dojotype="dijit.form.TextBox"
type="text" style="width: 90%;" selectonclick="true" />
</div>
<div>
Password:
<input jsid="TextBoxPassword" id="TextBoxPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 90%;" selectonclick="true" />
</div>
<div>
<button jsid="ButtonLogin" id="ButtonLogin" dojotype="dijit.form.Button" style="float: right;
padding: 5px 15px 0px 0px;">
Login</button>
</div>
<br />
<br />
<span id="spanMessage"></span>
</div>
</div>
</div>
</div>
<div id="MainRight" jsid="MainRight" dojotype="dijit.layout.ContentPane" splitter="true"
region="center" style="background-color: transparent; padding: 0px; border: 0px;">
<div dojotype="dijit.layout.TabContainer" region="left" id="TCCenterPane" tabstrip="true"
style="margin-top: -4px; border: 0px;">
<div dojotype="dijit.layout.ContentPane" title="Home" selected="true" style="padding: 0px;
background-color: #000000;">
<form id="form1" runat="server">
<div style="position:absolute;z-index:200; left:52.5%;top:9%;">
<asp:TextBox ID="TextBox1" runat="server" Height="168px" TextMode="MultiLine"
Width="303px"></asp:TextBox>
<div class="news">
<div class="newsticker-jcarousellite" style="position:absolute;z-index:200; left:52.5%;top:9%;">
</div></div></div>
<div style="position:absolute;z-index:200; left:52.5%;top:52%;">
<asp:TextBox ID="TextBox2" runat="server" Height="168px" TextMode="MultiLine"
Width="303px"></asp:TextBox>
</div>
</form >
<div style="width: 100%; height: 90%; background: #000000 url(Styles/images/IBSI_LOGO1.png) no-repeat center;">
</div>
</div>
</div>
</div>
</div>
<div jsid="DialogAlertMessage" id="DialogAlertMessage" dojotype="dijit.Dialog" title="Alert Box"
style="padding: 0px 0px 0px 0px;">
<div style="width: 300px; min-height: 50px;">
<span id="spanAlertMessage">Empty Alert Message</span>
<br />
<div style="float: right;">
<button id="ButtonOKAlertMessage" jsid="ButtonOKAlertMessage" dojotype="dijit.form.Button">
OK</button></div>
</div>
</div>
<div jsid="DialogConfirmMessage" id="DialogConfirmMessage" dojotype="dijit.Dialog"
title="Confirmation" title="Alert Box" style="padding: 0px 0px 0px 0px;">
<div style="width: 300px">
<span id="spanConfirmMessage">Empty Alert Message</span>
<br />
<div style="float: right">
<button id="ButtonConfirmMessageYES" jsid="ButtonConfirmMessageYES" dojotype="dijit.form.Button">
YES</button>
<button id="ButtonConfirmMessageNO" jsid="ButtonConfirmMessageNO" dojotype="dijit.form.Button">
NO</button>
</div>
<br />
</div>
</div>
<div jsid="DialogReportPreview" id="DialogReportPreview" dojotype="dijit.Dialog"
aria-describedby="intro" title="Required" autofocus="true">
<iframe id="iframeReportPreview" onload="StandbyPreview.hide()" frameborder="0" style="width: 900px;
height: 500px;"></iframe>
</div>
<div jsid="StandbyPreview" id="StandbyPreview" dojotype="dojox.widget.Standby" color="#E4F4FC"
target="TabContainerMain" zindex="9000" slidefrom="bottom" image="Styles/Images/Progress/loadingSmall.gif">
</div>
<div jsid="DialogChangePassword" id="DialogChangePassword" dojotype="dijit.Dialog"
aria-describedby="intro" title="Change Password" autofocus="false">
<div style="height: 200px; width: 520px;">
<div style="width: 150px; padding: 15px 0px 10px 20px; height: 180px; float: left;">
<div style="height: 165px; width: 140px; border: 1px solid gray; padding: 3px 3px 3px 3px;">
To ensure system security, do not use familiar words for password initials, favorite
expressions and names of love ones or popular persons. We suggest to change passwords
regularly or once a month.</div>
</div>
<div style="width: 100px; padding: 50px 0px 10px 10px; float: left; font-family: 'Segoe UI';">
<div style="height: 18px; padding-top: 3px;">
User Name:</div>
<div style="height: 18px; padding-top: 3px;">
Old Password:</div>
<div style="height: 18px; padding-top: 3px;">
New Password:</div>
<div style="height: 18px; padding-top: 3px;">
Confirm Password:</div>
</div>
<div style="width: 200px; padding: 50px 0px 10px 10px; float: left;">
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxCurrentUserName" id="TextBoxCurrentUserName" dojotype="dijit.form.TextBox"
type="text" style="width: 100%;" selectonclick="true" readonly="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxOldPassword" id="TextBoxOldPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxNewPassword" id="TextBoxNewPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxConfirmPassword" id="TextBoxConfirmPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
</div>
<div style="float: right; padding-right: 25px;">
<button jsid="ButtonChangePassword" id="ButtonChangePassword" dojotype="dijit.form.Button">
Proceed</button>
</div>
</div>
</div>
i use this to display the value of the retrieve data on screen.
Response.Write("<p>");
Response.Write("<strong>" + rdr["news"].ToString() + "</strong><br />");
Response.Write(rdr["news_date"].ToString() + "</p>");
Normally you would write something like this :
TextBox1.Text = rdr["news"].ToString();
However it looks like your query is likely to return more than 1 row (and more than 1 column). The TextBox can only hold 1 value, so if you do that, you will only see the content of the last row.
In your case it is probably better to use a control that can display the value(s) of several rows, such as the GridView, the ListView, the Repeater or the DataList.
It's using a dojo framework dude. So try how to use the controls here: http://dojotoolkit.org/.
for the dojo textbox, setting the value is dijit.byId('TextBox1').set('value', 'sampleValue');
I created that project from scratch. But I guess you were the one continued it. Goodluck. :)
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>
I'm having problems with setting the div and body tags to dynamically expand over the inner contain.
Here is the HTML and CSS that I'm using, it is a little longer.
<!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>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}
.clearfix {
min-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}
#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{
float:left;
margin-left:27px;
text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
<div id="sf_ch_stype"> SEARCH</div>
</div>
<div class="stype">
<input name="text" class="search-input" type="text" value="key" size="20" maxlength="50" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you run the code in Firefox or Chrome press F12 and watch the height of the body tag and of the first div after the body, you will see that none have dynamically changed their height to include the inner content.
I don't know where the problems is in the CSS.
And a second problem, if you make a preview using IE v.6 you will see that all the input fileds are disorder wich I don't understand why??
Any help will be much appreciated!!
Since #searchform is absolutely positioned, its parents will have a height of 0. You can try:
body, body>div{min-height:100%;}
Here's a fiddle: http://jsfiddle.net/jEfMx/
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.