Solved

Positioning of labels, input boxes

Posted on 2012-04-11
5
513 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:ericpete
  • 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:ericpete
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now