My Site: http://www.centerearthphotoart.com/

Trying to follow along with Mr. Allen's http://allen-steve.smugmug.com/gallery/2011077 tutorial. Got my menu items set up the way I need them. Now the thing I'm finding tricky is how to place the menu bar and change the colors.

CSS is a big scary monster, lol. I just want the menu items to show up as black text and when hovered over change the text color to a dark gray. That's it. No vibrant or bold color boxes and such. I'm not certain what all I need to change in the CSS to get it that way. There's just too much there and it hurts my brain. @_@;

As for the hover position, I had the prior navbar up top right across from the banner. But if I have to change that due to the drop menu not liking that position I'm thinking of having everything centered again up top, drop menu below the banner.

Help? :)

Originally Posted by CerebrusX My Site: http://www.centerearthphotoart.com/ Trying to follow along with Mr. Allen's http://allen-steve.smugmug.com/gallery/2011077 tutorial. Got my menu items set up the way I need them. Now the thing I'm finding tricky is how to place the menu bar and change the colors. CSS is a big scary monster, lol. I just want the menu items to show up as black text and when hovered over change the text color to a dark gray. That's it. No vibrant or bold color boxes and such. I'm not certain what all I need to change in the CSS to get it that way. There's just too much there and it hurts my brain. @_@; As for the hover position, I had the prior navbar up top right across from the banner. But if I have to change that due to the drop menu not liking that position I'm thinking of having everything centered again up top, drop menu below the banner. Help? :)

Try this CSS, changed all the colors, cell widths and nav position.
Change ong the colors is just look down thru CSS for hover and non-hover
colors and backgrounds. Shouild be a comment for each.

            /* Common Styling */
.menu {
float: right;
margin: -60px 0 0; /* top right/left bottom */
      display: block;
      z-index: 99;
  /*  padding: 20px 0px 30px 0px;  */ /* spacing around menu - top right bottom left */
      height: 20px;   /* menu container (div .menu) */
      width: 480px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
 /*   margin: 0 auto; */ /* this should center navbar, if not tweak with left's below */
}

.menu ul {
      padding: 10px 0px 10px 0px;  /* this effects menu centering if too big */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

.menu ul li {
   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
      float:left;    /* WARNING: float right reverses menu */
      position:relative !important;   /*  ***** Carbonite fix ***** */
}

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      font-size: 12pt;         /* main buttons */
      color: black ;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: 80px;           /* main box width */
      height: 20px;           /* main box height */
  /*  border: 1px solid  red; */ /* start your design with borders on, easier to position DD's & FO's */
  /*  border-width: 1px 1px 1px 1px; */
      background: #746552;    /* main button color */
      padding-left: 0px;
      line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
      width: 80px; w\idth: 80px;      /* IE main button */
}

.menu ul li ul {
      display: none;}

       /*                             */
       /* Specific to Non-IE browsers */
       /*                             */

.menu ul li:hover a { 
      color: #ccc;       /* main when hover DD */
      background: #746552;  /* main when hover DD */
}

.menu ul li:hover ul {
     z-index:99;
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      top: -4px;            /* FF DD up down */
      margin-top: 17px;     /* FF main mouse active vertical */
      left: 0px;            /* FF DD right left */
      width: 104px;         /* unknown */
}

.menu ul li:hover ul li ul {
      display: none;
}

.menu ul li:hover ul li a {
      display: block;
      background: #746552;  /* DD FO non-hover */
      color: #000;           /* DD FO non-hover */
      height: auto;
      line-height: 20px;      /* DD FO box height */
      padding: 0px 0px;
      width: 120px;            /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
      background: #746552;     /* DD FO hover */
      color: #ccc;      /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
      display: block;
      position: absolute;
      left: 102px;           /* FF FO right left  */
      top: -27px;            /* FF FO up down  */
      width: 146px;          /* FF FO box width */
}

      /*                             */
      /*   Specific to IE browsers   */
      /*                             */

.menu ul li a:hover {
   /* text-decoration: none;  */  /* might be needed */
      color: #ccc;               /* main hover */
      background: #746552;        /* main hover */
}

.menu ul li a:hover ul {
     z-index:99;
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      top: 2px;                /* DD container up down */
      background: none;        /* gets rid of DD container */
      margin-top: 7px;         /* DD container up down */
      left: 0px;               /* DD right left */
}

.menu ul li a:hover ul li a {
      display: block;
      background: #746552;        /* IE DD color non-hover */
      color: #000;               /* IE DD color non-hover */
      height: auto;
      line-height: 20px;        /* IE DD FO box height */
      padding: 0px; 
      width: 145px;             /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height: 0;
      width: 0;
}

.menu ul li a:hover ul li a:hover {
      background: #746552;  /* DD FO hover */
      color: #ccc;         /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: #000000;                /*   unknown       */
         left: 147px;                   /*   FO right left */
} 

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
         width: 125px; 
         w\idth: 139px;
}

    /* another hack for IE5.5 */

* html .menu ul ul {
         top: 30px;
         t\op: 31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
.menu table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html .menu ul ul a {
         width: 125px;             /* unknown */
         w\idth: 104px;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
         visibility:visible; 
}

          /* keep the 3rd level hidden when you 
             hover on 1st level list OR link */
.menu ul a:hover ul ul,  /* IE */
.menu ul:hover ul ul {   /* FF */
         visibility:hidden;
}

          /* keep the 4th level hidden when you 
             hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul,  /* IE */
.menu ul li:hover ul li:hover ul ul {     /* FF */
         visibility:hidden;
}

         /* make the 3rd level visible when you hover 
            over 2nd level list OR link */
.menu ul a:hover ul a:hover ul,   /* IE */
.menu ul:hover ul:hover ul {      /* FF */
         visibility:visible;
}

         /* make the 4th level visible when you 
           hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul,   /* IE */
.menu ul li:hover ul li:hover ul li:hover ul {        /* FF */
         visibility:visible;
}

 /* ==== END NAVBAR CODE ==== */

Start and stop your html without a ny breaks like this.

<div id="my_header">

<div id="my_banner"> </div>

<div class="menu">
<ul>
   <li><a href="http://www.centerearthphotoart.com/">Home</a></li>
...
...
...
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

</div> <!-- closes my_header -->

Thank you; thank you! You've been so much help. :)

I don't think there were comments on all the colors? But, ah; well. ... Something tells me that just having that giant chunk of CSS, comments taken away would be a good thing to train the eye with.

But anyway; yeah. I'm not sure why I have my html with line breaks... I think it actually had an effect on the site itself so that's why I did it in the first place.. *Shrugs.*

I need help centering my navbar (www.kdelongphotography.com) Also need to have my banner centered

Thanks!

Karen

Originally Posted by BC Krazy I need help centering my navbar (www.kdelongphotography.com) Also need to have my banner centered Thanks! Karen

Enter the actual width and height and it will center.

#my_banner { width: 600px; height: 188px; margin: 0 auto;
background: url(http://www.kdelongphotography.com/photos/i-trs8VM7/0/L/i-trs8VM7-L.png) no-repeat;
}

The width here will center the nav. Set it to a minimum without it wrapping to two lines.

/* style the outer div to give it width */
.menu {
margin: auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:630px;     /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

THANKS Allen!!!! Worked like a charm

Karen
www.kdelongphotography.com

I am trying to refine my site, I am wanting to know how I can position my drop down menu on the right side of the screen. I currently am using the built in menu of smugmug