0
Je rencontre des difficultés pour organiser les éléments avec le CSS ci-dessous. Un des problèmes les plus évidents que j'ai est que le texte fort pour les en-têtes des colonnes de la table est noir, et ne correspond pas au texte fort dans l'information au-dessus du tableau.Problèmes d'organisation des calques CSS avec en-tête et tableau
Mon problème principal est que Layer3 ne va pas au fond du Layer2. Je veux qu'il soit en dessous des colonnes d'information, cependant pour l'instant le h1 de layer3 apparaît à côté de l'image de rightlayer.
Comment puis-je forcer layer3 à rester en bas de Layer2? Quelle est la meilleure façon d'organiser les informations en colonnes, par opposition à mon approche actuelle de leftlayer, leftlayer2 et rightlayer?
<html><head><title>Auctions</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="Layer0">
<div id="Layer2">
<h1>Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</h1>
<div id="leftlayer" class="leftlayer">
<p><strong>Username: </strong>trend-mode-2008
</p>
<p><strong>Article Number: </strong>250405322811
</p>
<p><strong>Subtitle: </strong>Original Neu Kollekt
</p>
<p><strong>Auction Start: </strong>11.4.2009
16:46:29 </p>
<p><strong>Auction End: </strong>21.4.2009 16:46:29
</p>
<p><strong>Auction Type: </strong>Buy Now
</p>
<p><strong>Category: </strong>Jacken
</p>
</div>
<div class="leftlayer2">
<p><strong>Condition: </strong> New
</p>
<p><strong>Total Items: </strong> 6
</p>
<p><strong>Total Sales: </strong> 1
</p>
<p><strong>Start Price: €</strong> 0.00
</p>
<p><strong>Buyitnow Price: €</strong> 89.00
</p>
<p><strong>Bids: </strong> 1 </p>
<p><strong>Revised: </strong> No
</p>
</div>
<div class="leftlayer2">
<p><strong>Private: </strong> No
</p>
<p><strong>Finished: </strong> No
</p>
<p><strong>Cancelled: </strong> No
</p>
<p><strong>Paypal: </strong> No
</p>
<p><strong>Country: </strong> Germany
</p>
<p><strong>Location: </strong> Herne
</p>
<p><strong>Shipping to: </strong> Germany</p>
<form name="categoryForm">
<p><input name="radiobutton" value="fakeapproved" type="radio">Fake (Approved)</p>
<p><input name="radiobutton" value="fakesuspected" type="radio">Fake (Suspected)</p>
<p><input name="radiobutton" value="keyword" type="radio">Forbidden Keywords</p>
<p><input name="radiobutton" value="parallelimport" type="radio">Parallel Imports
<input name="Submit" value="Update" onclick="handleClick('250405322811', 'Hardy', '1', '250405325721', 'trend-mode-2008');return false" type="submit"></p>
</form>
</div>
<div id="rightlayer"><a href="#" onclick="makewindows(&amp;quot;<img src='..\/images\/250405322811.jpg' >&amp;quot;); return false;">
<img src="../images/250405322811.jpg" height="100" width="100"></a>
<p><a href="#" onclick="makewindows(&<quot;); return false;">Click
for full description </a></p>
<p><a href="#" onclick="deleteRec('250405322811', 'Hardy', '1', '250405325721')">DELETE</a>
</p>
</div>
<div id="Layer3">
<h1>Hardy Auctions</h1>
<table border="0" width="85%">
<tbody>
<tr>
<td width="15%"><strong>Seller ID</strong></td>
<td width="10%"><strong>Start Date</strong></td>
<td width="65%"><strong>>Description</strong></td>
<td width="10%"><strong>Category</strong></td>
</tr>
<tr id="article_250405322811">
<td><a href="#" onclick="updateByUser('trend-mode-2008','')">trend-mode-2008</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">11
04 2009</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="tablefooter" class="tablefooter">
<div id="tablefooterleft" class="tablefooterleft"><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')"><<-First
</a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')"><-Previous</a>-----------------------------------------------------------------<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">
Next -> </a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last
->></a></div>
</div>
</div>
</div>
</body></html>
et le CSS:
#Layer0 {
width: 100%;
height: 100%;
}
body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;
}
#Layer2 p {color:#888;}
#Layer2 a, a:link { color:#006633; text-decoration: none;}
#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}
html>body #Layer2 {
}
p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}
h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;
}
h3 {
font-size:14px;
color:#999;
}
.leftlayer {
float: left;
left: 20%;
width: 20%;
height: 100%;
margin-right: 10%;
}
.leftlayer strong {
text-align: left;
}
.leftlayer2 {
float: left;
width: 20%;
height: 100%;
margin-left: 2%;
}
#rightlayer {
float: left;
}
#Layer3 {
float: bottom;
}
je fixe la problem..it de validation a été provoquée par un formateur de code, et n'était pas la raison derrière mon problème. J'ai laissé tous les css dedans, car je n'étais pas sûr de ce qui pourrait causer le problème. J'ai supprimé plus de la moitié du fichier original pour essayer de le réduire. –