Solved

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

Posted on 2014-07-20
12
427 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
 
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
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!

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

746 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

12 Experts available now in Live!

Get 1:1 Help Now