They all appear left aligned. I've tried setting the body tag to text-align:center, making divs around and in the main panel, but I can't get it to work. Any ideas?
Here is my CSS code:
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
}
.MainPanel div {
margin-bottom:10px;
margin-top:10px;
}
.panelSpace {
margin-bottom:25px;
margin-top:25px;
}
.buttonWidth { clear: both; }
.buttonWidth div {
width:17%;
float:left;
margin-left:20px;
}
.centerDiv {
width:100%;
text-align:center;
}
And here's my html:
<body>
<form id="form1" runat="server">
<div style="height:100px; text-align:center;"><uc1:Header ID="Header1" runat="server" /></div><br /><br />
<div>
<div><asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /></div>
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px">
<div class="centerDiv">
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" >
<div>Customer: <asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /></div>
</asp:Panel>
</div>
<span class="panelSpace" />
<asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" >
<div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /><br />
<asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
Width="50px" Height="50px" OnClick="imgDataSync_Click" />
</div>
<div>
<asp:Label ID="lblEDI" runat="server" Text="EDI" /><br />
<asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgEDI_Click" />
</div>
<div>
<asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /><br />
<asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgShipping_Click" />
</div>
<div>
<asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /><br />
<asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgCompliance_Click" />
</div>
<div>
<asp:Label ID="lblLabels" runat="server" Text="Labels"></asp:Label><br />
<asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgLabels_Click" />
</div>
</div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /><br />
<asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
Height="50px" OnClick="imgManuals_Click" />
</div>
<div>
<asp:Label ID="lblPackaging" runat="server" Text="Packaging" /><br />
<asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
Width="50px" Height="50px" OnClick="imgPackaging_Click" />
</div>
<div>
<asp:Label ID="lblTesting" runat="server" Text="Testing"></asp:Label><br />
<asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgTesting_Click" />
</div>
<div>
<asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"></asp:Label><br />
<asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgShippingQuickReference_Click" />
</div>
</div>
</div>
</asp:Panel>
<span class="panelSpace" />
<asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" >
<div>
<h2>Recent Updates:</h2>
<asp:GridView ID="grdHistory" runat="server">...</asp:GridView>
<asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
TableName="Histories" OrderBy="CreatedDate desc" />
</div>
</asp:Panel>
<span class="panelSpace" />
</div>
</asp:Panel>
</div>
</form>
</body>
Set the width of the panels not in the ASP.NET code, but in the CSS declaration, e.g.
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
width: 700px;
}
If you do not want to set the style for all panels, but for each panel, then do something like:
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" style="width:550px" BorderColor="DarkBlue" BorderWidth="2px" >
Related
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
how i can give hover effect to the items
i have used jquery but it is taking effect to the first item only
is there any way to give hover mouseover effects to individual items
You can use the :hover selector in CSS to the row class like so:
.row:hover {
/* styling */
}
With Jquery:
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
With Css:
.row:hover {
background-color:yellow;
}
.row:hover {
background-color:yellow;
}
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
I'm trying to center a bunch of control within a fieldset and 2 of them are <asp:FileUpload /> .One is behaving as intended but not the other :
I've created my fieldset within a <div id="container"> and inside the fieldset you have a <div class="content"> which contains the Labels, FileUpload etc.
The aspx file is as follow :
<div id="container">
<fieldset>
<legend style="color:#CC0000; font-size:medium; font-weight:bold">Nouvelle demande de tarif imagé</legend>
<br />
<div class="content">
<asp:Label ID="Label2" runat="server" Text="Nom du catalogue : "
Font-Bold="True"></asp:Label>
<asp:TextBox ID="TB_name" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator2" runat="server"
ErrorMessage="CustomValidator" ControlToValidate="TB_name" ForeColor="#CC0000"
onservervalidate="CustomValidator2_ServerValidate" ValidateEmptyText="True"></asp:CustomValidator>
<br />
<br />
<asp:Label ID="Label3" runat="server"
Text="Veuillez sélectionner un fichier CSV :" Font-Bold="True"></asp:Label><br />
<br />
<asp:FileUpload ID="csvUpload" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="CustomValidator" ControlToValidate="csvUpload"
Display="Dynamic" ForeColor="#CC0000"
onservervalidate="CustomValidator1_ServerValidate"
ValidateEmptyText="True"></asp:CustomValidator>
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server"
Text="Veuillez sélectionner un logo (facultatif) :" Font-Bold="True"></asp:Label><br />
<br />
<asp:FileUpload ID="pictureUpload" runat="server" />
<asp:CustomValidator ID="CustomValidator3" runat="server"
ErrorMessage="CustomValidator" ControlToValidate="pictureUpload"
ForeColor="#CC0000" onservervalidate="CustomValidator3_ServerValidate"
ValidateEmptyText="True"></asp:CustomValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Valider"
onclick="Button1_Click" />
<br />
<br />
<asp:HyperLink ID="HyperLink_validee" runat="server" Font-Underline="True"
ForeColor="#009933" NavigateUrl="~/TarifImageHistorique.aspx">Votre demande a bien été enregistrée</asp:HyperLink>
<br />
</div>
</fieldset>
</div>
and here is the CSS :
fieldset
{
margin-bottom:20px;
border:1px solid rgb(149,149,149);
padding: 10px 10px 10px 10px;
width:100%;
}
#container
{
margin-left:auto;
margin-right:auto;
width:400px;
}
.content
{
text-align:center;
}
I don't get why the second FileUpload won't align as the first one. Can anyone enlighten me ?
Your CustomValidator3 in front of second file upload control needs dynamic displaying so just add Display="Dynamic" and done.
You have to put your second file upload control in <center> tag.
Below code around line 31
... // your code
<center>
<asp:FileUpload ID="pictureUpload" runat="server" />
</center>
... // your code
I have a problem with my footer as I divided the page as follow:
<%# Page Title="" Language="C#" MasterPageFile="~/SVM.Master" AutoEventWireup="true" CodeBehind="Cateshow.aspx.cs" Inherits="beravoSV.Cateshow" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.style8 {
color: #333333;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="midcont">
<div class="leftsidemainadsshow">
<br />
<asp:ListView ID="cateshowlistview" runat="server" DataSourceID="categoryshowsql" Style="text-align: left">
<ItemTemplate>
<div class="templist">
<asp:LinkButton ID="Adstitlinkbtn" runat="server"
Style="font-weight: 700; color: #0066FF" Text='<%# Eval("AdsTit") %>'
CssClass="adstit" OnClick="Adstitlinkbtn_Click"
PostBackUrl='<%# "AdsDetails.aspx?AdsTit=" + Eval("AdsID") %>'></asp:LinkButton>
<br />
<asp:ImageButton ID="ImageButton3" runat="server" Height="88px" Width="91px"
CssClass="imag1" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img1") %>'
PostBackUrl='<%# "AdsDetails.aspx?Img1=" + Eval("AdsID") %>' />
<br />
<asp:Label ID="AdsDescLabel" runat="server" Text='<%# Eval("AdsDesc") %>'
CssClass="adsdisc" />
<br />
<br />
<br />
<br />
<asp:Label ID="Sectlbl" runat="server" Text='<%# Eval("Section") %>'
Style="color: #333333"></asp:Label>
-
<asp:Label ID="categlbl" runat="server" Text='<%# Eval("Category") %>'
Style="color: #333333; font-weight: 700; font-style: italic;"></asp:Label>
<br />
<asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country") %>'
Style="color: #333333" />
-
<asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>'
Style="color: #333333" />
-
<asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>'
Style="color: #333333" />
<div class="adsprice">
<span class="style8">Price:</span>
<asp:Label ID="AdsPriceLabel" runat="server" Style="color: #FF0000"
Text='<%# Eval("AdsPrice") %>' />
</div>
<div class="iconadsbox">
<asp:ImageButton ID="Likebtn" runat="server"
ImageUrl="~/iconsimg/favoritestar2.png" OnClick="Likebtn_Click" />
<asp:ImageButton ID="sendmailbtn" runat="server"
ImageUrl="~/iconsimg/mailposter.png" OnClick="sendmailbtn_Click" />
</div>
<asp:Image ID="Image1" runat="server" CssClass="divideline" />
<br />
</div>
</ItemTemplate>
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
<asp:DataPager ID="DataPager2" runat="server" PagedControlID="cateshowlistview" PageSize="7">
<Fields>
<asp:NumericPagerField />
<asp:NextPreviousPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
</asp:ListView>
</div>
<div class="primumads">
</div>
<br />
<br />
<asp:SqlDataSource ID="categoryshowsql" runat="server"
ConnectionString="<%$ ConnectionStrings:BeravaConnectionString %>"
SelectCommand="SELECT DISTINCT [AdsID],[Section], [Category], [Country], [State], [City], [AdsTit], SUBSTRING([AdsDesc],1,155) as AdsDesc, [AdsPrice], [Img1] FROM [ads] WHERE (([Category] = #Category) AND ([Country] = #Country))">
<SelectParameters>
<asp:QueryStringParameter Name="Category" QueryStringField="cat"
Type="String" />
<asp:SessionParameter Name="Country" SessionField="location" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<br />
</asp:Content>
When the rightside is empty the footer is going up and if it is full its will come down to the bottom. How I can make it always down even if the right side is empty?
You can find the below link to know more what is going up with me
enter link description here
You can add to te footer the following:
style="position: fixed; bottom: 0; width: 100% (This will fix the footer to the bottom of your screen)
If what is to fix the footer to the end of you page, you need to give to the header and to the content of your page a min height, here's an example:
<div id="header" style="min-height: 10%"></div>
<div id="content" style="min-height: 80%"></div>
<div id="footer" style="min-height: 10%"></div>
Note: you don't need to say that min-height: 10% in the footer, that's implicit.
I'm trying to get an ajax function to run when I change the choice in the group.
but I don't know to which attribute will fire the Ajax.
I tried to do all kinds of things but everything I do produces an error in the browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Checkout page</title>
<script type="text/javascript">
var request;
function NIS2USD() {
var from = document.getElementById("NIS").value;
var to = document.getElementById("USD").value;
var amount = document.getElementById("totalAmountLabel").value;
request = new XMLHttpRequest();
request.onreadystatechange = ProcessResponse;
request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" + amount, true);
request.send();
}
function USD2NIS() {
var from = document.getElementById("USD").value;
var to = document.getElementById("NIS").value;
var amount = document.getElementById("totalAmountLabel").value;
request = new XMLHttpRequest();
request.onreadystatechange = ProcessResponse;
request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" + amount, true);
request.send();
}
function ProcessResponse() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("totalAmountLabel").innerHTML = request.responseText;
}
}
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div id="top">
<div class="topright">
<img src="images/sitemap.png" alt="Sitemap"
<img src="images/rss.png" alt="RSS" />
</div>
</div>
<div id="header">
<div class="headings">
<h1>WebBookStore</h1>
<h2>pay less read more</h2>
</div>
</div>
<div id="menu">
<ul>
<li>Login</li>
<li>About Us</li>
<li>The Books Collection</li>
<li>Search Books</li>
<li>Your Cart</li>
<li>Checkout</li>
</ul>
</div>
<div id="main">
<div class="left">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Checkout"</asp:Label>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Client ID:"></asp:Label>
<asp:Label ID="clientIDLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Delivery Date:"></asp:Label>
<asp:Label ID="orderDateLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label4" runat="server" Text="Total:"></asp:Label>
<asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text="Currency:"></asp:Label>
<asp:RadioButton ID="NIS" runat="server" Checked="True"
GroupName='group1' Text="NIS" />
<asp:RadioButton ID="USD" runat="server" GroupName='group1' Text="USD" />
<br />
<br />
<asp:Label ID="Label6" runat="server"
Text="Pick a delivery date"></asp:Label>
<br />
<br />
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black" Height="64px" NextPrevFormat="ShortMonth"
Width="218px" onselectionchanged="Calendar1_SelectionChanged">
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
Height="8pt" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Submit Order" />
<br />
<asp:TextBox ID="TextBox1" runat="server" ForeColor="Red" Height="67px"
ReadOnly="True" TextMode="MultiLine" Visible="False" Width="451px"></asp:TextBox>
<br />
</div>
</div>
<div id="footer">
<div class="info">
© 2012 WebBookStore<br />
Site Design - WebBookStore
</div>
</div>
</div>
</form>
This code for c# and you can add in page_load()
NIS.Attributes.Add("onclick", "USD2NIS();");
USD.Attributes.Add("onclick", "NIS2USD();");
I'd wrap your radiobuttons in a div and access them like so.
<script type="text/javascript">
$(function () {
$("#rbs input").on("click", function() {
DoSomthing($(this).attr("value"));
});
});
function DoSomthing(val) {
$("#<%=totalAmountLabel.ClientID%>").html(val);
}
</script>
<div id="rbs">
<p>
<asp:RadioButton ID="NIS" runat="server" Checked="True" GroupName="rbGroup" Text="NIS"/>
<asp:RadioButton ID="USD" runat="server" GroupName="rbGroup" Text="USD"/>
</div>
<asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>
Hope this helps
EDIT : Added how to get an ASP.NET control using jquery Selector.
I have 2 panels and using ajax modalpopup control
<asp:Panel ID="pnlHead" runat="server" CssClass="modalPopup">
<asp:Panel ID="pnlBody" runat="server">
<div id="popupHead">
<div id="popup_left">
<asp:Label ID="lblProduct" runat="server"></asp:Label></div>
<!-- end banner_left -->
<div id="popup_right">
</div>
<!-- end banner_right -->
</div>
</asp:Panel>
<p>
<asp:PlaceHolder ID="phcontrol" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOk" runat="server" OnClick="imgbtnOk_Click" />
</center>
</div>
</asp:Panel>
<asp:Panel ID="pnlHeadWD" runat="server" CssClass="modalPopupWD"
BackImageUrl="~/WebSiteContent/Images/Cloud.JPG">
<asp:Panel ID="pnlBodyWD" runat="server">
<div id="Div1" style="position: absolute; left: 15%; top: 15%; vertical-align: middle;">
<br />
<br />
<br />
<br />
<br />
<p>
<asp:PlaceHolder ID="phcontrolWD" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOkWD" runat="server" Visible="false" OnClientClick="$find('pnlHeadWD').hide(); return false;" />
</center>
</div>
</div>
</asp:Panel>
</asp:Panel>
<asp:TextBox ID="txtHidden" Visible="false" runat="server"></asp:TextBox>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lblCopyright"
PopupControlID="pnlHead" BackgroundCssClass="modalBackground" DropShadow="true"
PopupDragHandleControlID="pnlBody">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="lblCopyright"
BehaviorID="pnlHeadWD" PopupControlID="pnlHeadWD" BackgroundCssClass="modalBackground"
DropShadow="true" PopupDragHandleControlID="pnlBodyWD">
</cc1:ModalPopupExtender>
when I tried to call the first ModalPopupExtender1 then even the second ModalPopupExtender2 is getting executed and 2 modal popup extenders are shown.
public void Populate_Popup(String URL,String Message_Identifier)
{
this.ModalPopupExtender1.Show();
}
public void Populate_Popup2(string Message)
{
this.ModalPopupExtender2.Show();
}
Your TargetControlID="lblCopyright" is the same for both ModalPopupExtenders.