During the work on my Asp.net project I came across the following problem:
I have an html <span> located on html <table> that located in an <asp:Panel>, and I want that the position of the <span> in the table will be according its text.
Explanation:
The text shown in the yellow rectangle is the text of the <span> and the long red rectangle is the table that contains the <span>.
The text of the <span> is changed by a button click, like in the following picture:
As we can see in the picture, the text on the <span> is changed, and now the text is longer than before, so I want the <span> to move right instead of became larger to the left direction, I mean: I want that when the text on the span is long then the <span> will move to the right.
I know, in Windows Forms U can make something like that in less than a second, but in HTML and CSS, I can burn hours on the computer and still there is no solution.
My HTML / CSS code:
<form id="mainForm" runat="server">
<asp:Panel ID="main" runat="server" CssClass="main-style">
<table id="details" style="position: relative; width: 95vw; height: 26px; margin-left: auto; margin-right: auto; margin-top: 30px">
<tr>
<td style="border: solid red 1px;">
<span id="userNameLabel" runat="server" style="color: powderblue;" class="username-label-style">XXXXX</span>
</td>
</tr>
</table>
<style>
THE PANEL STYLE HERE - NOT IMPORTANT NOW.
.username-label-style {
background: Transparent;
top: 0px;
float: right;
margin-right: 0;
width: 100px;
height: 26px;
font-family: Arial;
font-size: large;
}
</style>
</asp:Panel>
</form>
I tried by using the margin-right property, but nothing. Any suggestions?
Related
<form id="form1" runat="server">
<div>
<div style="height: 350px; width: 250px; background-color: #ECECEA; color: #993399">
<div class="image">
<asp:Image ID="imgteacher" runat="server" Height="150" Width="250" /></div>
<div style="margin-left: 3px">
<div style="font-size: 28px">
<asp:Label runat="server" ID="lblname" Text="Mobile Web Development"></asp:Label></div>
<div style="margin-top: 140px; float: left">
<asp:Label ID="lbldate" runat="server" Text="01.04.2014"></asp:Label></div>
<div id="detail" style="margin-top: 150px; font-size: 20px; color: Fuchsia; margin-left: 190px">
Detail</div>
</div>
</div>
</div>
</form>
I am developing in Asp.Net .
I have so problem.
As shown above code margin-top for lbldetail is 140px. At this time it is on the bottom of gray window.
But here lblname can be change by user.
User can add long name as lblname. At this time lbldetail goes downwards and exits border of gray window.(if lblname would be little , at this time it goes up toward as shown picture)
But I want lbldetail's place would not be depend on lblname and its place would be constant(bottom of gray window)
I hope I could explain.
The div with id "detail" needs position absolute. and as Murali Murugesan said, you do need to lose the inline styles and use a CSS file.
div#detail
{
position:absolute;
top:330px;
font-size: 20px;
color: Fuchsia;
margin-left: 190px
}
You can find the example at: http://jsfiddle.net/9Bkha/
I have a header div on top of the page with Position: fixed in the master page.
In the content page, I have a modal Popup, that I would like to consume most of the screen, but the popup shows from the point where the header div ends (i.e., from the top)
I have this css for the popup and popup background classes...
.modalBackground {
background-color: #AAAAAA;
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70);
}
.modalPopup {
position: relative;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
}
and this css is generated (after the modal popup is shown) for modal background:
{
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
width: 1003px;
height: 598px;
}
UPDATE 1
Here is the ModalPopup markup:
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
and the Panel markup:
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
UPDATE 2
There is a menu in the Header, which also needs to be displayed. I am thankful to all the efforts made by people specially by __.
I am going to share a screenshot of the popup in a few minutes
UPDATE 3
Attaching source code after Viewing source code from Chrome...
Source Code
UPDATE 4
Attaching the corresponding CSS files...
Menu.css
Default.css
When you have the following HTML structure:
<div class="header">
here is your header content
</div>
<div class="content">
here is your model somewhere
</div>
And your .header has an z-index:2; and your .content has an z-index:1; the content inside this division (and maybe in this case your model) will always appear below your header.
I cannot think of anything else in this case.
For future questions, I highly recommend posting the generated HTML client code as well since that is what the CSS is acting upon. It will help people understand the problem faster and find a solution faster.
Without seeing your full source or client HTML, this is all speculation; however, I believe your issue is related to the stack(ing) order.
Basically, what I imagine your setup to be (especially judging by your response to Rens Tillmann's answer) is the following:
HTML:
<div id="header">
...Fixed content showing above modal popup...
</div>
<div id="content">
...Modal background element + Modal popup content...
</div>
In this case, if #header has a z-index greater than that of #content's z-index (assuming #content has proper stacking context), then the fixed header will always show up above the modal content because the modal content is in a subcontext of #content's stacking context. This means that no matter what z-index you give the modal content, it will always be below #header.
Here is a JSFiddle to illustrate the issue.
So, what can we do? There are four solutions to get the modal content above #header that I can think of at the moment.
Solution 4 is the easiest potential solution if your website design allows it.
Solution 1:
Make #content have a higher stacking order than #header. This is not the answer, because I am assuming we need #header to float above #content.
Doing it this way will have the normal content show up above the header content.
JSFiddle to illustrate why this won't work.
Solution 2:
Put #header into the same stacking context as the modal. This can work; however, depending upon how your webpage is laid out in HTML and CSS, this may not be possible.
To put #header into the same stacking context as the modal, the easiest way would be to move it to be a sibling element of the modal.
JSFiddle to illustrate this solution.
Another potential drawback of this solution is that it may be semantically confusing to have your header inside your content.
Solution 3:
Put the modal background + content into the same stacking context of the #header element. Depending upon how your ASP.Net code is set up, this may not be possible. I don't fully grasp how AjaxControlToolkit works; so I don't know if this is possible or not.
The easiest way to do this would be to move the ModalPopup and Panel markups to be siblings of the #header element.
HTML:
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
If you do this, their z-index values will be in the same context and can affect each other.
Here is a JSFiddle to illustrate this in action.
Note 1:
In Solution 3, you can also put the modal in a stacking context higher than #header's stacking context and it will still work.
For example, this would also work (assuming the modal has a higher z-index than the #wrapper element):
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="wrapper">
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
</div>
Note 2:
To be in the same stacking context, you do not have to be sibling elements. You should have sibling stacking contexts though.
For example:
<div class="has-stacking-context" style="z-index: 2;">
(stacking context sibling 1)
...content will show in middle...
</div>
<div class="no-stacking-context">
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 3;">
(stacking context sibling 2)
...content will show above everything...
</div>
</div>
</div>
<div class="has-stacking-context" style="z-index: 1;">
(stacking context sibling 3)
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 100000;">
(subcontext of sibling 3's stacking context)
...content will show below everything...
</div>
</div>
</div>
Moving elements physically (as I've done in Solution 2 and 3) just side-steps any need to remove various stacking contexts to get two stacking contexts to be siblings. Sometimes it is not possible to remove the stacking context of some elements.
Solution 4 (can it be this simple?):
This is basically another way of doing Solution 3. Instead of physically moving the modal elements to match up the stacking contexts, we eliminate stacking contexts blocking the #header and modal element stacking contexts from being siblings.
Depending upon how your CSS is set up, this may or may not work.
For example, it may be possible to just remove the #content element's stacking context so that they become stacking context siblings.
Here is a JSFiddle to illustrate the easiest potential solution.
Notice that I removed the z-index property (and position property) of the #content element. It now has no stacking context. You can do this to all ancestor elements of the modal elements to see if it works. Keep in mind though that some of those ancestors may actually need their stacking contexts...
Final Solution (after chatting with you):
So, after looking at your code. I basically solved the issue using Solution 4. Your structure looks like the following:
<div class="HeaderContainer">
</div>
<div id="contentAreaMasterPage">
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_foregroundElement" style="position: fixed; z-index: 100001; left: 38.5px; top: 10px;">...</div>
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_backgroundElement" class="modalBackground" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1003px; height: 601px;"></div>
</div>
Because .HeaderContainer has a z-index of 10 and #contentAreaMasterPage has a z-index of 9, everything inside #contentAreaMasterPage will always show up below .HeaderContainer1. So even though the two modal elements have z-index values more than 100 times that of .HeaderContainer's z-index of 10, they will always show up below it because they're inside #contentAreaMasterPage's z-index of 9.
Thus we want to get rid of #contentAreaMasterPage's z-index so that it no longer has a stacking context to get in-between .HeaderContainer's and the modal elements' z-index values. It's safe to remove the z-index in this case because .HeaderContainer will show up above #contentAreaMasterPage anyway without #contentAreaMasterPage needing a lower z-index.
The related solution CSS code is thus simply:
#contentAreaMasterPage {
z-index: auto !important;
}
Which goes inside your specific page since you cannot modify the master template nor the master CSS file.
try with position: relative; instead of position: fixed;
.modalPopup {
position: absolute;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
}
{
position: relative;
left: 0px;
top: 0px;
z-index: 10000;
width: 1003px;
height: 598px;
}
for example
<tr>
<td colspan="2">
<asp:Button ID="btnSurveyId" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mpeSurveyId" runat="server" TargetControlID="btnSurveyId"
CancelControlID="imgCloseSurveyId" BackgroundCssClass="modalBackground" PopupControlID="pnlSurveyId"
PopupDragHandleControlID="pnlIdSurveyName" Drag="true" DropShadow="true">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlSurveyId" runat="server" CssClass="modalBox" Width="250px" Height="100px"
Style="display: none;">
<asp:Panel ID="pnlIdSurveyName" runat="server" CssClass="caption" Style="margin-bottom: 10px;
cursor: move;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr style="border: solid 1px balck; background-color: Gray;">
<td>
<strong style="color: White; vertical-align: middle;"><span id="Span2" runat="server">
Change Survey Id</span></strong>
</td>
<td align="right" valign="top" style="cursor: pointer;">
<img id="imgCloseSurveyId" alt="Close" src="../Images/close.gif" />
</td>
</tr>
</table>
</asp:Panel>
<div style="width: 100%">
<table>
<tr>
<td>
<asp:DropDownList ID="ddlSurveyName" runat="server" Width="190px" Style="margin-left: 30px;">
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<asp:Button ID="btnSubmitSurvey" runat="server" Text="Submit" Width="100px" ValidationGroup="SurveyId"
Style="margin-left: 20px;" OnClick="btnSubmitSurvey_Click" />
<asp:Button ID="btnCancelSurvey" runat="server" CausesValidation="False" Text="Cancel"
Width="90px" OnClick="btnCancelSurvey_Click" Style="margin-left: 5px;" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</td>
</tr>
In your markup:
<ajaxToolkit:ModalPopupExtender ... PopupControlID="pnlImageViewer" Y="90" ...
you have specified Y="90", this will cause the popup to display 90 pixels off the top. Please try after removing this.
apply zindex to the model popup div greater than that of background div
e.g.
.modalPopup {
position: absolute;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
z-index: 90000;
}
Try the following(worked for me):
This is the background style for the modal popup
.modalBackground
{
background-color:#414141;
filter:alpha(opacity=70);
opacity:0.7;
position:absolute;
}
Following is the style for the panel which you want to display
.Panel_Popup_Style
{
background-color:White;
}
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 some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">
I want to align my images similar to this page: http://nymanssnickeri.se/
My content div is 900px wide. As you can see, image #1 and #3 are located at the edge of the content div. On this page margin is only used on the image in the middle. If there wasnt more than 3 images, i could use first-child selector on the first image and the problem would be solved. But sometimes there will be multiple rows of images. Any ideas how to accomplish this in a good way? Thanks
You can give every image equal horizontal margins, and then on the first and last, add a class and have margin-left: 0 and margin-right:0, respectively. You'll have to play with the margin size / math a bit to get it right.
Example:
#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }
20px is just a random number I chose. It depends on your image sizes, and how many you have.
Edit:
Math for the margins (check this, just made it up on the fly):
(total container width - total width of all images ) / (total number of images - 1) * 2
If you would like to have three images per row and not have to worry about setting pixel margins to achieve the effect you can do something like this...
Demo: http://jsfiddle.net/ENQTZ/1/
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
div {
text-align: center;
margin-bottom: 20px;
}
span {
display: block;
width: 32%;
height: 100px;
background-color: red;
}
.a {
float: left;
}
.b {
float: right;
}
.c {
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
If the layout is known ahead of time, including number of photos, etc. You could use a table:
<table width="900"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>
Or you could use a div, and concatenate these to create multiple rows:
<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id="img-container">
<img class="lft"/>
<img class="mid"/>
<img class="rgt"/>
<br />
</div>
You might need to reset margins, paddings and borders to 0 on the images to use this method, otherwise the images will overflow slightly and not align correctly.
<center>
<div ID="Content" Style="Width:900px">
<center>
<table>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
</table>
</center>
</Div>
</center>
Any of this useful to you? This is my template that I use. just add more td tags for more cells, and more tr tags for more rows of images.
Further, You can style your images to the exact size they need to be, but be careful that stretching / squashing might occur
<img ID="Image" src="Image/Cat.png" alt="Cat.png" style="Width:50px;Height:50px" />