Solved

Positioning of labels, input boxes

Posted on 2012-04-11
5
529 Views
Last Modified: 2012-04-12
Style sheet:
#gsstyle label {font-weight:bold; text-align:left; margin: 8px 0 0 10px;}
.gsinput {font-size:12px; padding:2px 0px 4px 0px; border:solid 1px #aacfe4; margin:0px 0 10px 10px;}

Open in new window

Page:
<div id="gsstyle">
  <label>Company:</label><br style="line-height: 2.5em;" />
  <input name="ctl00$MiddlePlaceHolder$company" type="text" id="ctl00_MiddlePlaceHolder_company" class="gsinput" /><br style="line-height: 2.5em;" />
                                   
  <label>First Name:</label><label style="position:relative; left: 100px;">Last Name:<br style="line-height: 2.5em;" />
  <input name="ctl00firstname" type="text" id="firstname" class="gsinput" /><input name="ctl00lastname" type="text" id="lastname" class="gsinput"  />

Open in new window

                                 
Two issues:
1. If I remove the style="position:relative; left: 100px;" from the Last Name label, First Name and Last Name show up right next to each other, as do the input boxes (image01).image01If I add the style information into the second label (Last Name), then I get what is shown in image02. Question 1 is "why?"image022. If I add the style information to the second input, then I get image03. Question 2 is related: "why?"image03What I'd like to do is have the label aligned with the left edge of the input box.
0
Comment
Question by:Eric AKA Netminder
[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
  • 2
  • 2
5 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 470 total points
ID: 37836109
So, multipart question.  Two "whys" and a "how do I fix it"

Whys:  Your structure is not great.  Labels and inputs are inline elements so using line breaks and CSS to try and line up the result will have unpredictable results.  Instead of behaving like blocks and lining up per your commands, you are pushing elements around via widths and the relative position.  Relative positioning starts from the parent element placement and moves from there which is why stuff gets pushed around depending on which tag you apply it to.  By not declaring a fixed width, elements are expanding to their browser defaults.

Solution: Don't do it this way.  Use divs to wrap your label/field pairs, declare a width and float to achieve side-by-side pairs.  Change the labels to block elements and delcare width to make for nice top-aligned lables.

<!-- Your code -->

<div id="gsstyle">
  <label>Company:</label>
  <br style="line-height: 2.5em;" />
  <input name="ctl00$MiddlePlaceHolder$company" type="text" id="ctl00_MiddlePlaceHolder_company" class="gsinput" />
  <br style="line-height: 2.5em;" />
  <label>First Name:</label>
  <label style="position:relative; left: 100px;">Last Name:</label>
  <br style="line-height: 2.5em;" />
  <input name="ctl00firstname" type="text" id="firstname" class="gsinput" />
  <input name="ctl00lastname" type="text" id="lastname" class="gsinput"  />
</div>

<!-- My code -->

<div style="width:200px; float:left;">
  <label for="firstname" style="width:100px;display:block">First Name</label>
  <input id="firstname" name="firstname" size="30" type="text" />
</div>
<div style="width:200px; float:left;">
  <label for="lastname" style="width:100px;display:block">Last Name</label>
  <input id="lastname" name="lastname" size="30" type="text" />
</div>

Open in new window

0
 
LVL 15

Author Closing Comment

by:Eric AKA Netminder
ID: 37836143
Outstanding. Your Genius ranking is woefully inadequate.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 37836153
Question 1. Position relative means position the element relative to itself. When it isn't positioned, it sits in the flow of the page where the position of the tag is in the html code. Adding relative 100 px would place it 100 pixels away from the left of where it normally would sit.
The input boxes then reposition based on the what came before it.
Question 2. Is essentially the same as the above, in that now the input box is moved relative to itself.

To position it in alignment you can do a few things such as using divs (or tables if you are masochistic) to group the label and input box together, then float them to either side and use display:block; to ensure they go on different lines. You can then place the divs in display:inline; so they are side by side. That may require a container div around them both however.

Purely using CSS you can position every element (or each type) individually by using their IDs.
Here is a useful page to help with positioning:
http://www.w3schools.com/css/css_positioning.asp

The w3schools site is a great reference for web design as it tells you exactly how things work and what properties work with what elements.


I'd also remove all style from the HTML and put it solely in the CSS. That is what it's for and avoids confusion as to what is providing the style.
To give a better more targeted answer it would be best to see your entire HTML and CSS code, or better a live site.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 37836159
Too late in my reply. Good work jason1178, that was basically what I was getting at, you simply said it better and quicker.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37840963
>> you simply said it better and quicker.

I was falling asleep at the time.  Had to work fast :)
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

622 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