|
CSS - How To Automatic Resize The Table Width When Broswer Size Is Resized
please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer.
<html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Similar TutorialsHello, For some reason I'm having difficulty with this, I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks, Jasontor How would I go about making the width of a <div> element as big as it needs to be depending on the amount of text. I've got, div.note {width: auto;} but it doesn't seem to be doing anything. (The site in question) Sorry for being so dumb Hi guys, I have a query, im trying to create the effect, that this site has. Quote: http://www.exigeinternational.com/index.htm i mean that the i want to create the effect that that site has when the page is minimised,i want each side to get smaller instead of everything moving to the left. sorry if it sounds confusing. appeciate all help thanks andy I need advice on the below code: xhtml: <input name="a_name" id= "a_name" type="text" value="a value" size="50" maxlength="100" /> css: input { width: 300px; } Given this set up what is the relevance of the size attribute of the input tag considering the css width setting? Aside from what happens if a user disables the stylesheet, is it even necessary to include the size attribute? Any browser issues with this code? Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Hello all I need to display the Login info inside a DIV 'WELCOME <USER FIRST NAME AND LAST NAME>' i have set the width of the DIV and a font size - 16px but when the name length increases the design brakes One way of solving the issue is by applying some logic using scripts but i want to know that whether we can do anything using the same with CSS only Regards Anees dear all, some simple divs of mine seem to be rendering differently in IE6 and IE7. for example, the following style works fine in IE6... Code:
#calHourNow {
background-color: #FFFF66;
margin:0px;
padding:0px;
width:50px;
height: 120px;
border-top:1px solid #999999;
border-right:1px solid #999999;
color:#000000;
font-weight:bold;
font-size:14px;
text-align:right;
font-family:"Times New Roman", Times, serif;
}
... I am left with a 12o x 50 px box (which is repeasted down the page) but in IE7 it seems the 1px border is added to the width and height, leaving me with a div that is actually 121 x 51 px. It is completely vital for my project (an outlook style calendar) that the dimensions of these divs are exactly the same on both browsers, is there a way round this? Many thanks, Mark Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript? Hey gang, I'm trying to make a website for Dad and I'm a little rough with my CSS, and I'm having troubles getting my fonts to show up correctly. I am working in Dreamweaver CS4, and the font looks great, but when I view it in FF/IE/Safari, H1 and H2 look WAY too big. Here is what it looks like in DW (top) and in Firefox (bottom): And here is the CSS: Code:
/* --------------------------------------------------
1.0 RESETS
-------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* --------------------------------------------------
2.0 GLOBAL STYLES
-------------------------------------------------- */
body {
background-color: #636c08;
background-image: url(images/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font: 62.5%/1.4 'Lucida Grande', Verdana, sans-serif;
color: #666;
}
html {
overflow: -moz-scrollbars-vertical;
}
a, a:link {
color: #689E21;
text-decoration:none;
}
a:visited {
color: #687C05;
}
a:hover {
color: #ff6600;
}
h1 {
font: bold 1.3em;
color:#ff6600;
}
h2 {
font: bold 1.25em;
color:#5B6C07;
}
h3 {
font: bold 1.1em;
color:#5B6C07;
}
p{
padding: 0 0 .2em 0;
line-height: 1.3em;
font-weight:normal;
}
/* --------------------------------------------------
3.0 LAYOUT STYLES
-------------------------------------------------- */
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
width: 772px;
margin: 0 auto;
}
#header {
position:realtive;
left:0px;
top:0px;
width:772px;
}
#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-bottom: solid 1px #5B6C07;
}
#content {
width: 772px;
margin: 0 auto;
padding: 0;
background:#FFFFFF;
}
#left {
float: left;
margin: 0;
padding: 16px 7px 0 10px;
width: 221px;
}
#right {
float: right;
margin: 0;
padding: 16px 8px 0px 8px;
width: 517px;
border-left: solid 1px #5B6C07;
}
.left_header {
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
}
.left_content {
text-align: left;
}
#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-top: solid 1px #5B6C07;
text-align: center;
}
#footer {
font: bold 9px Arial, Verdana, sans-serif;
color:#FFF;
text-align:center;
padding: 1px;
}
/* --------------------------------------------------
4.0 NAVIGATION STYLES
-------------------------------------------------- */
#nav {
width: 772px;
background: url("images/navigation-matrix.png") no-repeat;
height:27px;
overflow:hidden;
position: relative;
}
ul#main-nav { background: url(images/navigation-matrix.png) no-repeat 0 0; float: left; width: 775px; height: 27px; margin: 0 0 0; padding: 0; }
ul#main-nav li { display: inline; }
ul#main-nav li a, ul#main-nav li a:visited { float: left; display: inline; height: 27px; line-height: 27px; background: url(images/navigation-matrix.png) no-repeat 0 0; text-indent: -999em; }
ul#main-nav li#home a, ul#main-nav li#home a:visited { background-position: 0 0; width: 148px; }
ul#main-nav li#home a:hover { background-position: 0 -27px; }
ul#main-nav li#home a.active { background-position: 0 -27px; }
ul#main-nav li#home.selected a { background-position: 0 -27px; }
ul#main-nav li#about a, ul#main-nav li#blog a:visited { background-position: -148px 0; width: 125px; }
ul#main-nav li#about a:hover { background-position: -148px -27px; }
ul#main-nav li#about a.active { background-position: -148px -27px; }
ul#main-nav li#about.selected a { background-position: -148px -27px; }
ul#main-nav li#garden a, ul#main-nav li#videos a:visited { background-position: -273px 0; width: 218px; }
ul#main-nav li#garden a:hover { background-position: -273px -27px; }
ul#main-nav li#garden a.active { background-position: -273px -27px; }
ul#main-nav li#garden.selected a { background-position: -273px -27px; }
ul#main-nav li#where a, ul#main-nav li#photos a:visited { background-position: -491px 0; width: 143px; }
ul#main-nav li#where a:hover { background-position: -491px -27px; }
ul#main-nav li#where a.active { background-position: -491px -27px; }
ul#main-nav li#where.selected a { background-position: -491px -27px; }
ul#main-nav li#contact a, ul#main-nav li#tour a:visited { background-position: -634px 0; width: 141px; }
ul#main-nav li#contact a:hover { background-position: -634px -27px; }
ul#main-nav li#contact a.active { background-position: -634px -27px; }
ul#main-nav li#contact.selected a { background-position: -634px -27px; }
ul#main-nav li#home a em{ background-position: -0px 0;}
ul#main-nav li#about a em{ background-position: -148px 0;}
ul#main-nav li#garden a em{ background-position: -273px 0;}
ul#main-nav li#where a em { background-position: -491px 0;}
ul#main-nav li#contact a em { background-position: -634px 0;}
I always have this same issue with the Opera browser, it is always the same thing when i test on all platforms. If you have a look at http://cies.loadedtech.com.au/ the top margin is stuffed on the Opera broswer, but fine on all others... Please help, it has haunted me for long enough THANKS im trying to make a table have a max width (so it can shrink of the browser window shrinks or the user has a smaller screen resolution) Code:
<STYLE type="text/css">
#max800 { max-width: 800px; text-align: left;}
#max750 { max-width: 750px; text-align: left;}
</STYLE>
thats the css in the header section of my document (which is a .php document but this part is not in <?php ?> tags on a table if i put <table id="max800"> it does not fallow the max width propety i am trying ot give it (or the text align for that matter) instead it shrinks to the smallest possible width like it would nomrally do what am i doing wrong? Hi Is it possible to give a table widths style the ability to have a minimum and maximum width? eg, it has to be 10px to 30px in width? so if content doesnt fill it enough, it will be 10px but if there is loads of content it will only goto 30px in width ? Code: table.community {
background-color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#414141;
table-layout: fixed;
width: 548px;
margin: 1px;
}
<table class='community_field'> The table is ignoring the width..doesn't stretch the width designated. Percentage doesn't work either.. I have a simple question that has been driving me insane - I have a very simple website that has a header div, and a table that shows a lot of information (imagine an Excel spreadsheet). The table stretches the website as long as the table is because it simply will not fit on any screen (I think it's about 4200px wide). This is the desired behaviour I want for this table. However, my header div, will only show 100% wide, the width of the screen before it scrolls. I need to extend it beyond the screen to however wide the website has been made from the dynamic table. Please advise, thank you. This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. |
|||||||