WesleyA Posted February 2, 2015 Share Posted February 2, 2015 I'm having a thing I cant figure out in CSS I defined a class to make a table. The idea is that the table will be filled with text and its added frequently. The bottom border of the table should add a new line and augment. I tried several things, I also tried overflow-x auto, but I dont want a scrollbar. Is there a way to get rid of that scrollbar. Im using CSS3 It would be great if someone has a solution. Link to comment Share on other sites More sharing options...
WesleyA Posted February 3, 2015 Author Share Posted February 3, 2015 (edited) Ok I give an example from w3schools.com http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow none of the overflow tag properties is giving the option tht I mean and that is that the text automatically adjusts the size of the cell. By default it does. But obviously it only works under specific circumstances because I cant change the bottom of the cell. this is the class I wrote for a column .kolom6 {border: 5px solid yellow;table-layout: auto;background-color: #ffcc33;font-size: 0.9em;width: 20%;font-family: Arial;margin-left: 52%;margin-top: 1%;height: 40%;display: table-column;position: absolute;color: black;line-height: 1em;border-radius: 15px 15px 15px 15px;} This is put in another table-row, above this row a header-row and a footer-row. I have now set most values of the rows to % so they can be recalculated, when text is added to the column. Edited February 3, 2015 by davej Link to comment Share on other sites More sharing options...
davej Posted February 3, 2015 Share Posted February 3, 2015 I don't understand what you are trying to do. Can you create a very small example that demonstrates the problem? Post that example in a codeblock. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_table-layout Link to comment Share on other sites More sharing options...
WesleyA Posted February 3, 2015 Author Share Posted February 3, 2015 (edited) I have tried to add the following code: padding-bottom 5%; the strange thing is that it creates a distance in the bottom of the column, BUT when adding new text, the bottom does not move downwards. Edited February 3, 2015 by WesleyA Link to comment Share on other sites More sharing options...
davej Posted February 3, 2015 Share Posted February 3, 2015 Your whole styling approach is probably wrong. Post the code for the table and the styles you apply to the table. Link to comment Share on other sites More sharing options...
WesleyA Posted February 6, 2015 Author Share Posted February 6, 2015 Ok this is the script I wrote. If you add some lines to the column it will enlarge automatically. But if the column gets so big and approaches the footer then it overlays the footer instead of pushing it down. (in an alternative script I had the column enclosed into the div of the column, but then the left-margin is determined related to the columnn. with negative -px settings I had a bad result, so my question is if any of you knows another solution? Script <html><head><meta content="text/html; charset=ISO-8859-1"http-equiv="content-type"><title>footer-down</title><style type="text/css">html, body {margin: 0;padding: 0;height: 100%;}.container {min-height: 100%;position: relative;}.header {padding: 10px;background: none repeat scroll 0% 50%;background: green;}.content {padding: 10px 10px 80px;}.footer {bottom: 0;height: 60px;position: absolute;width: 100%;}.column1a {border: 2px solid #ff6600;height: 100px;margin-left: 600px;min-width: 200px;background-color: #ffcc99;float: right;max-height: 100px;max-width: 200px;font-family: Arial;width: 200px;display: table;position: absolute;min-height: 100px;margin-top: 70px;visibility: visible;font-size: 0.9em;padding-bottom: 10px;}</style></head><body><div class="container"><div class="header="> This is the header</div><div class="content"> Here you can write content<br>Line: abcdefghijklmnop<br><div class="column1a">Column <br>Here some text<br><br><br><br></div></div><div class="footer">Place the footer here<br><br></div></div><br><br></body></html> Link to comment Share on other sites More sharing options...
davej Posted February 6, 2015 Share Posted February 6, 2015 Ok, I see a page with an orange block in the approximate center. Now how is this different from what you want? Have you perhaps created a diagram showing what you want? I'm not a css expert but perhaps this is closer to what you want? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>html, body {margin: 0;padding: 0;height: 100%;}.container {min-height: 100%;margin-bottom:-60px;/* same as height of footer */}.container:after{content:"";display:block;height:60px;/* same as height of footer */}.header {padding: 10px;background-color: green;}.content {overflow:auto;border: 1px solid blue;padding:0 10px;}.column1a {overflow:auto;border: 2px solid #ff6600;background-color: #ffcc99;float: right;font-family: Arial;width: 200px;min-height: 100px;margin: 10px 60px 10px 5px;font-size: 0.9em;padding-bottom: 10px;}.footer {clear:both;height: 60px; /* height of footer */border: 1px solid red;text-align:center;}</style></head><body><div class="container"> <div class="header"> This is the header</div> <div class="content"> Here you can write content<br> [Line1]: abcdefghijklmnop abcdefgh ijklmnop abcdefgh ijklmnop abcdefgh ijklmnop abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg ijklmnop abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg <div class="column1a"> Column a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a <br> Here some text </div> [Line2]: abcdef ghijk lmnop abcdefg hijklmnop abcdefghi jklmnop abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg </div></div><div class="footer"> ©2015 Place the footer here</div></body> </html> Link to comment Share on other sites More sharing options...
WesleyA Posted February 7, 2015 Author Share Posted February 7, 2015 I cant get it working. Basically when I add text (for instance in a div) to the script its the same effect, the text outside the column moves the footer down, but I want the resizing of the column to move the footer. Finally where wont be any text outside the column, only more columns, say three or more. Link to comment Share on other sites More sharing options...
WesleyA Posted February 7, 2015 Author Share Posted February 7, 2015 I give an example of how it works. It is with embedded CSS and I want a separated CSS script. I made this with KOMPOZER. <html><head><meta content="text/html; charset=ISO-8859-1"http-equiv="content-type"><title>footcol1</title></head><body><table style="text-align: left; width: 1841px; height: 760px;"id="mainrow" border="0" cellpadding="80" cellspacing="2"><tbody><tr><td style="vertical-align: top; height: 117px;">Header<br></td></tr><tr><td style="vertical-align: top; height: 542px;"><table style="text-align: left; width: 288px; height: 368px;"border="0" cellpadding="2" cellspacing="10"><tbody><tr><td style="vertical-align: top;"><br><br>place text here in column<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td></tr></tbody></table><br></td></tr><tr><td style="vertical-align: top; height: 91px;">footer<br></td></tr></tbody></table><br><br></body></html> If you load it in the browser you'll see the footer go down, when adding more text solely in the column. I'm looking for a way to have this in an external style sheet. Is there a converter from embedded html to external CSS? But more preferably (to understand and learn CSS better) I would like to know how to do it myself with CSS, so as done in the above script. Link to comment Share on other sites More sharing options...
davej Posted February 7, 2015 Share Posted February 7, 2015 OK, I have absolutely no idea what you are trying to accomplish. It is rarely if ever necessary to place a table inside a table. For css the best approach is to keep it in the head until you have a lot of it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now