PDA

View Full Version : Spry Menu items need to be reduced in width.


PD_Golfer
11-14-2013, 12:54 AM
I have created a spry drop down menu bar that works well. However, I need to make the first 2 menu items smaller in width. The other items are fine. Any changes I make alters all menu items.
Any suggestions as this is keeping me from putting this to use.
Thanks in advance.

edbr
11-14-2013, 01:48 AM
make a different class for the first two

PD_Golfer
11-14-2013, 03:19 AM
I have created a class=MenuBarHorizantal as you can see below.
I have also Created a Class=MenuBarHorizantal1 that should reduce the size of the 2 menu items.
I'm not sure how this should look in the coding.

<td height="23" valign="top" bgcolor="#CCCCCC"><ul id="MCMenuBar" class="MenuBarHorizontal">

<li><a href="#"><strong>Home</strong></a> </li>
<li><a href="#"><strong>Directors</strong></a></li>
<li><a href="#"><strong>Starting Times</strong></a> </li>
<li><a href="#"><strong>Tournament Results</strong></a></li>
<li><a href="#"><strong>Men's Club News</strong></a></li>
<li><a href="#"><strong>Course News</strong></a></li>
<li><a href="#"><strong>Champion's Page</strong></a></li>
<li><a href="#"><strong>Links</strong></a></li>
<li><a href="#"><strong>SCGA</strong></a></li>
<li><a href="#"><strong>For Sale</strong></a></li>
</ul>

edbr
11-14-2013, 05:41 AM
try

<ul id="MCMenuBar">

<li class="MenuBarHorizontal1"><a href="#"><strong>Home</strong></a> </li>
<li class="MenuBarHorizontal1"><a href="#"><strong>Directors</strong></a></li>


<li class="MenuBarHorizontal"><a href="#"><strong>Starting Times</strong></a> </li>
<li class="MenuBarHorizontal"><a href="#"><strong>Tournament Results</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Men's Club News</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Course News</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Champion's Page</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Links</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>SCGA</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>For Sale</strong></a></li>
</ul>

it can be dome using elements but this is the doen and dirty way:) should work depending on how the classes are designed

PD_Golfer
11-14-2013, 02:28 PM
I've made the changes suggested:
<td height="23" valign="top" bgcolor="#CCCCCC"><ul id="MCMenuBar" >

<li class="MenuBarHorizontal1"><a href="#"><strong>Home</strong></a> </li>
<li class="MenuBarHorizontal1"><a href="#"><strong>Directors</strong></a></li>


<li class="MenuBarHorizontal"><a href="#"><strong>Starting Times</strong></a> </li>
<li class="MenuBarHorizontal"><a href="#"><strong>Tournament Results</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Men's Club News</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Course News</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Champion's Page</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>Links</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>SCGA</strong></a></li>
<li class="MenuBarHorizontal"><a href="#"><strong>For Sale</strong></a></li>
</ul>
</td>

I get the following results which do not include the menu be


.Home
.Directors
.Starting Times
.Tournament Results
.Men's Club News
.Course News
.Champion's Page
.Links
.SCGA
.For Sale

edbr
11-15-2013, 01:16 AM
?? means it didnt work? is this live so we can see it

PD_Golfer
11-15-2013, 08:59 PM
Hi,
I just put up an example of each method. The first method (Test1.html) is with the width set to "auto"
The second (Test2.html) is with the example you provided. Before I created this example I copied and duplicated the css style "MenuBarHorizontal" and called it "MenuBarHorizontal1" and changed the width to 130px. Everything else between the 2 styles is the same.
The addresses for both examples are:
http://montereymensclub.net/Test1.html
http://montereymensclub.net/Test2.html

edbr
11-16-2013, 02:03 AM
ok looks like it will fail without <ul id="MCMenuBar" class="MenuBarHorizontal">
i would try just changing thr width in yur second version and using !important on the width. sorry its trial and error i dont use spry at all

edbr
11-16-2013, 04:48 AM
or you could look at first and second chld elements,

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

domedia
11-27-2013, 08:40 PM
Or just add another class. An element can have more than one class.

<p class="class1 class2">Hello!</p>

.