Solved

Need help formating a page in HTML, using  <label> against <select>

Posted on 2014-07-20
12
436 Views
Last Modified: 2014-07-20
So I have a page with multiple Select boxes.   An most of it works great, my problem is the <label> for the Select Box wants to be adjusted against the left margin instead of at the top of the box on the Left side of it,  and the select drop down always is properly centered on the page.  No matter how I change the align on the <label>

<div id="divGroups" style="display: inline">
<p class="c1">
<label for="Pin" style="float:left; margin-right:3px;">Select from Group List - &nbsp&nbsp</label> 
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">

Open in new window


HTML-label-Capture.JPG
0
Comment
Question by:Phonebuff
  • 6
  • 4
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40207615
What's the full HTML including CSS - what you have posted is no help
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207629
Gary,

     The page is a kludge --

              A Wordpress page --- With a PHP script with the Insert PHP Plugin that spits out the HTML  with a series of Echo statements, and PostgreSQL select statements that build the Select option statements.    
 
             The whole things works well, excepted that when trying to float the label against the upper left hand corner of the select box with the statements above the label is adjusted against the left margin while the box is centered correctly.  

             The select above groups which is not a multiple does not use the label as the text appears where it should to the left of the box which is only a single select not a multiple.

The C1 class for the paragraph is noting more than ..

 p.c1 {text-align: center} 

Open in new window

     
I know that it has to do with the way I have the combination of the paragraph, label and select statements coded, I am just not able to identify the issue I have and hope to find some direction here..

TIA --
0
 
LVL 58

Expert Comment

by:Gary
ID: 40207637
If you want it above the select box then you shouldn't be floating it and I don't know why you are using a label e.g.

<div style="width:400px;margin:0 auto">
<div>Select from Group List</div>
<select>
...
</select>
</div>

Open in new window

If you want it to the left of the select box then
<div style="width:500px;margin:0 auto">
<div style="display: inline-block;">Select from Group List</div>
<select>
...
</select>
</div>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 7

Expert Comment

by:rgranlund
ID: 40207649
<div id="divGroups" style="display: inline">
<p class="c1">
<label for="Pin" style="float:left; margin-right:3px;">Select from Group List - &nbsp&nbsp</label>
<br />
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207652
I definitely want it to the left an at the top of the select with a size=5.  

An my <div> is hidden until the selection is made in the first box.  

But, your <div> inside the the <div>  looks like an interesting solution, let me try that.   Oh an I used <label> because I was attempting to "label" the select box field name "pin" an in looking at HTML manuals and sites that seems to be the recommended solution.

Will get back in a few minutes.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40207663
So something like this
http://jsfiddle.net/U8R32/1/
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207665
@rgranlund

   Looks like mine with the exception of the "<br />" line.  How does adding a break with an undefined close help ?

   ====
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207671
@gary, yes and that works..   So my understanding of the label is wrong --  

THANK YOU !
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 40207676
The best solution is to give each element it's own CSS class  and define them thoroughly in your style sheet.  However, using the "KISS approach" (Keep It Simple Stupid) works also.  So, I suggest try placing a <br />.  Float l
left on each element should work also.
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207687
Not so fast,  

    When I changed the code my Label was on top on the select box not on the left side aligned top.

     Pasted it into jsfiddle abnd it does the same thing --

<div id="divGroups" style="width:300px;margin:0 auto">
<div style="display: inline-block;vertical-align:left">Select from Group List -- </div>
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">
<optgroup label="Select a Recipient(s) Group from the List">
</optgroup> 
</select> 
<br><br>
</div>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40207689
The container div has to be big enough to fit everything in
http://jsfiddle.net/F2ADX/
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207692
:-)   Nice catch, I tried 500 but not 600..

Than you very much --  Only to psql functions ..  

=================
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

808 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