PDA

View Full Version : fluid positioning of table - how with %

bazz
02-23-2006, 07:49 PM
Hello peeps,

Below is my css for a table in the middle of my viewport. I want the table to be about 25px from the previous relative item but in a measurement that is fluid. I want it so that if I resize the window (heightwise), that the table moves up.

I tried % as you'll se but it only varies as I narrow the window on the horizontal. Is a percentage height not meant to be a % of the viewport height?


html, body {
margin:0;
border : 0;
height : 100%;
width : 100%;
}

body {
background-color: #ddd;
font-family : "Arial", Verdana, Sans-serif, helvetica;
font-size : 1em;
}

#table {
border : 1px solid #000;
background-color : #eee;
margin : 1% auto auto;
}
#table th {
text-align : center;
font-weight : bold;
border : 1px solid #111;
background-color : #ddd;
padding : 0 10px;
}
#table td.booked {
background-color: #ff0000;
color : #fff;
}
#table td.vacant {
background-color: #3BCE3B;
color : #000;
}
#table td.checkingOut{
background-color: #ffff66;
color : #000;
}
#table td.checkingIn {
background-color : #0066FF;
color : #fff;
}
#table td.noFile {
background-color : #ccc;
color : #fff;
}


Bazz
_Aerospace_Eng_
02-23-2006, 07:53 PM
Yeah sure we know what your html looks like. Okay no we don't, you need to post your HTML as well please.
bazz
02-23-2006, 08:08 PM
Oops.



<!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>
<title></title>

<meta name="robots" content="no follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="stylesheet" href="/CSS/dropdown_menu.css" type="text/css" />
<link rel="stylesheet" href="/CSS/reservations_globalstyle.css" type="text/css" media="screen" />

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>
<div id="header">
<img class="logo" src="http://the.com/images/cplogo.gif" alt="" title="" />
</div>


<div id="topmenu">
<ul><li>
<a href="http://www.mydomain.com">Home Page</a></li><li>
<a href="http://www.mydomain.com/legalease.php">Legal Info</a></li><li>
</ul>
</div>
<ul id="nav">

<li><a href="Checking_In"> Checking In</a></li>
<li><a href="Checking_Out"> Checking Out</a></li>
<li><a href="Monitor_Daily"> Monitor Daily</a></li>
<li><a href="Monitor_Monthly"> Monitor Monthly</a></li>

</ul><div id="dates">

<table id="titleDate"><tr><th>Today's Date:</th></tr><tr><td>

February 23 2006</td></tr></table>

<form method="post" action="/cgi-bin/clientName/Checking_In" name="FrontDesk">
<input type="hidden" name="action" value="viewMonths" />
<table id="dropDownDates">
<tr>
<td>
<select class="textbox" name="DatesOfMonth">
<option selected="selected">Date</option>

<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>

<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>

<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>

<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="#">&nbsp;</option>
</select>

<select class="textbox" name="MonthsOfYear" >
<option selected="selected">Month</option>

<option value="01">01</option>

<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>

<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="#">&nbsp;</option>

</select>

<select class="textbox" name="YearsAhead">
<option selected="selected">Year</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>

<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="#">&nbsp;</option>
</select>
</td>
</tr><tr>

<td colspan="3"><input type="submit" value="View Date" /></td>
</tr>
</table>
</form>
</div><table id="table"><tr><th colspan="2">February 2006</th></tr>
<tr><th>101</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Double_101_2006-02-23">23</a></td></tr></table>
<tr><th>201</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Single_201_2006-02-23">23</a></td></tr></table>
<tr><th>205</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Single_205_2006-02-23">23</a></td></tr></table>

<tr><th>206</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Single_206_2006-02-23">23</a></td></tr></table>
<tr><th>208</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Twin_208_2006-02-23">23</a></td></tr></table>
<tr><th>210</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Double_210_2006-02-23">23</a></td></tr></table>
<tr><th>220</th><td class="roomsData">
<table class="specificRoomInfo"><tr><td class="noFile"><a href="specificRoom/Double_220_2006-02-23">23</a></td></tr></table>
</td></tr></table><br /><br />
</body>
</html>
_Aerospace_Eng_
02-23-2006, 08:12 PM
Okay a percentage height is a percentage height of the element that its in. Can you draw a rough picture of what you want? I'm having a hard time trying to understand what it is that you want.
bazz
02-23-2006, 08:36 PM
I thnk what I want isn't yet possible without using JS and I don't want that for this purpose.

Y'know the way, when you use em's and % (or better, margin : auto auto), that your page fluidly alters as you narrow it: a table in the centre of the window remains in the centre? Well I want that to work on the vertical too. So if I shorten the window, I don't just cut off the bottom of my table; it'll move up because 10% of the window height becomes progressively less with smaller resolutions.

Bazz