I have a small problem.
<div style="height:500px; overflow:hidden">
<table style="height:1000px">....</table>
</div>
overflowed parts of table are visible. how can I fix this
Updated:
My code is exactly like this:
<style>
#trademark img{
width:300px;
height:250px;
box-shadow: 0px 0px 50px #888888;
}
</style>
<div id="trademark" style="height:570px; overflow:hidden; background-color:#F00">
<table id="trade_content" style="position:absolute; margin-left:103px;" border="0" cellpadding="15">
<tr>
<td align="center"><img src="1.png"></td>
<td align="center"><img src="2.png"></td>
<td align="center"><img src="3.png"></td>
</tr>
</table>
</div>
you have added position:absolute; in table so to hide the overflowed parts of table you need to add position:relative; in parent <div id="trademark">
hope this will solve your issue.
The problem with your code is that the div should have a max-height in the style to make the overflow work. This means that your code should look like this:
<div style="max-height: 500px; overflow: hidden">
<table style="height: 1000px">....</table>
</div>
Let me know if it works. In case, give a look at this previously asked question.
It seems that the problem happens when using position:absolute
after removing it everything is working fine thank you all...
Related
A typical css alignment problem:
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>
<div>text</div>
<div ></div>
<img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
</td>
</tr>
</table>
http://jsfiddle.net/R5TAY/
How would I make the image always appear on the bottom of the table, and the text to stay in the middle?
Thanks
Based on your example, you could use positioning to achieve what you want:
td {
position:relative;
}
img {
position:absolute;
bottom:0;
}
jsFiddle example
You can set the vertical-align css property:
#your_td {
vertical-align: bottom;
}
See this FIDDLE
Set valign to bottom
<td valign="bottom">
Hope this helps
I don't understand why the table headers are shifting when there is vertical scroll bar attached to table.
Here is my html code:
<div >
<ul class="nav nav-tabs" id="tab123" style="margin-top: 26px;">
<li><a href="#div1" data-toggle="tab" >Tab1</a></li>
<li><a href="#div2" data-toggle="tab" >Tab2</a></li>
</ul>
<div class="tab-content" style="overflow: hidden; margin-left: 20px; height: 504px;">
<div id="div1" class="tab-pane">
<div style="overflow: hidden;margin-top: 10px;" >
<table style="width: 100%" border = "1">
<thead><tr>
<th style="padding: 0px;width: 0px;visibility: hidden"></th>
<th style="padding: 0px;width: 130px;text-align: left">Text1</th>
<th style="padding: 0px;width: 181px;text-align: left">Text2 </th>
<th style="padding: 0px;width: 85px;text-align: left">Text3 </th>
<th style="padding: 0px;width:0.5px "></th>
<th style="padding: 0px;text-align: center;width: 70px">Text5</th>
</tr>
</thead>
</table>
</div>
<div style="overflow: auto;height: 50px;" class="tab-pane">
<table id ="tblSysDetails" style="width: 100%;float: left" border ="1">
<tbody >
<tr >
<td style="padding: 0px;width: 0px;visibility: hidden" ></td>
<td style="padding: 0px;width: 130px;text-align: left" >BBB</td>
<td style="padding: 0px;width: 181px;text-align: left" >CCC</td>
<td style="padding: 0px;width: 85px;text-align: left" >DDD</td>
<td style="padding: 0px;width: 0.5px"></td>
<td style="padding: 0px;text-align: center;width: 70px" >XXX</td></tr>
</tbody>
</table>
</div>
</div>
<table style="width: 95%" id="tblCountSysTableChanges">
<tr><td style="font-weight: bold;text-align: right">456 </td></tr>
</table>
<div id="div2" class="tab-pane">
<table>
<tr>
<td>AAAAAAAAA</td>
</tr>
</table>
</div>
</div>
</div>
Here are my fiddles
.1 This one is without vertical scroll bar
2. This is with vertical scroll bar . This second fiddle is shifting columns.
Can someone tell why and how to avoid it?
The why is because there is not enough room within the parent for the scrollbar to fit, thus it shrinks the other elements a little to make room
The only way I know to avoid it without changing the scrollbar would be to hide the scrollbar unless the tbody is hovered, like this. This uses overflow:hidden on the tbody unless it is hovered, then it changes to overflow-y:scroll (which doesn't affect positioning or width of the elements when toggled like this)
Following is my added CSS (mostly just the inline stuff moved into an external CSS file), you can look at the jsFiddle for the updated HTML
th, td {
padding:0px;
margin:0px;
text-align:left;
}
th:nth-child(1), td:nth-child(1) {
width:0px;
visibility:hidden;
}
th:nth-child(2), td:nth-child(2) {
width: 130px;
}
th:nth-child(3), td:nth-child(3) {
width:181px;
}
th:nth-child(4), td:nth-child(4) {
width:85px;
}
th:nth-child(5), td:nth-child(5) {
width:.5px;
}
th:nth-child(6), td:nth-child(6) {
width:70px;
text-align:center;
}
tbody {
overflow:hidden;
}
tbody:hover {
overflow-y: scroll;
}
thead > tr, tbody{
display:block;
}
The approach was found in this SO post, another option would be to create a custom scrollbar but that requires a bit of javascript to do as the top answer on that question says
I am not quite sure why you used two tables... Probably to keep the head in place... But I put them both together and used the approach described here (found by a simple Google search) to fix it
With that being said, there are some other CSS basics that you really need to pick up. Following is a list of some and reasons why
Use classes and other generic selectors It saves time, is better structured, and is easier to follow than inline CSS
Tidy up your code! When I first looked at your jsFiddle the spacing was off a lot which makes it hard to follow and read. jsFiddle even has a "TidyUp" Button; Use it!
Know what something does when you put it in your code If you use padding, know what padding does. If you use IDs, know the reason why. The same goes for javascript or any other language you are using. It allows you to find the root of the problems you're having, avoid errors in the first place, and use things the way that they are supposed to be used
If you think there could be a better way to do something, look for it If you're tired of writing the same 5 styles for a block of elements, there probably is something that allows you to apply the 5 styles in only 1 line (a class). This is just an example, but the principle applies to anything. If you've thought of it, most likely someone else has too
Avoid inline CSS as much as possible It makes finding and fixing problems difficult, especially when you have lots of elements styled the same way. It also overrides non-inline CSS which can cause a whole lot of problems if you're not careful
DON'T REPEAT IDS It took me around 10 minutes to fix a formatting error because I didn't realize you repeated the ID tblCountSysTableChanges twice. It causes all sorts of errors and is illegal markup
I hope you learned some things and keep them in mind! Cheers! (:
i need to create CSS divs.
one up the top for the header (full width)
one on the left (180px) for the vertical menu
and one to the right for the main content
the menu on the left will be an iframe and then the one on the right will also be an iframe.
I currently have this code:
<style type="text/css">
body,html {
height:98%;
}
#top-bar {
width:100%;
padding:10px 10px 10px 10px;
margin:0 0 10px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
position:fixed;
z-index:999;
}
#right-bar {
margin-left:180px;
width:auto;
display:inline;
}
#space {
width:100px;
height:120px;
}
</style>
<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
</table>
<div id="space"></div>
<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>
but the right content seems to be going under the left menu
i need the top header (currently in the table) to not move when scrolling and the same for the left menu bar and needs to be % so it can all fit on different size screens.
anyone have any ideas what i can do with it?
To start with, move the styles into a separate style sheet and link to this from the <head> of the page. Don't use the <style> element because it's a pain to maintain and results in duplication across pages. The <style> element should not be in the <body> of the page.
Also, don't use tables for layout. It's not semantic.
There's no point making a floated element inline. It won't be inline. If those inline elements weren't floated, the width's you've specified wouldn't be applied. Also, don't use the style attribute on elements - use CSS.
These suggestions probably won't fix your specific issue, but everything's a bit of a mess at the moment, so I think you've got bigger issues to fix at this point...
Try out with the changes below,
<div id="left-bar">
<iframe src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
<div id="right-bar">
<iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
#left-bar {
width: 20%;
........
}
#right-bar {
width: 80%;
.......
}
Note: Never use tables for the alignment of contents in a page. Always use divs with the css defined in .css file with the proper 'class' property defined for div tags.
Can #parent div resize by #child div (*when #child div use position:absolute;)
just like #t_parent table is resize by #t_child table
<div id="parent" style="position:relative; width:500px; height:500px; border:#F00 3px solid;">
<div id="child" style="position:absolute; left:20px; width:800px; height:500px; border:#06F 3px solid;"></div>
</div>
<table id="t_parent" width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="t_child" width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>TEXT</td>
</tr>
</table>
</td>
</tr>
</table>
If there is fixed width/height - no, you cant resize.
position absolute inside of position relative make the div detached from parent so you cant re-size.
But try remove position:absolute and give parent div display:table then you can re-size it.
Check this
http://jsfiddle.net/9gxyH/
First thing if you want the child div resize its parent div so there no need for position:absolute because we use position:absolute when we want that the element not effect other elements.
but if you want this functionality so you need to do a little bit of js.
check http://jsfiddle.net/sandeep/CLb5r/13/
In the following test case, the alt text is horizontally centered, but it's stuck to the top of the box. How do I get it in the middle?
<html>
<body>
<div style="height: 300px; width: 300px; border: solid black 1px;">
<img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/>
</div>
</body>
</html>
One advantage of tables is they provide cross-browser vertical centering. DIVs don't. This is once case where I'd bite the bullet and add those ugly TRs and TDs.
<table cellspacing="0" style="width:300px;height:300px;border:1px solid black;">
<tr>
<td style="vertical-align:middle;text-align:center;">
<img src="asdfasdf" alt="foo" />
</td>
</tr>
</table>
It's called a single-celled centering table and ugly as it is, it works.
Try using some spaces at the start of the alt attribute. It was the only thing that seemed to work for me on chrome.
Try with display:table-cell instead of block.