Solved

dreamweaver css using li and ul

Posted on 2010-09-08
10
625 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 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