Solved

dreamweaver css using li and ul

Posted on 2010-09-08
10
628 Views
Last Modified: 2012-06-21
Hi, i am trying to create the first page of my lab so that it looks like the jpg attached.  What am i doing wrong that the text boxes aren't aligning up neatly as they go down the page? sample
<?php echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 		
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<title>This is lab 3!</title>

<style type="text/css">
	ul{ list-style:none; margin-top: 5px;}
	ul li { display:block; float: left; wdith: 100% height: 1%;}
	ul li label { float: left; padding: 7px; }
	ul li input, ul li textarea { float: right; margin-right: 10px; border: 1px solid #000; padding: 3px; width: 60%;}
	li input:focus { border: 1px solid #ccc;}
	fieldset{ padding: 10px; border: 1px solid #ccc; width: 400px; overflow: auto; margin: 10px;}
	legend { color: #306; margin: 0 10px 0 0; padding: 0 5px; font-size: 12pt; font-weight: bold;}
	label span { color: #ff0000;}
	
	fieldset#billing{ position: absolute; top: 60px; left: 20px;}
	fieldset#shipping{ position: absolute; top: 60px; left: 460px;}
	fieldset#submit{ position: absolute; top: 540px; left: 20px; width: 840px; text-align: center;}
	fieldset input#SubmitBtn{ background-color: #CCC; color: #000; border: 1px solid #666; padding: 5px; width: 150px;}
</style>

</head>

<body>

<h1>Lab03 - Index Page</h1>

<form id="form0" method="post" action="getFormData.php">
	<fieldset id="billing" name="billing">
    	<legend>Billing Information</legend>
        <ul>
        	<li><label title="Name" for="name">Name <span>*</span></label><input type="text" name="name" id="name" size="30" maxlength="30"/></li>
            <li><label title="Address" for="address">Address <span>*</span></label><input type="text" name="address" id="address" size="30" maxlength="30"/></li>
            <li><label title="City" for="city">City <span>*</span></label><input type="text" name="city" id="city" size="30" maxlength="30"/></li>
            <li><label title="State" for="state">State <span>*</span></label><input type="text" name="state" id="state" size="30" maxlength="30"/></li>
            <li><label title="Zip" for="zip">Zip <span>*</span></label><input type="text" name="zip" id="zip" size="30" maxlength="30"/></li>
            <li><label title="Country" for="country">Country <span>*</span></label><input type="text" name="country" id="country" size="30" maxlength="30"/></li>
            <li><label title="Phone" for="country">Phone <span>*</span></label><input type="text" name="phone" id="phone" size="30" maxlength="30"/></li>
            <li><label title="Email" for="email">Email <span>*</span></label><input type="text" name="email" id="email" size="30" maxlength="30"/></li>
            <li><label title="Comments" for="comments">Comments <span>*</span></label><textarea name="comments" id="comments" rows="5" cols="40"></textarea></li>        
        </ul>
    </fieldset>
    
    <fieldset id="shipping">
<legend>Shipping Info (if different from billing)</legend>
                <ul>
        	<li><label title="SName" for="Sname">Name</label><input type="text" name="Sname" id="Sname" size="30" maxlength="30"/></li>
            <li><label title="SAddress" for="Saddress">Address</label><input type="text" name="Saddress" id="Saddress" size="30" maxlength="30"/></li>
            <li><label title="SCity" for="Scity">City</label><input type="text" name="Scity" id="Scity" size="30" maxlength="30"/></li>
            <li><label title="SState" for="Sstate">State</label><input type="text" name="Sstate" id="Sstate" size="30" maxlength="30"/></li>
            <li><label title="SZip" for="Szip">Zip</label><input type="text" name="Szip" id="Szip" size="30" maxlength="30"/></li>
            <li><label title="SCountry" for="Scountry">Country</label><input type="text" name="Scountry" id="Scountry" size="30" maxlength="30"/></li> 
        </ul>
    </fieldset>
    
    <fieldset id="submit">
    	<input id="SubmitBtn" name="SubmitBtn" type="submit"  value="Proceed"/>
    </fieldset>
    
</form>

<script type="text/javascript">
	document.getElementById("name").focus();
</script>

</body>
</html>

Open in new window

0
Comment
Question by:newmie22
  • 3
  • 2
  • 2
  • +1
10 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 33632032
Hi newmie22,

Because this is a homework question, I have to answer in general terms to avoid doing your homework for you. Feel free to ask me follow-up questions based on this response, though :)

When you use list items along with labels and inputs, you are generating a lot of margins and padding. Each element in the cascade of tags:

fieldset
ul
li
label
input or textarea or whatever

has a default value for margin and padding. Furthermore, text elements have different defaults than do form elements. As a designer, you need to be aware this behavior and take steps to control it via your CSS definitions. Has your class covered the technique to make sure all elements on the page start with the same margin and padding?
0
 

Author Comment

by:newmie22
ID: 33632053
We didn't discuss anything on the page, the TA just went through and we copied down code.  We are mainly focused on php in this class and not the html so this page was given to us.  I don't know if i didn't copy something down correctly or not but i've gone through and kept changing fields in the css but never notice a difference in the alignment, other than that everything else looked alike.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 33632157
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33632276
You have to use Internet Explorer to get it to line up.  Doesn't line up in Firefox, Safari, Chrome, or Opera.  But it does help to spell 'width' correctly.  There's two other details to fix but I'll let you find them.
0
 
LVL 2

Accepted Solution

by:
kostantinos1995 earned 500 total points
ID: 33635072
I'm sure I've got the solution, it's a sytax error:

Change:
ul li { display:block; float: left; wdith: 100% height: 1%;}

To:
ul li { display:block; float: left; width: 100%; height: 1%;}

You have mistyped "Width" and are missing an ";"
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 33637967
Technically the first answer given is correct (this is a CSS issue) but because of the EE regulations on homework questions, I can only answer vaguely.  I have no objection to deletion, though.
0
 

Author Closing Comment

by:newmie22
ID: 33640975
I figured it out.  I am still new to coding so it was a pain to search and fine that ONE missing semi colon.  Thanks.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33641344
Good for you, I missed that.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
add image on html mail 6 27
Little bit of help styling my heading 3 31
How to get bootstrap element to collapse at wider screen width 3 41
multiple selects 23 48
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question