I am coding things like this
<div class="panel">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
<legend> </legend>
<div class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</div>
<div class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</div>
</fieldset>
</div>
Do I even need a DIV around a fieldset (or a text input box, radio group, other form input element?
Erm... no. You don't have to put a div around those fieldsets.
Given that in your example there's no form elements at all, why should this even be a form? Okay, I know from your previous questions that you're trying to build a WYSIWYG form editor, but that's no excuse to use these sort of HTML.
If I clean up the example you're using, it would probably look something like:
<fieldset style="top:8px; left: 136px; width: 136px; height: 64px;">
<label class="Label" id="Label1" style="top:8px; left: 16px;">one</label>
<label class="TLabel" id="Label2" style="top:32px; left: 16px;">two</label>
</fieldset>
Since some styles are being applied more than once I believe it would be appropriate to store them in a stylesheet instead.
fieldset, label {
position: absolute;
}
You also should have no need to set explicit width and height on the labels, especially if you don't have any form of border or background.
Logically you should also group label - input pairs together, for instance with a unordered list. Remember that for accessibility you're going to need the for attribute to point to the correct input elements. It would be better to mention the context of what you're doing here.
Do I even need a DIV around a fieldset (or a text input box, radio group, other form input element?
Only you yourself can know this. But in general, no. Why not apply the style directly to the elements? A <div> around all those elements certainly seems excessive and is necessary only in rare cases.
In particular, labels on a form should be <label>s! Always use the semantically “correct” tag rather than an unspecific tag like <span> or <div>.
you could use unordered lists for displaying form elements.
that doesn't look too bad to me (other than the nasty inline absolute positioning - dreamweaver right?)
but that's fine really.
except did you know there is a <label> element?
apply a class to the and you can eliminate those two extra divs
<div class="panel">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
<legend> </legend>
<label class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</label>
<label class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</label>
</fieldset>
</div>
Divitis (IMO) is more severe like:
<div class="content">
<div class="content-body">
<div class="content-start">
<div class="title">The Title</div>
<div class="theauthor">The Author</div>
<div class="thedate"><div class="day">Thursday</div> 10th December</div>
</div>
</div>
</div>
no, you don't need a div around those elements - if you want to position them manually, you can do this with the element directly. also, if you need labels, why don't you use the <label>-tag?
It depends on what you are trying to achieve with the layout. Can we see what you're trying to do?
One thing you certainly want to do is to remove the inline styling, e.g.:
style="position: absolute; top:8px; left: 136px; width: 136px; height
Put all that in a CSS file.
Related
I have two Spans I want span1 to be exactly below span2, even if span1 changes height dynamically.
<span id="Div3" style="Z-INDEX: 126; LEFT: 8px; WIDTH: 99.06%; TOP: 5px; visibility: visible;"
runat="server" ><asp:image id="Image1"
style="Z-INDEX: 127; LEFT: 16px; right: 709px;" runat="server"
tabIndex="10"></asp:image></span>
The above Span has an image, whose height can change dynamically.
I want this span
<span>Exactly below the image</span>
to be exactly below the span in which image is placed.
Could anyone help ??
I've created 2 spans. One with a img in it, and one with h1 in it.
<span class="span1">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="">
</span>
<span class="span2">
<h1>I'm span #2!</h1>
</span>
Both of the spans i have given the display property of block. This will make them stack under each other.
span {
display: block;
}
And gave the img some widthand height.
.span1 > img {
height: 200px;
width: 200px;
}
Demo here
you forgetting about setting: position: absolute and top: on both spans. ...if you want to positioning them absolutely.
if you just want them in the document flow then remove top/left/z-index from your styles - they doesn't have any result on the outcome until you add position:absolute; or position:relative;.
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
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;
}
The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.