logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-14-2013, 12:54 AM   #1
PD_Golfer
 
Join Date: May 2013
Posts: 11
Default 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.
PD_Golfer is offline   Reply With Quote
Old 11-14-2013, 01:48 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

make a different class for the first two
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-14-2013, 03:19 AM   #3
PD_Golfer
 
Join Date: May 2013
Posts: 11
Default 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>
PD_Golfer is offline   Reply With Quote
Old 11-14-2013, 05:41 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-14-2013, 02:28 PM   #5
PD_Golfer
 
Join Date: May 2013
Posts: 11
Default

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
PD_Golfer is offline   Reply With Quote
Old 11-15-2013, 01:16 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

?? means it didnt work? is this live so we can see it
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-15-2013, 08:59 PM   #7
PD_Golfer
 
Join Date: May 2013
Posts: 11
Default

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
PD_Golfer is offline   Reply With Quote
Old 11-16-2013, 02:03 AM   #8
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-16-2013, 04:48 AM   #9
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

or you could look at first and second chld elements,

https://developer.mozilla.org/en-US/...S/:first-child
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-27-2013, 08:40 PM   #10
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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

HTML Code:
<p class="class1 class2">Hello!</p>
.
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:55 PM.


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