I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.input
{
clear: left;
margin: 0 0 0.2em;
padding: 6pt 1em;
}
.flclass
{
float: left;
}
.imageDetails
{
color: Gray;
line-height: 1.2;
margin: 34px 0 0 10px;
}
input.special
{
background: none repeat scroll 0 0 #913297;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="input">
<label>
panel 1</label>
<asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
Width="200px" Height="70px">
<asp:Literal ID="lt1" runat="server" Text="Panel left" />
<asp:HyperLink ID="hl1" runat="server" Target="_blank">
<asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<div class="flclass">
<p class="imageDetails">
<asp:Literal ID="lt4" Text="what to write here?" runat="server" />
</p>
</div>
<label>
small image</label>
<asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<asp:Literal ID="lt2" runat="server" Text="Panel right" />
<asp:HyperLink ID="hl2" runat="server" Target="_blank">
<asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<p class="imageDetails" style="margin-top: 5px">
<asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
<div class="input" style="margin: top">
<label>
</label>
<asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" />
<asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" />
<asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
Style="margin-top: 26px; margin-left: 10px" Visible="true" />
</div>
</div>
</form>
</body>
</html>
Change ur code
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
For future viewers, I found that this works better:
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.
Related
I have 2 buttons that need to be on the right hand side of a form and have a label on the right. The problem I am running into is that once the action has been performed, the label will read "successfully ...." or "error couldn't..." and it screws up my layout. when the form first appears it screws up my button layouts because the label is empty, then when the action has been performed, my label gets populated with text and then pushes my buttons into the right place. Is there a way to to keep my buttons in place?
Here is my layout:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dropDownList" style="position: relative;" runat="server">
<label>
Select New File:
</label>
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display"
DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" OnSelectedIndexChanged="ddlCaseFiles_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlCaseFiles"
ToolTip="Casefile Required" InitialValue="-1" Text="*" Display="Dynamic" />
<ajaxToolkit:ListSearchExtender ID="ddlExtCaseFiles" runat="server" PromptCssClass="ListSearchExtenderPrompt"
TargetControlID="ddlCaseFiles" BehaviorID="ddlExtCaseFiles" Enabled="True" />
<br />
/////////////////////////area of interest
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative;
float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative;
float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
<asp:Label runat="server" ID="lblStatus"></asp:Label>
<br />
///////////////////////////////////////////////
</div>
</ContentTemplate>
I'm trying to get the buttons to light up under the dropdownlist and have the Label show on the same line as the buttons but on the left. (this code has the label on a new line because I gave up)
You can set your controls in table cells , and fix the width of cells.
Nota : you can fix width with css class.
<table>
<tr>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative; float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
</td>
<td>
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative; float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
</td>
<td>
<asp:Label runat="server" ID="lblStatus"></asp:Label>
</td>
</tr>
</table>
I'm trying to learn CSS3 and get away from using table tags. Working with Visual studio 2010, .net 4.0 and vb.nt in an asp.net project. I have a listview that i'm trying to get the rows to alternate color. What i have works but only partially. What is rendered to screen is several rows that have wrapping text. The shading is only effecting a small line across the screen.. it does not cover the entire row. Here is the code:
div.row
{
clear: both;
padding-top: 5px;
}
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
div.row span.label
{
float: left; /*width: 100px;*/
text-align: right;
padding-right: 5px;
font-weight: bold;
}
div.row span.cell
{
float: left; /*width: 335px;*/
text-align: left;
}
Here is the markup:
<ItemTemplate>
<div class="row" >
<span class="cell" style="width: 200px;">
<asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text='<%# databinder.eval(container.dataitem,"Title")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
-
<asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
-
<asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
</span>
<span class="cell" style="width: 350px;">
<asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
</span>
<span class="cell" style="width: 50px;">
<asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text="Delete" />
</span>
</div>
</ItemTemplate>
anyone know what i'm doing wrong. I tried to use the alternatingItemTemplate but could not get it to shade. In that senerio.. i did a
<div class="row" style="background-color: #C0C0C0;">
any help would be great.
To have your background shading do what you want, try modifying this style:
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
to be this:
div.row:nth-child(1n+3) span
{
background-color: #C0C0C0;
}
to actually apply the background color to the spans that contain the content.
I’m trying to stack the #Direction Div on top of the two other Divs #Ratedpics and #Mainpics. I want them to be centered on each other. Also when the page resizes I want them to move proportionally with the page. Is this possible?
Rated pics and Main pics need to be side by side. Directions need to be centered on top.
div#MainPics
{
height: 650px;
width: 60%;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
margin-left: auto;
margin-right: auto;
}
#ratedpic
{
position: relative;
float: left;
width: 22%;
}
div#Direction
{
width: 20%;
margin-left: auto;
margin-right: auto;
}
<div id="Direction">
<asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large"
Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label>
</div>
<div id="ratedpic">
<p>
<asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label>
</p>
<asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br />
<asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label>
</p>
<asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" />
</div>
<div id="LeftPic">
<p>
<asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label>
</p>
<asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" />
</div>
</div>
HTml Output
<div id="Direction">
<span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span>
</div>
<div id="ratedpic">
<p>
<span id="MainContent_RatedPicnameLabel">Margaret</span>
</p>
<input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$RatedImage", "", false, "", "Member.aspx?UserID=9", false, false))" style="width:70%;" /><br />
<span id="MainContent_RatedPicRating">Banged: 52%</span><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span>
</p>
<input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$FirstPicLink", "", false, "", "default.aspx?yesId=7&noId=7", false, false))" style="width:90%;" />
</div>
<div id="LeftPic">
<p>
<span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span>
</p>
<input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$SecondPicLink", "", false, "", "default.aspx?yesId=12&noId=7", false, false))" style="width:90%;" />
</div>
</div>
If I understand your question correctly, you'll need an extra wrapper around ratedpic and mainpic: http://jsfiddle.net/rgq4d/
I would also strongly recommend to make your CSS ID's all lowercase, in order to prevent typos.
i am trying to align a few buttons in my asppanel. So but1 and but3 need to be left aligned?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.flo
{
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel CssClass="fl0" ID="pnl1" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<div style="margin-top: 0px; margin-left: -28px; float:left">
<asp:Button ID="Button1" runat="server" Text="but1" />
<asp:Button ID="Button2" runat="server" Text="but2" Visible="true" />
<asp:Button ID="Button3" runat="server" Text="but3" Visible="true" />
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
try this:
div style="text-align:left; padding:10px 0 0 0;">
<div style="padding:3px 0 0 0; height: 36px;">
<asp:Button ID="Button1" runat="server" Text="but1" />
<asp:Button ID="Button2" runat="server" Text="but2" Visible="true" />
<asp:Button ID="Button3" runat="server" Text="but3" Visible="true" />
</div>
</div>
I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>