Выравнивание элементов с помощью jQuery - PullRequest
Новая
       30

Выравнивание элементов с помощью jQuery

1 голос
/ 27 октября 2010

Я строю систему планирования для своей работы, и она настроена на страницу с двумя столбцами - один столбец для навигационной панели и следующий столбец для данных. Я использую некоторый jQuery, чтобы он автоматически форматировал ширину столбцов в зависимости от размера экрана пользователя. По некоторым причинам размер столбцов в моей таблице заголовков отличается от моей таблицы данных. Это, вероятно, сбивает с толку, но взгляните на код, и это должно иметь больше смысла.

Вот HTML-часть страницы: 

<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>

И 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;
}

Есть идеи, как заставить их правильно выравниваться?

Обновление:
Я смог это исправить. Мне нужно удалить все поля и отступы в таблице id = "line". По какой-то причине он не применялся из родительских контейнеров.

1 Ответ

0 голосов
/ 27 октября 2010

Может быть, вы должны использовать тег: 

<th>

для ваших заголовков.

http://www.w3schools.com/tags/tag_th.asp

...