Spry Navigation - CSS Question

Similar Questions

• Spry navigation menu bar

  Hello

  I have a model downloaded from a Web site, that I am editing in dreamweaver. Because menus are already created, I tried to add a spry navigation menu to one of them. Now, I placed the cursor where I need the navigation menu, I chose, insert > spry > bar menus spry now I get a message "dreamweaver does not insert a menu bar in a list.please insert it somewhere else"

  I think that the problem lies in the menu bar that is already created? are there ways I can create the navigation bar on the same menu that is already created, because it is very convinient as it is already made.please help.

  Thank you

  Ayaz,

  I'd say you're better to remove the old menu and replace it entirely with the new Spry Menu :-)

  I think it would be too difficult to try to integrate the two - unless you are very familiar with CSS and Spry.

  --

  Nadia

  Adobe® Expert community: Dreamweaver

  http://Twitter.com/nadiap

  --------------------------------------------------

  Unique templates CSS | Tutorials | SEO articles

  http://www.DreamweaverResources.com

  --------------------------------------------------

  Book: Ultimate CSS reference

  http://www.SitePoint.com/launch/005dfd4/3/133

• Problem with IE box put white behind the spry navigation bar

  IE is also distort menu nav bar boxes in a different random order as well as to a white box behind the spry navigation bar.

  All works fine in Chrome, Safari, and Firefox.

  Does anyone know how to solve these problems?

  The site is http://www.phonicsfaster.com

  I would really appreciate help.

  Thank you

  FM

  Do you want to say just do a div boxes style line as I want them to look in a row? What method would you use to make the color change and also enable it to have a direct link? In DW I usually use image swap behavior for a change on mouse over.

• I'm so new to all of this. Need help spry navigation bar.

  I tried to put last night, but I forgot to attach my file. I added a spry navigation bar, but only one shows the elements upwards, when I look in the code, it seems that all the items are listed, like at home, who we are, how to help, but they do not appear on the design mode or when I view it in the browser. Any ideas what I could have done wrong?

  It seems to work fine for me. Did you change the code to all spry?

  I have attached the file with the file in there. See what it looks like. If it looks worse, try to take a screenshot and attach it.

  Nick

• CS3 Spry css question

  I know basic css without table, my question is, instead of a navigation bar regular, I need to use the widget, spry for a navigation bar drop down menu on an exisitng html page. I am able to insert the spry to the appropriate place on the .html page and make it work but I have a CSS file that is already attached to the page that I need to know if I can just select all of the css in the css spry page and insert it inside my page associated css?

  Any help?

  Yes - you can copy the CSS into your own plug and then remove the reference to the default stylesheet Spry. Alternatively, make a copy of the spry roadmap to edit and link to this one separately.

• CSS IE problem and navigation bar question

  Hello
  
  I have 2 questions:
  
  Is there a way to make all the elements of a horizontal navigation bar the same size, no matter the size of the word? I think I can use a background image, but perhaps someoneknows otherwise...
  
  and the problem with IE is that im setting the style of bottom border of a thing as dotted and thin but looks like "BOLD" or something on IE and normal in firefox, anyone knows how to fix this?
  
  Thank you

  Yes - you are missing the float: left... 8)

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  http://www.dreamweavermx-templates.com - template Triage!
  http://www.projectseven.com/go - DW FAQs, tutorials & resources
  http://www.dwfaq.com - DW FAQs, tutorials & resources
  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
  ==================

  "mfv84" wrote in message
  News:ee1vtp$EUD$1@forums. Macromedia.com...
  > I solved the problem of IE by setting the width of the border to "1px" instead of
  > 'thin' and I tried the "display: block;" thing, but he ordered the
  > navigation bar vertically! Maybe I'm missing something...
  >
  >

• Spry Bar simple Question...

  I created a beautiful bar Spry in DW CS6, and everything is wonderful.  The only question I'll really have is with my submenus.  I have a white outline around all of the Sub Menu (it comes in each browser and live view).  Have you guys any solution to this?

  I know that CS6 more is not supported, but this is what use the company I work for, please help me! I tried to edit each CSS file under my menu spry...

  Thank you

  Peter

  Are you sure that changing the...

  / * Submenu containers have borders on all sides * /.

  UL. MenuBarHorizontal ul

  {

  border: 1px solid #CCC;

  }

  Didn't do?

  This border is 1 pixel, solid and #CCC.

  If you have changed the css and preview of the html page without saving the .css file it would not show any change. The .css needs to be saved to view the change in.

  If you clear the cache after changing the css and the record doesn't fix it, could you put a link to the page here, I should be able to find the culprit quite easily.

• Spry or CSS drop-down Menus? Tutorial suggestions?

  Hello

  I am creating a site Web DreamWeaver CS4 and need to learn how to create drop down menus CSS base.

  Right now I use spry for my drop-down menus. The current site, I create a link ot:

  http://www.robynjeandesign.com/trayerengineering_2/index.html

  I want to make the main navigation on my site Web function as the main navigation on this site, with a vertical menu that appears below the main nav, as opposed to a horizontal menu:

  http://www.canadapowerproducts.com/

  Any siggestions or tutorials on how to do that?

  In a Word, start with this tutorial:

  http://ALT-Web.com/demos/CSS2-Horiz-drop-menu.shtml

  In the provided code, change this:

  #navbar li: hover li,

  #navbar li.hover li {}

  float: none;

  }

  To do this:

  #navbar li: hover li,

  #navbar li.hover li {}

  float: left;

  }

  Nancy O.

  ALT-Web Design & Publishing

  Web | Graphics | Print | Media specialists

  http://ALT-Web.com/

  http://Twitter.com/ALTWEB

• How can I get rid of the white space between my head and my spry navigation bar?

  I have been struggling with a problem for the last 2 days and can't seem to work my way around it. I worked on a page in dreamweaver cs4 that seems to have a space between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari display it correctly. You could point me in the right direction to get rid of this space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html

  Here's my code and thank you in advance for your help:

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
  " < html xmlns =" http://www.w3.org/1999/xhtml ">
  < head >
  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
  < title > Untitled Document < /title >
  < link href = "margaritastyles.css" rel = "stylesheet" type = "text/css" / > "
  < script src = "Margaritas_temp_spry/SpryMenuBar.js" type = "text/javascript" > < / script > "
  < script src = "Scripts/swfobject_modified.js" type = "text/javascript" > < / script > "
  < link href = "Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
  < / head >

  < body >
  < div id = 'wrapper' >
  < div id = "header" >
  < object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "1000" height = "250" id = 'FlashID' tabindex = "10" title = "Header of Marguerite 2 coffee" > "
  < param name = "movie" value = "Flash_movies/Margaritas header 3.swf" / >
  < param name = "quality" value = "high" / >
  < param name = "wmode" value = "opaque" / >
  < param name = "swfversion' value ="9.0.45.0"/ >
  <!-this param tag prompts users with Flash Player 6.0 r65 or later to download the latest version of Flash Player. Delete it if you do not want users to display the prompt. ->
  < param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "
  <!-next object tag is for non - IE browsers. Then he hide from IE using IECC. ->
  <!-[if! IE] >->
  < object type = "application/x-shockwave-flash" data = "Flash_movies/Margaritas header 3.swf" width = "1000" height = "250" >
  <!-<! [endif]-->
  < param name = "quality" value = "high" / >
  < param name = "wmode" value = "opaque" / >
  < param name = "swfversion' value ="9.0.45.0"/ >
  < param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "
  <!-the browser displays the following alternative content for users of Flash Player 6.0 and higher. ->
  < div >
  < h4 > the content of this page requires a newer version of Adobe Flash Player. < / h4 >
  " < p > < a href =" http://www.Adobe.com/go/getflashplayer_fr "> < img src = ' http://www.Adobe.com/images/shared/download_buttons/get_flash_player.gif "alt = 'Get Adobe Flash player' width = '112' height ="33"/ > < /a > < /p > "
  < / div >
  <!-[if! IE] >->
  < / object >
  <!-<! [endif]-->
  < / object >
  < / div >
  < div id = "navigation" >
  < ul id = "MenuBar1" class = "MenuBarHorizontal" >
  < li > < a href = "#" > home < /a > < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Menus
  < ul >
  < li > < a href = "#" > lunch < /a > < /li >
  < li > < a href = "#" > dinner < /a > < /li >
  < li > < a href = "#" > Cocktail < /a > < /li >
  < li > < a href = "#" > Take Out < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" > Photos < /a > < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Catering
  < ul >
  < li > < a href = "#" > < /a > < /li > private Party
  < /ul >
  < /li >
  < li > < a href = "#" > book < /a > < /li >
  < li > < a href = "#" > Contact < /a > < /li >
  < li > < a href = "#" > feedback < /a > < /li >
  < li > < a href = "#" > Directions < /a > < /li >
  < /ul >
  < / div >
  < div id = "maincontentlayout3" > the content of id "maincontentlayout3" goes here < / div >
  < div id = "special" > < img src = "png-gif-jpg/Tuesday night features" width = "200" height = "70" alt = "Of Marguerite Tuesday Night Special" / > < img src = "png-gif-jpg/Wednesday features" width = "200" height = "70" alt = "Wednesday 2 for 1 special dinner to Margarita" / > < img src = "png-gif-jpg/Thursday features" width = "200" height = "70" alt = "ladies Thursday evening at the Café of Marguerite" / > < img src = "png-gif-jpg/Friday features" width = "200" height = "70" alt = "TGIF Happy Hour Friday at the Café Margarita"/ > < img src ="png-gif-jpg/Sunday features"width ="200"height ="70"alt ="Sunday Kids Eat Free at the Café of Marguerite!"/ > < / div >
  < div id = "footer" > < img src = "png-gif-jpg/Margaritas Facebook logo.png" alt = "Facebook" width = "40" height = "25" align = "absmiddle" / > < img src = "png-gif-jpg/Margaritas Twitter logo.png" alt = "Logo of Twitter" width = "40" height = "25" align = "absmiddle" / > < img src = "png-gif-jpg/merchantcircle_mini.png" alt = "Logo of merchant circle" width = "63" height = "25" align = "absmiddle" / > < / div >
  < / div >
  < script type = "text/javascript" >
  <!--
  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "Margaritas_temp_spry/SpryMenuBarDownHover.gif", imgRight:"Margaritas_temp_spry/SpryMenuBarRightHover.gif"});})

  ->
  < /script >
  < / body >
  < / html >

  CSS:

  #navigation {margin-top:-3px ;}}

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• What differentiates Spry JS/CSS other technologies?

  I did see a lot of questions here Spry and used widgets myself. But for the menus, I use CSS Menu writer WebAssist. He used the ul and li tags in the markup or an inclusion, JavaScript for functionality and CSS for style. Basically, it's substantially the same as the Spry menu, so what's the difference? Then we could add some sort of animation effect and call AJAX. I suspect that many of these terms are interchangeable, or may be misused in this way. But Spry seems to come off as something more precise.  Another example is the accordion. I used the widget, Spry, another version that uses jQuery or scriptaculous. Once again, even if it is not the same code, but it is still JS and provides the same functionality.

  Hello

  Spry is a javascript, developed by similar to jQuery Adobe framework (specifically, the UI and ajax), but not as complete. You can also use a number of other frameworks such as YUI or prototype.

  The difference between the writer of menu and a framework, is that a framework is only the starting point of' "' and other functions (menu or accordion) must be added to him via a separate code, while menu writer is full and free contained and written with specific functions, (menu).

  PZ

• Spry link css &amp; js affects other spry features

  My question is

  How a spry features may be affected by adding an another spry of different type to the page?

  What could cause one effect on the other?

  Why could we have one effect on the other?

  is there a limit as to how much you can have?

  (the problem seems to happen in IE and Chrome, Firefox works like a charm)

  When the new spry .js and .css is added to the head tag.

  the first widget (my foldable panels) stop working as a collapsible Panel.

  and they simply appear as if the js is not related. It keeps its styles.

  one think that maybe having them in an inclusion

  (I mean, everything here is work with understands well enough, but still)

  could be messin something for IE?

  N °

  First of all, you have-

  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.DTD">

  http://www.w3.org/1999/xhtml">

  Remove the comment from the top of the page HTML - HTML above the doctype elements will cause some versions of Internet Explorer to view the page in quirks mode, and that's a bad thing.

  Then you have it-

  These two links are already redundant with links in the header of the document.  Please delete.

  Then you have it-

  This link is redundant with that-

  so delete it.

  Now for the drum roll!  Go here - http://www.murraytestsite.com/students.htm

  The trick is a) cleaning up the code and links and jigger b) the order of the links to the Spry elements.  What works on this page is the following order (see the links in the head).

  1 sliding panels

  2. foldable panels

  3. menu Bar

  Check it out...

• Another question from Spry vs IE (question)

  While building a web site using a Spry (vertical) menu bar, I discovered it worked fine in all browsers except IE (forgive me, I'm new). I came on this forum for a few ideas and noticed several posts with IE compatibility issues. I went to my IE browser and "on" everything I could find on ActiveX and scripts in the tools without help sections. I decided to go back to the beginning. I created a blank HTML page in Dreamweaver. I added a line of text "123456789", then added a Spry menu bar using the toolbar DW (just the basic structure of the menu without doing anything to it). I recorded and then watched with Firefox, then IE and it works in Firefox, but the submenus do not appear (as they do in Firefox). Very disappointing.

  My question is - where to start. I guess we know where the problem is - but is the solution in the Spry CSS or Javascript Spry code code?

  I realize that what I have described here is very simplistic compared to more detailed positions, but maybe I'm making something very base - wrong. Many of you seem to agree with the very well IE, so I want to learn your secret. Any thoughts?

  RM

  rockytoprm wrote:

  I understand your point to look at a complex issue in context. (At least at this point), my question is why, given a Basic Spry added to an HTML page menu bar empty, registered, and then observed in Firefox and IE, behave differently? As I hover over the buttons - in Firefox - void menu buttons appear and disappear when and where they should - but not in IE.

  I do not have available for testing IE6, but a Spry menu in a blank page works identically for me in Firefox and IE8 IE8 in compatibility mode.

• Spry Navigation column - to nav to be fixed and to scroll the content

  Hello

  This follows http://forums.adobe.com/thread/441217?tstart=0 but a new question.

  I am trying to create a page where several pages open in the same page.  Using Spry (and a lot of help!) I have implemented an HTML version (example here:http://www.owebtesting2.info/spry_test2.html ).  My customer's next request was for the Navigation on the left to remain fixed, but have content scroll to the bottom of the page.

  I went through Adobe Labs but could not know so Spry that allow? If she allows it, no one knows how to implement it or where I could see the docs.

  Thank you
  NIC

  Attempt to set the position for the div that contains fixed attribute.

  position: fixed;

  HTH

  PZ

  Update: the div for the menu!

  Post edited by: pziecina

• Spry data set question

  I have a question to anyone who is familiar with the data sets spry - a link below for the example I use:

  http://www.thecreativeadvantage.com/clientzone/ca_portfolio_test/print.html

  The source of the dataset is:

  http://www.thecreativeadvantage.com/clientzone/ca_portfolio_test/print_source.html

  ----------------------------------------------------------------

  My question is:

  Is it possible to make the first button appear 'active' when the page opens. For example, each button corresponds to a State of 'Black' when it is not active, a reddish "stable" condition and a dark gray "active" State. All the buttons are black 'inactive' when the page opens, but the first description of the image and it is visible, then I would be the first button to appear 'active' (gray dark instead of black).

  The way it is now, if you click the first link after the page opens, the button changes to the 'active' State and/or colour, but its content does not change it looks like a mistake...

  Any help would be greatly appreciated - Please note: this is a demo page, I'm trying, please disregard the appearance and content - just trying to get the feature...

  Thank you very much!

  Jesse

  ----------------------------------------------------------------

  The associated style sheet is less necessary:

  @charset "UTF-8";

  / * SpryMasterDetail.css * /.

  / * Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. */

  / * This is the selector for the main container of master-detail structure.
  *
  * If you want to limit the width of the structure, master-detail, set a width on
  * the master/detail container. By default, our structure expands horizontally to fill
  * a space available.
  */
  . MasterDetail
  {
  font: 12px Verdana, Geneva, without serif.
  margin: 2px;
  }

  / * This is the selector for the master container element that houses all the MasterColumn
  * classes. By default the column Captain occupy about 35% of the width of the
  * whole structure.
  */
  . MasterDetail. MasterContainer
  {
  background-color: #cccccc;
  border: 1px solid gray;
  Width: 250px;

  float: left;
  overflow: hidden;
  }

  / * This is the selector for an element master column that contains data for
  * a main column.
  */
  . MasterDetail. MasterColumn
  {
  do-size: 11px;
  
  / * background-color: #000000; * /
  Background: url (.. / images/rollover.gif) no-repeat;
  text-indent: 20px;
  color: white;
  Width: 250px;
  height: 10px;
  padding: 5px;
  cursor: pointer;
  }

  / * This is the selector for an element highlighted in the main column.
  */
  . MasterDetail. MasterColumnHover
  {
  / * background-color: #1e1e1e; * /
  Background: url (.. / images/rollover.gif)-250px 0px;
  color: white;
  
  }

  
  / * This is the selector for an element selected in the main column.
  */
  . MasterDetail. MasterColumnSelected
  {
  / * background-color: #464646; * /
  Background: url (.. / images/rollover.gif)-500 px 0px;
  color: white;
  }

  / * This is the selector for the element of retail container containing all the DetailColumn
  * classes. By default, the Details column occupy about 60% of the width of the
  * whole structure.
  */
  . MasterDetail. DetailContainer
  {
  border: 1px solid gray;
  background-color: #ffffff;
  padding: 10px;
  Width: 500px;
  / * float: right; * /
  
  overflow: auto;
  }

  / * This is the selector for an element of detail column that contains data for
  * a detail column.
  */
  . MasterDetail. DetailColumn
  {
  margin-bottom: 1px;
  }

  I could be wrong, and right, you might get your answer here, but isn't the Spry forum here >?

• Positioning CSS questions

  I'm in the beginnings of the creation of my first 'real' site. (In other words, my first site that can actually do something) And I put all my skills to the test. I'm begin by nailing to the bottom of my page/design layout, so I'll switch to programming. I have some problems with positioning/formatting CSS in Internet Explorer.
  
  Here's the url: http://lwrussell.com/new_site/
  
  So far, I've been able to determine all questions that raised between these two browsers except these two problems:
  
  In Internet Explorer, you will notice that the right hand navigation seems cut upward while it looks perfect in Firefox. Any ideas on this one?
  Also, the content area of the body/is placed to the right 10 + pixels in IE where it is in FF.
  
  Any help?
  
  Thank you guys! I really appreciate it!
  Luke

  The page looks the same in IE7/FF2x.

  > IE and FF deal differently with some padding and margins

  No, they don't. At least not in the standard mode. What IE 6 does, however,
  of doubling the margin on a floating when the float element and the margin
  are on the same side. Difficulty on this page by adding-

  Display: inline;

  the rule of #content.

  Why are you using the

  Tag?

  In any case, if you remove your items #ntred and #nbred, you will see the
  Navigation-don't know what they're doing, or why they are there.

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  http://www.projectseven.com/go - DW FAQs, tutorials & resources
  http://www.dwfaq.com - DW FAQs, tutorials & resources
  ==================

  "grammarg" wrote in message
  News:ffbsda$E8R$1@forums. Macromedia.com...
  > IE and FF deal differently with some padding and margins. Maybe start by
  > Reset the default settings? Try this link and you can Google for similar
  > things
  > if this seems to fix the problem.
  >
  > http://www.clagnut.com/blog/1287/
  >