Solved

dreamweaver css using li and ul

Posted on 2010-09-08
10
632 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: 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!

 
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Use "if not" in a condition 2 26
SVG and IE11 2 30
asp.net, radiobuttonlist, c# 3 65
Replace statements HTML with HTML IF 8 48
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

738 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