CSS - Replacing 100 Percent Width And Height Table With Css
Hi,
My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! Similar TutorialsHi, I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width). I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide). Can anyone tell me what I need to do or what I'm doing wrong please I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm HTML as follows: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="fixlayout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id='wrap'> <div id="content"> <div class="searchresult1"> <h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0 /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p> <a href='info.php?id=486'>More details</a> </div> </div> </div> <!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> --> </body> </html> CSS as follows: Code: body { color: #333333; background-color: white; font-size: 12px; line-height: 1.3em; margin: 0; padding: 0; border:1px solid black; width:100%; } #wrap { background: white; margin: 0 0 2em 22%; } #content { padding:0; border-right: 1px solid #ccc; margin-right: 4em; width:97%; margin-left:2.75%; } div.searchresult1 { width:800px; width: expression(this.width > 400 ? 400: true); margin-top:20px; margin-right:40%; border:1px solid #9eceeb; } div.searchresult1:after { content:"."; display:block; clear:both; height: 0; visibility: hidden; } div.searchresult1{display: inline-block;} /* Hides from IE Mac \*/ * html div.searchresult1{height: 1%;} div.searchresult1{display:block;} /* End Hack */ div.searchresult1 h3{ background: #c0ddea; margin:0; padding:4px; } div.searchresult1 h4{ background: #c0ddea; margin:0; padding:4px; border:1px solid black; } div.searchresult1 img { margin: 10px; float:left; border:1px solid black; } Hi, Hopefully someone can help with this little problem. I've got a JavaScript menu ... // JavaScript start. document.write("<table cellpadding='0' cellspacing='0' border='1' bordercolor='#999999' bgcolor='f5f5f5' width='100%'>"); document.write("<TR><TD class='MenuBackground'>"); if (MenuOption == "Body Lotion") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>"); } document.write("</TD></TR><TR><TD class='MenuBackground'>"); if (MenuOption == "Shower Gel") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>"); } document.write("</TD></TR><TR><TD class='MenuBackground'>"); if (MenuOption == "Soaps") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>"); } // Menu Bottom. document.write("</TD></TR></table></td></tr></table>"); // JavaScript end. ...and associated CSS file... // css start. .MenuBackground { WIDTH: 110px; BACKGROUND: #f5f5f5; margin: 0; padding: 0; } a.MenuOn:link { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:visited { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:active { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:hover { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #c9c9c9; WIDTH: 100%; HEIGHT: 100% } a.MenuOff:link { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } a.MenuOff:visited { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } a.MenuOff:active { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } // css end. What I expect to happen is that when I scroll over the menu options the whole line should become highlighted. This works fine in IE, but for some reason it doesn't in Firefox. Firefox only highlights the text (as shown in the JavaScript code). Can anyone point out where I'm going wrong? url = http://www.natureshedgerow.com Thank you in advance PS. I've already fixed a few other problems I've found between IE and Firefox (hopefully this isn't a sign of poor worksmanship on my behalf ) Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Hello, I currently have a Table layout that uses 2 <td>s to display a picture in the left <td> and text in the right <td> so something like this: Code: <tr> <td>Image</td> <td>Text about the Image</td> </tr> Is there a way to rebuild this using DIV tags. I have had so much luck using Code: <DIV> <ul> <li>Image Text</li> <li>Image Text</li> </ul> The problem with this is the text doesn't display properly - It either displays underneath the image, or if I use "vertical-align:text-top", it aligns the top line of the text to the top of the image and then displays the rest of the text underneath the image. Any suggestions would be welcome if there is any way around this? 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 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... Hey all, I need an area of content, defined by a div element. I would like it to have a minimum width of 550px, and a minimum height of 500px. However occasionally not everything will fit inside the box. Occasionally the box will contain a picture or word or flash file that exceeds 550px wide. When this happens, I'd like the box to be able to stretch to become wide enough to fit the big word/picture. Likewise when there is too much text, or a picture that is too long, I'd like the box to become tall enough to contain everything. My first attempt was using min-width and min-height. The height worked great, but since divs are block elements, the width would always be 100% instead of 550px. So I then tried adding "display: inline-block;". This made the width work, but now the text didn't automatically go to the next line when it reached the right of the box; instead, the box just increased in width. So to sum it up, I need something like this to have a width and height of 550/500: <div id="test">This sentence is small</div> But this one to stretch to the size required to contain the long word: <div id="test">adsfasdfasdfadfadfasdfasdfasdfasdfadsfasdfasdfadsfasdfasdfasdfasdfad sfasdfasdfadsfasdfasdfadsfasdfasdfadsfasdfasdfasdf</div> Hi, I have a layout to build and I want to make it as accessibile as possible to the user. I therefore want to allow the user to be able to determine the site font sizes while also keeping the layout look as good as possible. The only way I have done this so far is by setting the width and height of other elements (div's mostly) using the em type. Is this ok? Or I am doing this totally wrong? Regards, Sim085 basically i want to span an absolute div 100% height and width to cover the whole browser window.. IE fails at this.. what are some methods used to get around this? I'm new to css web design and am attempting my first full layout. What I would like to do is have a hanging picture in the upper-righthand corner of the page that overlaps the header and content sections. All is well, until I specify a width or height on the content section. Although it looks fine in Firefox, IE either: a) moves the content section down or b) squishes the content to the side (if <!--<?xml version="1.0" encoding="utf-8"?>--> is in the html) Here's some much-simplified code to illustrate the problem: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="images/style_test.css" rel="stylesheet" type="text/css" /> <title>Sandbox</title> </head> <style type="text/css"> #header { background-color: #cccccc; border: 1px solid #564b47; } #content { background-color: #c6dedf; border: 1px solid #564b47; width: 100%; height: 400px; } #hanging { float: right; background-color: #ccff99; border: 1px solid #564b47; margin: 20px; padding: 0; width: 300px; height: 300px; clear: right; } #footer { background-color: #cccccc; border: 1px solid #564b47; clear: both; } </style> <body> <div id="hanging"><code>#hanging {<br> float: right;<br> background-color: #ccff99;<br> border: 1px solid #564b47;<br> margin: 20px;<br> padding: 0;<br> width: 300px;<br> height: 300px;<br> clear: right;<br> }</code><p>This SHOULD overlap header & content.</p></div> <div id="header"><code>#header {<br> background-color: #cccccc;<br> border: 1px solid #564b47;<br> }</code></div> <div id="content"><code>#content {<br> background-color: #c6dedf;<br> border: 1px solid #564b47;<br> width: 100%; /* hanging doesn't like this */<br> height: 400px; /* or this in IE*/<br> }</code></div> <div id="footer"><code>#footer {<br> background-color: #cccccc;<br> border: 1px solid #564b47;<br> clear: both; }</code></div> </body> </html> Anyone know a work-around or how to fix this? Thanks! Hi, I have a page where I want to display some preformatted code inside a bordered box that has a fixed width/height with automatic scrolling. I can do this with a DIV + several css styles. However, when I generate the same file with Perl/CGI, The width/height stops working (at least not on my browser, Mozilla 1.1). Here is the file that works: Code: <html> <head> <style> .textarealike{ overflow: auto; border: 2px solid #0000FF; color: #000000; height: 30; width: 350; font-family: "Courier New"; font-size: 10pt; padding: 5px; } </style> </head> <body> <div class="textarealike"><pre> Some stuff Some stuff Some stuff</pre></div> </body> </html> and here is code that doesn't: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> .textarealike{ overflow: auto; border: 2px solid #0000FF; color: #000000; height: 30; width: 350; font-family: "Courier New"; font-size: 10pt; padding: 5px; } </style> </head> <body> <div class="textarealike"><pre> Some stuff Some stuff Some stuff</pre></div> </body> </html> The only difference is the DOCTYPE header generated by the CGI script..... and I have no idea why this is: Can anyone help me out? Thanks, Frank Hey all, I'm playing with an idea to include a 100% width/height log_in iframe to be displayed only if $_SESSION[uid]==''; (user not logged in) utilizing the following in a remote style.css to "show" the home page behind the iframe via opacity of 10%, while the iframe blocks access to it untill user logs in. My problem is that width:100%; height:100%; doesn't work, while pixel width & height does in the following: Code: iframe { position:absolute; top: 0px; left: 0px; width:800px;/*works*/ height:800px;/*works*/ /*width:100%; doesn't work*/ /*height:100%; doesn't work*/ z-index: 100; filter:alpha(opacity=10); -moz-opacity:.10; opacity:.10; } Hi there Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div? I set the width of div, via margin Code: div#footer { margin: 0px 9%; height: 40px; } When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height. This does not happen in other (gecko) browsers! Anyone know a solution, (tantek won't be precise enough with %) ?? Is there a way to expand the height and width of a DIV to the height and width of the document, not the browser window? When I set it too 100%, and scroll, the div remains the size of the original window. The DIV is for a background grey out screen, and I want it to encompass the height and width of the document and persist when scrolling. Explicitly setting height and width with pixels doesn't work, because that depends on the user's screen resolution. Any thoughts? Many thanks... Hi to all, and thanks a million in advance for help. I have developed a simple online cms and everything is setup correctly but i am stuck at one place. I am unable to make width to 100% when b div is empty i mean a div = 50% width, b div = 50% width, how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width. i hope got my question. because currently i have set in this way. wrapper div = 980px width, a div = 50% width, b div = 50% width, wrapper div end so when a div is empty then b div is still present and that area is empty it destroy the whole look. thanks arsslan I'm pretty sure I know the answer to this unless there is a trick or hack....Can u set a background images height & width in a tag? I have a logo'd masthead that I need to reduce when the user wants to print the page. I know I can just create a print-specific image but, I thought I'd ask to see if there was a way to reduce the image thru .css??? thanks! Stephen The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code: div { border:0; background-color:#888888; } ul { margin:0;padding:0; } ul li { float:left; list-style:none; background-color:#CCCCCC; height:50px; width:100px; } The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. Hi. What's em, pt, pc, px, ex, % when declaring width, height or position in CSS? It seems people use different measurement. What exactly are those? Any help will be appreciated. Thanks. I'm wondering what's the word is called for setting the image width and height in CSS Code: img.test { <<What's the keyword??>>: 10 px; } Thanks, FletchSOD |