Welcome to WebmasterWorld Guest from 54.167.65.247

Forum Moderators: incrediBILL

Message Too Old, No Replies

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

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

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


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.
11:55 am on Dec 19, 2010 (gmt 0)

Senior Member

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

joined:Mar 2, 2003
posts:3710
votes: 0


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

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


?

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>
3:35 pm on Dec 20, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


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?
5:46 pm on Dec 20, 2010 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.
2:57 am on Dec 21, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


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>
5:05 pm on Dec 23, 2010 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.
5:35 pm on Dec 23, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


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.
6:15 pm on Dec 23, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


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.
4:44 am on Dec 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Jan 8, 2010
posts:4
votes: 0


Ha,thanks so much! I have the same puzzle.
5:45 pm on Dec 29, 2010 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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. :-)
5:57 pm on Dec 29, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


<p> instead of <div> is a good idea since margines are a prob.
6:59 pm on Dec 31, 2010 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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. :-)
7:38 pm on Dec 31, 2010 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


ok, thanks.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members