Hi I create the app which has two div display side by side. I searched the web and find example, but I don't know why my right column start and the end of left column bottom. Would someone tell me how to correct it. I want the "rightcolumn" is the same level of the "File Location" line.
My output:
there is my asp page
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!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 id="Head1" runat="server">
<title> Application</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="column1-wrap" class="title " >
<div id="column1"> Applicaton</div>
</div>
<div id="column2">
<asp:Label ID="lblName" Text="Guest" runat="server" /><br/>
<asp:Label ID="lblUserGroup" Text="Group" runat="server" />
</div>
<div id="clear"></div>
<div >
<asp:Panel ID="pnlGroup" runat="server" Visible="true" >
<span class="sub-title modified"> Select:</span>
<asp:RadioButton ID="rd1" runat="server" AutoPostBack="true" Text="Frist" />
<asp:RadioButton ID="rd2" runat="server" AutoPostBack="true" Text="Second" />
</asp:Panel>
</div>
<%--Folder panel --%>
<div id="leftcolumn">
<asp:Panel ID="pnlFolder" runat="server" Visible="true" >
<br /><asp:Label ID="Label4" Text="File Location:" runat="server" class="sub-title modified"/>
<asp:FileUpload ID="fileUploadSingle" runat="server" class="multi" maxlength="1" Visible="true"/>
<asp:Button id="btnSubmit" runat="server" text="Sumit" CssClass="button " />
</asp:Panel>
</div>
<%--end leftcolumn --%>
<div id="rightcolumn">
<asp:Button id="Button1" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button2" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button3" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button4" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button5" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button6" runat="server" text="rightcolumn" CssClass="button " /><br />
</div>
</div>
</form>
</body>
</html>
There is my stylesheet:
body, html {
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000;
background-color:#ccc;
background-image:url(/images/body-bkg.png);
background-repeat:repeat-x;
}
#wrap {
margin:auto;
width:975px;
border-top:10px solid #000;
background-color:#FFFFFF;
height:auto;
}
a:link {
text-decoration:none;
font-weight:bold;
color:#000;
}
#header {
width:975px;
height:85px;
background-color:#333;
}
.title {
font-size:16px;
font-weight:bold;
}
.sub-title {
font-size:14px;
font-weight:bold;
}
.sub-sub-title {
font-size:12px;
font-weight:bold;
}
.right{
float:right;
}
.modified {
margin-left:20px;
float:left;
}
#column1-wrap {
float: left;
width: 100%;
}
#column1 {
background-color: cyan;
}
#column2 {
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
text-align:right;
}
#clear, #Div1 {
clear: both;
}
.left
{
position:relative;
background-color:Green;
}
.button {
font-size:14px;
font-weight:bold;
margin-left:20px;
}
#leftcolumn { width: 50%; border: 1px solid red; float: left; background-color:Blue;}
#rightcolumn { width: 50%; border: 1px solid red; float: right}
please add this to your css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
example
Related
I have two modal popup in a page. First popup was working as expected. Then I add second popup and it is working but first popup stop responding from code behind mp3.show(). Both popups are independent and second is inside datalist. If I remove second then first work as expected. Below is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register TagPrefix="CP" TagName="TitleBar" Src="ucHeaderJobseeker.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Autocomplete - Multiple values</title>
<link href="~/Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
function ShowModalPopup() {
var premium = document.getElementById("hdnPremium");
// if (premium.value == "3") {
$find("mpe").show();
return false;
// }
// else
// { return true; }
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px;">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right;">
<asp:LinkButton ID="lnkSignIn" runat="server" Text="sign in"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp2" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panel2"
TargetControlID="lnkSignIn" CancelControlID="btnSignInCancel" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" Style="display: none;
height: 230px; width: 300px;" DefaultButton="btnSignIn">
<h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1em; margin-left: 0px;
margin-top: 0px; color: Gray;">
Sign In</h1>
<asp:Button ID="btnSignIn" Width="100px" Height="25px" runat="server" Text="OK" CausesValidation="false"
Style="float: left;" />
<asp:HyperLink ID="btnSignInCancel" runat="server" Text="Cancel" CssClass="btnClosePopup">Close</asp:HyperLink>
</asp:Panel>
<div style="float: right; margin-right: 20px; margin-top: 0px;">
<div>
<asp:HiddenField ID="hdnPremium" runat="server" Value="0" />
<asp:Label ID="lblUsername" runat="server" Visible="false" ForeColor="BLUE" Style="margin-top: 0px;
float: right; margin-right: 10px;"></asp:Label></div>
<asp:Label ID="lblPoints" runat="server" ForeColor="#CC0066" Style="float: left;"></asp:Label>
</div>
</div>
<div style="float: right; display: block; margin-top: 10px; margin-right: 20px;">
<asp:LinkButton ID="lnkReferSelected" Text="Refer Me in Selected Jobs" Visible="true"
runat="server" OnClick="ReferMultiple" Style="background: #4E9CAF; padding: 5px 15px 5px 15px;
text-align: center; border-radius: 5px; color: white; font-weight: bold; text-decoration: none;
margin-left: 10px;"></asp:LinkButton>
<%--<div class="divSignUp" id="divFakeReferSelected" runat="server" text="Refer Me in Selected Jobs"
visible="true" style="background: #4E9CAF; padding: 5px 15px 5px 15px; text-align: center;
border-radius: 5px; color: white; font-weight: bold; text-decoration: none; margin-left: 10px; cursor: pointer;">
Refer Me in Selected Jobs</div>--%>
<asp:LinkButton ID="lnkFakePay" runat="server" Style="display: none;"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp3" BehaviorID="behaviorIDmp3" runat="server" PopupControlID="Panel3"
TargetControlID="lnkFakePay" CancelControlID="hplCancelPay" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" Style="display: none;
height: 230px; width: 300px;">
<h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1em; margin-left: 0px;
margin-top: 30px; color: black; clear: both;">
You are applying to more than</h1>
<div style="text-align: center; margin-top: 30px; margin-bottom: 20px;">
<asp:Button ID="btnPaymetConfirm" Width="100px" Height="25px" runat="server" Text="OK"
OnClick="btnPaymetConfirm_Click" CausesValidation="false" Style="float: left;" />
<asp:HyperLink ID="hplCancelPay" runat="server" Text="Cancel" CssClass="btnClosePopup">Cancel</asp:HyperLink>
</div>
</asp:Panel>
</div>
<div style="width: 100%;">
<asp:DataList ID="dlJobs" runat="server" RepeatDirection="Horizontal" RepeatColumns="1"
DataKeyField="Job_Id" CellPadding="10" ItemStyle-VerticalAlign="Top" Width="100%"
OnItemCommand="dlJobs_ItemCommand">
<ItemTemplate>
<div style="margin-top: 0px; padding-top: 10px; padding-bottom: 10px; background-color: White;
border: 1px solid #a6a6a6; width: 100%;">
<div style="float: left; margin-top: 10px; margin-left: 10px;">
<asp:CheckBox runat="server" ID="chkJob" />
</div>
<div style="float: left; margin-top: 10px; margin-left: 10px;">
<img alt="NoImage" src="Images/CompanyBlank.png" width="50px" height="50px" />
</div>
<div style="float: left; margin-top: 20px; margin-left: 10px;">
<asp:Label ID="lblCompany" Font-Bold="true" ForeColor="#004080" runat="server" Text='<%# Eval("Emp_Company").ToString() %>'></asp:Label>
</div>
<div style="margin-top: 20px; float: right; margin-right: 30px;">
<div style="color: #8b99a7; display: inline;">
Posted On:
</div>
<div style="display: inline;">
<asp:Label ID="lblPostDate" runat="server" Text='<%# Eval("Job_PostDate", "{0:dd-MMM-yyyy}") %>'
ForeColor="#21262c"></asp:Label></div>
<%--<div style="font-size: small; margin-left: 300px;">
<a href='Jobs.aspx?Job_Id=<%# Eval("Job_Id") %>'>View Details</a>
</div>--%>
</div>
<%--<div>
<asp:Label ID="lblJobTitle" Font-Bold="true" Font-Size="Small" Style="word-wrap: break-word;
word-break: break-all; cursor: default;" runat="server" Text='<%# Eval("Job_Title") %>'
ForeColor="#ffa366"></asp:Label>
</div>--%>
<div style="margin-top: 67px; margin-left: 40px;">
<div style="float: left; color: #8b99a7;">
IT Skill: </div>
<asp:Label ID="lblSkills" Style="margin-left: 40px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='abc'></asp:Label>
</div>
<div style="margin-top: 7px; margin-left: 40px; float: left;">
<div style="float: left; color: #8b99a7;">
Experience: </div>
<asp:Label ID="lblExp" Style="margin-left: 15px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='<%# Eval("Min_Exp").ToString() + " - " + Eval("Max_Exp").ToString() + " Years"%>'></asp:Label>
</div>
<div style="float: right;">
<asp:Panel ID="pnlRequestReferral" runat="server">
<div style="font-size: small; float: left;">
<asp:LinkButton ID="lnkReferSingleJob" Text="Refer Me" runat="server" CommandArgument='<%# Eval("Job_Id") %>'
CommandName="ReferSingleJob" Style="background: #4E9CAF; padding: 5px 15px 5px 15px;
text-align: center; border-radius: 5px; color: white; font-weight: bold; text-decoration: none;
margin-left: 10px;" Visible='<%# Convert.ToBoolean(Eval("IsNotReferred")) %>'></asp:LinkButton>
<asp:Label runat="server" ID="lblReferred" Text="Referral Request Sent" ForeColor="#004080"
Visible='<%# (int)Eval("IsNotReferred") == 1 ? false : true %>'></asp:Label>
<%--<div class="divSignUp" id="divReferMe" runat="server" style="background: #4E9CAF;
padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px; color: white;
font-weight: bold; text-decoration: none; margin-left: 10px; cursor: pointer;">
Refer Me</div>--%>
</div>
<div style="font-size: small; float: right; margin-left: 20px;">
<asp:LinkButton ID="lnkContactReferrer" Text="Contact Referrer" OnClientClick="return ShowModalPopup()"
runat="server" CommandArgument='<%# Eval("Job_Id") %>' CommandName="ContactReferrer"
Style="background: #4E9CAF; padding: 5px 10px 5px 10px; text-align: center; border-radius: 5px;
color: white; font-weight: bold; text-decoration: none; margin-left: 5px; margin-right: 5px;"></asp:LinkButton>
<asp:LinkButton ID="lnkDummy" runat="server" Style="display: none;"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp4" BehaviorID="mpe" runat="server" PopupControlID="pnlPopup"
TargetControlID="lnkDummy" CancelControlID="btnHide" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" HorizontalAlign="Center" runat="server" CssClass="modalPopup"
Style="display: none; height: 230px; width: 300px;">
<div style="float: left;">
Name :</div>
<div style="color: Black;">
<%# Eval("First_Name")%></div>
<br />
<div style="float: left;">
Email :</div>
<div style="color: Black;">
<%# Eval("EmpEmail_Id")%></div>
<br />
<div style="float: left;">
Contact :</div>
<div style="color: Black;">
<%# Eval("Contact_Number")%></div>
<br />
<br />
<asp:Button ID="btnHide" runat="server" Text="Close" OnClientClick="return HideModalPopup()" />
</asp:Panel>
</div>
</asp:Panel>
<asp:Panel ID="pnlReferred" runat="server" Visible='<%# Convert.ToBoolean(Eval("IsNotReferred")) %>'>
<div style="font-size: small; float: left;">
<asp:Label ID="lblRefRequest" Text="Referral Request Sent" Visible="false" runat="server"
Style="background: #4E9CAF; padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px;
color: white; font-weight: bold; text-decoration: none; margin-left: 10px;"></asp:Label>
</div>
<div style="font-size: small; float: right; margin-left: 20px;">
<asp:Label ID="lblRefContact" Visible="false" runat="server" Style="background: #4E9CAF;
padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px; color: white;
font-weight: bold; text-decoration: none; margin-left: 10px;"></asp:Label>
</div>
</asp:Panel>
</div>
<div style="margin-top: 7px; margin-left: 40px; float: left; clear: both;">
<div style="float: left; color: #8b99a7;">
Location: </div>
<asp:Label ID="lblLocation" Style="margin-left: 25px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='<%# Eval("Job_Location").ToString() %>'></asp:Label>
</div>
<%--<div style="margin-top: 10px; margin-left: 40px; margin-bottom: 20px;">
<div style="float: left; color: #8b99a7;">
Note: </div>
<asp:Label ID="lblNotice" style="margin-left: 50px;" Font-Bold="false" ForeColor="#21262c" runat="server"
Text='<%# Eval("Notice").ToString() %>'></asp:Label>
</div>--%>
<div style="margin-top: 60px; margin-left: 40px; margin-bottom: 20px; clear: both;">
<div style="float: left; color: #8b99a7; display: inline;">
About Company: </div>
<asp:Label ID="lblAbtCompany" Style="margin-left: 10px; display: inline; margin-top: 20px;"
Font-Bold="false" ForeColor="#21262c" runat="server" Text='<%# Eval("About_Company").ToString() %>'></asp:Label>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
and this is the code behind
protected void Page_Load(object sender, EventArgs e)
{
string keySkills = "java";
string location = string.Empty;
int recordcount = 0;
DataTable dtJobList;
DataTable dtCompanyList;
DataSet dsJobs = GetSearchResult(keySkills, location, 1, ref recordcount, Session["UserName"], 0);
dtJobList = dsJobs.Tables[0];
dtCompanyList = dsJobs.Tables[2];
dlJobs.DataSource = dtJobList;
dlJobs.DataBind();
}
protected void ReferMultiple(object sender, EventArgs e)
{
mp3.Show();
}
protected void btnPaymetConfirm_Click(object sender, EventArgs e)
{ }
protected void dlJobs_ItemCommand(Object sender, DataListCommandEventArgs e)
{
}
This is the complete code if I remove mp4 modal popup then mp3 will work fine.
I am attempting to apply styles to a GridView in an AJAX TabControl. The styles are applied in the designer, but when viewed in a browser the control is rendered without any styles. If I remove the GridView from the TabControl the styles are applied.
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html
{
font-family:Arial;
}
#grid
{
border:none;
}
#grid th
{
background:linear-gradient(#FAFAFA, #D8D8D8);
padding:5px;
border-bottom:1px solid gray;
border-top: 1px solid gray;
border-left:none;
border-right:none;
font-style:normal;
font-weight: normal;
}
#grid td
{
padding:5px;
border-bottom:1px solid gray;
border-top: 1px solid gray;
border-left:none;
border-right:none;
width:100px;
}
.select
{
text-decoration: none;
}
.select:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel ID="pnl1" runat="server" HeaderText="My Tab">
<ContentTemplate>
<asp:GridView ID="grid" runat="server"
onselectedindexchanged="grid_SelectedIndexChanged">
<Columns>
<asp:TemplateField>
<EditItemTemplate >
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<ItemStyle Width="30px" />
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Select"></asp:LinkButton>
</ItemTemplate>
<ControlStyle CssClass="select" />
<ItemStyle Width="60px" CssClass="select" />
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Left" />
<RowStyle HorizontalAlign="Left" />
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
Why are the styles not being applied to the GridView?
The id of the GridView will no longer be just grid when inside the TabControl. So the css style of #grid will no longer work.
The id of your grid would be something like TabContainer1_pnl1_grid.
One way to get your styles to work is to assign a CssClass of grid(or whatever you want to call it) on your GridView.
<asp:GridView ID="grid" runat="server" CssClass="grid">
and change your styles to use .grid instead of #grid.
.grid
{
border: none;
}
.grid th
{
background: linear-gradient(#FAFAFA, #D8D8D8);
padding: 5px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
border-left: none;
border-right: none;
font-style: normal;
font-weight: normal;
}
.grid td
{
padding: 5px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
border-left: none;
border-right: none;
width: 100px;
}
I'm very unfamilar with accordion and exactly how to use them, i'm trying to adjust the width of the accordion, how/what is the easier way to do that, i'm using the sample css that came with it, but i do not see any width adjustment.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<asp:Accordion ID="MyAccordion" runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="250"
AutoSize="None">
<Panes>
<asp:AccordionPane ID = "AccordionPane1" runat = "server">
<Header>
Section 1
</Header>
<Content>
<p>Thi</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID = "AccordionPane2" runat = "server">
<Header>
Section 2
</Header>
<Content>
<p>Joe</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID = "AccordionPane3" runat = "server">
<Header>
Section 3
</Header>
<Content>
<p>So keep yoow Micro</p>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID = "AccordionPane4" runat = "server">
<Header>
Section 4
</Header>
<Content>
<p>>test</p>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
.accordionLink
{
background-color: #D3DEEF;
color: white;
}
.watermark {
background: #FFAAFF;
}
.popupControl {
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}
You could create a container for the accordion and by giving it a width that will also set the accordion's width. Something like:
<div id="divAccordionContainer" style="width:500px">
<ajaxToolkit:Accordion ID="MyAccordion" runat="Server">
...
</ajaxToolkit:Accordion>
</div>
Here is my CSS
.FrontSlideShow
{
display:block;
overflow: none;
height: 323px;
margin-bottom: 12px;
background-color:#005596;
background-image: url(/*edited*/);
background-repeat: repeat-x; width:754px; font-family: verdana; font-size:large;
color:#FFFFFF;
clear:both;
}
.FrontSlideShow .SlideShowImage
{
float: left;
vertical-align:text-bottom;
padding-right: 24px;
}
.FrontSlideShow .SlideShowSubTitle
{
vertical-align: text-bottom;
margin-bottom: 10px;
}
Here is the markup
<div class="FrontSlideShow">
<div class="SlideShowMainTitle">
<asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
</div>
<div class="SlideShowImage">
<asp:Image ID="imgSlide" runat="server" />
</div>
<div class="SlideShowSubTitle">
<asp:Label ID="lblSlideDescription" runat="server"></asp:Label>
</div>
<asp:Button ID="btnPrev" runat="server" Text="Prev" /><asp:Button ID="btnNext" runat="server" Text="Next" />
<asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide" NextButtonID="btnNext" PreviousButtonID="btnPrev"
ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
</asp:SlideShowExtender>
<asp:Literal ID="liMarkup" runat="server"></asp:Literal>
</div>
The subtitle div needs to be positioned at the bottom right of the parent container. Any ideas? But all I can get is:
But I want:
Try this:
.FrontSlideShow {
position: relative;
}
.FrontSlideShow .SlideShowSubTitle {
position: absolute;
right : 20px;
bottom: 20px;
}
.FrontSlideShow {
....
position:relative;
....
}
.FrontSlideShow .SlideShowSubTitle {
position:absolute;
top: 300px; // your values
left: 400px;// your values
}
THis way your text will always be consistent and in the same spot
I have a master page which is using the style sheet..
My problem is that my vertical scrollbar does not work and horizontal scrollbar is not showing when i restore down the page.
here is my .aspx code..
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title>test</title>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="NewFolder1/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1
{
font-size: medium;
font-weight: bold;
}
.style2
{
text-align: left;
}
</style>
</head>
<body bgcolor="#6794cb" >
<form id="form2" runat="server"
style="background-color: #6794CB;padding-bottom:1%; padding-top: 2%; width:100%; height:100%;">
<div id="container" style="visibility: visible;">
<div id="header">
<div class="style2">
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#000099" BorderWidth="2px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" BackColor="#ADC6C9"
BorderColor="#CCCCCC" BorderStyle="Outset" />
<asp:HyperLink ID="HyperLink1" runat="server">corp\tbruschi</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server">Settings</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server">Help</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server">LogOff</asp:HyperLink>
<br />
<br />
<span class="style1"><br />
</span><br />
<asp:Panel ID="Panel1" runat="server" Width="100%">
<hr style="padding: 1px; background-color: #000000" />
</asp:Panel>
<br />
</div>
</div>
<!-- end header -->
<div id="left">
<asp:Panel ID="Panel3" runat="server" Height="100%" ScrollBars="Auto"
Width="100%">
<p>
</p>
<br />
<asp:TreeView ID="TreeView2" runat="server" OnUnload="TreeViewMain_Unload"
ontreenodepopulate="TreeView2_TreeNodePopulate"
onselectednodechanged="TreeView2_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Machine Groups"
Value="Machine Groups"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
<asp:TreeView ID="TreeView3" runat="server" OnUnload="TreeView3_Unload"
ontreenodepopulate="TreeView3_TreeNodePopulate"
onselectednodechanged="TreeView3_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Policies"
Value="Policies"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
</asp:Panel>
</div>
<div id="content-wrapper">
<div id="content-inner">
<!-- end left division -->
<div id="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div> <!-- end footer -->
</div>
</form>
</body>
</html>
**
And here is my Css file code..
body
{
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
cursor: default;
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
*
{
margin: 0px 0px 0px 1px;
padding: 0px;
text-align: left;
}
html
{
height: 100%;
margin-bottom: 1px;
}
#container
{
width: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #FFFFFF;
height: 595px;
}
#header {
width:100%;
padding-top:15px;
height: 121px;
}
.spacer {
width:100%;
height:15px;
}
hr {
border-style: none;
border-color: inherit;
border-width: 0px;
color:Black;
background-color:#CDCDCD;
height: 0px;
width: 100%;
text-align: left;
}
h1 {
font-size:28px;
color:white;
background-color: #4F81BD;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
}
h2 {
font-size:15px;
color:Black;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
background-color:#FFFFFF;
}
h3 {
color:Black;
font-size:15px;
text-align:left;
font-weight:300;
padding:5px;
margin-top:5px;
}
#left {
float:left;
width:250px;
background-color:#FFFFFF;
color:black;
height: 417px;
}
#main
{
margin: 1px 5px 5px 260px;
border-left: 1px solid silver;
height: 409px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
p {
color:black;
background-color:#FFFFFF;
line-height:20px;
padding:5px;
}
a {
color:Blue;
text-decoration:none;
}
a:hover {
color:#cc0000;
text-decoration:underline;
}
#footer {
clear:both;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.right {
color:gray;
background-color:#FFFFFF;
float:right;
font-size:100%;
margin-top:5px;
}
.left {
color:gray;
background-color:#FFFFFF;
float:left;
font-size:100%;
margin-top:5px;
}
I have tried a lot of stuff but nothing seems to work... it will be great if some 1 could have a look and guide me in the right direction..
Thanks
when the browser window is restored down the content on the page gets cramped up..
This means i have to keep the content in the body or main to be fixed.. i dont know how to do that any help..???
In your css class, in the body definition, if you remove
position: fixed;
then the scrollbars appear.