Digital Grin Photography Forum - Dropdown Navbar help thread

Page 5 of 63

< 1 2 3 4 5 6 7 8 9 15 55 > Last »

Show 40 post(s) from this thread on one page

Digital Grin Photography Forum (http://www.dgrin.com/index.php)

- SmugMug Customization (http://www.dgrin.com/forumdisplay.php?f=31)

- - Dropdown Navbar help thread (http://www.dgrin.com/showthread.php?t=168571)

Allen

Jul-12-2010 06:07 PM

Quote:

Originally Posted by L o R a C (Post 1420748)

Sorry, Allen. I thought I had it figured out on my own until someone was looking at my website at work and I noticed that the 2nd level fly out couldn't be accessed - some of the letters were missing in each link.

I tried one thing, and most of it was fixed except one word. Sooo, I just tried something else (I won't know if it works or not until I go to work tomorrow.) Bottom line, I got rid of most of my 2nd level fly-out to see if that would work. The fly-out seems to be a problem on some computers and I want it to look nice on all computers. I just kept events. Looks great on my website, but when I copied and pasted the code to my blog, it's tellng me:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "ul" must be terminated by the matching end-tag "

I can't find the culprit. It's the same as my website and it works there. I did change the " (quotes) to ' so they matched the rest of my blog code. Here's my drop down nav bar code from my blog:
...
Can you see what's missing? The red part looks like it's extra text (although again, it's that way in my website customization). I also realize that the formatting isn't being shown (although it is while I'm editing this), but I'm pretty confident the formatting is ok, just the ul issue is incorrect. Appreciate all your help.

Please don't post your code, those that can help can see it.

One thing I noticed is you can not use relative links back to Smugmug on
your blog. They have to be full links.

mike.strock

Jul-12-2010 06:10 PM

Quote:

Originally Posted by Allen (Post 1420775)

Remove the half of a comment tag at the top of your CSS.

.notLoggedIn .menu {display: none;}
/*

OK, I believe I have done that now.

Thanks again.

Mike.

Allen

Jul-12-2010 06:27 PM

Quote:

Originally Posted by mike.strock (Post 1420783)

OK, I believe I have done that now.

Thanks again.

Mike.

Looks like you pasted the nav in the middle of the banner, found the missing closing */.

#my_banner {
width: 199px;
height: 66px;
margin: 0 auto;
background: url(http://www.myhomeoffice.org/eoscommon/images/logo.jpg) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enable d=true,sizingmethod=image,src='http://www.myhomeoffice.org/eoscommon/images/logo.jpg');
} */

smmokan

Jul-12-2010 08:32 PM

Quote:

Originally Posted by Allen (Post 1420706)

Change these like this and we'll look again it's not what you want.

Code:

      /* style the links for the top level */

.menu a, .menu a:visited {

   display:block;

   font-size:14pt;

   text-decoration:none;

   color:#F4F7F1;

   background:#5D5D5D;

   font-family: verdana;

   width:auto;            /* Defines the main box dimensions. */

   height:25px;           /*How tall your cells are */

   line-height:20px;      /*Adjust this to vertically center your text in each cell. Should be about the same as height. */

   padding: 0 10px;

   min-width: 100px;

}



add this new rule after the one above

.homepage .menu a, .homepage .menu a:visited {background:#bbb;}



these might toggle gallery and homepage so might need additional rules after this change



      /* main hover ?IE? */

.menu a:hover, .menu ul ul a:hover {

   color:#A4A4A4;

   background:#5D5D5D;

}

      /* main hover */

.menu :hover > a, .menu ul ul :hover > a {

   color:#A4A4A4;

   background:#5D5D5D;

}

Is there a way to make the drop-down menu background color match the darker gray of the theme instead of changing it to the light gray? The main nav bar looks good now- it's just when you hover over the "Our Tours-By Country", it changes to the light gray... which doesn't look good, IMO.

Allen

Jul-12-2010 08:59 PM

Quote:

Originally Posted by smmokan (Post 1420820)

First, remove the red from your CSS. You can not have text without comment tags around it in CSS.

add this new rule after the one above
.homepage .menu a, .homepage .menu a:visited {background:#bbb;}

these might toggle gallery and homepage so might need additional rules after this change

I'll look at getting the backgrounds changed. Each change will need a
specific homepage version because of the background difference. Tricky
but can be done.

Look at the head tag box and see if there is one of these in there. It shows on your page.
> or >

Allen

Jul-12-2010 09:22 PM

Quote:

Originally Posted by smmokan (Post 1420820)

Change your whole CSS to this, easier then changing individual things.

Code:

#homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;}

#bioBox {width: auto !important;} 



#bioBox .photo {display: none;}



#userBio {text-align: center !important;}





/* CSS Dropdown Nav Bar */

/* Original code by Stu Nicholls of */

/* http://www.cssplay.co.uk/ */

/* Edited for content, formatting and some elements */

/* Please help support CSSPlay at: */

/* http://www.cssplay.co.uk/support.html */



/* CSS Section */



      /* style the outer div to give it width */

.menu {

   z-index:99;

   margin: 0 auto 20px;  /* top R/L bottom */

   position:relative;    /* Make the container moveable */

   width:420px;          /* Main bar total width, minimize to center */

}



      /* remove all the bullets, borders and padding from the default list styling */

.menu ul {

   padding:0;

   margin:0;

   list-style-type:none;

}



.menu ul ul {

   width:130px; 

}



      /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu position */

.menu li {

   float:left;

   text-align:center;

   width:auto; 

   position:relative;

   padding: 0;

}



     /* style the links for the top level */

.menu a, .menu a:visited {

   display:block;

   font-size:14pt;

   text-decoration:none;

   color:#F4F7F1;

   background:#5D5D5D;

   font-family: verdana;

   width:auto;            /* Defines the main box dimensions. */

   height:25px;           /*How tall your cells are */

   line-height:20px;      /*Adjust this to vertically center your text in each cell. Should be about the same as height. */

   padding: 0 10px;

   min-width: 100px;

}



.homepage .menu a, .homepage .menu a:visited {background:#bbb;}



      /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited

    {width:130px; w\idth:130px;}



      /* style the second level background non-hover */

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#5D5D5D;}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:#5D5D5D;}

.menu ul ul :hover > a.drop {background:#5D5D5D;}

.homepage .menu ul ul a.drop:hover {background:#bbb;}

.homepage .menu ul ul :hover > a.drop {background:#bbb;}





      /* hide the sub levels and give them a position absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

   top:25px;

   left:15px; 

   width:150px;  /* Size of the daughter cells */

}



      /* another hack for IE5.5 */

* html .menu ul ul 

   {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */



      /* style the table so that it takes no part in the layout */

.menu table {position:absolute; top:0; left:0;}



      /* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

   color:#F4F7F1;

   background:#5D5D5D;

   height:25px; 

   line-height:25px; 

   width:150px;

}



.menu ul ul :hover > a.drop  {background:#5D5D5D;}   /* 2nd if 3rd level exists */



      /* yet another hack for IE5.5 */

* html .menu ul ul a 

   {width:120px; w\idth:120px;}



      /* main hover ?IE? */

.menu a:hover, .menu ul ul a:hover {

   color:#A4A4A4;

   background:#5D5D5D;

}

      /* main hover */

.menu :hover > a, .menu ul ul :hover > a {

   color:#A4A4A4;

   background:#5D5D5D;

}



.homepage .menu :hover > a, .homepage .menu ul ul :hover > a {

   background:#bbb;

}

      /* make the 2nd level visible when hover on 1st level list OR link */

.menu ul :hover ul {visibility:visible;}



/* End Navbar Code */

smmokan

Jul-13-2010 08:15 AM

OK- it looks perfect on the homepage and the gallery pages. One thing though (sorry!)- the color is off for the intermediate page (where the country's galleries are listed): http://experienceplus.smugmug.com/Ou...ountry/Germany

Allen

Jul-13-2010 10:39 AM

Quote:

Originally Posted by smmokan (Post 1421046)

Try adding the red

.category .menu a, .category .menu a:visited,
.category.subcategory .menu a, .category.subcategory .menu a:visited,
.homepage .menu a, .homepage .menu a:visited {background:#bbb;}

.category .menu ul ul a.drop:hover,
.category .menu ul ul :hover,
.category.subcategory .menu ul ul a.drop:hover,
.category.subcategory .menu ul ul :hover,
.homepage .menu ul ul a.drop:hover,
.homepage .menu ul ul :hover > a.drop {background:#bbb;}

.category .menu :hover > a, .category .menu ul ul :hover > a,
.category.subcategory .menu :hover > a, .category.subcategory .menu ul ul :hover > a,
.homepage .menu :hover > a, .homepage .menu ul ul :hover > a {
background:#bbb;
}

smmokan

Jul-13-2010 02:44 PM

Quote:

Originally Posted by Allen (Post 1421135)

Oooh, got it! Thanks Allen!

L o R a C

Jul-15-2010 02:23 PM

Quote:

Originally Posted by Allen (Post 1420781)

Please don't post your code, those that can help can see it.

One thing I noticed is you can not use relative links back to Smugmug on
your blog. They have to be full links.

Thank you for trying. Just wanted to give you an update. It didn't work. Didn't want you to think it did and I wasn't grateful. I decided to get rid of the bulk of my buttons on my blog.

SarahLynne

Jul-15-2010 02:48 PM

Hi there, I've been working on some code for my dropdown & flyout nav bar. I had it working this afternoon, but when I checked it out on another computer it is completely different! My fly outs arent working at all. I checked it on firefox ans Internet Explorer and it is spaced out wrong in IE. I am sure I went wrong with the code somewhere. You guys helped me before and I really appreciated it, and I was wondering if I could get some help again. Thank you so much.
link: www.sarahphotography.ca

Allen

Jul-15-2010 03:02 PM

Quote:

Originally Posted by SarahLynne (Post 1422456)

This almost always mean errors in your html. I'll have a look.
In the mean time take a look at the troubleshooting code box in post No.1.

Allen

Jul-15-2010 03:09 PM

Quote:

Originally Posted by SarahLynne (Post 1422456)

Try this

Code:

<div id="my_banner">

<a href="/galleries">

<img src="/img/spacer.gif" border="0" height="200" width="1000"></a>

</div>



<div class="menu">

<ul>

<li><a href="/galleries" title="">Galleries

    <!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

        <li><a class="drop" href="/Wildlife" title="">Wildlife 

            <!--[if gte IE 7]><!--></a><!--<![endif]-->

            <!--[if lte IE 6]><table><tr><td><![endif]-->

            <ul>

               <li><a href="/Wildlife/Birds/11025008_TZ4SQ" title="">Birds</a></li>

               <li><a href="/Wildlife/Animals/11044167_7PoPW" title="">Animals</a></li>   

            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

        </li>

        <li><a class="drop" href="/landscapes" title="">Landscapes

            <!--[if gte IE 7]><!--></a><!--<![endif]-->

            <!--[if lte IE 6]><table><tr><td><![endif]-->

            <ul>

                <li><a href="/Landscapes/Summer/11032379_b8Z6A" title="">Spring &amp; Summer</a></li>

                <li><a href="/Landscapes/Winter/11033219_8B9px" title="">Winter</a></li>

                <li><a href="/Landscapes/Fall/11485867_a9SLq" title="">Fall</a></li>

                <li><a href="/Landscapes/Rural/12937491_Y4s34" title="">Rural</a></li>

            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

        </li>

        <li><a class="drop" href="/waterscapes" title="">Waterscapes

            <!--[if gte IE 7]><!--></a><!--<![endif]-->

            <!--[if lte IE 6]><table><tr><td><![endif]-->

            <ul>

                <li><a href="/Waterscapes/Spring/11283696_T5Q4V" title="">Spring &amp; Summer</a></li>

                <li><a href="/Waterscapes/Winter/11033453_uqYsU" title="">Winter</a></li>

                <li><a href="/Waterscapes/Fall/11485984_LuZmm" title="">Fall</a></li>

            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

        </li>

        <li><a href="/Macro/Close-Ups/11486686_dRFxi" title="">Macro</a></li>

    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="/gallery/11032286_AjZsW" title="">Biography</a></li>

<li><a href="/gallery/11044464_4oxPB" title="">Guestbook</a></li>

</ul>

</div> <!-- closes menu -->

<!-- End Navbar Code -->

Allen

Jul-15-2010 03:16 PM

Quote:

Originally Posted by SarahLynne (Post 1422456)

Try this CSS, something in your current one is misbehaving.

Code:

/* CSS Dropdown Nav Bar */

/* Original code by Stu Nicholls of */

/* http://www.cssplay.co.uk/ */

/* Edited for content, formatting and some elements */

/* Please help support CSSPlay at: */

/* http://www.cssplay.co.uk/support.html */



/* CSS Section */



      /* style the outer div to give it width */

.menu {

   z-index:99;

   margin: 0 auto 20px;  /* top R/L bottom */

   position:relative;    /* Make the container moveable */

   width:360px;          /* Main bar total width, minimize to center */

}



      /* remove all the bullets, borders and padding from the default list styling */

.menu ul {

   padding:0;

   margin:0;

   list-style-type:none;

}



.menu ul ul {

   width:130px; 

}



      /* float the list to make it horizontal and a relative positon so that you can control the dropdown 



menu positon */

.menu li {

   float:left;

   text-align:center;

   width:auto; 

   position:relative;

   padding: 0;

}



      /* style the links for the top level */

.menu a, .menu a:visited {

   display:block;

   font-size:12pt;

   text-decoration:none; 

   color:#fff;

   background:none;

   font-family: Arial;

   width:auto;            /* Defines the main box dimensions. */

   height:25px;           /*How tall your cells are */

   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about the 



same as height. */

   padding: 0 10px;

   min-width: 100px;

}



      /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited

    {width:130px; w\idth:130px;}



      /* style the second level background non-hover */

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:#000;}

.menu ul ul :hover > a.drop {background:#000;}



      /* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;}  /* not FF */



      /* style the third level hover */

.menu ul ul ul a:hover {background:#000;}

.menu ul ul ul :hover > a {background:#000;}     /* 3rd (w/o 4th) 4th hover */



      /* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

   top:25px;

   left:0; 

   width:130px;  /* Size of the daughter cells */

}



      /* another hack for IE5.5 */

* html .menu ul ul 

   {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */



      /* position the third level flyout menu */

.menu ul ul ul {

   left:120px; 

   top:0;

   width:180px;

   height:auto;

}



.menu ul ul ul li a {

   color:#fff;

}



.menu ul ul ul li a:hover {

   color:#ccc;

}



      /* position the fourth level flyout menu */

.menu ul ul ul ul {

   left:130px; 

   top:0;

   width:130px;

   height: auto !important;

}



     /* 4th level non-hover */

.menu ul ul ul ul li a {

   color:#fff;

   width:150px;

}



      /* style the table so that it takes no part in the layout */

.menu table {position:absolute; top:0; left:0;}



      /* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

   color:#fff;

   background:#000;

   height:25px; 

   line-height:25px; 

   width:100px;

}



.menu ul ul :hover > a.drop  {background:#000;}   /* 2nd if 3rd level exists */



      /* style the third level links */

.menu ul ul ul a, .menu ul ul ul a:visited {

   color:#fff;              /* hover 2nd > 3rd & 4th */

   background:#000;        /* hover 3rd > 4th */

   height:25px; 

   line-height:25px; 

   width:150px;

}



      /* yet another hack for IE5.5 */

* html .menu ul ul a 

   {width:120px; w\idth:120px;}



      /* main hover ?IE? */

.menu a:hover, .menu ul ul a:hover {

   color:#ccc;

   background:#000;

}



      /* main hover */

.menu :hover > a, .menu ul ul :hover > a {

   color:#ccc;

   background:#000;

}



      /* make the 2nd level visible when hover on 1st level list OR link */

.menu ul :hover ul {visibility:visible;}

      /* keep the 3rd level hidden when you hover on 1st level list OR link */

.menu ul :hover ul ul {visibility:hidden;}

      /* keep the 4th level hidden when you hover on 2nd level list OR link */

.menu ul :hover ul :hover ul ul {visibility:hidden;}

      /* make the 3rd level visible when you hover over 2nd level list OR link */

.menu ul :hover ul :hover ul {visibility:visible;}

      /* make the 4th level visible when you hover over 3rd level list OR link */

.menu ul :hover ul :hover ul :hover ul {visibility:visible;}



/* End Navbar Code */

You also have an extra } at the end to remove.

/* End Navbar Code */
}

SarahLynne

Jul-15-2010 03:31 PM

Thank you SO MUCH! I really honestly appreciate the help!! Out of curiosity so that I can know for next time, in the html, were there a lot of errors? Was I doing something consistently wrong?

Allen

Jul-15-2010 03:55 PM

Quote:

Originally Posted by SarahLynne (Post 1422479)

Thank you SO MUCH! I really honestly appreciate the help!! Out of curiosity so that I can know for next time, in the html, were there a lot of errors? Was I doing something consistently wrong?

Yal, a bunch, some missing and some extra. Did you compare the before and after?

Looks like there is now an unclosed tag messing your site.
Looks the CSS banner float:left; and menu align:right; is messing it up.
How do you want them positioned?

This in your header has no </div>
<div align="right">
I'd remove it.

rokzmom

Jul-15-2010 05:36 PM

Hi Allen,
First, thank you for the assistance you provided last month for my navbar questions. I'm sorry that I've not been back to say thanks sooner, but have been out of town and away from the computer thanks to the kids being home for summer vacation. I have gotten the issue resolved for the banner and navbar overlapping when re-sizing a browser.

However, I am continuing to have an issue in IE8 with the navbar not working. The navbar displays the first level properly. When I move my cursor over the menu items, the drop downs will display. HOWEVER, if I then attempt to move the cursor to one of the items that has appeared, the item disappears as soon as I move the cursor off of the first level. It renders the navbar useless in IE8. The functionality is working properly for every other browser I have tested. Please help!

Thank you,
Anne

Allen

Jul-15-2010 06:27 PM

Quote:

Originally Posted by rokzmom (Post 1422557)

It works here in IE8. Is the IE8 zoom level set at 100%.

Try changing the top in this one px at a time until it works. 24 > 23 ...

Code:

 /* hide the sub levels and give them a position absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

   top:25px; 

   left:-10px; /* centers drop text under main */  

   width:130px;  /* Size of the daughter cells */

}

rokzmom

Jul-15-2010 07:59 PM

Thanks for the fast response! I tried your suggestion and once I brought it down to 20px, I can now drop down and select the first drop down menu item. Was still encountering the same problem for any menu items below the first two in the list. But your suggestion pointed me in the right direction for what to try tweaking. I scrolled down a bit in the CSS code and found this section:

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#b72727;
background:none;
height:20px;
line-height:20px;
width:100px;
}

I changed the items that are in pink from 25px to 20px and that seems to have done the trick! Thanks so much!:clap:clap:clap

rokzmom

Jul-17-2010 09:31 AM

Okay, I really hope this is my last question about my navbar!

The only problem that I am now encountering is that when I resize a browser page, the navbar items are dropping down and wrapping underneath each other. I really would like the navbar to be fixed so that if the browser width is minimized, a horizontal scroll bar would appear and the user would be forced to scroll to see the rest of the scrollbar.

Thanks in advance!

picturetheplanet

Jul-19-2010 07:48 PM

Making custom logo and nav bar same as website.

Hello Everyone,

My first post here. I am currently trying to set up my portfolio page for www.picturetheplanet.com. Everything is good except trying to get the custom logo and navbar the same as the site.
I am not the best with code but have cut and pasted from my theme to get it to where it is now.
The main problem is when I view the page in the same browser on 2 different sized monitors the nav bar and the logo change position and overlap.
Any help would be greatly appreciated.
My smugmug page is http://travelphotos.picturetheplanet.com/

thanks in advance,

Dave

platinumwater

Jul-21-2010 04:24 PM

Hello, Everyone:

I applied the code in the first post to my website, and it works. But I want to put the Navigator on the top right at the same level of my banner.

I put this code on CSS box, but it turns out the Nav is at somewhat the middle of the screen.

#navcontainer {
float: right;
margin-top: 30px;
margin-bottom: 20px;
}

My smugmug website is: www.platinumwaterphoto.com

Can you guys help me out here?

Thanks a lot.

Eric

platinumwater

Jul-21-2010 04:35 PM

I try to get rid of the code I posted, the Nav is shown all the way at right, but still not in line with the banner.

Also, when click into the my portfolio, like Engagement, the Nav squeeze out the main page to the left. How do I fix it?

I also want my banner and Nav has some space to the left/right edge of window, align with the space of main page. How can I realize it?

Thanks

Eric

Quote:

Originally Posted by platinumwater (Post 1425943)

Allen

Jul-22-2010 05:19 PM

Quote:

Originally Posted by platinumwater (Post 1425951)

Move the banner div to the bottom below the menu div and change it like
this to remove the photo. It will be added as a background in CSS. Then the nav will not pop down when they overlap.

<div id="my-banner"></div>

Change these in CSS like this. Adjust the red to move each in towards page center.

Code:

#my-banner {

   width: 535px;

   height: 75px;

   margin: 10px 0 0 10px;  /* top R bottom L */

   background: url(http://platinumwater.smugmug.com/photos/942148889_FEcbp-9c96a6e281759ea4e5b9ae4cf284efc7.jpg) no-repeat;

}



      /* style the outer div to give it width */

.menu {

   z-index:99;

   float: right;

   margin: 43px 30px 0 0;  /* top R bottom L */

   position:relative;    /* Make the container moveable */

   width:500px;          /* Main bar total width, minimize to center */

}

platinumwater

Jul-22-2010 06:13 PM

Thanks, Allen:

I apply your code, but I still couldn't place the Nav and the Banner(logo) at the same horisonal level. It turns out the Nav bar is on top right and banner is below left.

Also I couldn't make the right margin of Nav bar the same as the homepage. I have 50px margin right in the home page.

Any idea? :bow

I have been trying this web layout days and nights.

Many thanks in advance.

Eric.

Quote:

Originally Posted by Allen (Post 1426649)

Code:

#my-banner {

   width: 535px;

   height: 75px;

   margin: 10px 0 0 10px;  /* top R bottom L */

   background: url(http://platinumwater.smugmug.com/photos/942148889_FEcbp-9c96a6e281759ea4e5b9ae4cf284efc7.jpg) no-repeat;

}

 

      /* style the outer div to give it width */

.menu {

   z-index:99;

   float: right;

   margin: 43px 30px 0 0;  /* top R bottom L */

   position:relative;    /* Make the container moveable */

   width:500px;          /* Main bar total width, minimize to center */

}

Allen

Jul-23-2010 07:01 AM

Quote:

Originally Posted by platinumwater (Post 1426666)

Does this help?

Code:

      /* style the outer div to give it width */

.menu {

   z-index:99;

   margin: 43px 30px 0 0;   /* top R bottom L*/

   position:relative;    /* Make the container moveable */

   width:630px;          /* Main bar total width, minimize to center */

 /* display: inline; */

   float: right;

}

platinumwater

Jul-23-2010 07:33 PM

Allen, YOU ARE THE BEST~~~~! I mean it. really!!!

Thanks so much for your help. I finally got what I want it to be.

Russ Dillingham

Jul-24-2010 11:47 AM

Navbar help

I have been trying to add all sorts of code into my header and CSS, but just can't get the dropdowns to work. Can you help?
http://russfrommaine.smugmug.com/

Allen

Jul-24-2010 06:33 PM

Quote:

Originally Posted by Russ Dillingham (Post 1427560)

I have been trying to add all sorts of code into my header and CSS, but just can't get the dropdowns to work. Can you help?
http://russfrommaine.smugmug.com/

Can't help without seeing what it looks like. You can put it in and only show it
for you when logged in if you add this to your CSS.

.notLoggedIn .menu {display:none;}

fencingcellist

Jul-25-2010 03:17 PM

Different navbar formatting for a different gallery

Hi,

I am trying to make the Weddings category of my site have a different navbar format (black lettering on white) than the rest of my site (white on black).

How do I do that?

www.imagetru.com

TIA for any help with this!

Brenda

Allen

Jul-25-2010 04:32 PM

Quote:

Originally Posted by fencingcellist (Post 1428075)

See if this works like you want. Add the red rules in the positions shown.

Code:

.menu a, .menu a:visited {

   display:block;

   font-size:20px;

   text-decoration:none; 

   color:white;

   background:black;

  border:1px solid black; 

  border-width:1px 1px 1px 1px; 

   font-family: Trebuchet, Arial;

   width:auto;            /* Defines the main box dimensions. */

   height:25px;           /*How tall your cells are */

   line-height:25px;      /*Adjust this to vertically center your text in each cell. Should be about the same as height. */

   padding: 0 10px;

   min-width: 100px;

}

       /* style the links for the top level */

.category_Weddings.galleryPage  .menu a, .category_Weddings.galleryPage  .menu a:visited {

   color:black;

   background:white;

}



      /* main hover ?IE? */

.menu a:hover, .menu ul ul a:hover {

   color:#3DB1F5;

   background:black;

}

      /* main hover ?IE? */

.category_Weddings.galleryPage .menu a:hover, .category_Weddings.galleryPage .menu ul ul a:hover {

   color:#fff;

   background:#000;

}



      /* main hover */

.menu :hover > a, .menu ul ul :hover > a {

   color:#3DB1F5;

   background:black;

}

.category_Weddings.galleryPage .menu :hover > a, .category_Weddings.galleryPage .menu ul ul :hover > a {

   color:#fff;

   background:#000;

}

fencingcellist

Jul-25-2010 07:25 PM

Allen,
You are a complete star!!! That works perfectly!
Many thanks -- especially for being so speedy!
Brenda

fencingcellist

Jul-25-2010 10:03 PM

oops . . . one more question

Allen,

What you gave me works before except here: http://www.imagetru.com/Weddings

This is fine, though: http://www.imagetru.com/Weddings/Ric...73903691_ihkH2

What do I need to do?

(I want to make the navbar on all of the white wedding pages -- category page plus galleries -- black text with a white background to blend.)

TIA for any help with this!

Brenda

Allen

Jul-26-2010 04:49 AM

Quote:

Originally Posted by fencingcellist (Post 1428285)

That was a black page, looks like you changed it to light.

Remove the .galleryPage from each so it applies to the whole category,

.category_Weddings.galleryPage .menu...

like this

.category_Weddings .menu...

fencingcellist

Jul-26-2010 08:31 AM

Thank you so much! You are so speedy! This did the trick!
I wish I knew all of this and didn't have to cobble it together and ask for help -- but you are making it possible for me to get the website going.

Again, thank you sooooo much!

Brenda

picturetheplanet

Jul-26-2010 08:41 AM

Can anyone help with this?

Quote:

Originally Posted by picturetheplanet (Post 1424877)

Help from anyone would be appreciated! :D

Allen

Jul-26-2010 08:52 AM

Quote:

Originally Posted by picturetheplanet (Post 1428470)

Help from anyone would be appreciated! :D

I'm not familiar with your code but basically you need to lock the banner and
nav at a set distance relative to each other. The following will lock the items
at a set position relative to center.

In the CSS use these

position: relative; /* makes it movable */
width: XXXpx; /* assign width */
margin: 0 auto; /* auto R/L centers that width */
left: 200px; /* moves it to either side -200px or 200px */

picturetheplanet

Jul-26-2010 09:07 AM

Quote:

Originally Posted by Allen (Post 1428476)

thanks allan,

I see how this will work but it leaved the navbar below my custom logo.
How do I adjust that?

thanks,

Dave

Allen

Jul-26-2010 09:24 AM

Quote:

Originally Posted by picturetheplanet (Post 1428482)

thanks allan,

I see how this will work but it leaved the navbar below my custom logo.
How do I adjust that?

thanks,

Dave

Try this.
Add a div around the logo and nav.

<div id="myHeader">
<div id="customLogo">
...
...
(end nav html)
</div>

#nav { float:right; /* margin: -40px 230px 40px 40px; padding:0px 0 6px 10px; */ position: relative; background:#000; font-family:"Helvetica Neue",Arial,Helvetica,sans-serif}

#customLogo {
background-color:transparent;
background-image:url(http://picplanet.smugmug.com/photos/...SvmiP-Th.png);
background-position:left top;
background-repeat:no-repeat;
position: relative;
/* margin:5px 260px; */
width: 300px;
height: 45px;
float: left;
}

#myHeader {
width: 988px;
margin: 0 auto;
}
btw, the end of your nav html looks really messed up.

evilluckycharms

Jul-26-2010 05:53 PM

Hi,
Does anyone know how to change the opacity of the background color in the drop down nav? For example, if you look at my site, the drop down menu has a solid gray background. I would like the gray to be translucent, but I can't find any code that works. Any suggestions? TIA

Times are GMT -8. It's 03:57 AM.

Page 5 of 63

< 1 2 3 4 5 6 7 8 9 15 55 > Last »

Show 40 post(s) from this thread on one page