1
Je suis en train de créer un système de planification pour mon travail, et il est configuré pour être une page à deux colonnes - une colonne pour la barre de navigation et la colonne suivante pour les données. J'utilise un certain jQuery pour le formater automatiquement les largeurs de colonne en fonction de la taille de l'écran de l'utilisateur. Pour une raison quelconque, la taille des colonnes dans ma table d'en-tête est différente de ma table de données. C'est probablement déroutant, mais jetez un oeil sur le code et cela devrait avoir plus de sens.Alignement d'éléments avec jQuery
Voici la partie html de la 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>
Et le 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;
}
Toutes les idées sur la façon de les amener à aligner correctement?
Mise à jour:
J'ai été en mesure de le réparer. J'ai besoin de supprimer toutes les marges et le remplissage de la table id = "line". Pour une raison quelconque, il n'était pas appliqué à partir des conteneurs parents.
D'ailleurs, j'ai tous les éléments td décrit en rouge afin qu'il soit plus facile de voir ce que le problème est. En outre, j'ai seulement testé le code dans Chrome ... donc il pourrait avoir des problèmes complètement différents dans IE, Safari, ou FF. – jwegner