views:

99

answers:

3

I am having trouble arranging items with the css below.

One of the more obvious problems I am having is that The strong text for the headings of the table columns is black, and does not match the strong text in the information above the table.

My main problem is that Layer3 will not go to the bottom of the Layer2. I want it to be below the columns of information, however at the moment the h1 from layer3 appears next to the picture of rightlayer.

How can I force layer3 to stay at the bottom of Layer2?

What is a better way for organizing information into columns, as opposed to my current approach of leftlayer, leftlayer2 and 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: &#8364;</strong> 0.00
</p>
<p><strong>Buyitnow Price: &#8364;</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;amp;quot;&lt;img src='..\/images\/250405322811.jpg' &gt;&amp;amp;quot;); return false;">
<img src="../images/250405322811.jpg" height="100" width="100"></a>
<p><a href="#" onclick="makewindows(&amp&lt;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>&gt;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')">&lt;&lt;-First
</a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a>-----------------------------------------------------------------<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">
Next -&gt; </a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last
-&gt;&gt;</a></div>
</div>
</div>
</div>
</body></html>

and the 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;
}
+3  A: 

The rule float:bottom; is not valid. There are three valid values for float. They are left, right and none. If you want that div to wrap down then you should set it to clear the previous div's float by changing float:bottom; to clear:both; or clear:left;

Dave L
A: 

You have more than one css validation problem:

15   #Layer2  Value Error : voice-family Parse Error :"\"
18   \"  Parse Error \""; voice-family:inherit;
21    Parse Error :20px; } #Layer2 p
36   p, h1, pre  Value Error : font Arial is not a font-size value : Arial,Helvetica,sans-serif
72   #Layer3  Value Error : float bottom is not a float value : bottom

No way to tell if that's causing your specific problem until you fix it. I also recommend getting rid of as much extraneous css as possible to reduce your problem to its simplest form before asking for help. Otherwise people like me have to read a bunch of useless font and voice related css which has nothing to do with positioning.

apphacker
I fixed the validation problem..it was caused by a code formatter, and was not the reason behind my problem. I left all the css in, as I was not sure what may be causing the problem. I removed more than half of the original file to try and trim it down..
Joshxtothe4
+2  A: 

That is a nice amount of code I had to read through. Let me start with a couple of remarks:

  • first of all, the coding style is a little bit old-school:
    • using non-semantic ids, like 'leftsomething' is not optimal in the long run
    • links without proper target are also non-semantic
    • the onclick property should be replaced with javascript-generated event handlers
  • as Dave already pointed out, the CSS 'float' property can't be set to 'bottom', you have to use 'clear' instead
  • do not define style properties in your HTML code, like your table border and cell width

To create a page layout, you may consult htmldog, there is a nice tutorial. Change your layer names to more meaningful ones, like #article, #price, #status, so you won't get confused when redesigning.

You should also put Eric Meyer's CSS reset on the top of your stylesheet so you won't be biased by the browser of your choice when setting margins, paddings and fonts.

And don't forget to put labels next to your radio buttons, so it will be an easier target to the user: clicking the associated label is like clicking the button itself. This is a little bit tricky, because you need unique ids for the choiches, while you need to use the same name, because the name is used on the server side while the id used by the label tag as a hook. You can create unique names for example by combining the name and value of the given input, for example:

<p><input name="radiobutton" value="fakeapproved" type="radio" id="radiobutton_fakeapproved"><label for="radiobutton_fakeapproved">Fake (Approved)</label></p>

<p><input name="radiobutton" value="fakesuspected" type="radio" id="radiobutton_fakesuspected"><label for="radiobutton_fakesuspected">Fake (Suspected)</label></p>

bandi