Aligning items with jQuery
I'm building a scheduling system for my work, and it's set up to be a two column page - one column for the nav bar, and the next column for the data. I'm using some jQuery to have it automatically format the column widths depending on the size of the user's screen. For some reason the size of the columns in my header table are different from my data table. This is probably confusing, but take a look at the code and it should make more sense.
Here is the html portion of the page:
<html>
<head>
<link rel="stylesheet" href="40press.css" type="text/css" />
<script type="text/javascript" src="../scripts/jquery.js" />
<script type="text/javascript">
var width = document.documentElement.clientWidth;
width = width - 200;
widthval = width + "px";
$(document).ready(function() {
$("#title").css('width', widthval);
$("#list").css('width', widthval);
widthval = (width * .08) + "px";
$("td#jobnumber").css('width', widthval);
widthval = (width * .15) + "px";
$("td#customer").css('width', widthval);
widthval = (width * .15) + "px";
$("td#CSR").css('width', widthval);
widthval = (width * .25) + "px";
$("td#desc").css('width', widthval);
widthval = (width * .08) + "px";
$("td#date").css('width', widthval);
widthval = (width * .08) + "px";
$("td#coating").css('width', widthval);
widthval = (width * .02) + "px";
$("td#plates").css('width', widthval);
widthval = (width * .02) + "px";
$("td#forms").css('width', widthval);
widthval = (width * .05) + "px";
$("td#impress")开发者_开发百科.css('width', widthval);
widthval = (width * .05) + "px";
$("td#count").css('width', widthval);
widthval = (width * .02) + "px";
$("td#pages").css('width', widthval);
$(".listitem").mouseenter(function() {
$(this).css('background-color', '#A9B5FF');
});
$(".listitem").mouseleave(function() {
$(this).css('background-color', 'white');
});
});
</script>
</head>
<title>40" Press Schedule</title>
<body>
<table cellpadding="0" cellspacing="0" id="large">
<tr id="header"><td><div id="lcorner"></div>
<div id="title">
<center><h1>40" Press Schedule</h1></center>
<table id="fields">
<tr><td class="left" id="jobnumber">Job #</td>
<td class="left" id="customer">Customer</td>
<td class="left" id="CSR">CSR</td>
<td class="left" id="desc">Description</td>
<td class="left" id="date">Due Date</td>
<td class="left" id="coating">Coating</td>
<td class="left" id="plates">Plates</td>
<td class="left" id="forms">Forms</td>
<td class="left" id="impress">Impress</td>
<td class="left" id="count">Count</td>
<td class="left" id="pages">Pages</td></tr>
</table>
</div>
</td></tr>
<tr id="body"><td>
<div id="sidebar">
<div class="selectedlistitem" id="joblog">Job Log</div>
<div class="listitem" id="smallpresses">Small Presses</div>
<div class="listitem" id="40presses">40" Presses</div>
<div class="listitem" id="postpress">Post Press</div>
<div class="listitem" id="ossmailing">OSS Mailing Ready to Ship</div>
<div class="listitem" id="shipped">Shipped</div>
<div class="listitem" id="dib">DIB</div>
<div class="listitem" id="paper">Paper</div>
<div class="listitem" id="dataentry">Data Entry</div>
<div class="listitem" id="hotsheet">Hot Sheet</div>
<div class="listitem" id="schedule2">Schedule2</div>
</div>
<div id="list">
<div id="speedmaster" class="machine">SpeedMaster 102(640)</div>
<div id="entry">
<table id="line">
<tr><td class="left" id="jobnumber">24578</td>
<td class="left" id="customer">MIFAB</td>
<td class="left" id="CSR">Test User</td>
<td class="left" id="desc">MIFab boxes fri paper need drawdownsd</td>
<td class="left" id="date">10/26</td>
<td class="left" id="coating">SPT Gls Aq</td>
<td class="left" id="plates">2</td>
<td class="left" id="forms">1</td>
<td class="left" id="impress">500</td>
<td class="left" id="count">18,000</td>
<td class="left" id="pages">1</td></tr>
</table>
</div>
</div>
</td></tr>
</table>
</body>
</html>
And the CSS :
body {
margin: 0px;
padding: 0px;
}
#header {
height: 150px;
}
#lcorner {
height: 150px;
width: 150px;
background-color: #0a1e93;
float: left;
border-bottom: 1px solid #A9B5FF;
}
#title {
position: relative;
height: 149px;
float: left;
border-bottom: 1px solid #A9B5FF;
}
td {
border: 1px solid red;
}
td.left {
text-align: left;
}
td.center {
text-align: center;
}
#fields {
position: absolute;
bottom: 0;
}
#sidebar {
float: left;
width: 149px;
border-right: 1px solid #0A1E93;
margin: 0px;
padding: 0px;
}
.listitem {
text-align: center;
height: 24px;
border-bottom: 1px solid #AEAEAE;
color: #0A1E93;
position: relative;
padding-top: 10%;
padding-bottom: 10%;
}
.selectedlistitem {
text-align: center;
height: 24px;
color: white;
position: relative;
padding-top: 10%;
padding-bottom: 10%;
background-color: #0A1E93;
}
#list {
position: relative;
float: left;
}
Any ideas on how to get them to align correctly?
Update: I was able to fix it. I need to remove all margins and padding to the id="line" table. For some reason it wasn't being applied from parent containers.
Maybe you should use the tag:
<th>
for your headers.
http://www.w3schools.com/tags/tag_th.asp
加载中,请稍侯......
精彩评论