• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

A little CSS Help please

Hello,

Appreciate a little guidance here please...

I've started building a web form that I'm styling with CSS...

I want it to look as if it is laid out using tables, although I'm usng maul unordered lists and labels...

So it should look like I have a column of labels and a column of inputs, given that my input might be a textarea let say, i cant get the border to expand for the label....

I've attached some code, you will see what I mean...

Also any better way of doing this - guidance appreciated -

Thanks
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.fixedwidthdiv{
	width:816px;
}
.fixedwidthdiv ul{
	list-style: none;
	margin:0px 0px 8px 0px;
	padding:0;
	float:left;
	position:relative;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	borderright:1px solid #ccc;
	width:814px;
}
.fixedwidthdiv li{
	float:left;
	position:relative;
	border-bottom:1px solid #ccc;
	padding:0px;
	width:814px;
}
.fixedwidthdiv .normalrowheight{
line-height:40px;
}
.fixedwidthdiv label{
	width: 200px;
	float:left;
	position:relative;
	display:block;
	margin-right: 6px;
	padding-left: 6px;
	border-right: 1px solid #ccc;
}
.ulheader{
	margin: 0;
	width: 804px;
	display: block;
	position: relative;
	float: left;
	background-color: #666666;
	padding: 6px;
}
.fullwidthlabel{
width:804px;}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div class="fixedwidthdiv">
<h3 class="ulheader">Display Properties</h3>
  <ul>
    <li class="normalrowheight">
      <label>Display on xxx</label>
    xx</li>
    <li class="normalrowheight">
      <label>Display on xxx</label>
    xx</li>
  </ul>
  <h3 class="ulheader">Display Properties</h3>
  <ul>
    <li class="normalrowheight">
      <label>Product Name</label>

      <input type="text" name="textfield" id="textfield" />
    </li>
    <li class="normalrowheight">
      <label>Product Description</label>
      
      <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
    </li>
    <li class="normalrowheight">
    <label>Nominal Code</label>
    xx</li>
    <li class="normalrowheight">
    <label>Product Allocation</label>
    xx</li>
    <li class="normalrowheight">
    <label>Product Owner</label>
    xx</li>
    <li class="normalrowheight">
    <label>Categories</label>
    xx</li>
    <li class="normalrowheight">
    <label>Related Products</label>
    xx</li>
  </ul>
    <h3 class="ulheader">Stock Details</h3>
    <ul>
    <li class="normalrowheight">
      <label>Current Stock Count</label>

      xx    </li>
    <li class="normalrowheight">
      <label>ReStock Level</label>
      
      xx    </li>
    <li class="normalrowheight">
    <label>Available Date</label>
    xx</li>
    <li class="normalrowheight">
    <label>SKU Code</label>
    xx</li>
    <li class="normalrowheight">
    <label>Suggested Sale Price</label>
    xx</li>
    </ul>
      </ul>
    <h3 class="ulheader">Product Images</h3>
    <ul>
    <li class="normalrowheight">
      <label>Primary Image</label>

      xx    </li>
    <li class="normalrowheight">
      <label>Additional Images</label>
      
      xx    </li>
    <li class="normalrowheight">
    <label></label>
    xx</li>
    <li class="normalrowheight">
    <label></label>
    xx</li>
    <li class="normalrowheight">
    <label></label>
    xx</li><li class="normalrowheight">
    <label></label>
    xx</li>
    </ul>
</div>
</form>
<p></p>
<p></p>
</body>
</html>

Open in new window

0
garethtnash
Asked:
garethtnash
1 Solution
 
darren-w-Commented:
0
 
garethtnashAuthor Commented:
Thanks -
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now