Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Spry Menu items need to be reduced in width. (http://www.dreamweaverclub.com/forum//showthread.php?t=46755)

PD_Golfer 11-13-2013 11:54 PM

Spry Menu items need to be reduced in width.
 
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 12:48 AM

make a different class for the first two

PD_Golfer 11-14-2013 02:19 AM

Spry Menu items need to be reduced in width.
 
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 04:41 AM

try
Code:

<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 01: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 12:16 AM

?? means it didnt work? is this live so we can see it

PD_Golfer 11-15-2013 07: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 01: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 03:48 AM

or you could look at first and second chld elements,

https://developer.mozilla.org/en-US/...S/:first-child

domedia 11-27-2013 07:40 PM

Or just add another class. An element can have more than one class.

HTML Code:

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


All times are GMT. The time now is 12:46 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com