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
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!
It's an asp project with javascript and css. I have taken the java from this site JonDesign's SmoothGallery demo.
Now I want to put the tag p which has the summary inside, out of the div,
by the way here is the code:
<div id="myGallery">
<asp:Repeater ID="HeadLinesRepeater" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="imageElement">
<h3><%# Eval("Title") %></h3>
<div>
<p><%# Eval("Summary") %></p>
</div>
<img class="full" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' />
<img class="thumbnail" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' style="width: 100px; height: 75px" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
CSS:
.jdGallery .slideInfoZone p {
float: right;
margin-bottom: 10px;
z-index: 1000000;
position: absolute;
margin-left: 92px;
width: 300px;
right: 670px;
top: 220px;
font-family: Tahoma;
font-size: 10pt !important;
text-align: justify;
color: white !important;
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
If I change position to the fixed it will be solved but ahen the I open the site in other resolution it would be unscrambled and goes to inside other divs.
It's my project for university please help me.
Just phisycally cut the <p><%# Eval("Summary") %></p> and paste it outside the div.
EDIT
What about styling the inner p with display:none, then create your own javascript (Do you have JQuery referenced in this page?) to grab all the paragraphs and append them elsewhere in the DOM.
But really it seams (from your comment) you need to change the javascript that manipulates the parent div to not depend on the inner paragraph, or change it to work with the paragraph in a different position in the DOM.
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'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
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