I have a single line (left screen to right side) that I want to format so that the form look justified regardless the number of elements as the style is repeated (between 2 and 5 elements)
Why are the div tags overlapping each other when I inspect the following rendered HTML?
<div class="grid_7 ">
<div class="grid_2">
<asp:TextBox ID="TextBoxFirstName" runat="server" Text='<%# Bind("F1FirstName")%>'></asp:TextBox>
</div>
<div class="push_1 grid_2 float-left ">
<asp:Label Text="Last Name: " ID="LastName" runat="server" />
</div>
<div class="grid_3 float-left">
<asp:TextBox ID="TextBoxLastName" runat="server" Text='<%# Bind("F2LastName")%>' />
</div>
</div>
[EDIT]`.float-left
{
float:left;
}
.float-right
{
float:right;
}`
.container_12 .push_1 {
left: 80px;
}
.container_12,
.container_16 {
padding: 0 10px 0 10px;
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
}
.grid_12 {
display: inline;
float: left;
margin-left: 0px;
margin-right: 0px;
}
All is wrapped in the "container_12" and "grid_12" within that container within the master page. Grids are evenly spaced portions within the container so I will not include that code. Pushes/pulls are left right movements of the div in and all defined with "position:relative" the style float-left was my attempt to manually align these divs and simply assign the property "float-left" Please let me know if more is needed.
You're going to need to provide all applicable styles from your stylesheet.
eg: grid_7, grid_2, grid_3, push_1, etc
Related
The problem I am getting is that when i am moving a DIV tag another DIV tag is automatically moving aswell which is what i don't want.
This is an image of what is on my screen now:
The Labels, Textboxes is inside 1 DIV tag, The box image is the background of another DIV tag and the button has another DIV tag.
This is my HTML code of this:
<div id="LoginBox" style="background-image: url(Image/LoginBox_v2.png); background-repeat:no-repeat; height: 500px; width: 500px;">
<div id="Information">
<asp:Label ID="lbl_Username" runat="server" Text="Username:"/>
<br />
<asp:TextBox runat="server" ID="tb_Username"/>
<br />
<br />
<asp:Label ID="lbl_Password" runat="server" Text="Password:" />
<br />
<asp:TextBox runat="server" ID="tb_Password" TextMode="Password" />
<div id="container">
<a href="bHomePage.aspx" class="button" id="buttonlogin">
Login
<span class="icons button" />
</a>
</div>
</div>
I want to be able to move the Information DIV tag down inside the box in a good position, but when i try and set the CSS the other DIV tag LoginBox moves down aswell?
Here is my CSS of all the DIV tags at the moment:
#LoginBox {
margin-left: 35%;
margin-top: 0%;
}
#Information {
margin-left: 0%;
margin-top: 0%;
height: 460px;
}
#container {
margin-left: 0%;
width: 125px;
}
Some of the CSS show 0% because i moved back to 0% when it didn't work. I have also tried moving all the objects separate but that didn't work either?
Try adding
overflow: auto;
into your parent div which is LoginBox on your code.
also its better to mention full code here. because there are 3 dives opened but only 2 closed. hope you have other one closed some ware down.
gl!
Viewing from a desktop my label and two textbox controls are aligned horizontally. However when the user views the site on mobile I would like the textboxes to stack on top of each other. I am using a media query to adjust to a mobile view. All the other lines stack fine (with the textbox under the label) The problem with the address is that I have two textboxes, I would like one on each line. Any suggestions? Any questions let me know thanks
Current CSS
.row { clear: none; width: 100%; overflow: hidden; margin: 5px 0; }
.label { float: left; text-align: right; margin-right: 10px; width: 130px;}
.value { float: left; text-align: left;}
html
<div class="row">
<div class="label">
<asp:Label ID="lblSiteAddress" runat="server" Text="Site Address"></asp:Label>
</div>
<div id="value">
<asp:TextBox ID="txtSiteAddress" runat="server" Width="192px" Height="22px"></asp:TextBox>
<asp:TextBox ID="txtSiteAddress2" runat="server" Width="192px" Height="22px"></asp:TextBox>![enter image description here][1]
</div>
</div >
Try this:
.value input[type='text'] {
display: block;
clear: both;
/* Additional style here */
}
Given the following markup
<div id="newItems" class="literaltext" >
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> Click
<a href="Shareholder Letter Jan 2013_Final.pdf" >here</a>
to read our President's letter to shareholder's for 2013
</p>
<br />
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> <span >Click
<a href="Calc.aspx" >here</a>
to run our <strong>Return on Investment Calculator</strong> to see how the economics of using <span class="green"><b>EnerBurn®</b></span> can work for your fleet.</span>
</p>
<br />
<asp:Literal ID="LiteralWelcome" runat="server"></asp:Literal>
</div>
and the following css;
#newItems {
display: inline-block;
}
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
}
#newItems span {
vertical-align: middle;
text-align: center;
margin-top: 0;
padding-top: 0;
}
I cannot get the text to the right of the image to align with the image. The image always appears much higher then the text. If i could vertically align the text in the middle of the height in the p tag it would at least look about right. I've tried about 50 variations, this being the latest.
vertical-align:middle;
on the img rule seems to work:
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
vertical-align:middle;
}
jsFiddle example
I'm trying to do what I thought is going to be the simples thing on earth. I'm having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).
So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.
I've been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.
I thought this should work:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
Also tried:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
z-index: 10;">
</div>
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
There is the css:
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
}
.HPimgBox
{
position: relative;
top: -10px;
right: 20px;
width: 170px;
z-index: 10;
}
Any ideas? Thanks in advanced.
Hey i think your code is some mistake please manage your code according to you and some change to your css file as like this
HTML
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
z-index: 10;">
Hello
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
</div>
Css
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color:red;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
position: relative;
}
#HPItemLink
{
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border:solid 2px yellow;
}
Live demo check here http://jsfiddle.net/8yg49/1/
I came up with a somewhat crooked idea, but i'm short in time so if it works for now it's fine with me.
I'll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.
it goes something like this:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton>
</div>
</div>
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>
This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the 'click' affect.
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.