8 replies [Last post]
sherjudd
sherjudd's picture
Offline
newbie
USA
Last seen: 5 years 25 weeks ago
USA
Timezone: GMT-5
Joined: 2015-02-18
Posts: 5
Points: 6

I have created a css horizontal menu that is working fine, but what code do I put in so a down arrow gif is in place where there are sub-items? And where do I put the code in my style.css file?
I have attached the gif that I want to use.
The sytle.css file is located here:
http://www.clarecountyartscouncil.info/menu_css/style.css
Any help is much appreciated,
Thank you!

AttachmentSize
arrow.gif51 bytes
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi sherjudd, Here's a site

Hi sherjudd,
Here's a site that shows many examples of lists http://css.maxdesign.com.au/listamatic/
including some with images.

sherjudd
sherjudd's picture
Offline
newbie
USA
Last seen: 5 years 25 weeks ago
USA
Timezone: GMT-5
Joined: 2015-02-18
Posts: 5
Points: 6

No down arrow graphic code at css maxdesign

Hi Tony,
Thank you for the help. I went through the site you sent and there was not code given anywhere of putting in a static graphic in the element where there are sub-menus that will open up when moused over.

Here is all I need to know:
In the following is one element of the nav. menu that has a sub-item. Can you please put in what code to put where to have the graphic, arrow.gif show up all the time under "Home"?

<div id="centeredmenu">
  <ul>
  <li class="active"><a class="active" href="index.html">Home</a>
  	<ul>
  	<li><a href="about.htm">About the CCAC</a>
  	</ul>
	</li>
  </ul>
</div>

Thank you!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

See the code below

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    ul {
      list-style: none;
      margin-left: 0;
      }
 
    ul#main-menu > li.top-level {
      display: inline-block;
      margin: 0 .75em;
      padding-left: 1em;
      background: transparent url(down-triangle-arrow.gif) left .5em no-repeat;
      }
 
    ul#main-menu-text-version > li.top-level {
      display: inline-block;
      margin: 0 .75em;
      }
 
    ul#main-menu-text-version > li.top-level::before {
      content: "\25b6";
      }
 
    ul#main-menu-text-version > li.top-level:hover::before {
      content: "\25bc";
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <h1>
      Adding an arrow
    </h1>
 
    <h2>
      Using a background image
    </h2>
    <!-- The div is redundant. The <ul> is a perfectly good container for a list -->
    <!-- <div id="centeredmenu">  -->
 
    <ul id="main-menu">
      <li class="top-level">
        <a href="index.html">Home</a>
        <ul>
          <li>
            <a href="about.htm">About the CCAC</a>
          </li>
        </ul>
      </li>
    </ul>
    <!-- </div>  -->
 
    <h2>
      Using text with the ::before pseudo-element
    </h2>
 
    <ul id="main-menu-text-version">
      <li class="top-level">
        <a href="index.html">Home</a>
        <ul>
          <li>
            <a href="about.htm">About the CCAC</a>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sherjudd
sherjudd's picture
Offline
newbie
USA
Last seen: 5 years 25 weeks ago
USA
Timezone: GMT-5
Joined: 2015-02-18
Posts: 5
Points: 6

thanks

I'll see what I can do with this.
Thank you.

sherjudd
sherjudd's picture
Offline
newbie
USA
Last seen: 5 years 25 weeks ago
USA
Timezone: GMT-5
Joined: 2015-02-18
Posts: 5
Points: 6

adding arrow.gif to style.css code

Hello Gary,
I tried to find what part of the code you sent to what I already have. I cannot just switch to your code because I have a style.css file that is driving the menu. What you sent is in-document style code.
So I should have asked how I need to change the style.css coding to add the arrow.gif. My bad--wrong question. Puzzled I was hoping I could just add some code for the image, to the menu itself, but not possible, huh?
Anyway, if I put it in the style.css file's code can you help me know where to add it, and what code to add?
Instead of sending the entire style.css code, here are the sections:

#centerdmenu {

/* Top menu items */
"centered menu ul {

#centeredmenu ul li {

#centeredmenu ul li a {

#centeredmenu ul li.active a {

#centeredmenu ul li a:hover {

#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a {

/* Submenu items */
#centeredmenu ul ul {

#centeredmenu ul ul li {

#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a{

#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover {

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {

#centeredmenu ul ul.last li {

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {

Let me know if it would be better to send the whole code.
Thank you!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Simply move it to the style.css file

I embedded the style to simplify the example. Also, my class and id tokens are not the same as yours. Edit the example style declarations to match your structure and copy to your style file.

It is incumbent on you to study the references I linked, else you will need to ask the same questions again and again without having learned what you're doing.

Try adding the declaration(s) to your styles. If it doesn't work for you, post back the exact way you did it, and we can go from there.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sherjudd
sherjudd's picture
Offline
newbie
USA
Last seen: 5 years 25 weeks ago
USA
Timezone: GMT-5
Joined: 2015-02-18
Posts: 5
Points: 6

Out of my league

Sorry, Gary,
But you are flying over my head.
I realize that your class and ID tokens are not the same as mine, and I have no idea how to edit the example style declarations to match my structure and copy to my style file. I don't know what or how to add declaration(Drunk to my styles.
Is there any way you can tell me where to put arrow.gif either in? Either in the menu code or in the style.css file code?
Thank you for you patience,
Sheryl

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Knowledge base

Sheryl, your knowledge base appears to be a bit narrow. I can't really get into that kind of detail without seeing the actual page you're coding. I looked at the home page, but it is constructed of tables and is almost twenty years obsolete. So, I'm guessing you're trying to completely refactor it. I'd need to see the new markup.

I'd really recommend you extend your knowledge by working through the beginners' html and css tutorials at HTMLDog so that I won't be "flying over [your] head", and we can talk on the same level.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.