Welcome to WebmasterWorld Guest from 54.147.20.131

Forum Moderators: incrediBILL

Message Too Old, No Replies

Can I center the first select option text leaving others left justified

     

nelsonm

12:08 am on Dec 17, 2010 (gmt 0)

5+ Year Member



Hi all,

Not a big issue but i thought i'd ask.

I've been trying to center the first select option while leaving the rest left justified, but i'm having not luck. The following is some sample code...

<select name="state" class="ddList">
<option class="selected" value=" " selected="selected">(please select a state)</option>
<option value="--">none</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>


CSS text-align on the select tag works but on the whole list obviously. I tried it on the first option but no joy.

kaled

11:55 am on Dec 19, 2010 (gmt 0)

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Your best bet may be to pad with spaces - it won't be perfect but it should be ok.

Kaled.

rocknbil

6:18 pm on Dec 19, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



?

select { width: 400px; }
select .selected { text-align:center; }

If you mean the visible option item when it first loads, you'll have to class everything else (I think . . . but it works.)


<style type="text/css">
select { width: 400px; text-align:center; }
select .lt { text-align:left; }
</style>

....

<select name="state" class="ddList">
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>

nelsonm

3:35 pm on Dec 20, 2010 (gmt 0)

5+ Year Member



thanks, ill try it.

btw, another question...

the select window does not stay open when you click on it to look for a selection. i have to hold the mouse button down to select anything. Is there a way to get the window to stay open while selecting?

rocknbil

5:46 pm on Dec 20, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmm, I'd say check your code in a validator, the only time I've seen that is when I have an error in my code or some Javascript interfering with my actions.

nelsonm

2:57 am on Dec 21, 2010 (gmt 0)

5+ Year Member



Here is the the code snippet...


<div id="edit-fields1">
<fieldset>
<legend>Charity fields</legend>
<label id="lStreet">Street: <input name="Street" type="text"/></label>
<label id="lCity">City: <input name="City" type="text"/></label>
<label id="lState">State: <input name="State" type="text"/><?php include("inc/US-States-drop-down-list.php"); ?></label>
<label id="lPostalCode" >PostalCode: <input name="PostalCode" type="text"/></label>
<label id="lCountry" >Country: <input name="Country" type="text"/><?php include("inc/country-drop-down-list.php"); ?></label><br/>
</fieldset>
</div>


As you can see, i include the select code via a php include file caled "US-States-drop-down-list.php". I copied the select block from generic samples on the internet. The following is shortened contents of the states include file.

<select name="ddState" class="ddList" id="ddState" onmouseup="passToTextBox('State')">
<option class="ddSelected" value=" " selected="selected">(please select a state)</option>
<option value="--">none</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>

</select>

rocknbil

5:05 pm on Dec 23, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Is the select wrapped in a <label> like the other fields? I see this all the time:

<label> I am the REAL label <input name="i-am-not-a-label"></label>

I don't know why it's prevalent, but should be

<p><label for="some-field"> I am the REAL label</label> <input name="i-am-not-a-label" id="some-field"></p>

Try that, it may be the culprit (if it's not, at least it will be correct . . . ) A label is an accessibility tool that when focused places the focus into the field with which it's associated.

nelsonm

5:35 pm on Dec 23, 2010 (gmt 0)

5+ Year Member



Yes, as you can see from my post above. The php include file that includes the select code is wrapped in a <label>.

I wrap the label around the <input> and <select> to keep the text and text box together when i shrink the browser window with the white-space:nowrap css property.

I will change that and get back to you on the results. Thanks so much for identifying this possible cause.

nelsonm

6:15 pm on Dec 23, 2010 (gmt 0)

5+ Year Member



Yup, that was the problem - thanks so much!

I replaced the <label> tags with <div> tags and it worked! The <select> list now functions normally.

leishusheng

4:44 am on Dec 25, 2010 (gmt 0)

5+ Year Member



Ha,thanks so much! I have the same puzzle.

rocknbil

5:45 pm on Dec 29, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, <div> is a generic container when nothing else will do. Surely you can use a semantic container . . . like a paragraph. You can style the <p> without padding and margin if need be. Say no to div-itis. :-)

nelsonm

5:57 pm on Dec 29, 2010 (gmt 0)

5+ Year Member



<p> instead of <div> is a good idea since margines are a prob.

rocknbil

6:59 pm on Dec 31, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Just to clarify - "margins" are a presentation (visual) consideration. You'd use a paragraph (or list item, or other element) for semantic reasons. That is, your document markup describes the content that's in it:

<h1>I'm the main heading</h1>

<p>I'm a paragraph</p>

<ul>
<li>I'm a</li>
<li>list of links</li>
<li>Styled horizontally</li>
<li>Otherwise known as</li>
<li>a navigation bar</li>
</ul>

This provides relevant information about the content to screen readers and search engines. Divs and spans have no real semantic meaning, but you can style either of them, as well as any other element, to accommodate presentation. This is also the center of one of the most argued topics on the net, using tables for layout. Tables are meant to describe tabular data, not layout elements.

Dass' what I meant. :-)

nelsonm

7:38 pm on Dec 31, 2010 (gmt 0)

5+ Year Member



ok, thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month