I work on C# Asp.net
Main div
---- table
want to show this div on middle of the form.i want to build a login form.my table contain
User name:**(it's a lable,on browser it's broken like user
name : show why?)**
password:
<div id="main">
<table width="600px" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="cssLabel" Text="User Name :"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" CssClass="cssLabel" Text="Password :"></asp:Label>
</td>
</tr>
</table>
</div>
want to show div on middle of the form? and why my lable text are going to broken how to solve it?
if u gone to google.com than you see text box take position on middle of the frame.i want this .i want my controls also take position on the middle of the frame.How to do that?
You can use this to show idiv n the middle of the form:-
<div style="margin-left:auto;margin-right:auto;">Put the controls here </div>
You've edited your question now so this doesn't give you the exact code you need, but would help you work it out / others who view your question with a similar problem. So here goes... you need
something like this:
<style type="text/css">
.wrp { width: 100%; text-align: center; }
.frm { text-align: left; width: 500px; margin: auto; border: 1px solid black; }
.fldLbl { white-space: nowrap; }
</style>
<div class="wrp">
<div class="frm">
<span class="fldLbl">User name:</span>
</div>
</div>
try this option, that is style the div with style="width:100%;text-align:center"
Related
I'm a beginner to HTML and CSS. I'm using jquery mobile, and jquery ui to build a page. I have added a select menu and two images as buttons next to it. I have set a border width of 1px to see the layout. As it is seen in the picture below select menu border is extended and covers the images so I can't click on them.
select menu border covers image
This is the html
<div id="container" >
<img src="styles/add_button.png" id="addButton" class="imgButton">
<img src="styles/remove_button.png" id="removeButton" class="imgButton">
<form>
<select name="select-native-1" id="selectMenu">
</select>
</form>
</div>
this is the CSS
.imgButton{
float : right;
margin: 0em .2em;
}
#container{
vertical-align: middle;
margin:0em 1em 1em 1em;
}
#selectMenu{
float: right;
}
What is the problem here?
I find tables to be the easiest way to properly align things. Try this...
<table><tr>
<td><select name="select-native-1" id="selectMenu"> </select></td>
<td><img src="styles/add_button.png" id="addButton" class="imgButton"> </td>
<td><img src="styles/remove_button.png" id="removeButton" class="imgButton"></td>
</tr> </table>
And then add widths to the td elements to give it the look you want.
I have a markup which contains div with some images as shown. Currently each section of div appears vertically. But, i want to show the items on left & text on right as shown in screen dump.
HTML Markup:
<div id="divgetpaidnow" style="float:none;width:200px;" class="paymentclass" paytype="GetPaidNow" paytypeid="1">
<asp:Image ID="Image1" src="images/getpaidnow.jpg" runat="server" class="paymentimg" />
<div>
</div>
<asp:RadioButton ID="rdo1" Text="Get Paid Now" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText" style="float:none;"> <strong>Get Paid Now:</strong><br />
Instant Cash, visit one of our Mall Locations and get Paid Today
</div>
</div>
<div id="divamazon" style="float: none;" class="paymentclass" paytype="Amazon" paytypeid="2">
<asp:Image ID="Image2" src="images/amazon.jpg" runat="server" class="paymentimg" />
<div style="margin-top: 10px;">
</div>
<asp:RadioButton ID="rdo2" Text="Recommended" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText">
<strong>Amazon Gift Card:</strong><br />
Get paid quickly via electronic gift card and receive an extra 5%</div>
</div>
css:
.payTypeFooterText
{
width: 120px;
font-style: normal;
font-size: 10px;
}
.myradio
{
color: grey;
font-size: 12px;
text-decoration: none;
}
Just these two css other class names are used for accessing elements using JQUERY.
Help Appreciated!
You can use css property float to align content on pages
<div>
<div style='float:left;'>
----content---
</div>
<div style='float:right;'>
----content---
</div>
</div>
Have a common class for all the divs and use display:inline-block
div{
display:inline-block;
background:red;
}
DEMO
Why are my images overlapping my words? Below is the CSS of 5 different images and 1 table.
#memberreporthistoryimage1 {
position:absolute;
left:20%;
}
#memberreporthistoryimage2 {
position:absolute;
left:40%;
}
#memberreporthistoryimage3 {
position:absolute;
left:60%;
}
#memberreporthistoryimage4 {
position:absolute;
left:30%;
margin-top:20%;
}
#memberreporthistoryimage5 {
position:absolute;
left:50%;
margin-top:20%;
}
#memberreporthistorytable2 {
position:absolute;
width:100%;
}
as you can see i used my position as absolute. Therefore if i have not mistaken, the position of my second table should be going according to my image width and height since the memberreporthistorytable2 is below my images. Unfortunately, it doesn't. As you can see from the image below, it overlaps as soon as i click some data.
This is the layout when no data is being clicked
Here is the image where it overlap.
I tried adding the margin-top which obviously will extend the distance of the table from the images. However, i'm trying to make it look dynamic. Which means, the table 2 will change accordingly automatically when i clicked a data.
#memberreporthistorytable2 {
position:absolute;
width:100%;
margin-top:30%;
}
Under my source code
<tr>
<td id="memberreporthistoryimage1">
<asp:Image ID="Image1" runat="server" />
</td>
<td id="memberreporthistoryimage2">
<asp:Image ID="Image2" runat="server" />
</td>
<td id="memberreporthistoryimage3">
<asp:Image ID="Image3" runat="server" />
</td>
<td id="memberreporthistoryimage4">
<asp:Image ID="Image4" runat="server" />
</td>
<td id="memberreporthistoryimage5">
<asp:Image ID="Image5" runat="server" />
</td>
</tr>
I have placed all my image in a td. All the td are under a tr. So i believe by wrapping my picture 1 by 1 and placing it to the place i want doesn't work as it is what i have been doing.
May i ask where have i done wrong to let it change the position dynamically apart from the position absolute?
Regards.
This happens because you're absolute positioning for images. Better wrap those images inside a div, then place it where you want.
Like happens to all of us sometimes, I inherited some crappy code I have to fix.
We need to center our pages on widescreen machines, so we have a master page layout div like so:
.MasterLayout
{
width:1100px;
height: 100%;
position:absolute;
left:50%;
margin-left:-550px;
vertical-align:top;
}
I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out:
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 100%" align="center" colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; background-color: #333;">
<asp:SiteMapPath/>
</td>
</tr>
<tr>
<td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top">
<asp:Menu />
<asp:SiteMapDataSource />
</td>
<td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>
</td>
</tr>
</table>
When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE
Try centering the .MasterLayout using margin: 0px auto instead of the negative margin method.
While you're updating the code, you might also consider using divs instead of tables for page layout.
Put contentPlaceholder in a div and control the overflow with css overflow property of that div. I suggest you to use width of main block like #masterlayout, #sidebar in %.
How to align text within a FooterTemplate cell in a GridView
I tried the following but the text is still centered (there is a parent center tag):
<FooterTemplate>
<span style="size:100%; padding:0; text-align: right">Total: </span>
</FooterTemplate>
In the parent column of the template try setting FooterStyle-HorizontalAlign="Right"
Maybe
<FooterTemplate>
<div style="text-align: right;">
<span>Total: </span>
</div>
</FooterTemplate>
works as you want.
Use display:block which replaces size:100% (which doesn't exist, AFAIK)
<FooterTemplate>
<span style="display:block; padding:0; text-align: right">Total: </span>
</FooterTemplate>
The Grid-view would in the end be rendered as a table itself hence, using basic CSS selectors, we can solve the problem, I used the following to fix the same problem that I was facing, hope it helps anyone else looking for this thread
tr:last-of-type td {
align-content: center;
vertical-align: middle;
text-align: center;
}
Hope that helped.