Solved

dreamweaver css using li and ul

Posted on 2010-09-08
10
633 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

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!

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

718 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