Horizontal menu and lists

hi:
is it possible to construct an horizontal menu where each
item is
preceded by a user bullet?
myBullet Item1 myBullet Item2 myBullet Item3 ...
display: inline; hide the bullets. i tried inserting the
image before
each item but i haven't been able to properly align it
vertically
tia,
jdoe

thanks, i'll give a try!
Michael Fesser wrote:
> .oO(John Doe)
>
>> is it possible to construct an horizontal menu where
each item is
>> preceded by a user bullet?
>>
>> myBullet Item1 myBullet Item2 myBullet Item3 ...
>>
>> display: inline; hide the bullets. i tried inserting
the image before
>> each item but i haven't been able to properly align
it vertically
>
> Use CSS to put a background image and some padding on
the menu items,
> e.g.
>
> .menu li {
> padding-left: 10px;
> background: url(/path/to/image) left no-repeat;
> ...
> }
>
> HTH
> Micha

Similar Messages

Horizontal menu and horizontal submenu

I've been using Spry menus successfully for some time now, and am able to make most modifications I need.
This one has me stumped. I'm hoping the answer is in the CSS.
I have a horizontal menu across the top of my page.
The client wants the submenu to be another horizontal menu below the primary, also across the top of the page.
But I can't seem to figure out how to get the desired layout for the submenu.
Is there something simple I can do in the css to "unstack" the submenus and have all items within each submenu appear on one line?
If I can get that far, I am worried that the active area being annoying or unuseable to their audience. Maybe I can set the delay to help this.
Thanks in advance. Amy.
ITEM ONE ITEM TWO ITEM THREE
subone-a subone-b subone-c

Figured it out myself. Just changed every instance of block to inline and ta-da.
And it isn't too awkward afterall.

Spry horizontal menu alignment problem

There is an issue I am dealing with that is causing problems.
I am trying to avoid having the borders double up in thickness, anywhere within the menu.
I have achieved this by using the left and bottom border everywhere I can and then adding class or id tags where appropriate and adding my own top and right borders.
Works fine everywhere except at the top of the dropdown section of the submenus where it connects with the main horizontal menu.
I would like that top box of the submenu to align perfectly with the main horizontal menu bar so that there is a clean single pixel line.
A clean contiuous line around all menu objects.
When I add a top border on that top box of the submenu, I can adjust the placement a little but it always seems to either over ride the main horizontal menu, which causes me to either lose the border or double up on it.
if I have a border completely around both the horizontal menu and the submenu, then when I align them so that the borders sit on top of each other, I get an artifact at the corners of the lines that appear as a gap. It is NOT clean.
I can edit the position of the submenu in the CSS code below, I have done this with the margin-top statement. I have adjusted that between 0 and -1, and will inlcude images of the problem. Hopefully this will work.
I want a very clean continous line around the menu boxes that does NOT leave gaps, does NOT double up in thickness or leave any strange looking artifacts anywhere.
Any help would be greatly appreciated!
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
margin-top: 0px;
    margin-left: 0px;

Posting screenshots only demonstrates the problem. For anyone to troubleshoot it for you, they need to see the actual menu. Upload the problem page to a public website, and post the URL here. Then someone can have a look at it for you.

Spry horizontal menu titles

Ok here is my problem. I am using the spry horizontal menu and am trying to make a list of drop down menus. Rather than having sub menus that have flyout child menus I just want to have a list of menus that have titles.
Basically What I want would be something like this
Header
Title
     Link
     Link
     Link
Title2
     Link
     Link
     Link
rather than:
Header
Title >   Link
            Link
            Link
Title2 > Link
            Link
            Link
However, I can't figure out how to make my titles just be plain titles, rather than links. As it stands, when I hover over my titles, spry can't differentiate them from the actual links that will go to different pages.
I don't really care if they are still links, I can work around that. I guess my question is, is there a way to change the CSS so that some of the submenus look different then others
(ex. titles don't change font or background color but the rest of them highlight in blue)
Hope this makes sense,
Thanks in advance

Something like this?
<ul id="MenuBar1" class="MenuBarVertical">
Title
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul id="MenuBar2" class="MenuBarVertical">
Title 1
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
I hope this helps.
Ben

My Spry Horizontal Menu doesn't work

I created my Spry horizontal menu and tried it in preview browser and it doesn't work. I published the site to see if it check didn't work in preview mode and it REALLY doesn't work.
I'm sure it's something simple that I am just missing, but what I don't know. I have attached the css style sheet as I did change the spacing and colors.
Is it something I could be missing on the individual pages and linking there?
I apologize for being dumb, but I am a newbie to this and the tutorials I took don't go into detail about linking other than to explain the linking from your index page. Is there more linking that I need to do?
Here is the menu and I did place it in it's own div tag.
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Bar Code Products</a>
      <ul>
        <li><a href="#" class="MenuBarItemSubmenu">Bar Code Scanners</a>
          <ul>
            <li><a href="scanGen.html">General Purpose</a></li>
            <li><a href="scanInd.html">Industrial</a></li>
          </ul>
        </li>
        <li><a href="software.html">Bar Code Software</a></li>
        <li><a href="verifier.html">Bar Code Verifiers</a></li>
        <li><a href="media.html">Media Supplies</a></li>
        <li><a href="printer.html">Printers</a></li>
        <li><a href="solution.html">Software Solutions</a></li>
      </ul>
    </li>
    <li><a href="consult.html">Consulting</a></li>
    <li><a href="contact.html">Contacts</a></li>
    </ul>
I thought that was all there was to it.
What am I missing. I can link to one page, but have to click on the back button to view any other page and keep repeating that process to view all the pages.
Boy do I feel stupid.
Any help would be appreciated. Needless to say I republished my friends old site because of functionality. But I'd really like to get this one working for him.
Thanks in advance.
Oops

NEVER MIND. What an idiot. I never copied the linked menu bar into the other pages. My stupid.
Thanks and sorry to waste your time.

Horizontal menu bar shows serif type font in Live View and Preview but sans serif is in css file

Help I am using the Spry horizontal menu bar and while it is working fine, it is showing a serif font in Live View and in all Browsers even though I have selected a sans serif font. What gives? I have attached the SpryMenuBarHorizontal.css

Add this to your embedded styles:
body {
background-color: #999;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
using, of course, the font list you want.
All those styles that rely on the 'default' font will now default to the Trebuchet font list (or to your chosen list).
Beth

Spry Horizontal Menu List Items crash IE6 browser

****Update*****
Apparently, it was width:100%; set on each hover over
background color for the list items in our default stylesheet that
was causing IE6 to crash.
Menus are in working order in all browsers now!
We have integrated the Spry Horizontal Menu with a website,
and added custom styling to SpryMenuBarHorizontal.css. The menu
works in Mozilla, Safari, and IE7. However, in IE6, after hovering
over the navigation, the drop down menu appears, but, as soon as
you move your mouse into the drop down to select an item from the
list, IE6 crashes. Every time. Various Computers.
We have tried reverting to the original
SpryMenuBarHorizontal.css file, however, the same problem occurs.
We haven't made any changes to the original js file
(SpryMenuBar.js).
Has anyone ever experienced this issue?
Here is our customized CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
img#nfl {
background-image:url(/Images/slices/nfl.png);
background-repeat:no-repeat;
height:14px;
width:40px;
margin:7px auto auto 25px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nfl.png");
_background-repeat:no-repeat;
_background-image:none;
img#mlb {
background-image:url(/Images/slices/mlb.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px 20px auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/mlb.png");
_background-repeat:no-repeat;
_background-image:none;
img#milb {
background-image:url(/Images/slices/milb.png);
background-repeat:no-repeat;
height:14px;
width:112px;
margin:7px auto auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/milb.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto -10px;
img#ctown {
background-image:url(/Images/slices/ctown.png);
background-repeat:no-repeat;
height:14px;
width:114px;
margin:7px auto auto 50px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ctown.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 40px;
img#nba {
background-image:url(/Images/slices/nba.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px auto auto 100px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nba.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 70px;
img#nhl {
background-image:url(/Images/slices/nhl.png);
background-repeat:no-repeat;
height:14px;
width:41px;
margin:7px auto auto 90px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nhl.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:margin:7px auto auto 100px;
img#ncaa {
background-image:url(/Images/slices/ncaa.png);
background-repeat:no-repeat;
height:14px;
width:52px;
margin:7px auto auto 70px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ncaa.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 60px;
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width:950px;
height:32px;
background-image:url(/Images/slices/primaryNavSlice.png);
background-repeat:repeat-x;
margin:0px;
padding:0px;
vertical-align:middle;
border-bottom:1px solid #000;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
/*width: 8.2em;*/
width:auto;
position: absolute;
left: -1000em; /* without this all menus are visible without
hover */
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the
screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto; /* without this menus don't show up */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/*width: 8.2em;*/
width:auto;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.15em 0.15em;
text-decoration: none;
ul#teamsMenu table#teams {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:11px;
width:500px;
background-color:#fff!important;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
To center the tables in the screen
li.nfl_list #teams.nfl_table {
position:absolute;
top:7px;
li.mlb_list #teams.mlb_table {
position:absolute;
top:7px;
li.milb_list #teams.milb_table {
position:absolute;
left:-80px;
top:7px;
li.ctown_list #teams.ctown_table {
position:absolute;
top:7px;
li.nba_list #teams.nba_table {
position:absolute;
left:-200px;
top:7px;
li.nhl_list #teams.nhl_table {
position:absolute;
left:-190px;
top:7px;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
}

I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals.

Spry horizontal menu problem in IE and Chrome

First I'd like to express my frustration with spry. I spend way too much time trying to "band-aid" spry to work in different browers. I'll admit that I'm new to the web game but I seem to spend a large percentage of my time simply trying different "fixes" to something that I don't think should be this much of a problem. Regardless ...
I've made a pretty simple web page, put a spry horizontal menu on it and it works and displays just like it's supposed to in FF but IE and Chrome both seem to have a problem with it. Currently there are no links attached to it but that's not my problem - getting it to display correctly is. Possibly this issuehas already been addressed but I couldn't find it in the forum. Webpage can be viewed here
I've put (what I believe to be) the relevant css on the Main Content section of the page. Any help will be much appreciated. Thanks in advance.

I am so glad that you started again, this is the best way to learn, trial and error.
To fix your woes to date, have a look at the following
.thrColFixHdr #header {padding:0;} /*remove the padding from the menubar container*/
ul.MenuBarHorizontal{width:auto;margin:0;} /*remove the fixed width and auto margin*/
ul.MenuBarHorizontal li{width:16.6667%;} /*spread the 6 items over the full width 6*16.6667% = 100%*/
ul.MenuBarHorizontal ul a{text-align:left;} /*Set the the alignment back to left for any menu item links that are in a sub menu*/
To add images to your menu items have a look at the following http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html, you will find it at the bottom of the page.
I did not realise that SolidWorks still existed, started using it in the mid 1990's, excellent product, easy to use and promotes fast product development. I lost track of it when I went for retirement 10 years ago.
Gramps.

Please help! How can I validate Radio Buttons and List Menu with PHP.

Hello everyone, I have been learning PHP step by step and
making little projects.
The point is I find it easy to learn by doing "practical
projects."
I have been reading the David Powers's Book on PHP Solutions
and it's really great, however there is nothing mentioned regarding
Validating Radio buttons. I know the book cannot cover every aspect
of PHP and maybe someone in here can help.
I have been learning how to process HTML forms with PHP.
The problem is every book or tutorial I have read or
encountered fall short on validation.
I'm wondering how I can learn to validate Radio Buttons and
Select List Menu.
I have managed to create validation for all other fields but
have no clue as to how I can get validation for Radio Buttons and
List Menu.
I would also like an error message echoed when the user does
not click a button or make a selection and try to submit the form.
I would appreciate any help.
Patrick

It's not that default value is "None." In fact it's not. It
will only be
"none" when the form is submitted.
Also if your submit button is names 'send' then
$_POST['send'] will only be
set if the form was submitted.
Make sure you didn't hit the refresh button on your browser
which usually
reposts the information. Also make sure you did not reach the
form from
another form with the same button names.
Otherwise paste the snippet.
Also you can check what fields are set in the post array by
adding this to
the top of (or anywhere on) your page:
print_r($_POST);
Cosmo
"Webethics" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Off the top of my head this should be no different than
your radio buttons
> except that 'productSelection' will always fail the
!isset check when the
> form is submitted since the default value is "None", and
therefore always
> set. :-)
>
> So how about this..?
> <?php
> if (isset($_POST['send']) and
($_POST['productSelection'] == "None"))
> {echo "Please select a product.";}
> ?>
>
>
>
>
> "Webethics" <[email protected]> wrote
in message
> news:[email protected]...
> > Another question - how do i applied the code you
just showed me to
> > select
> > menu
> > or select list?
> >
> > This is the list:
> >
> > <div class="problemProduct">
> > <label for="productSelection"><span
class="product_label">Product
> > Name.</span></label>
> > <select name="productSelection" id="products"
class="selection">
> > <option value="None">-------------Select a
product----------</option>
> > <option value="Everex DVD Burner">Everex DVD
Burner</option>
> > <option value="Vidia DVD Burner">Vidia DVD
Burner</option>
> > <option value="Excerion Super Drive">Excerion
Super Drive</option>
> > <option value="Maxille Optical Multi
Burner">Maxille Optical Multi
> > Burner</option>
> > <option value="Pavilion HD Drives">Pavilion
HD Drives</option>
> > </select>
> > </div>
> >
> > I thought I could just change the name is the code
from operatingSystem
> > to
> > productSelection.
> >
> > Something like this:
> >
> > From this:
> >
> > <?php
> > if (isset($_POST[send]) and
!isset($_POST['operatingSystem']))
> > {echo "Please select an operating system.";}
> > ?>
> >
> > To this:
> >
> > <?php
> > if (isset($_POST[send]) and
!isset($_POST['productSelection']))
> > {echo "Please select an operating system.";}
> > ?>
> >
> > But this does not work, any ideas?
> >
> > Patrick
> >
>
>
>
>
> Hey, I tried this about but as you mentioned, since the
default product
> value
> is "None" an error message appears when the page loads.
>
> Is there a way to code this things so that even though
the default value
> is
> "None" there ia no error message untle you hit the
submit?
>
> When I applied the code, it messes up the previous code,
now the operating
> system is requiring an entry on page load.
>
> When I remove the code from the list menu everything
goes back to normal.
>
> I know this is a little much but I have no other
alternatives.
>
> Patrick
>

Horizontal menu bar - increase the height and center the vertical treat position.

I am using SpryMenuBarHorizontal.css and want to increase the height of a horizontal menu bar 20 28px and have the menu names move to be centered vertically, rather than be aligned at the top.
Can anyone help me figure out how to do this?

In the following adjust the highlighted value to suit
ul.MenuBarHorizontal a {
padding: 0.5em 0.75em;
Gramps

Horizontal menu bar height and formating

I'm trying to put a horizontal menu bar into a table cell
that's 507px wide by 21px high. I've run into two issues.
First, adding a Spry MenuBar to this cell causes it to grow
by 1px in height and thus throwing off all of my graphics in other
cells. Setting the height in ul.MenuBarHorizontal to 21px does not
change this (20px, auto, inherit didn't change it either). I've
tried smaller fonts. Any ideas on how to get this work?
Second - if I don't set the height to a pixel value in
ul.MenuBarHorizontal, my background image is only displayed behind
the menu items. That leaves a good bit of white space. My
background image is 1px wide by 21px high and is stretched to fill
the full background. Setting a height will make the background
image cover the complete cell. Is that a feature?
thanks,
Dan

If I change the positioning element in ul.MenuBarHorizontal
to absolute, my horizontal menubar fits within the cell and does
not cause it to grow. Any other setting for positioning throws off
the cell size and screws up my sliced graphics in other cells of
the table. I don't understand why the menubar shifts in a fixed
width/height cell. If it's set to static or fixed, the cell grows
by 1px in height. If it is set to relative, it grows much
larger.

*Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content

Hey,
I am a newbie to Dreamweaver and was wondering if someone can
help me with the Spry Horizontal Menu Bar....
http://www.djdanmatthews.net
1) After moving mouse over diffrent areas of Spry menu bar
the text seems to disapear or not show up?
2) I can't seem to center content of Spry menu bar with rest
of website?
3) How do I ad a image (where also can I get it) to the Spry
menu bar so it looks more professional &3d?
Thanks so much,
Dan

*Bump

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Horizontal Menu problem in Firefox and Safari

I have created a Spry Widget horizontal menu bar in my
template .dwt. This menubar worked fine at first in IE7, Firefox3,
and Safari 3 and 4, but now that all pages are in place, it
displays incorrectly in Firefox and Safari. Specifically, for each
dropdown menu, only the final item appears. While creating the
pages, I did not make any changes to the template, so I am not sure
what caused this error.
www.davidarbury.com

You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Then, if you have a look near the bottom of SpryMenuBarVertical.css you will see that the white background colour has been specified for IE as in
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
Change the value to #CCC and it will have fixed that part of the problem.
When you upgrade to the later version of Spry, make sure to keep a copy of the CSS file as a reference to modifying the new CSS file.
Gramps

HT5706 I just purchased an AppleTV and am trying to connect AirPlay with my mac (2012 model) In 'system preferences displays' an airplay menu is listed but it says 'no device detected'. My AppleTV and macbook are connected to the same network. Any help?

I just purchased an AppleTV and am trying to connect AirPlay with my mac (2012 model) In 'system preferences > displays' an airplay menu is listed but it says 'no device detected'. My AppleTV and macbook are connected to the same network. Any suggestions why it is not working?

Troubleshoot the network as that is likely what is causing the issue.
Also, temporarily disable the firewall on the Mac and disable IPV6 on the computer.

Horizontal menu and lists

Similar Messages

Maybe you are looking for