Is it possible to make the table rows to overlap each other, using only css and html?
Please help. The page is here, when the user choose conditional leave, they will prompt with different additional field(s) to fill up. But I just want to know if rows can be set to overlap so the table will not be too long.
http://www.tritech.com.sg/consultants/intranet/leave_application/leave_form/index.php
Yes, it it possible using CSS and HTML to allow elements to overlap, and there are many techniques to do this, however in doing so you will cause the content of those rows to overlap. Unless you actually want to hide you content its not a good space saving technique. It would be better to reduce padding in the rows, and or cells.
Having said that..
tr
{
display:block;
position:absolute;
height:15px;
top:0px;
}
You need to set position to block to stop them acting like table rows, then position either relative or absolute depending on how you need to control them. then set the new top values to match. This style will align all table rows to the top of the table.. Important to note that the cells within the table will no longer be constrained to the element, this means they'll jump out of the table so will have to be hidden using overflow:hidden;
I hope this awnsers your question, but I would urge you to consider a better option than this. If you don't need the content to be displayed setting the elements display:none; Has a better effect and is easier to toggle either inline or as a class.
P.S would be a better example If I had sample code to use.
Related
I have the following code inside my SharePoint web page, it mainly contains a div and 5 tables inside it (the number of tables can be increased or decreased in the future).
So I want to hide all tables except the table that have its third TD tile within the first TR equals to "Pages"?
Currently I wrote the following to hide all tables except the third table, but as the number of tables may change so this will break, so I want to make my CSS more dynamic , by using the title ?
#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) {
display: none;
}
Can anyone advice?
This is not possible with CSS right now, because you want to select a specific element, the a in this case, and then actually apply CSS rules to one of its parents. CSS can (right now) only apply rules to the actually selected element.
You need Javascript to fix this issue. In MooTools for example this would work:
$$('div.thatYouAreTargeting table').each(function(t) {
if(t.getElement('a[title=Pages]'))
t.setStyle('display', 'none');
});
With jQuery it's equally simple, with native Javascript a tad more verbose.
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.
I am designing a very simple table that contains a data element's properties. This element will be used to represent each element of a AJAX response in a kind of list.
The table is using "rowspan" and "colspan" to enlarge some cells. The problem, is that when I add an element below, this element overlaps the table, I don't know why. The HTML is valid, and the rowspan attributes indicate the exact amount of rows to merge.
I have deployed an example here: http://jsfiddle.net/vtortola/KzjKg/9/
As you can see, the green block overlaps the table, and that is the thing I want to avoid.
Any idea why is this happening?
Cheers.
You've attributed max-height:50px; to the div which contains the table. Remove this CSS declaration, and the table won't be overlapped any more.
I think the problem:
1) You maybe remove the max-height where your table is more than 50px.
div.mobileRow{
width:100%;
font-family:Arial;
margin:5px;}
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?
I have an arbitrary HTML I am outputting to a page inside of a table, and I need to be able to "layer" elements over all of the links (one per link).
My current solution is to search the HTML for the links (which I have in a separate array from another source), then insert a div with a different z-index and position absolute into the HTML. This works some of the time, and breaks bizarrely other times.
Is there something that I'm missing here? I've seen nice implementations of this on various forums, but they are slightly different in that they usually require interaction from the user to come up, I want mine to be up all of the time.
Long question short, is there an easy way to do this?
Using Javascript (and specifically jQuery), yes.
There are many tooltip libraries out there.
http://plugins.jquery.com/project/tooltips
http://flowplayer.org/tools/tooltip/index.html
http://craigsworks.com/projects/simpletip/
I'd say the top one would suit your needs the best. To enable it to be "always on" you'd set the css element .tooltip as follows:
.tooltip {
display:block; // This replaces the "none" they have in the example, but the line itself isn't necessary
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
Two things come to mind to see if you get getter results. 1) have you tried relative positioning inside the table cells instead of absolute positioning? 2) is your script firing after the table is rendered? If not, be sure it runs after the entire table is rendered.