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.
Related
Having an issue trying to figure out why this is affecting the AJAX control the way it is.
When I remove the CSS file it displays correctly.
CSS File
.tdMain
{
width:452px;
font-family:Arial;
font:bold,small;
}
.tdInput
{
width:324px;
font-family:Arial;
}
.center
{
margin-left:auto;
margin-right:auto;
width:50%;
}
table
{
border-collapse: separate;
border-spacing: 0;
border: 0;
width:752px;
}
ASPX
<tr>
<td class="tdMain">Date:</td>
<td>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:ImageButton ID="imgPopupDate" ImageUrl="~/Images/calendar.png" ImageAlign="Bottom" runat="server" />
<ajaxToolkit:CalendarExtender ID="cDate" PopupButtonID="imgPopupDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy"/>
</td>
</tr>
The CalendarExtender generates a table. You are setting all tables on your page to a width of 752px including the one generated by the CalendarExtender.
table
{
...
width:752px;
}
you need to be more specific with your css selectors. Give the table that you wish to have a set width a class or id and use that as a selector.
table.myTable
{
...
width:752px;
}
or
table#myTable
{
...
width:752px;
}
I have problem with absolute positioning DIV over the table element. I have a DIV that’s set the position absolute and set the top position to display the exact place. Now what happened in chrome browser while zooming (ctrl +) the DIV position has been changed at zoom level 125, 150, 175 ... etc. But Zoom level 100,200, 300… (Multiple of 100) it’s displayed the same position. The problem was other than the multiple of 100 zoom level the DIV position changed. How can I fix this issue ?
I have created the sample page in jsfiddle - demo . please run the page in chrome browser and zoom the browser ( ctrl + ) the red color DIV position will be change, this is the issue. I really hope someone find a solution for this.
HTML :
<div class="container">
<table width="700px" class="custom">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<div>
<div class="apptest"> </div></div>
CSS :
table
{
border-collapse:collapse;
}
.custom tr td
{
height:20px;
border:1px solid;
background-color:White;
}
.container {
position: relative;
}
.apptest
{
height:70px;
width:400px;
position:absolute;
top:185px;
left:0px;
background-color:Red;
}
Link : http://jsfiddle.net/mJcsb/5/
Use a container with a style like this;
.Container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
I'm not going to debate whether tables are a poor choice or not these times. But an absolute positioning here is a pretty bad idea.
I don't know what you have to do and what is your aim, but you could have a different (and probably better) solution using divs; in that case, a div containing your "red" div would just.. contain it, heh!
If you want to go anyway with absolute positioning and tables, be aware that this is a dirty solution and could break anytime. In that case, I'd suggest you to go with percentage-based absolute positioning, so that the box flows with the zoom (that is, by the way, difficult to predict and normalize in every browser).
i.e.
.apptest
{
height:70px;
width:400px;
position:absolute;
top:61.2%;
left:0px;
background-color:Red;
}
A fork of you fiddle with percentage for absolute positioning (POOR SOLUTION WARNING HERE): http://jsfiddle.net/U4TGd/
Keep in mind that, again, this is a bad solution and mixing percentages and pixels in often a bad idea. If you have time or possibility, convert your table-based design and use divs instead of tabs.
Its not the div position which was changing, the one which our eye relates the div position was changing(in this case the table border of each cell).
I found out this with some testing,
use this css to know that the absolute position div is in exact position.
.custom tr td {
height:20px;
border:0px solid;
}
.container {
position: relative;
height:185px;
background:#0F6;
}
.apptest {
height:70px;
width:400px;
position:fixed;
top:185px;
left:0px;
background-color:Red;
}
So you have no problem with absolute positioning DIV, but maybe chrome rendering the table cells differently.
I am using trying to style a .NET DropDownCheckList control to stylistically and functionally fit in one of my user controls.
Currently, I'm working the DropDownCheckList implementation as follows (I plan to convert the table structure to <div> and CSS styling once I figure out how to resolve the issue):
<asp:Panel ID="CmbCkBxPanel" runat="server" Height="20px" Width="160px" BackColor="White">
<asp:HiddenField ID="hfEmptyText" runat="server" />
<table id="CmbCkBxTable" style=" background-color:White; table-layout: fixed; height: 20px; border-collapse: collapse; border-style: solid; border-width: 1px; border-color:Black;" cellspacing="0" cellpadding="0" width="100%" runat="server">
<tr id="rowDD" style="border-style: none;background-color: White;" runat="server">
<td style=" white-space:nowrap;" valign="middle"><asp:textbox id="DDTextBox" ReadOnly="true" style="cursor: default; vertical-align:middle;" runat="server" Width="100%" ToolTip="" BackColor="White" font-names="Arial" BorderColor="Transparent" BorderStyle="None" ></asp:textbox></td>
<td id="colDDImage" width="16">
<asp:Image ID="btnImage" runat="server" /></td>
</tr>
</table>
<div style="z-index: 200; background-color: White; display:none; border-style:solid; border-width:thin; border-color:Black;" id="listdiv" runat="server">
<asp:CheckBoxList ID="CBList" runat="server" width="100%" style=" text-align:left; background-color:White;" RepeatColumns="1">
</asp:CheckBoxList>
</div>
</asp:Panel>
On page load, the control looks like this (note that I'm using it for the Account and Brand filters):
When I select the dropdown, however, it pushes the whole div downwards like so:
Question: Is it possible to overlap the div below, rather than pushing the blue container div downwards? Or is this an issue with the structure of my page?
If you need the container divs and their respective CSS to help me troubleshoot, I can include those.
Thanks!
If you don't want a div to occupy space in your page then you need to set it's position to absolute.
I have a link and an iframe side-by-side. I want the link to appear over the iframe. This occurs inside of a td element. this pattern is iterated over a few rows. When I use relative css positioning, I am able to display the link over the iframe, but the space the link would have been in, still appears. and it add unnecessarily to the column height. I want to eliminate this space. How can I do this?
I looked at this but it seems that this solution would still jack up the tr/td height. I also have a sample of my issue
Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/
HTML
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.google.com" ></iframe>
</div>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.donotwant {
border:2px dotted green;
}
.top {
top:80px;
left:120px;
position:relative;
z-index:2;
background:red;
}
.bottom {
position:relative;
z-index:1
}
.collapse {
line-height:0px;
}
Change your HTML to this
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe src="http://www.google.com" ></iframe>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</td>
</tr>
</tbody>
</table>
And you CSS to this:
.donotwant {
border:2px dotted green;
position:relative;
height:180px;
width:300px;
}
.top {
top:80px;
left:120px;
position:absolute;
z-index:2;
}
.bottom {
position:relative;
z-index:1
}
A relative position object keeps it's initial placement but is displayed elsewhere. An absolute positioned element is actually moved to a new position. You can move absolute positioned elements on top of relative positioned.
In the example above I created a div that is relative positioned in which any absolute position element can be moved around from of the top left corner of the relative positioned element. If the relative positioned element is moved anywhere else on the page the absolute one will follow.
That unwanted space is from the DIV element you have wrapped around you link. Remove that.
http://jsfiddle.net/saad/grs53/12/
Just collapse the <div /> that holds the link (e.g. set height to 0). Cross browser might require additional styles but here is an example tested in Chrome
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"