Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-07-20
12
Medium Priority
?
445 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
[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
  • 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
Fill in the form and get your FREE NFR key NOW!

Veeam® is happy to provide a FREE NFR server license to certified engineers, trainers, and bloggers.  It allows for the non‑production use of Veeam Agent for Microsoft Windows. This license is valid for five workstations and two servers.

 
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 2000 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 2000 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
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.

719 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