so i have a webpage that has a split screen, one half is 70% and the other 30% wide, i have two footer images that are the same.. But when i try to center the images it is not working for some strange reason.. The rest of the page is positioned fine, but my images are not centering, i was told a webkit may help? Can anybody help?
Css
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #110;
width: 30%;
height: 100%;
text-align: center;
}
.right {
right: 0;
background-color: white;
width: 70%;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.center {
text-align: center;
}
.auto-style1 {
position: absolute;
width: 100%;
height: 100%;
top: 49%;
left: 43%;
}
h1 {
color: red;
font-weight: bold;
padding-top: 20px;
}
div { padding: 30px 10px 15px; }
.imgFooter {
display: block;
left: 150px;
text-align: center;
position: absolute;
bottom: 10%;
}
and the html -
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WorkStationUITarget.Default" %>
<!DOCTYPE html>
<html>
<head>
<%--<meta http-equiv="refresh" content="10" > <%--refreshes after 10 seconds --%>--%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="CSS/style.css" rel="stylesheet" />
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
<link href="Stylesheet/styles.css" rel="stylesheet" />
</head>
<body style="height: 100%">
<form runat="server" name="PackingStatsForm">
<div height="100%">
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Width="100%" Height="100%" Font-Size="270px" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; " CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class ="center" width:100%>
***<img class ="imgFooter" src="Logo/siblack1.png" />***
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="ddl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged" Font-Bold="True" ViewStateMode="Enabled" >
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" BorderWidth="3px" CellPadding="25" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="24px" OnRowDataBound="GridView1_RowDataBound" Width="100%" Font-Bold="True" >
<AlternatingRowStyle BackColor="White"/>
<FooterStyle BackColor="#CCCC99"/>
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
<RowStyle BackColor="#F7F7DE"/>
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
<SortedAscendingCellStyle BackColor="#FBFBF2"/>
<SortedAscendingHeaderStyle BackColor="#848384"/>
<SortedDescendingCellStyle BackColor="#EAEAD3"/>
<SortedDescendingHeaderStyle BackColor="#575357"/>
</asp:GridView>
<div class="center" width:100% >
***<img class="imgFooter" src="Logo/siwhite1.png" />***
</div>
</div>
</div>
</div>
</form>
</body>
</html>
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 having styling issue with products loaded in datalist control in Chrome.
While everything looks ok in FF, Chrome gives me weird styling.
Here are the screenshots:
FF: http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023
Chrome: http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739
Here is the html markup:
<div class="product-grid">
<asp:DataList ID="dlCatalog" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="item-box">
<ItemTemplate>
<nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
Here is the CSS:
.product-grid { margin-bottom: 15px; width: 586px; text-align: center; margin-left: -10px; }
.product-grid .item-box { text-align: center; vertical-align: top; padding: 10px 11px 60px 11px; }
.product-grid .product-item { text-align: center; margin: 10px 5px 10px 5px; width: 250px; background: url('images/prod_grid_box_bg.gif') no-repeat 0 100%; }
.product-grid .product-item .product-title { font-weight: bold; font-size: 12px; background: url('images/deal_box_hl.gif') no-repeat 0 0; padding-left: 10px; }
.product-grid .product-item .product-title a { background: url('images/deal_box_hr.gif') no-repeat 100% 0; display: block; height: 2em; line-height: 1.3em; overflow: hidden hidden; padding: 4px 10px 8px 0px; }
.product-grid .product-item .picture { text-align: center; margin-top: 10px; }
.product-grid .product-item .description { margin: 5px 5px 0 5px; text-align: center; padding: 10px 5px 10px 5px; border-top: solid 1px #e3e3e3; color: #555; height: 50px; }
.product-grid .product-item .add-info { vertical-align: bottom; text-align: right; width: 250px; height: 85px; position: relative; }
.product-grid .product-item .add-info .prices { text-align: right; vertical-align: middle; position: absolute; bottom: 15px; right: 10px; }
.product-grid .product-item .add-info .buttons { vertical-align: middle; position: absolute; bottom: 15px; left: 10px; text-align: left; }
.product-grid .product-item .add-info .prices .productPrice { color: green; }
.product-grid .product-item .add-info .prices .oldproductPrice { color: Red; text-decoration: line-through; }
PRODUCT BOX CODE ADDED:
<%# Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control"
CodeBehind="ProductBox1.ascx.cs" %>
<%# Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %>
<script type="text/javascript" language="javascript" src="../Scripts/jquery.expander.js"></script>
<script type="text/javascript">
// you can override default options globally, so they apply to every .expander() call
//$.expander.defaults.slicePoint = 50;
$(document).ready(function () {
// simple example, using all default options unless overridden globally
//$('div.expandable h3').expander();
// *** OR ***
// override default options (also overrides global overrides)
$('div.expandable h3').expander({
slicePoint: 50, // default is 100
expandPrefix: '.....', // default is '... '
expandText: '>>', // default is 'read more'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '<<' // default is 'read less'
});
});
</script>
<%--<div class="product-item">
<h2 class="product-title">
<asp:HyperLink ID="hlProduct" runat="server" />
</h2>
<div class="picture">
<asp:HyperLink ID="hlImageLink" runat="server" />
</div>
<div class="description">
<asp:Literal runat="server" ID="lShortDescription"></asp:Literal>
</div>
<div class="add-info">
<div class="prices">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<div class="buttons">
<asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" /><br />
<asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" />
</div>
</div>
</div>--%>
<div class="pblock">
<div class="borderProd">
<div class="expandable">
<h3>
<asp:HyperLink ID="hlProduct" runat="server" />
</h3>
</div>
<asp:Literal runat="server" ID="lShortDescription" Visible="false"></asp:Literal>
</div>
<div class="img">
<a id="hlImageLink" runat="server">
<img id="hlImage" runat="server" style="max-width:170px;max-height:120px"/>
</a>
<div class="body">
</div>
<div class="body">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<asp:Label ID="labUniversal" runat="server" ForeColor="Blue" Text=""></asp:Label>
</div>
</div>
I fixed the problem by setting the height of the item-box to 275px.
Thanks everyone for your help.
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
Given the following code, how can I make the height of wrapper div extend all the way down.
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.wrapperDiv {
position: relative;
width: 800px;
background-color: #FFFF00;
margin-right: auto;
margin-left: auto;
}
.content {
position: absolute;
width: 95%;
top: 55px;
background-color: #008000;
}
.footer {
position: absolute;
width: 95%;
height: 50px;
background-color: #FF00FF;
bottom: 5px;
}
.header {
position: absolute;
width: 95%;
height: 50px;
background-color: #CCFF33;
top: 5px;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapperDiv">
<div id="layer2" class="footer">
3</div>
<div id="layer3" class="header">
1</div>
<div id="layer1" class="content">
2<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
END</div>
</div>
</body>
</html>
Add this:
html, body, .wrapperDiv {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
You will then have problems with your wrapperDiv being wider than the divs it contains. Not sure what you want to do about that.
You can use javascript to get the offsetheight of the absolute element and add it to the height of your parent div.
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.