Spry Navigation - CSS Question

I recently added spry navigation to my website (http://www.faithbuilders.com) and tweaked the default CSS to match the website a little better. Everything works well enough, but I've got a few things left to straighten out.
First, there is a gap between the right side of the dropdown menu and the left side of the sub-category menu that pops out to the right. See image below.
Is there any specific part in the CSS that affects this gap?
Second, since the submenu pops out to the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to enable it to pop out to the left OR right, depending on where there is space for it?
Your help is greatly appreciated.
~Sarah

I'm Giving It All wrote:
I recently added spry navigation to my website (http://www.faithbuilders.com) and tweaked the default CSS to match the website a little better. Everything works well enough, but I've got a few things left to straighten out.
First, there is a gap between the right side of the dropdown menu and the left side of the sub-category menu that pops out to the right. See image below.
Is there any specific part in the CSS that affects this gap?
Yes amend 95% to 200px in the css rule below: (as shown)
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 200px;
I'm Giving It All wrote:
Second, since the submenu pops out to the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to enable it to pop out to the left OR right, depending on where there is space for it?
Your help is greatly appreciated.
~Sarah
Not that I know of.

Similar Messages

A CSS question I think

If you would take a look at this page http://www.gcfa.org/add_data.asp you will see that between the header and the navigation bar a white line is there. I don't won't it there, how can I get rid of it?
It must be in my CSS I guess, I checked the images and neither one of them the Header nor the Navigation menu have a white border. Here's my code. Thanks in advance for your help.
My page:
<%@LANGUAGE="VBSCRIPT"%>

<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
    ' execute the insert
    Dim MM_editCmd
    Set MM_editCmd = Server.CreateObject ("ADODB.Command")
    MM_editCmd.ActiveConnection = MM_BishopsLogin_STRING
    MM_editCmd.CommandText = "INSERT INTO dbo.DeptData (Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy) VALUES (?, ?, ?, ?, ?, ?)"
    MM_editCmd.Prepared = true
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, 30, Request.Form("Department")) ' adLongVarChar
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 201, 1, 1000, Request.Form("SubpageTitle")) ' adLongVarChar
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 201, 1, 1000, Request.Form("LinkDescription")) ' adLongVarChar
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 201, 1, 500, Request.Form("URL")) ' adLongVarChar
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 201, 1, 10, Request.Form("DateLastModified")) ' adLongVarChar
    MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 201, 1, 50, Request.Form("ModifiedBy")) ' adLongVarChar
    MM_editCmd.Execute
    MM_editCmd.ActiveConnection.Close
    ' append the query string to the redirect URL
    Dim MM_editRedirectUrl
    MM_editRedirectUrl = "adding_data_results.asp"
    If (Request.Form<> "") Then
      If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0) Then
        MM_editRedirectUrl = MM_editRedirectUrl & "?" & Request.Form
      Else
        MM_editRedirectUrl = MM_editRedirectUrl & "&" & Request.Form
      End If
    End If
    Response.Redirect(MM_editRedirectUrl)
End If
End If
%>
<%
Dim rs_Add_Data__MMColParam
rs_Add_Data__MMColParam = "1"
If (Request.QueryString("RecordID") <> "") Then
rs_Add_Data__MMColParam = Request.QueryString("RecordID")
End If
%>
<%
Dim rs_Add_Data
Dim rs_Add_Data_cmd
Dim rs_Add_Data_numRows
Set rs_Add_Data_cmd = Server.CreateObject ("ADODB.Command")
rs_Add_Data_cmd.ActiveConnection = MM_BishopsLogin_STRING
rs_Add_Data_cmd.CommandText = "SELECT ID, Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy FROM dbo.DeptData WHERE ID = ? ORDER BY ID DESC"
rs_Add_Data_cmd.Prepared = true
rs_Add_Data_cmd.Parameters.Append rs_Add_Data_cmd.CreateParameter("param1", 5, 1, -1, rs_Add_Data__MMColParam) ' adDouble
Set rs_Add_Data = rs_Add_Data_cmd.Execute
rs_Add_Data_numRows = 0
%>
<%
Dim MM_paramName
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "") Then
MM_keepURL = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
If (firstItem <> "") Then
    MM_joinChar = "&"
Else
    MM_joinChar = ""
End If
End Function
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>GCFA: Update Data Files</title>
<link href="samples/OneColumn.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
@import url("images/nav_bar.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="images/mm_css_menu.js"></script>
<script type="text/javascript">

</script>
</head>
<body class="oneColLiqCtrHdr" onload="MM_preloadImages('images/Slices/nav_bar_r2_c2_f2.gif','images/Slices/nav_bar_r2_c 3_f2.gif','images/Slices/nav_bar_r2_c5_f2.gif')">
<div id="container">
    <div id="header">
       <div id="#DataFiles_LOGO"></div>
</div>
<div id="mainContent">
    <div id="FWTableContainer1445733177">
      <table border="0" cellpadding="0" cellspacing="0" width="799">
        
        <tr>
          <td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="5" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="130" height="1" border="0" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
        </tr>
        <tr>
          <td colspan="6"><img name="nav_bar_r1_c1" src="images/Slices/nav_bar_r1_c1.gif" width="799" height="5" border="0" id="nav_bar_r1_c1" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="1" height="5" border="0" alt="" /></td>
        </tr>
        <tr>
          <td rowspan="2"><img name="nav_bar_r2_c1" src="images/Slices/nav_bar_r2_c1.gif" width="1" height="25" border="0" id="nav_bar_r2_c1" alt="" /></td>
          <td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer1015135953_0', 'MMMenu1015135953_0',6,24,'nav_bar_r2_c2');MM_swapImage('nav_bar_r2_c2','','images/Slices /nav_bar_r2_c2_f2.gif',1);"><img name="nav_bar_r2_c2" src="images/Slices/nav_bar_r2_c2.gif" width="221" height="24" border="0" id="nav_bar_r2_c2" alt="" /></a></td>
          <td><a href="http://www.gcfa.org/Department_Data.aspx" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c3','','images/Slices/nav_bar_r2_c3_f2.gif',1);"><i mg name="nav_bar_r2_c3" src="images/Slices/nav_bar_r2_c3.gif" width="221" height="24" border="0" id="nav_bar_r2_c3" alt="Department Data Files" /></a></td>
          <td rowspan="2"><img name="nav_bar_r2_c4" src="images/Slices/nav_bar_r2_c4.gif" width="5" height="25" border="0" id="nav_bar_r2_c4" alt="" /></td>
          <td><a href="http://www.gcfa.org/help_topics.html" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c5','','images/Slices/nav_bar_r2_c5_f2.gif',1);"><i mg name="nav_bar_r2_c5" src="images/Slices/nav_bar_r2_c5.gif" width="221" height="24" border="0" id="nav_bar_r2_c5" alt="Help Topics" /></a></td>
          <td rowspan="2"><img name="nav_bar_r2_c6" src="images/Slices/nav_bar_r2_c6.gif" width="130" height="25" border="0" id="nav_bar_r2_c6" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="1" height="24" border="0" alt="" /></td>
        </tr>
        <tr>
          <td colspan="2"><img name="nav_bar_r3_c2" src="images/Slices/nav_bar_r3_c2.gif" width="442" height="1" border="0" id="nav_bar_r3_c2" alt="" /></td>
          <td><img name="nav_bar_r3_c5" src="images/Slices/nav_bar_r3_c5.gif" width="221" height="1" border="0" id="nav_bar_r3_c5" alt="" /></td>
          <td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
        </tr>
      </table>
      <div id="MMMenuContainer1015135953_0">
        <div id="MMMenu1015135953_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="http://www.gcfa.org/add_data.asp" target="_top" id="MMMenu1015135953_0_Item_0" class="MMMIFVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Add Data </a> <a href="http://www.gcfa.org/update_data.asp" target="_top" id="MMMenu1015135953_0_Item_1" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Update Data </a> <a href="http://www.gcfa.org/delete_data.asp" target="_top" id="MMMenu1015135953_0_Item_2" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Delete Data </a> </div>
      </div>
    </div>
    <br />
        <br />
        <br />
        <br />
        <br />
      <strong>Enter the information you are wanting to add to our database:</strong><br />
</div>
    <form ACTION="<%=MM_editAction%>" METHOD="POST" name="form1" target="_top" id="form1">
      <table width="689" align="left">
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap">Department:</td>
      <td><label>
        <input name="Department" type="text" id="Department" size="75" maxlength="500" />
      </label></td>
    </tr>
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap">Subpage Title:</td>
      <td><label>
        <input name="SubpageTitle" type="text" id="SubpageTitle" size="75" maxlength="1000" />
      </label></td>
    </tr>
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap">Link Description:</td>
      <td><label>
        <input name="LinkDescription" type="text" id="LinkDescription" size="75" maxlength="1000" />
      </label></td>
    </tr>
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap">URL:</td>
      <td><input name="URL" type="text" id="URL" size="75" maxlength="500" /></td>
    </tr>
    <tr valign="baseline">
      <td height="24" align="left" valign="top" nowrap="nowrap">Date Modified:</td>
      <td><input name="DateLastModified" type="text" id="DateLastModified" size="75" maxlength="10" /></td>
    </tr>
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap">Modified By:</td>
      <td><label>
        <input name="ModifiedBy" type="text" id="ModifiedBy" size="75" maxlength="50" />
      </label></td>
    </tr>
    <tr valign="baseline">
      <td height="20" align="left" valign="top" nowrap="nowrap"> </td>
      <td> </td>
    </tr>
    <tr valign="baseline">
      <td align="left" valign="top" nowrap="nowrap"><p> </p></td>
      <td align="left" valign="top" nowrap="nowrap"><label>
        <input type="submit" name="Add_Info" id="Add_Info" value="Add data to database now!" />
      </label></td>
    </tr>
</table>
<p> </p>
<p><br />
      <br />
      <br />
      <br />
      </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
      </p>
<input type="hidden" name="MM_insert" value="form1" />
</form> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer">
    <p align="center">This site is maintained by the General Council on Finance and Administration <script language="JavaScript">
var today_date= new Date()
var year=today_date.getFullYear()
document.write(year)
//--> </script>
©</p>
</div>
</div>
</body>
</html>
<%
rs_Add_Data.Close()
Set rs_Add_Data = Nothing
%>
My CSS Pages:
@charset "utf-8";
body {
/*background:#ffffff;*/
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
/*color: #000000;*/
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-repeat: no-repeat;
background-position: right top;
background-image: url(../images/body_bg.jpg);
.oneColLiqCtrHdr #container {
width: 99%; /* the auto margins (in conjunction with a width) center the page */
/* border: 1px solid #000000;*/
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: ;
background-repeat: no-repeat;
background-position: right top;
.oneColLiqCtrHdr #header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 18px;
background-repeat: no-repeat;
height: 124px;
width: 100%;
background-image: url(../images/dept_data_files_logo.jpg);
padding: 0px;
/*background-color: #67120D;*/
.oneColLiqCtrHdr #mainContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #3C0D0D;
font-weight: 700;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
margin: 0px;
width: 760px;
.oneColLiqCtrHdr #footer {
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
background-color: #000000;
/*width:780px;*/
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
h1 {
color:#FFFFFF;
font-size: 36px;
h2,h3 {
10px;
8px;
color: #000000;
#DataFiles_LOGO{
height:127px;
width: 740px;
background-repeat: no-repeat;
background-image: url(../images/dept_data_files_logo.jpg);
background-position: left top;
padding: 0px;
margin: 0px;
top: 0px;
float: left;
And my Navigation CSS:
td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
#FWTableContainer1445733177 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
width:799px;
height:30px;
text-align:left;
#MMMenuContainer1015135953_0 {
/* This ID is related to the master menu div for menu MMMenuContainer1015135953_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:7px;
top:29px;
visibility:hidden;
z-index:300;
#MMMenu1015135953_0 {
/* This class defines things about menu MMMenu1015135953_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #000000;
width:208px;
height:76px;
.MMMIFVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:26px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
.MMMIVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:0px;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:25px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
#MMMenu1015135953_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:0px;
#MMMenu1015135953_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:26px;
#MMMenu1015135953_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:51px;
#MMMenuContainer1015135953_0 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
#MMMenuContainer1015135953_0 a {
/* Controls the general apperance for menu MMMenuContainer1015135953_0's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#ffcc33;
text-align:center;
vertical-align:middle;
padding:3px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
#MMMenuContainer1015135953_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1015135953_0 */
color:#ffcc33;
background-color:#990000;

Glad you sorted this out.
You might want to mark this as Answered so folks trying to help answer questions won't have to click on this link now. Thanks!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

How do I show what menu title is active, e.g. current page, in spry navigation?

How do I show what menu title is active, e.g. current page, in spry navigation?
See website http://dorsay-easton-indian-law.com/index.html
I want to have Home menu title have a different color when on index.html and so on. I keep using the term "active" for that, and "hover" for mouseover. Is that correct? And what do I need to do so that my menu displays an indication of which page is the current one?

The CSS pseudo-classes in order are:
a = any link
a:link = an unvisited link (normal state)
a:visited = a link after it has been visited
a:hover = on mouseover
a:active = on click
a:focus = reached with tab key
See persistent page indicator on menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Place spry navigation on top of an image?

I have an image on the side of my web page that I am
building. I want to place a spry navigation bar on top of this
image but I can't figure out how to position it correctly. Can
anyone give me a hint? I'm using CS3 on a Mac.
Thanks,
Lou

Is there any way we can see your website? Fishing around in the dark is not a good way to give advice.
I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.
Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.
So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:
CSS:
.player {
background-image: url("/path/myimage.jpg");
HTML:
<div class="player">
<audio controls>
<source src="/path/myaudio.ogg" type="audio/ogg">
<source src="/path/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.
The way you declare an HTML5 document is to start the document with:
<!DOCTYPE HTML>
<html>
This would be before you start your <head> region.
But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.
Without looking at what you're doing, there is a very big limit as to how I can advise you.
-Mark

Spry Navigation Bars - Make them look GOOD

Have Dreamweaver CS4 PC
Using the plain gray spry navigation bars...im somewhat
new...
Question:
Is there any company that sells or Free to "Change the Look"
of the nav bars easily?
I might w ant to change colors, make rounded edges, make type
smaller, compact specing some, adjust the length.
Does someone have a plugin or extension that works
interactively??
Thanks
Ive searched with little results on customizing spry

A more full-featured menu building tool, with lots of styles:
http://www.projectseven.com/products/menusystems/pmm2/carbon.htm
Another nice menu builder, with lots of styles. Because there
are no timers,
I would recommend these for single-level menus or for menus
with a single
sub-menu level:
http://www.webassist.com/professional/products/productdetails.asp?PID=146
Neither is free.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"suzzie12" <[email protected]> wrote in
message
news:gmq9u2$mfl$[email protected]..
> Have Dreamweaver CS4 PC
>
> Using the plain gray spry navigation bars...im somewhat
new...
>
> Question:
>
> Is there any company that sells or Free to "Change the
Look" of the nav
> bars
> easily?
>
> I might w ant to change colors, make rounded edges, make
type smaller,
> compact
> specing some, adjust the length.
>
> Does someone have a plugin or extension that works
interactively??
>
> Thanks
>
> Ive searched with little results on customizing spry
>

How to customize top navigation css in SharePoint 2013?

Hi All,
How to customize top navigation css in SharePoint 2013?(Want to add colors for each link in the navigation)
My current page is like-
Expected-

Hi Sam,
Please check the following article about how to style the top navigation with custom css.
How to: Brand snippets by using CSS in SharePoint 2013
Thanks
Daniel Yang
TechNet Community Support

2 CSS Questions on my layout

Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!

Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team.

Spry Navigation does not work in IE version 6

I have a simple spry navigation bar at the top of website that works in all the browsers I tested it in, ie IE ver 7 and 8, Mozilla Firefox (all versions), Netscape (all versions), and Safari. The only one I can't it to work in is IE version 6. Does anyone know how to fix this?
I am attaching a copy of both browsers, one that does not work and one that does.
Thanks for your help.
Pat

I have the same problem. Looks great in FF, Safari, Opera,
but in IE the dropdowns are dancing all over the place. Suspect
it's something in the hover classification, but can't figure out
where the problem is:
http://www.kirkaubry.com

Spry Navigation Submenu missing

I have a spry navigation menu on my site. In IE6 everything
is fine. But when I go to IE7 when you hover over the button and
the submenu appears only 1 and a half buttons show up, when there
should be a vertical list of 6. I am using a horizontal navigation
bar and the submenu comes up below. Any ideas for me to try?
Thanks for your help. Bryan

Hello,
Get rid of height: 0px; at the bottom of this in your spry
stylesheet:
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: auto;
float: left;
height: 0px;
By the way, are you able to view the page in Firefox? When I
try to it
crashes FF.
Take care,
Tim
"bryanmercer" <[email protected]> wrote in
message
news:fru709$p0k$[email protected]..
>I have attached the code in my previous mesage any help
would be
>appreciated.
>
> Thanks, Bryan

Spry Navigation Bar

I'm new to dreamweaver CS5 and have created a new spry navigation bar. Is there a way to create one generic navigation bar to be used in several different pages so when I have to update the menus, I don't have to change each spry navigation bar for each page. Basically one main navigation bar to be used in several different pages w/out having to create a nav bar for each page.

See here http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps

Spry navigation bar covers flash movie beneath it but not the jpg image, why?

i have a spry navigation bar with a flash movie underneath,
and when i hover over the navbar and the submenu pops down it
covers the flash movie, but it doesn't cover the .jpg image that is
next to the flash movie. how can i fix this? thanks.

thanks for the reply Murray, a responder from the flash forum
gave me the following answer and it worked perfect.>>
The <object> and/or <embed> HTML elements that
reference your Flash content accept a number of optional
parameters. For the <object> element, these parameters are
supplied via nested <param> elements. Simply add the
following new <param>:
<param name="wmode" value="opaque">
The <embed> parameters are supplied via attributes. For
the <embed> element, add the following new attribute:
wmode="opaque"
That’s it. Your Flash content is now stackable via
z-index; for example, you may wrap your
<object>/<embed> pair in a <div> and set the
<div>’s z-index as you please.
<div style="position: absolute; z-index=1;">
<object attributes >
<embed attributes />
</object>
</div>
If you’re using Dreamweaver, just press the Parameters
button in the Insert > Media > Flash dialog or in the
Property inspector when selecting existing Flash content. Type
“wmode” (without quotes) in the name/parameter column
and “opaque” (without quotes) in the value column. That
will handle the above HTML for you, even with the new JavaScript
embedding available since the 8.0.2 update.

Have a CSS question

I have a picture i am trying to put inside a div that has a class already which makes pictures have a frame around them when i insert them into it, which is fine for the main image but i am trying to add an extra image in there and i dont want that frame to be there.
I will attach a picture and a link to the site i am talking about.
If anyone can help me with this CSS question or how i can go about getting rid of the frame around the step 1, step 2 and step 3.
eWeb Solutions Website Development
Thanks!

Take the frame class out the div and apply it to select images like this:
<div>
<img class="frame" src="step1.jpg">
<img src="picture1.jpg">
</div>
<div>
<img class="frame" src="step2.jpg">
<img src="picture2.jpg">
</div>
Nancy O.

Spry navigation covers flash movie element, why?

i have a spry navigation bar with a flash movie underneath,
and when i hover over the navbar and the submenu pops down it
covers the flash movie, but it doesn't cover the .jpg image that is
next to the flash movie. how can i fix this? thanks.

mediastream13,
> i have a spry navigation bar with a flash movie
underneath,
> and when i hover over the navbar and the submenu pops
> down it covers the flash movie, but it doesn't cover the
.jpg
> image that is next to the flash movie.
What you're seeing is the result of the default WMODE
setting for Flash
Player, which you can change. Keep in mind, Flash content
isn't something
any browser natively supports. It requires an ActiveX
component or plugin,
and as a result, is processed outside of the browser's
composition buffer.
This lifts Flash content (and other active content, like
QuickTime, Java
applets, and so on) from the context of its surroundings. To
change that,
you can configure a SWF's WMODE setting for transparent or
opaque, as
described here:
http://www.quip.net/blog/2006/flash/how-to-position-flash-beneath-other-content
Be aware that any WMODE setting other than the default has
been known to
cause usability issues as described in the articles/blog
entries further
linked from the above URL.
David Stiller
Co-author, Foundation Flash CS3 for Designers
http://tinyurl.com/2k29mj
"Luck is the residue of good design."

CheckboxDatagrid (extended) CSS question

Hello
In our application we make use of the CheckBoxDataGrid, which rocks.
We are playing with the CSS and noticed that we arent able to change the "chromeColor" property, in CSS. Only in the MXML.
I would like to set the style in the CheckBoxDataGrid super class, but I do not see a way to specify "headerStyleName".
How and where would that occur in an extended class? Would it need to happen in the constructor?
Also, how would you re-assign the CSS, in ActionScript, in this extended DataGrid class? Any ideas?
Any help is appreciated, thanks folks!

kumar wrote:
Browser: IE 7 (** Is it the browser issue**)Yes. Interactive Report CSS question.. expands the page width to accommodate the IR, with a scrollbar on the viewport that allow the user to view the full width.
Remove
#apexir_DATA_PANEL {
margin-bottom: 10px;
overflow: auto;
}The IE7 bug can be addressed by feeding it the following CSS fix targeted at pre-IE8 browsers with a conditional comment in the page HTML Header:
Specify the <tt>too-wide</tt> static region ID on the IR region for use as a CSS selector.
However, presenting information in a way that requires users to scroll the viewport horizontally is clunky. This will be particularly true in combination with an IR. Think about the user experience: is there an alternative way of displaying this information?

CS3 Spry css question

I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?

Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69

Spry Navigation - CSS Question

Similar Messages

Maybe you are looking for