|
HTML - Html Height
How do I make my site height have a autoo height instead of me adding a hard coded height in pixels.
MAtt Similar TutorialsHello Gurus, I have a webpage with two tables in it. I need to have both table of same identical height(65px) however the issue is, that one table ends up being larger than other one. no matter what I try it does not stay at 65px height. Pleaes help. Below is the code snippet Thanks, Ruchir --------- <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <br></br> </div> <!-- start content --> <!-- DIV CONTENT --> <head> <style type="text/css"> /* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { /*background: #A17461 url(images/img01.jpg) repeat-x;*/ font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #B1C0C7; } /*ol { list-style-position: inside; }*/ blockquote { border-left: 1px solid #9E9D89; } a { color: #FFFFFF; } a:hover { text-decoration: none; } /* Content */ .link:visited { font-family: Georgia,Arial,Verdana; vertical-align:top; color:rgb(0,82,82); text-align:auto; text-decoration:none; vertical-align: top; } .link:hover { font-family: Georgia, Arial,Verdana; vertical-align:top; color:rgb(0,148,231); text-align:auto; text-decoration:underline; vertical-align: top; } .link { font-family: Georgia, Arial,Verdana; vertical-align:top; color:Gray; text-align:auto; text-decoration:none; </style> <body> <div style="margin-left:0%"> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label</div> <div> <table cellspacing="0" cellpadding="0" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> <td> <!--2--> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label2</div> <div> <table cellspacing="0" cellpadding="15" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/managedservices.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/rfims.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </tr> </table> <!--aaa--> </div> </head> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> </div> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> Hi I have made 2 tables for my home page for content of pages. Each table is two rows The problem is the right column in each table is not height alligned to the left column because there is a uneven amount of links How do I get the right columns to come up heigher and be height alligned because it looks messy? I spent hours looking at all different web pages about tables and could not find this. Does anyone know???????????? Please Help me check it out Here on this page. [url="http://www.great-quotes-powerful-minds.com/"] http://www.great-quotes-powerful-minds.com/ I start with <table width="100%"> <tr><td> put links column1 </td> <td> put links for column2 </font> </tr> </table> Please Help hi guys below is my css code and html code respectively but id doesn't work in mozila the height of outer div and few more divs doesn't increase automaticaly , please help //////////css code //////// * { padding: 0em; margin: 0em; } body { padding: 35px 0px 35px 0px; } #upbg{ position:absolute; text-align:left; margin:0 auto; width: 100%; height:20px; z-index: 1; left: 0px; right:0px; top: 0px; background-color:#434343; } #outer{ position:relative; margin:0 auto; width: 901px; border:1px double #FF0066; background-color:white; z-index: 1; } #container{ position:relative; width: 901px; background-image:url('images/bg2.jpg'); background-repeat:repeat-x; z-index: 1; } #image{ width:30%; float:left; position:relative; } #contect12{ width:69%; float:right; position:relative; left: 6px; top: 0px; } #Contentcontainer{ position:relative; padding-top:10px; width:55%; left:7px; padding:5px; float:left; z-index: 1; } #contect1{ border: 3px groove #000000; width:100%; position:relative; background-image: url('images/2.jpg'); background-repeat: repeat-x; left: 3px; } #lmnu{ position:relative; width: 895px; z-index: 1; left: 0px; } #lMenubar{ position:relative; width: 20%; padding:5px; float:left; z-index: 1; left: 0px; } #lmenu{ width:100%; position:relative; padding-top:10px; } #RMenubar{ position:relative; width: 20%; padding:5px; float:right; z-index: 1; left: 0px; } #rmenu{ width:100%; position:relative; padding-top:10px; } #header{ width:901px;; position:relative; left: 0px; top: 0px ; margin-bottom:2px; } #menu{ position:relative;border-width: 1px; border-color: #666666; width:901px; height:31px; background-image: url('images/1.jpg'); background-repeat: repeat-x; left: 0px; top: 0px; border-bottom-style: solid; } .td { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px silver groove; } .td2 { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px lime groove; } //////////// Html Code //////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Rishabh Arts ,Art of Making Confident People</title> <link rel="stylesheet" type="text/css" href="default.css"/> </head> <body> <div id="upbg"> </div> <div id="outer"> <div id="header"><img src="1.jpg" /><img src="2.jpg" /></div> <div id="menu" style="left: 0px; top: 0px" ></div> <div id="container"> <div id="lmnu"> <div id="lMenubar"> <div id="lmenu"> <table style="width: 100%"> <tr> <td class="td" style="width: 169px" >Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> </table> </div> </div> <div id="Contentcontainer"> <div id="contect1"> <div id="image" ><img src="rr.gif" style="float: left" /> </div> <div id="contect12"> skaydasid<br /> dasdgasd<br /> asdgasdas<br /> dasdhas </div> </div> </div> <div id="RMenubar" > <div id="rmenu"> <table style="width: 100%"> <tr> <td class="td2" >Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> </table> </div> </div> </div> </div> </div> </body> </html> Hi, I want to get the dynamic heights of some html divs. I am not programmatically applying height to them (so I don't know their values). If I fetch the height in mozilla I am able to fetch the exact value in px but in case of IE it gives "auto". How do I get their exact values? Please help ---------------------------------- Hi, I want to get the dynamic heights of some html divs. I am not programmatically applying height to them (so I don't know their values). If I fetch the height in mozilla I am able to fetch the exact value in px but in case of IE it gives "auto". How do I get their exact values? Please help ------------------------------ I want to get the dynamic heights of some html divs. I am not programmatically applying height to them (so I don't know their values). If I fetch the height in mozilla I am able to fetch the exact value in px but in case of IE it gives "auto". How do I get their exact values? Please help Natural Detox Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar Hi, I have a table and I need a background in one cell to extend down to the bottom of the cell (which is also the bottom of the page) from a certain point (below the content of that cell). I figured I would just use a div to do that... like this <html> <head> <style type="text/css"> .divbg { background:url(tree.jpg); height: 100%; } </style> </head> <body> <table> <tr> <td> <p>Content</p> <div class="divbg"> </div> </td> <td> <p>Content takes up a lot of space here and continues down the page a bit, so that is why the background in the cell to the left has to continue down the page.</p> </td> </tr> </table> </body> </html> Unfortunately, that didn't do anything. It just left me with a strip of my background image right under the content. So... I discovered online that you have to set the parent to 100% as well. I made the td <td height="100%"> and with no luck, I made the table <table height="100">. This just did really weird stuff and I realized what the problem was. This was making the div 100% height of the window itself. All I want is for the div to go from top to bottom (not including the content at the top of the cell). Is this even possible? Let me know if my explanation is unclear... Thanks! P.S. In the real site I am using XHTML 1.0 Transitional if that makes a difference. I might be able to change that though, if I need to. It was just the default that Dreamweaver put there. I'm not sure what the rest of the site would look like if I changed that now. okay so i have page, i want it to build itself to encompass at the minimum 100% of the browsers height dynamically i have seen a few methods of doing this via css and html and i have done it in the past without issue but now it wont do it anymore and im not sure why so the site is www.wiffleague.com/main.php (you may have to maximize browser to see what i mean) i want the footer section (at the bottom, the table with the copyright info in it) to always be bottom justified no matter the height of the rest of the page. currently what occurs is that if the page does not have enough content to fill the vertical height then it simply appends the footer section at the bottom of that and then a blank space under the footer. This html code works in Google Chrome (100% height), but not in IE (25% height). How can i fix it so IE shows it correct? 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"/>
<title>
Welcome
</title>
<style type="text/css">
html
{
overflow: hidden;
}
body
{
margin: 0px;
}
object
{
width: 100%;
height: 100%;
}
.center
{
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="holder">
<object type="application/x-shockwave-flash" data="preloader.swf">
<param name="movie" value="preloader.swf"/>
<div class="center">
To use this site you must have Javascript enabled and be using the current version of Adobe Flash Player.
<br/>
<br/>
<a href="http://get.adobe.com/flashplayer/">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" style="border: 0px;"/>
</a>
</div>
</object>
</div>
</body>
</html>
I have two columns in my page layout. I would like them to be the same height without declaring an exact height for both coloumns. Is there anyway to do this. I have attched a simple example of what I mean. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.column1{
border: solid 1px black;
width: 400px;
margin: 20px;
padding: 5px;
margin-left: 100px;
background-color: aqua;
height: auto;
}
.column2{
border: solid 1px black;
float: right;
width:400px;
padding: 5px;
margin: 20px;
margin-right: 100px;
background-color: #92c847;
}
.holder{
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="holder">
<div class="column2">
<h4> Column 2</h4>
<p>text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
<p>text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
</div>
<div class="column1">
<h4> Column 1</h4>
<p>This should be the same height as column2</p>
</div>
</div>
</body>
</html>
Thanks Calyspo I have a div and within that my navigation menu. My menu is made up of ul with their styles removed and floated left to make the list horizontal. I'm trying to make the background colour of my div white, but it doesn't have any height so it's not showing up. I'm having problems with making a div height to 100%. What i mean is that the div height stretches to how long the contents of the page is. If you check out my sample here, the green div on the left only stretch to the windows "visible" viewing area, then if you lower, the height doesn't go any lower than that. any idea? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</head>
<style type="text/css">
body{
margin:0px;
height: 100%;
min-height: 100%;
max-height: 100%;
}
#left{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
background-color: red;
width: 100px;
height: 100%;
}
</style>
<body onload="fixheight()" onresize="clearTimeout(t);t=setTimeout('fixheight()',10);">
<div id="left">
<div style="width: 100px;background-color: green;height: 100%"></div>
</div>
<div align="center">
<p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p></div>
</body>
</html>
Ok I have been racking my brain on this one for two weeks and I still cannot find an answer to this, which I know I will kick myself when I find out. I have this sidebar in a table and the sidebar spans 4 Rows the problem is that each cell does not condense down to the smallest size possible and I don't know what to do to fix it. The page in question is at http://wentworthatdraper.com/test/ The page renders great in Chrome but not FF and IE I'll put all the code I think is relevant here. <tr> <td width="77" height="160" class="sidebar" > <div class="title"> Main </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Home</a> <a href="contact.html">Contact Us</a> <a href="calendar.html">Calendar</a> <a href="news.html">News</a> </li> </ul> </div> </td> <td width="721" colspan="2" rowspan="4" class="content"> <p> Edited </p></td> </tr> <tr> <td height="272" class="sidebar" > <div class="title"> Our Community </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Living With Us</a> <a href="contact.html">Meet The Staff</a> <a href="calendar.html">Testimonials</a> <a href="news.html">Photo Gallery</a> <a href="index.html">Apartment Deals</a> <a href="contact.html">Dining Services</a> <a href="calendar.html">Amenities</a> <a href="news.html">Location</a> </li> </ul> </div> </td> </tr> <tr> <td height="20px" class="sidebar"> <div class="title"> Gallery </div> <div align="center"> <img src="../test/Images/photos/happy-home.jpg" width="131" height="86" /> </div> </td> </tr> <tr> <td height="100%" class="sidebar"> <div class="title"> Our Location </div> <div class="sidewriting"> 11631 S 700 E <br /> Draper, UT 8402 <p> <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=11631+S+700+E++Draper,+UT+8402&sll=37.0625,-95.677068&sspn=42.360237,93.076172&ie=UTF8&hq=&hnear=11631+S+700+E,+Draper,+Salt+Lak e,+Utah+84020&ll=40.540906,-111.870153&spn=0.009963,0.022724&z=16&iwloc=A" target="_blank">Get Directions </a></p> </div> </td> </tr> .sidebar { width:175px; background:url(../images/sidebar.jpg) repeat-y; vertical-align:top; margin:auto; } .title { background:url(../images/title.jpg) left no-repeat ; height:30px; padding:10px 0px 0 15px; color:#FFF; font-weight:bold; vertical-align:top; } Thank you so much for looking at this I dont understand why the wrapper won't stretch around the content... could someone please help me here... im baffled, as usual... http://pzpff.pzproductions.com I'm having a problem with a couple of cells that won't display at the same height. Firefox can do it properly but not IE7. IE7 will give it more height for no apparent reason. I'm not sure how to display my code in this post in a text box with scrollbars so I'm just gonna show the links to the relevant files. For the CSS part of the problem I've moved the CSS that controls the attributes of the problem areas to the top of the style.css page. url: www.innotechnutrition.com css: www.innotechnutrition.com/style.css P.S. Is there a program or a site I can go to where I can test my pages on all commonly used browsers? I was wondering if anyone could help me. I have two DIVs. One is 43px high and 100% width. The second I want to be 100% high - 43 px. Is there a way to do this with CSS without resorting to Javascript? Many thanks. Is it possible to have an ifram at 100% height? I am embedding an iframe into my template so that I can have a forum within the template. Though the forum pages height changes and I wanted to set the iframe to 100% so that it will auto adjust. When I changed it to 100% it didn't work and it looks to be about 20 pixels high. Thanks, Nick OK so i have made this template and so far i like it but i have come accross a bit of an issue http://marlosweb.com/templates/test/contact.php OK so you see that little black bar on the left of the navigation? Well i want that to span the length of my page but 100% height wont work because CSS requires that the parent element has a fixed value. Does someone know how to cure this? G'day guys, I've got a navigation DIV and a content div on the page, is there a way to make the nav DIV always the same height as the content DIV regardless of the amount of data I put in the content DIV? Thanks for any help guys, it's very much appreciated. Cheers, Jamie |
|||||||