PDA

View Full Version : problems in mixing list with form



mikacruz
Mar 25th, 2009, 06:41 PM
Hello All,
I am trying to add some style to a form. Here is the html (http://europeoples.eu/test.html) (the style is in the header). As you may see, there are three categories, and for each one, 3 inputs. For each input I would like an image associated with it and a title <h2>.
And in each category I would the list elements to be displayed inline, but its all vertical.

Does anyone know what I'm doing wrong? There are also lots of validation errors because of the use of <li> in the form.

What would be the best way if not using <li> to have each of the options (represented by an input type=radio + img + h2 ) listed horizontally while categories are listed vertically.

Here is a picture of what I'm trying to get (http://europeoples.eu/images/shema.gif)

I would really appreciate a little help in solving this. Thanks!

Excavator
Mar 25th, 2009, 08:38 PM
Hello mikacruz,

Have a look at this. It's valid, just needs a little more styling to place things the way you want -
<!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">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
.cat {
width: 50%;
border: 1px solid #5E5E5E;
overflow: auto;
}
.cat img{
height: 50px;
width: 50px;
}
.cat h2{font-size: 12pt;}
ul.nav_cat li {
list-style-type: none;
padding-right: 20px;
float: left;
}
</style>
</head>

<body>
<div id="container">
<form method="post" action="demo.php">
<div class="cat">
<ul class="nav_cat">
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat1 Choice1</h2><input type="radio" name="cat1" value="1" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat1 Choice2</h2><input type="radio" name="cat1" value="2" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat1 Choice3</h2><input type="radio" name="cat1" value="3" />
</li>
</ul>
</div>
<div class="cat">
<ul class="nav_cat">
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat2 Choice1</h2> <input type="radio" name="cat2" value="1" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat2 Choice2</h2><input type="radio" name="cat2" value="2" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat2 Choice3</h2><input type="radio" name="cat2" value="3" />
</li>
</ul>
</div>
<div class="cat">
<ul class="nav_cat">
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat3 Choice1</h2> <input type="radio" name="cat3" value="1" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat3 Choice2</h2><input type="radio" name="cat3" value="2" />
</li>
<li>
<img src="http://europeoples.eu/images/img.gif" width="93" height="86" alt="image" />
<h2>Cat3 Choice3</h2><input type="radio" name="cat3" value="3" />
</li>
</ul>
</div>
<input type="submit" name="submit" value="Submit"/>
</form>
<!--end container--></div>
</body>
</html>

mikacruz
Mar 25th, 2009, 09:21 PM
wow, nice one !
I find it strange though that it validates now since what you changed seems to be the css mostly...
thank you !!! :thumbsup: