View Full Version : Navbar help thread
Pages :
1
2
3
4
5
6
7
8
[
9]
10
11
12
13
14
15
16
17
18
19
20
Allen
Jun-20-2008, 04:33 PM
How do I move the nav bar down a bit and make the text larger. I've been trying to find this but have been unsuccessful. Any help would be appreciated!
Change this item in your CSS.
#navcontainer {
margin: 20px auto 50px; /* top right/left bottom */
}
Add the font size to this.
#navcontainer ul li a {
text-decoration: ;
padding: .7em 1em;
color: #D1B202;
background-color: #000;
text-decoration: none;
font-size: 120%;
}
Allen
Jun-20-2008, 04:37 PM
Hi-I'm new to dgrin. I have been trying to customize my smugmug homepage to say my new company name and then have some tabs - Home, About Me, Tips and Info. and then have a running slideshow in the middle of the screen. It doesn't seem like that many parts but it's now been 4 weeks and with endless (I mean endless ) emails back and forth to smugmug, I am no where near completing any part of it. Smugmug keeps directing me here to dgrin so here it goes. I'm not sure if I'm posting this is in the right place but hopefully someone can take heart and help me.
The tutorial on smugmug for a header says to make one elsewhere. Where? I'm clueless. Help!!
-TB
Welcome to Dgrin :wave
Have you read this tutor (http://dgrin.smugmug.com/gallery/2160039), it gets you all you want I think. Holler back if you
have any questions.
ttbest
Jun-21-2008, 06:39 AM
Allen,
Thank you for the reply. I didn't know you replied as it wasn't in my inbox and I didn't see it after my thread? ANyway, yes I have read the tutorial. I have my logo saved as a pdf. I have PS but I'm not sure about how to import it into PS and do the whole layer thing. Can I use what I have or do I have to re-create it in PS. The problem is, it was created in PrintShop because I have the Montague font there. When I go to bring it up in PS, it's this tiny text on a huge white page and then I can't select the logo. I figure the logo/banner is my first step. Thanks again for your help.
-Tanya
Welcome to Dgrin :wave
Have you read this tutor (http://dgrin.smugmug.com/gallery/2160039), it gets you all you want I think. Holler back if you
have any questions.
Allen
Jun-21-2008, 06:43 AM
Allen,
Thank you for the reply. I didn't know you replied as it wasn't in my inbox and I didn't see it after my thread? ANyway, yes I have read the tutorial. I have my logo saved as a pdf. I have PS but I'm not sure about how to import it into PS and do the whole layer thing. Can I use what I have or do I have to re-create it in PS. The problem is, it was created in PrintShop because I have the Montague font there. When I go to bring it up in PS, it's this tiny text on a huge white page and then I can't select the logo. I figure the logo/banner is my first step. Thanks again for your help.
-Tanya
Have your tried to use the method shown in this tutor? It's basiclly how to
create a transparent banner.
http://dgrin.smugmug.com/gallery/1690196
ttbest
Jun-21-2008, 06:52 AM
I will try that . Thanks Allen!
Have your tried to use the method shown in this tutor? It's basiclly how to
create a transparent banner.
http://dgrin.smugmug.com/gallery/1690196
ellarue
Jun-21-2008, 07:49 AM
Is there a way or a code that you can use to make a new window open up when clicked.
I have my blog as a tab on my navbar and I dont want people to be navigated away from my page but instead have the blog open up in a new window.
Is that possible?
ellarue
Jun-21-2008, 07:50 AM
Change this item in your CSS.
#navcontainer {
margin: 20px auto 50px; /* top right/left bottom */
}
Add the font size to this.
#navcontainer ul li a {
text-decoration: ;
padding: .7em 1em;
color: #D1B202;
background-color: #000;
text-decoration: none;
font-size: 120%;
}
Thanks a ton Allen! Works great!
ttbest
Jun-21-2008, 12:41 PM
Hi Allen,
Yes, I'm going to give the tutorials a shot just as soon as I get my logo figured out. I created it in PrintShop using Montague font. Now I cannot re-create it in PS because I don't have that font. Is there a way to purchase fonts that you know of? My main priority is to get this logo done. Would you be willing to take a look at it if I sent you it? I'm not sure how to do attachments in dgrin but I tried using the attachements button below. Let me know your thoughts.
THanks a bunch,
Tanya
Have your tried to use the method shown in this tutor? It's basiclly how to
create a transparent banner.
http://dgrin.smugmug.com/gallery/1690196
ttbest
Jun-21-2008, 05:11 PM
Hi Allen,
I did try the tutorial but it's not working. I looked again and I think I entered all of the text and codes correctly. Could you take a look at it? I just want the name of my business - Agape Photo on the top left of my slideshow. My smugmug name is isabellarae.
Thanks,
Tanya
Allen,
Thank you for the reply. I didn't know you replied as it wasn't in my inbox and I didn't see it after my thread? ANyway, yes I have read the tutorial. I have my logo saved as a pdf. I have PS but I'm not sure about how to import it into PS and do the whole layer thing. Can I use what I have or do I have to re-create it in PS. The problem is, it was created in PrintShop because I have the Montague font there. When I go to bring it up in PS, it's this tiny text on a huge white page and then I can't select the logo. I figure the logo/banner is my first step. Thanks again for your help.
-Tanya
ttbest
Jun-21-2008, 06:17 PM
Hi Allen,
I did try the tutorial but it's not working. I looked again and I think I entered all of the text and codes correctly. Could you take a look at it? I just want the name of my business - Agape Photo on the top left of my slideshow. My smugmug name is isabellarae.
Thanks,
Tanya
Have your tried to use the method shown in this tutor? It's basiclly how to
create a transparent banner.
http://dgrin.smugmug.com/gallery/1690196
Allen
Jun-21-2008, 10:34 PM
Hi Allen,
I did try the tutorial but it's not working. I looked again and I think I entered all of the text and codes correctly. Could you take a look at it? I just want the name of my business - Agape Photo on the top left of my slideshow. My smugmug name is isabellarae.
Thanks,
Tanya
You are calling for the original in the CSS which is 750x750, very large.
This works, I changed the size to S, 300x300.
#my_banner {display: none;
position: relative;
left: -210px;
width: 300px;
height: 300px;
margin: 0 auto;
background: url(http://isabellarae.smugmug.com/photos/317229059_yvP6f-S.jpg) no-repeat;
}
You also need a space between .homepage and #my_banner.
.homepage #my_banner {
display: block;
}
I would also crop out the extra white space top and bottom. Then a larger
size used.
ttbest
Jun-22-2008, 11:18 AM
Hi Allen,
Thanks- I got it working. Do you have any idea how to just have the font without the white background? When I imported my logo from PrintShop into Photoshop, this is what I got. Does PS have an ungroup command?
THanks,
Tanya
You are calling for the original in the CSS which is 750x750, very large.
This works, I changed the size to S, 300x300.
#my_banner {display: none;
position: relative;
left: -210px;
width: 300px;
height: 300px;
margin: 0 auto;
background: url(http://isabellarae.smugmug.com/photos/317229059_yvP6f-S.jpg) no-repeat;
}
You also need a space between .homepage and #my_banner.
.homepage #my_banner {
display: block;
}
I would also crop out the extra white space top and bottom. Then a larger
size used.
Allen
Jun-22-2008, 11:22 AM
Hi Allen,
Thanks- I got it working. Do you have any idea how to just have the font without the white background? When I imported my logo from PrintShop into Photoshop, this is what I got. Does PS have an ungroup command?
THanks,
Tanya
Post 2004 above describes how to make the background transparent. I don't
use PS so not sure other then what it says in the tutor.
spaced_k
Jun-22-2008, 09:03 PM
Hello,
I wonder if anyone could let me know what line of code i need to add to my navbar to make it central.
If you look at my smugmug site, my banner is central, teh flash show is central, but the navbar is abotu 1cm too far to the right, and needs to be left a touch.
a for the help.
Allen
Jun-22-2008, 09:36 PM
Hello,
I wonder if anyone could let me know what line of code i need to add to my navbar to make it central.
If you look at my smugmug site, my banner is central, teh flash show is central, but the navbar is abotu 1cm too far to the right, and needs to be left a touch.
a for the help.
Remove the <center> tags from around the header nav html, it's not
needed. You are missing an opening comment tag in your CSS and that's
keeping it from centering.
Add the red /*
.loggedIn .albumLarge textarea {width:182px;}
/* ------------------------------------------------------------*/
/*==================== NAVBAR ==============================*/
...
...
spaced_k
Jun-22-2008, 10:42 PM
Brilliant, cheers for that, had been staring at it for so long, and al it was was a /*
Ta for that, much appreciated
collegephotoguy
Jun-23-2008, 08:23 AM
Can anyone help with making the navbar lower on the screen like the one on moonriverphotography.com and changing the spacing between words and text size. I'm just starting to customize. My site is thecollegecamera.smugmug.com Thanks.
ttbest
Jun-23-2008, 10:11 AM
Hi Allen,
So I fianlly got my PS questions figured out and did the transparent banner thing. I'm just not sure if what I'm looking for is a header or a banner. Anyway, I put it in as a banner but do you know how I stretch it out and center it on the top of the page. I don't know anything about spacing it and right now it's middle very top and half cut off.
THanks,
Tanya
Hi Allen,
Thanks- I got it working. Do you have any idea how to just have the font without the white background? When I imported my logo from PrintShop into Photoshop, this is what I got. Does PS have an ungroup command?
THanks,
Tanya
Allen
Jun-23-2008, 11:44 AM
Hi Allen,
So I fianlly got my PS questions figured out and did the transparent banner thing. I'm just not sure if what I'm looking for is a header or a banner. Anyway, I put it in as a banner but do you know how I stretch it out and center it on the top of the page. I don't know anything about spacing it and right now it's middle very top and half cut off.
THanks,
Tanya This is the generic setup for a transparent png.
#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}
Here's the CSS using the your original png file with the filter added for IE to work.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/318464560_2weKo-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318464560_2weKo-O.png');
}
ttbest
Jun-23-2008, 04:09 PM
Hi Allen,
So now I'm working on the navbar stuff and I went to the tutorial that was at the bottom of your reply to me. Question before I start- when it says to add HTML code to the Header box, is this in addition to what is already there regarding banner?
Thanks,
Tanya
This is the generic setup for a transparent png.
#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}
Here's the CSS using the your original png file with the filter added for IE to work.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/318464560_2weKo-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318464560_2weKo-O.png');
}
Allen
Jun-23-2008, 04:41 PM
Hi Allen,
So now I'm working on the navbar stuff and I went to the tutorial that was at the bottom of your reply to me. Question before I start- when it says to add HTML code to the Header box, is this in addition to what is already there regarding banner?
Thanks,
Tanya
It will go just below the my_banner div in your header code box.
<div id="my_banner"> </div>
<div id="navcontainer">
...
rest of the nav html
...
Think of the div as a container/box on your page. The html defines the content
and the added CSS will format it and position it.
miguelito
Jun-24-2008, 03:03 PM
Hello ALEN ... :barb
this page need a password but all navbars appear when you don't put password :cry
after it's ok :thumb
http://miguelito.smugmug.com/gallery/5246972_45qWX
I would like to keep navacontainer1 block :dunno I tried this :deal
.gallery_5246972 #navcontainer2 {display:none;}
.gallery_5246972 #navcontainerHP {display:none;}
.gallery_5246972 #navcontainer1 {display:block;}
.gallery_5246972 #navcontainer3 {display:none;}
.gallery_5246972 #navcontainer4 {display:none;}
.gallery_5246972 #navcontainer5 {display:none;}
.gallery_5246972 #navcontainerHP1 {display: none;}
but doesn't work:scratch ... or only with password
thank you :barb
Allen
Jun-24-2008, 06:56 PM
Hello ALEN ... :barb
this page need a password but all navbars appear when you don't put password :cry
after it's ok :thumb
http://miguelito.smugmug.com/gallery/5246972_45qWX
I would like to keep navacontainer1 block :dunno I tried this :deal
.gallery_5246972 #navcontainer2 {display:none;}
.gallery_5246972 #navcontainerHP {display:none;}
.gallery_5246972 #navcontainer1 {display:block;}
.gallery_5246972 #navcontainer3 {display:none;}
.gallery_5246972 #navcontainer4 {display:none;}
.gallery_5246972 #navcontainer5 {display:none;}
.gallery_5246972 #navcontainerHP1 {display: none;}
but doesn't work:scratch ... or only with password
thank you :barb
I have no idea how the customize the password enter page, it's one of
Smugmug's pages.
miguelito
Jun-24-2008, 09:06 PM
I have no idea how the customize the password enter page, it's one of
Smugmug's pages.
ok If you learn about it one day ...:barb
thank you:D
Allen
Jun-24-2008, 09:46 PM
Hello ALEN ... :barb
this page need a password but all navbars appear when you don't put password :cry
after it's ok :thumb
http://miguelito.smugmug.com/gallery/5246972_45qWX
I would like to keep navacontainer1 block :dunno I tried this :deal
.gallery_5246972 #navcontainer2 {display:none;}
.gallery_5246972 #navcontainerHP {display:none;}
.gallery_5246972 #navcontainer1 {display:block;}
.gallery_5246972 #navcontainer3 {display:none;}
.gallery_5246972 #navcontainer4 {display:none;}
.gallery_5246972 #navcontainer5 {display:none;}
.gallery_5246972 #navcontainerHP1 {display: none;}
but doesn't work:scratch ... or only with password
thank you :barb
I think you're going to have to put in CSS display:none for all menus. Then
add display:block; for each different menu everywhere you want it.
#navcontainerHP,
#navcontainerHP1,
#navcontainer1,
#navcontainer2,
#navcontainer3,
#navcontainer4,
#navcontainer5 {display:none;}
miguelito
Jun-25-2008, 01:00 PM
I think you're going to have to put in CSS display:none for all menus. Then
add display:block; for each different menu everywhere you want it.
#navcontainerHP,
#navcontainerHP1,
#navcontainer1,
#navcontainer2,
#navcontainer3,
#navcontainer4,
#navcontainer5 {display:none;}
:D sorry Alen but I don't understand what you mean:dunno
could you write me an example please :deal
thank you:barb
miguelito
Jun-25-2008, 01:09 PM
:D sorry Alen but I don't understand what you mean:dunno
could you write me an example please :deal
thank you:barb
:barb :barb :barb
Alen I just did what you told me writing this son CSS:deal
#navcontainerHP {display:none;}
#navcontainerHP1 {display:none;}
#navcontainer1 {display:none;}
#navcontainer2 {display:none;}
#navcontainer3 {display:none;}
#navcontainer4 {display:none;}
#navcontainer5 {display:none;}
and I didn't change what I wrote before for every menu
it's OK :thumb
:ivar Thank you :bow
Allen
Jun-25-2008, 01:11 PM
:D sorry Alen but I don't understand what you mean:dunno
could you write me an example please :deal
thank you:barb
All the divs you add to your html will show on every page including all your
navs. I noticed if you first add a display; none; for all they don't show any
where. Now if you add for each page a nav# display: block; this doesn't
include the password enter page.
Now to the real world.:D I have multiple navs and only the main one shows
until a page is entered calling for a different one. So I think the main
problem you have is the order in your CSS that calls for none or block.
I had a very difficult problem with this, getting the order correct so only the
correct ones would show on certain pages.
collegephotoguy
Jun-25-2008, 07:38 PM
Hi,
Is there an easy way to decrease the spacing between the different words on the navbar? I know the command for the entire navbar is #navcontainer and I can move it's position on the web pages, but I can't find anything that lets me control each individual link of the navbar. Thanks.
Allen
Jun-25-2008, 07:45 PM
Hi,
Is there an easy way to decrease the spacing between the different words on the navbar? I know the command for the entire navbar is #navcontainer and I can move it's position on the web pages, but I can't find anything that lets me control each individual link of the navbar. Thanks.
You didn't post a link to your site so just guessing.
Decrease the right/left padding in this. 1em > .9em > .8em > etc.
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
collegephotoguy
Jun-25-2008, 07:50 PM
You didn't post a link to your site so just guessing.
Decrease the right/left padding in this. 1em > .9em > .8em > etc.
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
Thanks that was it. I'm still not sure what padding is but what you told me to do worked. And btw my site is www.thecollegecamera.com. Thanks again for your continuous help.
Allen
Jun-25-2008, 07:59 PM
Thanks that was it. I'm still not sure what padding is but what you told me to do worked. And btw my site is www.thecollegecamera.com (http://www.thecollegecamera.com). Thanks again for your continuous help.
Padding is the inside spacing from the edges of the container. Your nav main
buttons expand in width, pushed out by the text. Padding right and left is like
adding spaces before and after the text so the buttom widens.
The first one in that line is the top and bottom, increase it and the button
get taller. Clear as mud?
collegephotoguy
Jun-25-2008, 08:11 PM
Padding is the inside spacing from the edges of the container. Your nav main
buttons expand in width, pushed out by the text. Padding right and left is like
adding spaces before and after the text so the buttom widens.
The first one in that line is the top and bottom, increase it and the button
get taller. Clear as mud?
Perfect! :barb
wilsonjg
Jun-25-2008, 09:33 PM
Need some assistance.....
Did my Header, navigation bar and slide show last night...........still a work in progress, but she's coming along.
I ended up with some odd type between the Nav bar and the slideshow that I can't delete. It says "Photographybyjoeywilson's Home".....
Any help would be appreciated.
Here is my site....
http://www.photographybyjoeywilson.com/
collegephotoguy
Jun-25-2008, 09:41 PM
Need some assistance.....
Did my Header, navigation bar and slide show last night...........still a work in progress, but she's coming along.
I ended up with some odd type between the Nav bar and the slideshow that I can't delete. It says "Photographybyjoeywilson's Home".....
Any help would be appreciated.
Here is my site....
http://www.photographybyjoeywilson.com/
Hey,
Try putting this code in your CSS box:
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
Hope it works!
wilsonjg
Jun-26-2008, 04:49 AM
Hey,
Try putting this code in your CSS box:
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
Hope it works!
You guys ROCK !!
That did it. I wish I knew "why", or even "how", but I certainly appreciate you guys helping dangerous "rookie page designers" like myself!!
thanks again...........Trust me, if you saw my site - More questions to come!! :D
wilsonjg
Jun-26-2008, 05:31 AM
Next issue....
After making my new Header, Nav bar and slideshow, I lost some background color settings and I'd like them back.
When I click on my "Galleries", the background with all my gallery windows in them is no longer black.........it's a shade of gray. I'd like to make that background black again??
thanks....
http://photographybyjoeywilson.com
EDIT: Never mind guys.......think I got this one figured out. Don't worry....there will be more stupid questions later.... :)
yes-pictures
Jun-27-2008, 02:54 AM
Hello everyone
First of all, thanks for all your tipe, I could learn a lot from reading this thread!
This is my very first post, and I am sorry to start by asking for help but something happened that I don't understand...
My website was nice and shinny (or nearly) since yesterday and for no apparent reason, my banner and my navbar vanished: www.yes-pictures.com - http://yes-pictures.smugmug.com
What is very strange is that if I do a preview in the customization mode, it looks just fine!?!
Here is the code I use, sorry, it's a bit long.
Any help would be greatly apreciated!
CSS:
#bioBox .photo {
display: none;
}
#userBio {text-align: center;}
#my_header {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://djmiloorulz.free.fr/banner_yes_pictures.gif) no-repeat;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #1b1b1b;
}
#navcontainer ul li a:hover {
color: #ffffff;
background-color: #666666;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* turn map this button off */
.map_this {
display: none;
}
#photoKeywords {
display: none;
}
#feeds {
display:none;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
--------------------------------
HEADER:
<div id="my_header"><a href="http://www.yes-pictures.com"><img src="/img/spacer.gif" width="750" height="150" border="0" /></a></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5184025_HsiNV">News</a></li>
<li><a href="/gallery/5250421_VweVj">Contact</a></li>
<li><a href="/gallery/5250257_qWMJk">Guestbook</a></li>
</ul>
</div>
----------------------------
FOOTER:
<div align="center"><em>All images © Emilien Leonhardt/Yes-Pictures - Use by permission only </em></div>
------------------------------
FOOTER JAVA SCRIPT:
function delHover() {
oLst = YD.getElementsBy(function(el) {return (YD.hasClass(el,'imgBorder') || YD.hasClass(el,'imgBorderOn'))},'img');
for (i=0; i < oLst.length ; i++) {
if (oLst[i].title && oLst[i].title != '') oLst[i].title = '';
if (oLst[i].alt && oLst[i].alt != '') oLst[i].alt = '';
}
}
YE.onContentReady('bodyWrapper', function() {if (!YD.hasClass(document.body, 'smugmug_ajax')) delHover()});
onPhotoShow.subscribe(function(){YE.onAvailable('m ainImage', delHover)});
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
THANK YOU SO MUCH in advance!
Greetings,
Emilien
Allen
Jun-27-2008, 07:07 AM
Hello everyone
First of all, thanks for all your tipe, I could learn a lot from reading this thread!
This is my very first post, and I am sorry to start by asking for help but something happened that I don't understand...
My website was nice and shinny (or nearly) since yesterday and for no apparent reason, my banner and my navbar vanished: www.yes-pictures.com (http://www.yes-pictures.com) - http://yes-pictures.smugmug.com
What is very strange is that if I do a preview in the customization mode, it looks just fine!?!
Here is the code I use, sorry, it's a bit long.
Any help would be greatly apreciated!
THANK YOU SO MUCH in advance!
Greetings,
Emilien
Welcome to Dgrin :wave
Something got b0rked in last nights update and some sites are not loading
correctly. They are aware and working on fixen' it, so best is to just wait it
out, btw, my site one of them.
yes-pictures
Jun-27-2008, 09:32 AM
Welcome to Dgrin :wave
Something got b0rked in last nights update and some sites are not loading
correctly. They are aware and working on fixen' it, so best is to just wait it
out, btw, my site one of them.
Dear Allen,
Thank you for welcoming me and for this information, the site is OK again :barb.
And the good part is that I am now registered so I can enjoy more of Dgrin (it was may be a good idea to crash the site :rolleyes )
Thanks and see you soon on the forum :D
Dwight
Jun-27-2008, 11:54 AM
On the following link or as long as you are in one of my galleries,
http://www.photographybydwight.com/gallery/5238278_daeWn#290081989_FamEz
Click on the nav bar on Events, then evidence of fun. At the bottom of
the browser it shows the correct website, but when you click on it
actually goes to smug mugs home page.
Once again, it only happens if you are currently in a gallery. The issue does not happen if you are on the home page.
Allen
Jun-27-2008, 12:09 PM
On the following link or as long as you are in one of my galleries,
http://www.photographybydwight.com/gallery/5238278_daeWn#290081989_FamEz
Click on the nav bar on Events, then evidence of fun. At the bottom of
the browser it shows the correct website, but when you click on it
actually goes to smug mugs home page.
Once again, it only happens if you are currently in a gallery. The issue does not happen if you are on the home page.
Take the /gallery out of the link. It is a category and not needed.
http://www.photographybydwight.com/gallery/Evidence%20of%20Fun%20-%20Atlanta,%20GA
like this
http://www.photographybydwight.com/Evidence%20of%20Fun%20-%20Atlanta,%20GA
tuffphotos
Jun-27-2008, 12:44 PM
Hi...
I followed the terrific instructions on how to make a nav bar and it seems to work right. Is there a code I need to put somewhere so that it shows on ALL of my pages and galleries? Right now it only shows up on the home page.
I'm really strictly a "cut and paste" person, so please go easy on me.:bow
Thanks
Kim
Allen
Jun-27-2008, 06:00 PM
Hi...
I followed the terrific instructions on how to make a nav bar and it seems to work right. Is there a code I need to put somewhere so that it shows on ALL of my pages and galleries? Right now it only shows up on the home page.
I'm really strictly a "cut and paste" person, so please go easy on me.:bow
Thanks
Kim
Those that could help would need a link to your site.
Glory2Jesus4Photography
Jun-29-2008, 12:33 PM
Hey guys some one has informed that my Nav Bar has some problems and I can not figure it out. here is a screen shot some one took for me to show one of the problems.
http://img46.imageshack.us/img46/6103/menuxc2.jpg (http://imageshack.us) This is on IE7 and on a Xp OS
The Nav Bar is only supposed to be one line so I don't get it.
Some one else says "I'm not seeing that, but that particular menu (Home) comes and goes for me. Sometimes when I move the cursor down, the options stay there for selection, but sometimes they disappear. All the other menus seem to work as they should. I'm using IE and Vista."
I have not been able to replicate these problems on my Mac with safari 3.1.1
Fire Fox 2.0.0.14 or IE7 on Xp Os under a virtual machine. I have no Idea were to or how to solve this. If some one would like to help me see what is wrong that would be greatly appreciated.
Thanks Corey
http://glory2jesus4photography.smugmug.com
ttbest
Jun-29-2008, 12:41 PM
Hi Alle
I believe I have my header and footer created and saved correctly in my Family gallery under my smugmug. I attempted to swap out my new header in the CSS box and it does not stretch across the page. The way I want my homepage to look is from top/down- Header/Navbar/slideshow/footer (Similar to jennifer bresson on smugmug). I am going to attempt the navbar next, I just wanted to get the header and footer set. So my four questions-1) how to get my header to stretch across page, 2) how to put in my footer (saved same place as header) 3) Should I do the navbar before I set the footer and header? 4) I want my homepage to be white but can't figure out how to get rid of the themed brown that's going on right now.
Thanks so much Allen,
Tanya
It will go just below the my_banner div in your header code box.
<div id="my_banner"> </div>
<div id="navcontainer">
...
rest of the nav html
...
Think of the div as a container/box on your page. The html defines the content
and the added CSS will format it and position it.
Allen
Jun-29-2008, 01:33 PM
Hey guys some one has informed that my Nav Bar has some problems and I can not figure it out. here is a screen shot some one took for me to show one of the problems.
http://img46.imageshack.us/img46/6103/menuxc2.jpg (http://imageshack.us) This is on IE7 and on a Xp OS
The Nav Bar is only supposed to be one line so I don't get it.
Some one else says "I'm not seeing that, but that particular menu (Home) comes and goes for me. Sometimes when I move the cursor down, the options stay there for selection, but sometimes they disappear. All the other menus seem to work as they should. I'm using IE and Vista."
I have not been able to replicate these problems on my Mac with safari 3.1.1
Fire Fox 2.0.0.14 or IE7 on Xp Os under a virtual machine. I have no Idea were to or how to solve this. If some one would like to help me see what is wrong that would be greatly appreciated.
Thanks Corey
http://glory2jesus4photography.smugmug.com
Replace your header nav html with this. Fixed a few errors.
<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<!-- First Main Menu Item Home -->
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/" title="Glory 2 Jesus 4 Photography">Home
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="javascript:norobotmail('glory2jesus4photography',' gmail.com')" title="Contact Us!">Contact Us</a></li>
<li><a href="javascript:norobotmail('glory2jesus4photography',' gmail.com')" title="Leave a Email">Email Us</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item Credits -->
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4331395_FREtu" title="Thank You!">Credits</a></li>
<!-- Next Main Menu Item Galleries -->
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/galleries" title="Galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext" title="all Things Beautiful">All Things Beautiful! »
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4248184_ivHpQ#248675208">Featured Gallery</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext/401796">Lakes Rivers and Streams</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext/401794">Landscape & Scenery</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext/401795">The Sky is Falling</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext/448638">WildLife</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/all%20Things%20Beautiful%20-%20scenery%20flowers%20skies%20ext/401785">Flowers</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://glory2jesus4photography.smugmug.com/Our%20Home%20Towns%20of%20Iowa" title="Our Home Towns of Iowa">Our Home Towns of Iowa</a></li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Church%20Family" title="Church Family Category">Church Family»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Church%20Family/401486" title="Marshalltown Ia Category">Marshalltown Ia»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4521684_GD86b#266220374_y2j8d" title="Sunday Snapshots 2008">Sunday Snap shots 2008</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/5056464_4evvZ#304139437_m4hvv" title="Memorial Day Baptism">Memorial Day Baptism 2008</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/5053955_qjmce#303882087_C2JGD" title="Memorial Day Bar BQ">Memorial Day Bar BQ 2008</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/4909050_iLcQ9#293928661_3r7Xk" title="Dunamos Ministries 2008">Dunamos Ministries 2008</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4359421_oGPBe#255875942" title="Faith A.G. Valentines Banquet 2008">Faith A.G. Valentines Banquet</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4267933_Ssy4z#249949593" title="Faith A.G. @ Youth Leadership Conference 2008">Faith A.G. @ Youth Leadership Conference 2008</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4392545_XD9mb#257910270" title="Jesus' Birthday Party"> Jesus' Birthday Party at Faith A.G.</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/3968139_4fvoy#230649858" title="Faith A.G. WM's Spud Dinner">Faith A.G. WM's Spud Dinner</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/3886021_MiAhB#225292286" title="Faith A.G. Harvest Dinner 2007">Faith A.G. Harvest Dinner 2007</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/3715471_YH6ut#213052802" title="Men's Steak Dinner">Men's Steak Dinner</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Church%20Family/401485" title="Ft. Madison Ia Category">Ft. Madison Ia»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/3715797_St6Uz#213090386" title="Potluck Dinner @ Calvary First A.G.">Potluck Dinner @ Calvary First A.G.</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Church%20Family/462200" title="State & National Events">State & National Events»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4267906_WZVY2#249946671" title="Youth Leadership Conference 2008">Youth Leadership Conference 2008</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/4842738_i2jbx#288319710_AJPRv" title="District council 2008 Portraits">I.M.N. Assembly of God District council 2008 Portraits</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Portraits" title="Portraits Category">Portraits»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/Portraits/401411">Families</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Portraits/401410">Children</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Portraits/401412">Adults</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Portraits">Seniors & Teens</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Weddings">Weddings»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/Weddings/517113" title="OutDoor Wedding Locations">Outdoor Wedding Locations</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Weddings/404100">Spring Weddings</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Weddings/404101">Summer Weddings</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Weddings/404102">Fall Weddings</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Weddings/404104">Winter Weddings</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Weddings/404105">Unique Weddings</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Weddings/462657" title="Sample Gallery">Sample Gallery</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Weddings/520102" title="Engagement's">Engagement's</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Special%20Events" title="Special Events Categories">Special Events»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/Special%20Events/462658">Concerts</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/463070">Recitals</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Special%20Events/472466">Anniversaries</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Special%20Events/468570">Birthday Parties</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462663">Fairs & Festivals</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462660">Car Shows</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462662">Antique Shows</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462661">Bike Shows</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462659" title="Sporting Events">Sporting Events</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462667">MotorCycle Rallies</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/Special%20Events/462666">Moto Guzzi Rallies</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://glory2jesus4photography.smugmug.com/The%20World%20Up%20Close" title="The World Up Close">The World Up Close</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/Special%20Events/462658" title="Concerts Categories">Concerts</a></li>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Pilgrim%20Heights%20Camp%20&%20Retreat%20Center" title="Pilgrim Heights Camp & Retreat Center Categories">Pilgrim Heights»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="http://glory2jesus4photography.smugmug.com/Pilgrim%20Heights%20Camp%20&%20Retreat%20Center/522115" title="An Exclusive Mid West Wedding Location Category">An Exclusive Wedding Location»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/5008353_WF8uQ#300427481_phDMi">A Taste of The Main Hall</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/5031977_v82KR#302225758_oq9zr" title="A Beautiful secluded OutDoor May Wedding">A May Wedding</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="" title=""></a></li>
<li><a href="" title="The Archives"></a></li>
<li><a href="" title="The Archives"></a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item Blog -->
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4268155" title="Blog!">Blog</a></li>
<!-- Next Main Menu Item Services -->
<li><a class="drop" href="http://Glory2Jesus4Photography.smugmug.com/Services" title="Services">Services
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/5194152_c2Bdn" title="Signature Series Cards">Signature Series</a></li>
<li><a class="drop" href="http://Glory2Jesus4Photography.smugmug.com/Services/540285" title="Products We Offer">The Goods»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/5210093_iDcgm" title="Memory Books">Memory Books</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4290380_6UQsj" title="Special Event Prices">Special Event Prices</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/4290276_qvjwo" title="Portrait Prices">Portrait Prices</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/4290260_qv4az" title="Wedding Prices">Wedding Prices</a></li>
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/3740481_pxsEU" title="Calendar">Calendar</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4447750_SmE4n" title="F.A.Q.">F.A.Q.</a></li>
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4942226_PQkco/1/295610078_YafnN" title="Our Privacy Statement"><font color="red">Privacy Statement</font></a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item Guest Book -->
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/3745773" title="Please sign our guestbook!">Guestbook</a></li>
<!-- Next Main Menu Item About -->
<li><a href="http://glory2jesus4photography.smugmug.com/gallery/4341038_Vkrxv/1/252711921_TmEcB" title="About">About</a></li>
<!-- Next Main Menu Item Calendar -->
<li><a href="http://Glory2Jesus4Photography.smugmug.com/gallery/3740481_pxsEU" title="Calendar">Calendar</a></li>
<!-- Next Main Menu Item Map -->
<li><a href="http://glory2jesus4photography.smugmug.com/map">Map</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
<!-- end of info -->
Allen
Jun-29-2008, 01:42 PM
Hi Alle
I believe I have my header and footer created and saved correctly in my Family gallery under my smugmug. I attempted to swap out my new header in the CSS box and it does not stretch across the page. The way I want my homepage to look is from top/down- Header/Navbar/slideshow/footer (Similar to jennifer bresson on smugmug). I am going to attempt the navbar next, I just wanted to get the header and footer set. So my four questions-1) how to get my header to stretch across page, 2) how to put in my footer (saved same place as header) 3) Should I do the navbar before I set the footer and header? 4) I want my homepage to be white but can't figure out how to get rid of the themed brown that's going on right now.
Thanks so much Allen,
Tanya
Can't find your site, please add it to your profile and post a link here.
Tried isabellarae but doesn't seem to work anymore.
ttbest
Jun-29-2008, 02:02 PM
Sorry- I attempted to change it so it would coincide with my business. It is now AgapePhotos.
Can't find your site, please add it to your profile and post a link here.
Tried isabellarae but doesn't seem to work anymore.
Allen
Jun-29-2008, 02:45 PM
Sorry- I attempted to change it so it would coincide with my business. It is now AgapePhotos.
Are you wanting the banner centered when you say "stretched across the page".
See if this changes your color.
In your control panel under the setting tab set the default Theme to
"default". Make sure on every page it's set to default by clicking the themes button.
Then click Customize to go to that page.
Customize: Everything from changing colors to completely replacing SmugMug's look & feel!
On the customize page set this to Light.
Your Background Color
Light Dark Viewer Controlled
ttbest
Jun-29-2008, 02:54 PM
Yes, I'd like the banner and footer stretched across the page. If you look at jennifer bresson on smugmug you'll see what I'm talking about.
Thanks,
Tanya
Are you wanting the banner centered when you say "stretched across the page".
See if this changes your color.
In your control panel under the setting tab set the default Theme to
"default". Make sure on every page it's set to default by clicking the themes button.
Then click Customize to go to that page.
Customize: Everything from changing colors to completely replacing SmugMug's look & feel!
On the customize page set this to Light.
Your Background Color
Light Dark Viewer Controlled
Glory2Jesus4Photography
Jun-29-2008, 02:58 PM
Wow Allen you are the greatest, :barb
If not for you the quality of every one else's SmugMugs would definitely show.
I have not contacted the people that were having the trouble yet as soon as I hear from them I will let you know how good it works.
Thank you so much for going out of your way to help.
Corey
Allen
Jun-29-2008, 03:51 PM
Yes, I'd like the banner and footer stretched across the page. If you look at jennifer bresson on smugmug you'll see what I'm talking about.
Thanks,
Tanya
You have a link to the example site?
ttbest
Jun-29-2008, 04:04 PM
Hi Allen,
If you go into smugmug, just type in jennifer bresson.
You have a link to the example site?
OhEddie
Jul-01-2008, 08:41 AM
I've followed the tutorials that help me making a navbar succesfully, but I can't make heads or tails of the code that allows drop down and flyout menus. Help a bud out?
Allen
Jul-01-2008, 10:55 AM
I've followed the tutorials that help me making a navbar succesfully, but I can't make heads or tails of the code that allows drop down and flyout menus. Help a bud out?
Try this in your header. Also try the CSS here (http://allen-steve.smugmug.com/gallery/2078255), it works better right off the
bat, just have to adjust colors. Use this (http://allen-steve.smugmug.com/gallery/2327835) as reference setting up drops.
<!-- insert html comment between brackets -->
<!-- html code to format banner link to homepage -->
<div id="hade_photo_banner">
<a href="http://edh.smugmug.com">
<img src="/img/spacer.gif" alt="" border="0" height="100" width="750">
</a></div>
<!-- navbar html code -->
<!-- need add code to make drop down
nav buttons to categories with flyouts to subcategories-->
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5283422_zEnU3">About Me</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="/Sports">Sports
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports/464165">BRUINS BASEBALL - 2008 Galleries</a></li>
<li><a href="/Sports/511763">KODIAK BASEBALL - 2008</a></li>
<li><a href="/Sports/360841">KODIAK BASEBALL - 2007</a></li>
<li><a href="/Sports/414244">W.C.R.D. BASEBALL</a></li>
<li><a href="/Sports/360840">BRAVES BASEBALL</a></li>
<li><a href="/Sports/506908">SOUTHEAST BASEBALL - 2007</a></li>
<li><a href="/Sports/360842">KODIAK FOOTBALL - 2006</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Photography">Photography</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/School">School</a></li>
<li><a href="/Music">Music</a></li>
<li><a href="/Friends">Friends</a></li>
<li><a href="/Vacation">Vacation</a></li>
<li><a href="/Zoos">Zoos</a></li>
<li><a href="/Pets">Pets</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/xxxxxxx_xxxxx">FAQs</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
OhEddie
Jul-01-2008, 11:15 AM
Thank you! That helped loads. But there is a couple of problems. When I click galleries, I see the drop down box, but when I hover over it, it disappears. Also, it's left justified. How do I get rid of that? And one more, the text is at the bottom of the button, how can I center the text in the button?
Allen
Jul-01-2008, 11:26 AM
Thank you! That helped loads. But there is a couple of problems. When I click galleries, I see the drop down box, but when I hover over it, it disappears. Also, it's left justified. How do I get rid of that? And one more, the text is at the bottom of the button, how can I center the text in the button?
I'll look but not familar with the version of CSS you are using. I plugged in this version (http://allen-steve.smugmug.com/gallery/2078255)
and it looked like only needed minor tweaking to work. Colors esp.
OhEddie
Jul-01-2008, 11:31 AM
I'll look but not familar with the version of CSS you are using. I plugged in this version (http://allen-steve.smugmug.com/gallery/2078255)
and it looked like only needed minor tweaking to work. Colors esp.
EDIT: Everything is fixed. Thank you allen. All is said and done now. ^_^
Thanks a ton!
Allen
Jul-01-2008, 11:58 AM
I got the CSS from the start of this thread if that helps. :dunno
Copy the header html and CSS and save in a text file for backup then try
this. Should be all formated for you. Of course you can select different colors.
Replace header html with this
<!-- insert html comment between brackets -->
<!-- html code to format banner link to homepage -->
<div id="hade_photo_banner">
<a href="http://edh.smugmug.com">
<img src="/img/spacer.gif" alt="" border="0" height="100" width="750">
</a></div>
<!-- navbar html code -->
<!-- need add code to make drop down
nav buttons to categories with flyouts to subcategories-->
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5283422_zEnU3">About Me</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="/Sports">Sports
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports/464165">Bruins Baseball 2008</a></li>
<li><a href="/Sports/511763">Kodiak Baseball 2008</a></li>
<li><a href="/Sports/360841">Kodiak Baseball 2007</a></li>
<li><a href="/Sports/414244">W.C.R.D. Baseball</a></li>
<li><a href="/Sports/360840">Braves Baseball</a></li>
<li><a href="/Sports/506908">Souteast Baseball 2007</a></li>
<li><a href="/Sports/360842">Kodiak Football 2006</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Photography">Photography</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/School">School</a></li>
<li><a href="/Music">Music</a></li>
<li><a href="/Friends">Friends</a></li>
<li><a href="/Vacation">Vacation</a></li>
<li><a href="/Zoos">Zoos</a></li>
<li><a href="/Pets">Pets</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/xxxxxxx_xxxxx">FAQs</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
New CSS. It's your whole CSS, easier to just replace all. Got the new nav
CSS included.
#hade_photo_banner {
width: 750px;
height: 50px;
margin: 0 auto;
background: url(http://EDH.smugmug.com/photos/319392421_TtUVU-O.jpg) no-repeat;
}
.category_Sports #hade_photo_banner {
background: url(http://EDH.smugmug.com/photos/319392421_TtUVU-O.jpg) no-repeat;
}
.subcategory_BRUINS_BASEBALL_-_2008 #hade_photo_banner {
background: url(http://EDH.smugmug.com/photos/320655012_GLp8Z-O.jpg) no-repeat;
}
.subcategory_KODIAK_BASEBALL_-_2008 #hade_photo_banner {
background: url(http://EDH.smugmug.com/photos/320672360_tcrDR-O.jpg) no-repeat;
}
#hade_photo_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/319392421_TtUVU-O.jpg) no-repeat;
}
#extraDiv1 {display: none;}
/*~~~~~~~~~~~~~ navbar formating~~~~~~~~~~~~*/
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 420px; /* 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 {
font-size-adjust: .8;
font-family: Comic Sans MS, verdana;
display: block;
font-size: 100%; /* main buttons */
color: #80694D; /* main buttons text non-hover*/
text-decoration: none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid #A70101; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* 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: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: #975B67; /* main when hover DD */
background: #000; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: -20px; /* 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: #000; /* DD FO non-hover */
color: #80694D; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 140px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #975B67; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 140px; /* 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: #975B67; /* main hover */
background: #000; /* main hover */
}
.menu ul li a:hover ul {
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: #000; /* IE DD color non-hover */
color: #80694D; /* 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: #000; /* DD FO hover */
color: #975B67; /* 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 ==== */
ttbest
Jul-01-2008, 12:25 PM
Hi Allen,
I'm not sure if you received my reply a couple days ago but
the site that I'm interested in is if you go into smugmug and type in jennifer bresson. I know it's been a couple days but what I was asking about was how to stretch the header across the page, how to add the footer and then add a navbar. Just hoping you can help-
Tanya
You have a link to the example site?
lizziejane
Jul-01-2008, 01:17 PM
I currently have a nav bar with the following code:
<div id="navcontainer">
<ul>
<li><a href="<A href="http://ceejanerun.smugmug.com">Home</a></li">http://ceejanerun.smugmug.com">Home</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/People">People</a></li">http://ceejanerun.smugmug.com/People">People</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/Animals">Animals</a></li">http://ceejanerun.smugmug.com/Animals">Animals</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/General">General</a></li">http://ceejanerun.smugmug.com/General">General</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/Nature">Nature</a></li">http://ceejanerun.smugmug.com/Nature">Nature</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/Daily%20Pictures">Daily">http://ceejanerun.smugmug.com/Daily%20Pictures">Daily Pictures</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/Contact">Contact</a></li">http://ceejanerun.smugmug.com/Contact">Contact</a></li>
</ul>
</div>
I now want to do a separate home page with the ss, so need to dump the links for "people", "animals" "general", and "nature" and instead put one link to "galleries". I want to keep the "contact" and "daily pictures"
Here is the code I replaced it with, but nothing changed:
<div id="navcontainer">
<ul>
<li><a href="<A href="http://ceejanerun.smugmug.com">Home</a></li">http://ceejanerun.smugmug.com">Home</a></li>
<li><a href="<A="http://ceejanerun.smugmug.com/Galleries</a></li"]http://ceejanerun.smugmug.com/Galleries</a></li[/URL]>
<li><a href="<A href="http://ceejanerun.smugmug.com/Daily%20Pictures">Daily">http://ceejanerun.smugmug.com/Daily%20Pictures">Daily Pictures</a></li>
<li><a href="<A href="http://ceejanerun.smugmug.com/Contact">Contact</a></li">http://ceejanerun.smugmug.com/Contact">Contact</a></li>
</ul>
</div>
would anyone have any suggestions? I can get the separate home page to work, but I just can't seem to get rid of the existing nav bar, and don't want to make any permanent changes until I figure this out!
Thank
Update: I just tried to delete the whole existing nav bar, and it won't delete!
Allen
Jul-01-2008, 03:19 PM
I currently have a nav bar with the following code:
...
I now want to do a separate home page with the ss, so need to dump the links for "people", "animals" "general", and "nature" and instead put one link to "galleries". I want to keep the "contact" and "daily pictures"
Here is the code I replaced it with, but nothing changed:
...
<li><a href="<A="http://ceejanerun.smugmug.com/Galleries</a></li"]http://ceejanerun.smugmug.com/Galleries</a></li[/url]>
...
would anyone have any suggestions? I can get the separate home page to work, but I just can't seem to get rid of the existing nav bar, and don't want to make any permanent changes until I figure this out!
Thank
Update: I just tried to delete the whole existing nav bar, and it won't delete!
Try this, it fixes the /galleries link.
<div id="navcontainer">
<ul>
<li><a href="http://ceejanerun.smugmug.com">Home</a></li>
<li><a href="http://ceejanerun.smugmug.com/galleries">Daily Pictures</a></li>
<li><a href="http://ceejanerun.smugmug.com/Contact">Contact</a></li>
</ul>
</div>
Allen
Jul-01-2008, 03:35 PM
Hi Allen,
I'm not sure if you received my reply a couple days ago but
the site that I'm interested in is if you go into smugmug and type in jennifer bresson. I know it's been a couple days but what I was asking about was how to stretch the header across the page, how to add the footer and then add a navbar. Just hoping you can help-
Tanya
Take a look at this tutor (http://dgrin.smugmug.com/gallery/1932803) for creating a navbar.
Looked at the site and it'll take quite a bit of un-engineering the code, not obvious how it's done.
J Allen
Jul-01-2008, 03:35 PM
What am I missing?...I'm trying to move the text on this nav-bar, to the center. I dont have it in my CSS till I figure it out...this is the code:
#navcontainer ul {
margin:0;
padding:0;
height:38px;
background:#fff url(/photos/323691561_2qTZr-L.gif) repeat-x;
list-style-type: none;
text-align: center!important;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
display:block;
float:left;
height:35px;
line-height:33px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(/photos/323691561_2qTZr-L.gif);}
#navcontainer ul li a:hover {
color: #585858 ;
background:url(/photos/323691569_rjA8e-L.gif) no-repeat ;}
Allen
Jul-01-2008, 03:43 PM
What am I missing?...I'm trying to move the text on this nav-bar, to the center. I dont have it in my CSS till I figure it out...this is the code:
...
Try this, wrap the nav in a separate div for the background.
<div id="navcontainerBG">
<div id="navcontainer">
<ul>
...
...
</ul>
</div>
</div>
CSS change
#navcontainerBG {
background:#fff url(http://www.joerallen.com/photos/323691561_2qTZr-L.gif) repeat-x;
}
#navcontainer ul {
width: 500px;
margin: 0 auto;
padding:0;
height:38px;
list-style-type: none;
text-align: center !important;
}
ttbest
Jul-01-2008, 03:59 PM
Allen,
The only code I wrote is what you told me to write so I'm really confused.
Take a look at this tutor (http://dgrin.smugmug.com/gallery/1932803) for creating a navbar.
Looked at the site and it'll take quite a bit of un-engineering the code, not obvious how it's done.
Allen
Jul-01-2008, 04:09 PM
Allen,
The only code I wrote is what you told me to write so I'm really confused.
Didn't have a link to your site to look. Been thru many posts here so don't
always remember the past, lots of senior moments.:D Can you refresh what
you're asking, not quite sure.
ttbest
Jul-01-2008, 04:33 PM
Allen,
I've been trying for weeks to get my smugmug site to look presentable. All kinds of smugmug people have helped with all kinds of suggestions. I finally started posting on dgrin. I don't have any idea about how to write code or Html stuff, that's why I keep asking for help. So, are you telling me that you're not sure where I should begin because as I've struggled through each issue with smugmug, I thought I was making some progress? Is there a pecking order for navbar, header , footer stuff? Please give me some advice.
Take a look at this tutor (http://dgrin.smugmug.com/gallery/1932803) for creating a navbar.
Looked at the site and it'll take quite a bit of un-engineering the code, not obvious how it's done.
Allen
Jul-01-2008, 04:45 PM
Allen,
I've been trying for weeks to get my smugmug site to look presentable. All kinds of smugmug people have helped with all kinds of suggestions. I finally started posting on dgrin. I don't have any idea about how to write code or Html stuff, that's why I keep asking for help. So, are you telling me that you're not sure where I should begin because as I've struggled through each issue with smugmug, I thought I was making some progress? Is there a pecking order for navbar, header , footer stuff? Please give me some advice.
Nah, I was just trying to figure out what the next question was or if there
was one.:D Combining too many in one post is hard to answer and keep
track of.
ttbest
Jul-01-2008, 05:01 PM
Sorry,
Ok- here is my info. and I'm sorry if this is a long question but I'll try and update you on what you've helped me with so far.
My smugmug name is Agapephotos. I'm trying to arrange my homepage similar to the smugmug site - jennifer bresson. Basically ,it's a header, followed by a navbar, then a slideshow and footer at the bottom. I have a header that you've helped me with but it won't stretch across the page. I also have the slideshow going. I have a footer located in my family gallery under My Smugmug, but am not sure how to get it on my site. So, I need help fixing the header, putting in a navbar (which I'm fully willing to try with the tutorial), and finishing with a footer. I just don't want to do all this navbar stuff, only to have someone tell me that we should've figured out the header, footer stuff first.
Thanks for your patience,
Tanya
Didn't have a link to your site to look. Been thru many posts here so don't
always remember the past, lots of senior moments.:D Can you refresh what
you're asking, not quite sure.
Allen
Jul-01-2008, 05:30 PM
Sorry,
Ok- here is my info. and I'm sorry if this is a long question but I'll try and update you on what you've helped me with so far.
My smugmug name is Agapephotos. I'm trying to arrange my homepage similar to the smugmug site - jennifer bresson. Basically ,it's a header, followed by a navbar, then a slideshow and footer at the bottom. I have a header that you've helped me with but it won't stretch across the page. I also have the slideshow going. I have a footer located in my family gallery under My Smugmug, but am not sure how to get it on my site. So, I need help fixing the header, putting in a navbar (which I'm fully willing to try with the tutorial), and finishing with a footer. I just don't want to do all this navbar stuff, only to have someone tell me that we should've figured out the header, footer stuff first.
Thanks for your patience,
Tanya Ok, start with the header. See if this gets you what you want.
Add the red to your header and footer.
<div id="my_header">
<div id="my_banner"> </div>
</div>
Add the red to your footer code.
<div id="myFooter">
<center>
<img src="/photos/322180695_C4oLY-S.png" />
</center>
</div>
Add this to your CSS. (btw, the pink is different on these)
#my_header {background: #F58DA2;}
#myFooter {background: #FF8C9E;}
Allen
Jul-01-2008, 05:47 PM
... followed by a navbar, ...
Add the red to your header box html. Reference this tutor (http://dgrin.smugmug.com/gallery/1932803).
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX">About Me</a></li>
<li><a href="#link">Somewhere</a></li>
<li><a href="/gallery/XXXXXX">Information</a></li>
<li><a href="/gallery/XXXXXX">Guestbook</a></li>
</ul>
</div>
Here's your whole CSS, changes in red.
#extraDiv1 {display: none;}
#userBio {text-align: center;}
#bioBox .photo {display: none;}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 155px;
margin: 0 auto;
background: url(/photos/322180441_hmJKs-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
.homepage #my_banner{
display: block;
}
#my_header,
#myFooter {
background: #F58DA2;
}
#navcontainer {
background: #F58DA2;
height: 20px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #754C24;
background-color: #F58DA2;
}
#navcontainer ul li a:hover {
color: #F58DA2;
background-color: #754C24;
}
Allen
Jul-01-2008, 05:52 PM
...Basically ,it's a header, followed by a navbar, then a slideshow and footer at the bottom. ...
You will need a page for your galleries. This tutor (http://dgrin.smugmug.com/gallery/2160039) shows you how. Scroll
down to "The Galleries Page" sections. It adds some javascript and CSS.
Then in your nav html change this line
<li><a href="#link">Somewhere</a></li>
to this
<li><a href="/galleries">Galleries</a></li>
ttbest
Jul-01-2008, 06:48 PM
Hey Allen,
I'm working on all the stuff you sent me so thank you very much. One more thing- I clicked on the bio edit button and my slideshow disappeared. I can't seem to figure out how to get it back. Do you know?
You will need a page for your galleries. This tutor (http://dgrin.smugmug.com/gallery/2160039) shows you how. Scroll
down to "The Galleries Page" sections. It adds some javascript and CSS.
Then in your nav html change this line
<li><a href="#link">Somewhere</a></li>
to this
<li><a href="/galleries">Galleries</a></li>
ttbest
Jul-01-2008, 06:51 PM
Allen,
I did everything just like you said and my header has disappeared- all but a small strip of coral is on the page now. And there is no footer. Do I need to start over from scratch? If so, I will be lost as to where I'm starting from. I can't believe this is this hard. Please help.
Add the red to your header box html. Reference this tutor (http://dgrin.smugmug.com/gallery/1932803).
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX">About Me</a></li>
<li><a href="#link">Somewhere</a></li>
<li><a href="/gallery/XXXXXX">Information</a></li>
<li><a href="/gallery/XXXXXX">Guestbook</a></li>
</ul>
</div>
Here's your whole CSS, changes in red.
#extraDiv1 {display: none;}
#userBio {text-align: center;}
#bioBox .photo {display: none;}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 155px;
margin: 0 auto;
background: url(/photos/322180441_hmJKs-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
.homepage #my_banner{
display: block;
}
#my_header,
#myFooter {
background: #F58DA2;
}
#navcontainer {
background: #F58DA2;
height: 20px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #754C24;
background-color: #F58DA2;
}
#navcontainer ul li a:hover {
color: #F58DA2;
background-color: #754C24;
}
Allen
Jul-01-2008, 06:54 PM
Hey Allen,
I'm working on all the stuff you sent me so thank you very much. One more thing- I clicked on the bio edit button and my slideshow disappeared. I can't seem to figure out how to get it back. Do you know?
You lost this above your navcontainer stuff in your header. You didn't do the
footer part either.
<div id="my_header">
<div id="my_banner"> </div>
</div>
Did you by mistake slick hide for your bio? Look in your control panel under the homepage tab and click show to move it back to your homepage.
ttbest
Jul-02-2008, 04:05 AM
Hey Allen,
Disregard my previous message about the navcontainer position stuff. I got it to work. It looks good. Now I need to change the word "somewhere" thats in my navbar to galleries and then somehow attach my galleries to this word, right?
You lost this above your navcontainer stuff in your header. You didn't do the
footer part either.
<div id="my_header">
<div id="my_banner"> </div>
</div>
Did you by mistake slick hide for your bio? Look in your control panel under the homepage tab and click show to move it back to your homepage.
Allen
Jul-02-2008, 06:36 AM
Hey Allen,
Disregard my previous message about the navcontainer position stuff. I got it to work. It looks good. Now I need to change the word "somewhere" thats in my navbar to galleries and then somehow attach my galleries to this word, right?
Remove this for your javascript, don't belong there and it's already in your header.
<div id="my_banner"> </div>
You have not put the code in to create a new galleries page.
Look at this tutor (http://dgrin.smugmug.com/gallery/2160039) and scroll down to "The Galleries Page" sections. It adds some javascript and some CSS.
Here is your header html after you get the galleries page working.
Replace the xxxxxxxx_xxxxx's with the correct gallery numbers.
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">About Me</a></li>
<li><a href="/galleries">My Galleries</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">Information</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">Guestbook</a></li>
</ul>
</div>
EJP Photo
Jul-02-2008, 07:12 AM
Alright - I'm stumped. I followed all the instructions in the tutorial for making a navbar and separate galleries page, but the galleries page just isn't showing up - the link looks exactly like my homepage does.
Can anyone give me a hand and tell me what I might be doing wrong?
www.ejpphoto.com
Allen
Jul-02-2008, 07:28 AM
Alright - I'm stumped. I followed all the instructions in the tutorial for making a navbar and separate galleries page, but the galleries page just isn't showing up - the link looks exactly like my homepage does.
Can anyone give me a hand and tell me what I might be doing wrong?
www.ejpphoto.com (http://www.ejpphoto.com)
Firebug is showing a javascript error and it's probably stopping before your
galleries js is run. Have no idea about this stuff, just noting.
missing ; before statement
http://www.ejpphoto.com/include/js/user_ejpphoto-20080702081726.js
Line 18
18<script type="text/javascript">
19var pageTracker = _gat._getTracker("UA-681464-6");
20pageTracker._initData();
21pageTracker._trackPageview();
22</script>
EJP Photo
Jul-02-2008, 07:43 AM
Ah - thanks! That helped a lot. I kept looking at the galleries function and never thought to look at the one above it for the bug. This is why I'm not a coder for a living.
Anyway, it's working now, thanks again.
J Allen
Jul-02-2008, 09:18 AM
How would I control the width of my nav-bar. Right now it spans the whole width of my page....I would like to be able to adjust it close to the same size as my banner...Thanks!
ttbest
Jul-02-2008, 10:01 AM
Hi Allen,
I just want to make sure we're on the same page before I go and screw something up. I have changed the word "somewhere" to "galleries" and now I'm trying to link all of my galleries to this, right? So it won't be visible on my homepage. I'm just really confused looking at the tutorial so I wanted to double check with you before I get started and do what this tutorial says - because to me it's all Greek!
Remove this for your javascript, don't belong there and it's already in your header.
<div id="my_banner"> </div>
You have not put the code in to create a new galleries page.
Look at this tutor (http://dgrin.smugmug.com/gallery/2160039) and scroll down to "The Galleries Page" sections. It adds some javascript and some CSS.
Here is your header html after you get the galleries page working.
Replace the xxxxxxxx_xxxxx's with the correct gallery numbers.
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">About Me</a></li>
<li><a href="/galleries">My Galleries</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">Information</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">Guestbook</a></li>
</ul>
</div>
Allen
Jul-02-2008, 10:12 AM
Hi Allen,
I just want to make sure we're on the same page before I go and screw something up. I have changed the word "somewhere" to "galleries" and now I'm trying to link all of my galleries to this, right? So it won't be visible on my homepage. I'm just really confused looking at the tutorial so I wanted to double check with you before I get started and do what this tutorial says - because to me it's all Greek!
You need to create the duplicate homepage called galleries so when you click on your nav,
the link <li><a href="/galleries">My Galleries</a></li> will work.
That tutor has you add some javascript and CSS. The js creates a duplicate of your homepage and calls it "galleries". The CSS tells it what stuff is on the homepage vs the galleries page. Without the CSS all the stuff would be on both pages, they are duplicates. A little clearer?
ttbest
Jul-02-2008, 11:15 AM
Hi Allen,
I'm in the tutorial on Galleries III- I don't get it. It says Set the link to the galleries in your header code from your navbar. What does this mean? The next line says Link it to: XXXXX.smugmug.com/galleries
No idea what this is telling me to do.
You need to create the duplicate homepage called galleries so when you click on your nav,
the link <li><a href="/galleries">My Galleries</a></li> will work.
That tutor has you add some javascript and CSS. The js creates a duplicate of your homepage and calls it "galleries". The CSS tells it what stuff is on the homepage vs the galleries page. Without the CSS all the stuff would be on both pages, they are duplicates. A little clearer?
Allen
Jul-02-2008, 11:19 AM
Hi Allen,
I'm in the tutorial on Galleries III- I don't get it. It says Set the link to the galleries in your header code from your navbar. What does this mean? The next line says Link it to: XXXXX.smugmug.com/galleries
No idea what this is telling me to do.
You already have that shown above in the quote part of post 2084. So if you
changed to the latest nav header html above you should be set.
<li><a href="/galleries">My Galleries</a></li>
ttbest
Jul-02-2008, 11:20 AM
This is a continuation of my previous completely confused email to you--- I did Gallery I and Gallery II and now as I said, I'm clueless about Gallery III. SInce I did the first parts, my galleries have disappeared so if I'm supposed to get some codes from the galleryies, I have no idea what to do. Helppp!You need to create the duplicate homepage called galleries so when you click on your nav,
the link <li><a href="/galleries">My Galleries</a></li> will work.
That tutor has you add some javascript and CSS. The js creates a duplicate of your homepage and calls it "galleries". The CSS tells it what stuff is on the homepage vs the galleries page. Without the CSS all the stuff would be on both pages, they are duplicates. A little clearer?
Allen
Jul-02-2008, 11:38 AM
This is a continuation of my previous completely confused email to you--- I did Gallery I and Gallery II and now as I said, I'm clueless about Gallery III. SInce I did the first parts, my galleries have disappeared so if I'm supposed to get some codes from the galleryies, I have no idea what to do. Helppp! Change the red in in your header nav html and the link works.
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/4332559">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/4332559">Information</a></li>
<li><a href="/gallery/4332559">Guestbook</a></li>
</ul>
</div>
ttbest
Jul-02-2008, 11:46 AM
Ok Allen,
I really am so very thankful to you as I feel I am ( we are) making some real progress today. How do I attach an "About Me" page to link up to the About Me on the navbar?
Change the red in in your header nav html and the link works.
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/4332559">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/4332559">Information</a></li>
<li><a href="/gallery/4332559">Guestbook</a></li>
</ul>
</div>
Allen
Jul-02-2008, 11:54 AM
Ok Allen,
I really am so very thankful to you as I feel I am ( we are) making some real progress today. How do I attach an "About Me" page to link up to the About Me on the navbar? Have you created a new gallery for your about you?
After you do enter the link in the nav html. As an example here's the
link for your animals gallery with the gallery number and key highlighted.
http://agapephotos.smugmug.com/gallery/4811403_DhR4x
<li><a href="/gallery/XXXXXXX_xxxxx">About Me</a></li>
It would look like this.
<li><a href="/gallery/4811403_DhR4x">About Me</a></li>
Put the about gallery in there.
btw, you nav works great now going back and forth between the galleries and homepage.
ttbest
Jul-02-2008, 12:30 PM
I have created an about me page in PS and it's just text but I'm not sure if I need to make it a certain pixel size before I download it to smugmug.
Yes, my navbar is working....soooo cool!!
Have you created a new gallery for your about you?
After you do enter the link in the nav html. As an example here's the
link for your animals gallery with the gallery number and key highlighted.
http://agapephotos.smugmug.com/gallery/4811403_DhR4x
<li><a href="/gallery/XXXXXXX_xxxxx">About Me</a></li>
It would look like this.
<li><a href="/gallery/4811403_DhR4x">About Me</a></li>
Put the about gallery in there.
btw, you nav works great now going back and forth between the galleries and homepage.
Allen
Jul-02-2008, 12:45 PM
I have created an about me page in PS and it's just text but I'm not sure if I need to make it a certain pixel size before I download it to smugmug.
Yes, my navbar is working....soooo cool!!
Look at it at about 750-800 wide, is the text readable? You can put this
image in the gallery description of the about gallery. Add this and put the
uploaded photo number in it. The size can be changed/adjusted after it's in
and we see it. Upload to the about gallery. After getting to show in the
description the photo below can be hidden with CSS. Then you will not
forget where it is.
<html>
<center>
<img src="/photos/XXXXXXX_xxxxx-L.jpg" />
</center>
</html>
Oh, and post a direct link to the about gallery. Best is to make these special
galleries unlisted so only a direct link works from your navbar. Then they
don't show on your galleries page. Your banner gallery is another of these to
unlist.
If you want the galleries background pink add this to your CSS.
#categoriesBox {
background-color: #F58DA2;}
J Allen
Jul-02-2008, 02:12 PM
How would I control the width of my nav-bar. Right now it spans the whole width of my page....I would like to be able to adjust it close to the same size as my banner...Thanks!
I figured it out ....nevermind:thumb
ttbest
Jul-02-2008, 04:43 PM
Ok Allen,
You lost me on this one. I have an About Me page and a Pricing page in MySmugmug in My Family gallery (if you go into AgapePhotos, you'll see it). I'm trying to link these two files to the links About Me and Information that is in my navbar. I tried hooking it like you said earlier but it hooks the entire My SMugmug gallery and not just the file.
Look at it at about 750-800 wide, is the text readable? You can put this
image in the gallery description of the about gallery. Add this and put the
uploaded photo number in it. The size can be changed/adjusted after it's in
and we see it. Upload to the about gallery. After getting to show in the
description the photo below can be hidden with CSS. Then you will not
forget where it is.
<html>
<center>
<img src="/photos/XXXXXXX_xxxxx-L.jpg" />
</center>
</html>
Oh, and post a direct link to the about gallery. Best is to make these special
galleries unlisted so only a direct link works from your navbar. Then they
don't show on your galleries page. Your banner gallery is another of these to
unlist.
If you want the galleries background pink add this to your CSS.
#categoriesBox {
background-color: #F58DA2;}
Allen
Jul-02-2008, 05:02 PM
Ok Allen,
You lost me on this one. I have an About Me page and a Pricing page in MySmugmug in My Family gallery (if you go into AgapePhotos, you'll see it). I'm trying to link these two files to the links About Me and Information that is in my navbar. I tried hooking it like you said earlier but it hooks the entire My SMugmug gallery and not just the file.
You must have them both as unlisted because I don't see them. They will
both have a gallery number and key. xxxxxxxxx_xxxxx That is what you'd enter
in the nav.
ttbest
Jul-02-2008, 05:17 PM
How are they unlisted or rather how do I change that?
You must have them both as unlisted because I don't see them. They will
both have a gallery number and key. xxxxxxxxx_xxxxx That is what you'd enter
in the nav.
ttbest
Jul-02-2008, 05:23 PM
I saved my two documents the same way I saved my header and put it in the same place so I'm not sure how it's unlisted. Anyway, here is the entire path- Go to smugmug then Agapephotos, Family, my smugmug and you'll see header, footer, about me, and pricing. Can you see them?
You must have them both as unlisted because I don't see them. They will
both have a gallery number and key. xxxxxxxxx_xxxxx That is what you'd enter
in the nav.
Allen
Jul-02-2008, 05:44 PM
I saved my two documents the same way I saved my header and put it in the same place so I'm not sure how it's unlisted. Anyway, here is the entire path- Go to smugmug then Agapephotos, Family, my smugmug and you'll see header, footer, about me, and pricing. Can you see them?
Oh, now I got it. You have the images in there. You could link directly to those images in your nav by creating a gallery for each.
Create a new gallery for your about page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381927_kaogb-XL.jpg" />
</center>
</html>
Create a new gallery for your prices page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381382_Qpwyc-XL.jpg" />
</center>
</html>
Each of those galleries can now be linked on your nav.
You will need larger sizes that is now allowed in your "My Smug Mug" gallery so under customize gallery set "My Smug Mug" to allow originals.
Once the photos shows on the page additional CSS will be needed to clean up the page. Will get to that later.
ttbest
Jul-02-2008, 05:58 PM
Ok, I'm at the allow original direction you gave me. Where is this? Did you mean in my two new galleries or in the MySMugmug gallery?
Oh, now I got it. You have the images in there. You could link directly to those images in your nav by creating a gallery for each.
Create a new gallery for your about page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381927_kaogb-XL.jpg" />
</center>
</html>
Create a new gallery for your prices page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381382_Qpwyc-XL.jpg" />
</center>
</html>
Each of those galleries can now be linked on your nav.
You will need larger sizes that is now allowed in your "My Smug Mug" gallery so under customize gallery set "My Smug Mug" to allow originals.
Once the photos shows on the page additional CSS will be needed to clean up the page. Will get to that later.
ttbest
Jul-02-2008, 06:21 PM
Hi Allen-
So I got the About Me and Pricing pages to show up. I have a few aestetic(sp?) questions and hopefully I'll be close to being done-
1)Is my slideshow too big on your screen? It doesn't fit on my screen.
2)Your last instruction told me to go into my smugmug and allow original but I'm not sure what that's all about.
3)How do I hide the boxes at the bottom of the About me and Pricing pages.(they look like duplicates of the pages)
4)Can the font be bigger for the navbar?
5)Lastly- can I get rid of the gray square that the slideshow is showing on?
Oh, now I got it. You have the images in there. You could link directly to those images in your nav by creating a gallery for each.
Create a new gallery for your about page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381927_kaogb-XL.jpg" />
</center>
</html>
Create a new gallery for your prices page and set it to journal style under customize gallery. Put this in the gallery description.
<html>
<center>
<img src="/photos/324381382_Qpwyc-XL.jpg" />
</center>
</html>
Each of those galleries can now be linked on your nav.
You will need larger sizes that is now allowed in your "My Smug Mug" gallery so under customize gallery set "My Smug Mug" to allow originals.
Once the photos shows on the page additional CSS will be needed to clean up the page. Will get to that later.
Allen
Jul-02-2008, 06:33 PM
Hi Allen-
So I got the About Me and Pricing pages to show up. I have a few aestetic(sp?) questions and hopefully I'll be close to being done-
1)Is my slideshow too big on your screen? It doesn't fit on my screen.
2)Your last instruction told me to go into my smugmug and allow original but I'm not sure what that's all about.
3)How do I hide the boxes at the bottom of the About me and Pricing pages.(they look like duplicates of the pages)
4)Can the font be bigger for the navbar?
5)Lastly- can I get rid of the gray square that the slideshow is showing on?
Add this to your CSS to clean up the pages. Then will readdress your
questions if still applicable.
/* about me gallery */
.gallery_5313779 .play_slideshow,
.gallery_5313779 #albumNav_top,
.gallery_5313779 #albumNav_bottom,
.gallery_5313779 .journal_entry, /* hides photos in gallery */
.gallery_5313779 #breadcrumb {display: none;}
.loggedIn .gallery_5313779 #breadcrumb {display: block;}
/* prices gallery */
.gallery_5313771 .play_slideshow,
.gallery_5313771 #albumNav_top,
.gallery_5313771 #albumNav_bottom,
.gallery_5313771 .journal_entry, /* hides photos in gallery */
.gallery_5313771 #breadcrumb {display: none;}
.loggedIn .gallery_5313771 #breadcrumb {display: block;}
Under each gallery on the customize gallery page you have large checked.
You could use a bigger size so check original and we'll change the size in
this to look right.
size options
....927_kaogb-XL.jpg"...
....927_kaogb-XXL.jpg"...
....927_kaogb-O.jpg"...
....927_kaogb-750x750.jpg"...
Add the red and adjust the size to your liking.
#navcontainer ul li a {
text-decoration: none;
font-size: 120%;
padding: .2em 1em;
color: #754C24;
background-color: #F58DA2;
}
ttbest
Jul-02-2008, 06:57 PM
Hi Allen,
Should I just re-create the About Me and Pricing Pages in bigger font? I couldn't really read them when I downloaded them, I just wasn't thinking. Too much info. on the Pricing page. The About Me page just needs to be bigger. I don't know what you're talking about with the sizing stuff. I went into About Me and customize gallery and clicked on XL3 but nothing changed.
Add this to your CSS to clean up the pages. Then will readdress your
questions if still applicable.
/* about me gallery */
.gallery_5313779 .play_slideshow,
.gallery_5313779 #albumNav_top,
.gallery_5313779 #albumNav_bottom,
.gallery_5313779 .journal_entry, /* hides photos in gallery */
.gallery_5313779 #breadcrumb {display: none;}
.loggedIn .gallery_5313779 #breadcrumb {display: block;}
/* prices gallery */
.gallery_5313771 .play_slideshow,
.gallery_5313771 #albumNav_top,
.gallery_5313771 #albumNav_bottom,
.gallery_5313771 .journal_entry, /* hides photos in gallery */
.gallery_5313771 #breadcrumb {display: none;}
.loggedIn .gallery_5313771 #breadcrumb {display: block;}
Under each gallery on the customize gallery page you have large checked.
You could use a bigger size so check original and we'll change the size in
this to look right.
size options
....927_kaogb-XL.jpg"...
....927_kaogb-XXL.jpg"...
....927_kaogb-O.jpg"...
....927_kaogb-750x750.jpg"...
Add the red and adjust the size to your liking.
#navcontainer ul li a {
text-decoration: none;
font-size: 120%;
padding: .2em 1em;
color: #754C24;
background-color: #F58DA2;
}
Allen
Jul-02-2008, 07:06 PM
Hi Allen,
Should I just re-create the About Me and Pricing Pages in bigger font? I couldn't really read them when I downloaded them, I just wasn't thinking. Too much info. on the Pricing page. The About Me page just needs to be bigger. I don't know what you're talking about with the sizing stuff. I went into About Me and customize gallery and clicked on XL3 but nothing changed.
Looks like you'll need at least 800px at the minimum. Make them about 900
wide, can always size them down some. Create new ones and use replace
photo under photo tools so the photo number stays the same.
Can even switch the gallery to critique style to widen the gallery for even larger one.
ttbest
Jul-02-2008, 07:42 PM
Will that be big enough? What is the maximum that I can use? I just re-created it again using bigger font and it looks even smaller.
Looks like you'll need at least 800px at the minimum. Make them about 900
wide, can always size them down some. Create new ones and use replace
photo under photo tools so the photo number stays the same.
Can even switch the gallery to critique style to widen the gallery for even larger one.
ttbest
Jul-02-2008, 07:57 PM
Allen,
I've re-did it 3x's. This last time it was 1025x725pixels. It is still the same size so I must have something turned off somewhere. Can you please take a look at it. Agapephotos-family gallery-aboutme2
Will that be big enough? What is the maximum that I can use? I just re-created it again using bigger font and it looks even smaller.
Allen
Jul-02-2008, 08:11 PM
Allen,
I've re-did it 3x's. This last time it was 1025x725pixels. It is still the same size so I must have something turned off somewhere. Can you please take a look at it. Agapephotos-family gallery-aboutme2
You created new galleries? No need to. This below will get the photos larger in the two galleries you already did.
In this gallery
http://agapephotos.smugmug.com/gallery/5313771_J2QSy
In the description change to this.
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
<html>
In this gallery
http://agapephotos.smugmug.com/gallery/5313779_sZwKA
change the description to this.
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg">
</center>
<html>
ttbest
Jul-03-2008, 02:53 AM
I re-created them because the fonts in them were all wrong. Can you please guide me through the description changes for galleries - AboutMe2-5314707_QWjb2 and Pricing -5314518_zeJKg ?
You created new galleries? No need to. This below will get the photos larger in the two galleries you already did.
In this gallery
http://agapephotos.smugmug.com/gallery/5313771_J2QSy
In the description change to this.
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
<html>
In this gallery
http://agapephotos.smugmug.com/gallery/5313779_sZwKA
change the description to this.
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg">
</center>
<html>
Allen
Jul-03-2008, 04:14 AM
I re-created them because the fonts in them were all wrong. Can you please guide me through the description changes for galleries - AboutMe2-5314707_QWjb2 and Pricing -5314518_zeJKg ?
You only needed to recreate the photos and change the numbers in the two
existing galleries, but anyway, here is the code for the two new galleries.
Add this to the gallery desctription of about
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
</center>
</html>
Add this to the gallery desctription of prices
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
</html>
Change the gallery numbers in this.
/* about me gallery */
.gallery_5314707 .play_slideshow,
.gallery_5314707 #albumNav_top,
.gallery_5314707 #albumNav_bottom,
.gallery_5314707 .journal_entry, /* hides photos in gallery */
.gallery_5314707 #breadcrumb {display: none;}
.loggedIn .gallery_5314707 #breadcrumb {display: block;}
/* prices gallery */
.gallery_5314518 .play_slideshow,
.gallery_5314518 #albumNav_top,
.gallery_5314518 #albumNav_bottom,
.gallery_5314518 .journal_entry, /* hides photos in gallery */
.gallery_5314518 #breadcrumb {display: none;}
.loggedIn .gallery_5314518 #breadcrumb {display: block;}
Edit: added / in ending/closing <html>'s
ttbest
Jul-03-2008, 04:22 AM
Hi Allen,
I did the changes you recommended and both galleries disappeared.
You only needed to recreate the photos and change the numbers in the two
existing galleries, but anyway, here is the code for the two new galleries.
Add this to the gallery desctription of about
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
</center>
<html>
Add this to the gallery desctription of prices
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
<html>
Change the gallery numbers in this.
/* about me gallery */
.gallery_5314707 .play_slideshow,
.gallery_5314707 #albumNav_top,
.gallery_5314707 #albumNav_bottom,
.gallery_5314707 .journal_entry, /* hides photos in gallery */
.gallery_5314707 #breadcrumb {display: none;}
.loggedIn .gallery_5314707 #breadcrumb {display: block;}
/* prices gallery */
.gallery_5314518 .play_slideshow,
.gallery_5314518 #albumNav_top,
.gallery_5314518 #albumNav_bottom,
.gallery_5314518 .journal_entry, /* hides photos in gallery */
.gallery_5314518 #breadcrumb {display: none;}
.loggedIn .gallery_5314518 #breadcrumb {display: block;}
Allen
Jul-03-2008, 04:24 AM
Hi Allen,
I did the changes you recommended and both galleries disappeared.
You didn't add the stuff to the gallery descriptions.
ttbest
Jul-03-2008, 04:30 AM
Yes I did add it unless I'm looking in the wrong area. I go to that gallery and when I click on edit, a description area comes up, and that is where I put it. I just looked again and it's there. Are you talking about some other place?
You didn't add the stuff to the gallery descriptions.
Allen
Jul-03-2008, 04:36 AM
Yes I did add it unless I'm looking in the wrong area. I go to that gallery and when I click on edit, a description area comes up, and that is where I put it. I just looked again and it's there. Are you talking about some other place?
Oops, my bad, sorry. At the end of each <html> should be </html>
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
</center>
</html>
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
</html>
I'll edit original post to correct it.
ttbest
Jul-03-2008, 04:41 AM
Excellent- it's working!!! YEah!!! Can't quite think of enough words to explain in text my excitement. Thank you, thank you!
Can you help with my slideshow for a couple changes? I'm trying to get rid of the gray box that it's on top of. Also, I think I'd like the slideshow a little smaller.
Thanks so much,
TB
Oops, my bad, sorry. At the end of each <html> should be </html>
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
</center>
</html>
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
</html>
I'll edit original post to correct it.
Allen
Jul-03-2008, 04:45 AM
Excellent- it's working!!! YEah!!! Can't quite think of enough words to explain in text my excitement. Thank you, thank you!
Can you help with my slideshow for a couple changes? I'm trying to get rid of the gray box that it's on top of. Also, I think I'd like the slideshow a little smaller.
Thanks so much,
TB
Looks great.:thumb
In your bio change the height to 400 for your show and see if you like it.
SM.flash.insertSlideshow(600, 400, ssConfig, 'transparent');
Add this to your CSS
#bioBox {background: none;}
Another option is change the background of the whole page.
Add the .homepage to this.
.homepage,
#my_header,
#myFooter {
background: #F58DA2;
}
ttbest
Jul-03-2008, 04:52 AM
Allen,
Thank you so much. My site looks awesome and it's working!!! Thank you for the diligence in getting back to me that last few days. I know I've been emailing constantly but I figured that was the only way I could get it done.
My last question and then I'm wrapping it up.- because I had clients logging on and business coming at me right and left, I had to hurry and create my header and footer (the pink strips). I am a perfectionist though, and I know that I want to modify a few things in the future. Can you tell me once I have the modified header and footer in my gallery, what code (s) would I need to update with the proper gallery numbers?
Thanks again,
TB
Looks great.:thumb
In your bio change the height to 400 for your show and see if you like it.
SM.flash.insertSlideshow(600, 400, ssConfig, 'transparent');
Add this to yoru CSS
#bioBox {background: none;}
Another option is change to background of the whole page.
Add the .homepage to this.
.homepage,
#my_header,
#myFooter {
background: #F58DA2;
}
Allen
Jul-03-2008, 05:10 AM
Allen,
Thank you so much. My site looks awesome and it's working!!! Thank you for the diligence in getting back to me that last few days. I know I've been emailing constantly but I figured that was the only way I could get it done.
My last question and then I'm wrapping it up.- because I had clients logging on and business coming at me right and left, I had to hurry and create my header and footer (the pink strips). I am a perfectionist though, and I know that I want to modify a few things in the future. Can you tell me once I have the modified header and footer in my gallery, what code (s) would I need to update with the proper gallery numbers?
Thanks again,
TB
You would just change the photo number in this.
<div id="myFooter">
<center>
<img src="/photos/322180695_C4oLY-S.png">
</center>
</div>
Or this for your banner.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 140px;
margin: 0 auto;
background: url(/photos/322180441_hmJKs-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
Ooh, just noticed that there are two different photos in your banner. They should be the same.
The second one in the filter line doesn't work in IE, make it the same as the other.
sizingmethod=image, src='/photos/322180441_hmJKs-O.png');
ttbest
Jul-03-2008, 05:13 AM
Can I get rid of the gray box that my galleries are on and can I hide galleries so visitors can't see my family ones and the animal ones. You know?
You would just change the photo number in this.
<div id="myFooter">
<center>
<img src="/photos/322180695_C4oLY-S.png">
</center>
</div>
Or this for your banner.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 140px;
margin: 0 auto;
background: url(/photos/322180441_hmJKs-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
Allen
Jul-03-2008, 05:24 AM
Can I get rid of the gray box that my galleries are on and can I hide galleries so visitors can't see my family ones and the animal ones. You know?
Add this to CSS.
#categoriesBox {background: none;}
You can hide those categories but will have to supply the directs links to get to them. Like this.
http://agapephotos.smugmug.com/Family
http://agapephotos.smugmug.com/Animals
Add this to your javascript. Ref this post (http://www.dgrin.com/showthread.php?t=48082&page=2).
<!-- Hide Categories -->
function delCategory() {
re = /\/(Family|Animals)$/;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}
YE.onContentReady('categoriesBox', delCategory);
<!-- End Hide Categories -->
ttbest
Jul-03-2008, 05:38 AM
Supply them where? If I add the code to my javascript, is that supplying them or are you talking about something in addition to this?
Add this to CSS.
#categoriesBox {background: none;}
You can hide those categories but will have to supply the directs links to get to them. Like this.
http://agapephotos.smugmug.com/Family
http://agapephotos.smugmug.com/Animals
Add this to your javascript. Ref this post (http://www.dgrin.com/showthread.php?t=48082&page=2).
<!-- Hide Categories -->
function delCategory() {
re = /\/(Family|Animals)$/;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}
YE.onContentReady('categoriesBox', delCategory);
<!-- End Hide Categories -->
Allen
Jul-03-2008, 05:58 AM
Supply them where? If I add the code to my javascript, is that supplying them or are you talking about something in addition to this?
Those two categories will disappear from your galleries page. So to get to
them you'd need the direct link like this. So your family/friends would have
to bookmark them.
http://agapephotos.smugmug.com/Family
http://agapephotos.smugmug.com/Animals
There is a way to create a private "landing page"/gallery with all your
private/personal categories on it. This page (http://allen-steve.smugmug.com/gallery/4776685_46R9o) needs a password to enter for
example. On that page you could show all your private categories. This page (http://allen-steve.smugmug.com/gallery/3539056_ZkcLB)
is set up for just that and although no PW (can be added) shows how a bunch
of links can be displayed.
ttbest
Jul-03-2008, 12:35 PM
Hi Allen,
I think I'm going to wait to do the hide gallery stuff down the road. I have a lot of possible clients accessing my homepage right now and I need to get it done. Anyway, I had typos on the About me page so I had to re-create it. It is located at Agapephotos-family-Me and has the path- http://agapephotos.smugmug.com/gallery/5319332_xyRvR/1/324831636_jLdhv
So what I need to do is swap out AboutMe2 for Me gallery. I don't know how to do this smoothly. I tried creating it in PS and then doing the whole Replace button, but it says there was a problem-try again.
Do I just use the codes for the description you gave me in the above edit or do the numbers change? Also, in that same place is my contact page. How do I hook this up to my navbar - Contact?
Thanks so much,
TB
You created new galleries? No need to. This below will get the photos larger in the two galleries you already did.
In this gallery
http://agapephotos.smugmug.com/gallery/5313771_J2QSy
In the description change to this.
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
<html>
In this gallery
http://agapephotos.smugmug.com/gallery/5313779_sZwKA
change the description to this.
<html>
<center>
<img src="/photos/324438880_SYM7C-L.jpg">
</center>
<html>
Allen
Jul-03-2008, 02:19 PM
Hi Allen,
I think I'm going to wait to do the hide gallery stuff down the road. I have a lot of possible clients accessing my homepage right now and I need to get it done. Anyway, I had typos on the About me page so I had to re-create it. It is located at Agapephotos-family-Me and has the path- http://agapephotos.smugmug.com/gallery/5319332_xyRvR/1/324831636_jLdhv
So what I need to do is swap out AboutMe2 for Me gallery. I don't know how to do this smoothly. I tried creating it in PS and then doing the whole Replace button, but it says there was a problem-try again.
Do I just use the codes for the description you gave me in the above edit or do the numbers change? Also, in that same place is my contact page. How do I hook this up to my navbar - Contact?
Thanks so much,
TB
Go into the the about description and change the photo number.
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
to this new one.
<img src="/photos/324831636_jLdhv-L.jpg" />
emeraldengland
Jul-03-2008, 03:39 PM
You have the patience of a saint Andy :D
ttbest
Jul-03-2008, 04:50 PM
I'm sorry Allen- What about description? Why does the replace photo not work for me?
Go into the the about description and change the photo number.
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
to this new one.
<img src="/photos/324831636_jLdhv-L.jpg" />
ttbest
Jul-03-2008, 04:56 PM
Allen,
I put the new one that you mentioned in this reply (<img src="/photos/324831636_jLdhv-L.jpg" />) in the Me gallery under edit description but I have a feeling that's not what you were looking for. I just need the Me gallery to be connected to the "About Me" navbar not the About Me2 that is currently connected.
Go into the the about description and change the photo number.
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
to this new one.
<img src="/photos/324831636_jLdhv-L.jpg" />
Allen
Jul-03-2008, 05:22 PM
Allen,
I put the new one that you mentioned in this reply (<img src="/photos/324831636_jLdhv-L.jpg" />) in the Me gallery under edit description but I have a feeling that's not what you were looking for. I just need the Me gallery to be connected to the "About Me" navbar not the About Me2 that is currently connected.
You are confusing me with all these about and me galleries. What is the
gallery link for the final about me gallery? That's what will go in the nav. Does
this final about me gallery have the correct photo now?
ttbest
Jul-03-2008, 05:48 PM
Sorry Allen-
I changed the names so this wouldn't be so painful to "current" and "new". If you go to agapephotos-galleries-family, you'll see what I'm trying to explain.
The "Current" gallery is connected to my navbar-"About Me" tab. I'm trying to replace it with the "new" gallery. I'd love to do the replace photo thing that everyone's talking about but am not sure how. Also, I'm sure we'll have to do the same thing to the size that we did yesterday as the "New" is again too small to read.
I also have a "Contact" gallery (same place- in the Familly gallery), that I'm trying to connect to the "Contact" tab in the navbar.
Thank you for your patience
"
You are confusing me with all these about and me galleries. What is the
gallery link for the final about me gallery? That's what will go in the nav. Does
this final about me gallery have the correct photo now?
Allen
Jul-03-2008, 06:36 PM
Sorry Allen-
I changed the names so this wouldn't be so painful to "current" and "new". If you go to agapephotos-galleries-family, you'll see what I'm trying to explain.
The "Current" gallery is connected to my navbar-"About Me" tab. I'm trying to replace it with the "new" gallery. I'd love to do the replace photo thing that everyone's talking about but am not sure how. Also, I'm sure we'll have to do the same thing to the size that we did yesterday as the "New" is again too small to read.
I also have a "Contact" gallery (same place- in the Familly gallery), that I'm trying to connect to the "Contact" tab in the navbar.
Thank you for your patience
"
The two nav links to about and price both look good as is. You want to
change something with them?
Your contact image is 900x600 and the text is in the upper left. Crop off
most of the white area on the right and bottom. It will fit and position the
better in description box. Under photo tools drop pick "replaces photo".
Then pick browse and select the new image on your harddrive. This will
upload the new smaller version and replace the current one. It will keep the
same photo number.
This goes in the description.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3.jpg">
</center>
<html>
Add this to yoru CSS.
/* contact gallery */
.gallery_5317009 .play_slideshow,
.gallery_5317009 #albumNav_top,
.gallery_5317009 #albumNav_bottom,
.gallery_5317009 .journal_entry, /* hides photos in gallery */
.gallery_5317009 #breadcrumb {display: none;}
.loggedIn .gallery_5317009 #breadcrumb {display: block;}
ttbest
Jul-03-2008, 07:06 PM
Allen- We're mixing the two problems
1)No matter what I put in, for some reason when you click the contact tab in the navbar, my gallery page comes up.
2)On the About Me page (the About Me tab on the nav bar)- I'm just trying to replace the current page with the new one both of these images- (I'm calling them images even though they are just text) are in my family gallery. I know the one named "Current" is working, it just has a typo in the second paragraph so I need to swap it with the "New" one.
The two nav links to about and price both look good as is. You want to
change something with them?
Your contact image is 900x600 and the text is in the upper left. Crop off
most of the white area on the right and bottom. It will fit and position the
better in description box. Under photo tools drop pick "replaces photo".
Then pick browse and select the new image on your harddrive. This will
upload the new smaller version and replace the current one. It will keep the
same photo number.
This goes in the description.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3.jpg">
</center>
<html>
Add this to yoru CSS.
/* contact gallery */
.gallery_5317009 .play_slideshow,
.gallery_5317009 #albumNav_top,
.gallery_5317009 #albumNav_bottom,
.gallery_5317009 .journal_entry, /* hides photos in gallery */
.gallery_5317009 #breadcrumb {display: none;}
.loggedIn .gallery_5317009 #breadcrumb {display: block;}
Allen
Jul-03-2008, 07:12 PM
Allen- We're mixing the two problems
1)No matter what I put in, for some reason when you click the contact tab in the navbar, my gallery page comes up.
2)On the About Me page (the About Me tab on the nav bar)- I'm just trying to replace the current page with the new one both of these images- (I'm calling them images even though they are just text) are in my family gallery. I know the one named "Current" is working, it just has a typo in the second paragraph so I need to swap it with the "New" one.
In this about gallery
http://agapephotos.smugmug.com/gallery/5314707_QWjb2
replace this line in the description
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
with this
<img src="/photos/324831636_jLdhv-L.jpg" />
That IS your new image.
ttbest
Jul-03-2008, 07:53 PM
Got the changed out gallery. Thank you very much. A couple replies ago you told me what to put in the description for the Contact page as well as the new CSS code. I did try these but the Contact page is still not linked.
Promise-this is the last question for the night. I can't believe how much work this is. I hope you're getting paid well because you should be!!
In this about gallery
http://agapephotos.smugmug.com/gallery/5314707_QWjb2
replace this line in the description
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
with this
<img src="/photos/324831636_jLdhv-L.jpg" />
That IS your new image.
Allen
Jul-03-2008, 07:56 PM
Got the changed out gallery. Thank you very much. A couple replies ago you told me what to put in the description for the Contact page as well as the new CSS code. I did try these but the Contact page is still not linked.
Promise-this is the last question for the night. I can't believe how much work this is. I hope you're getting paid well because you should be!!
See the red
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5314707_QWjb2">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5314518_zeJKg">Pricing</a></li>
<li><a href="/gallery/5317009_MCBVd">Contact</a></li>
</ul>
</div>
ttbest
Jul-03-2008, 08:07 PM
Thank you Allen,
I can't get my contact page out of journal style but I'm done for the night. Thank you for your help in getting my pages soo pretty!
See the red
<div id="my_header">
<div id="my_banner"> </div>
</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5314707_QWjb2">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5314518_zeJKg">Pricing</a></li>
<li><a href="/gallery/5317009_MCBVd">Contact</a></li>
</ul>
</div>
heathernesbitt
Jul-03-2008, 09:14 PM
I read the tutorial on how to make a nav bar, and I am confused by the red XXXXXX I am supposed to replace with the gallery address numbers. Are these galleries that we use as text pages to put service prices? do I need to make an empty gallery and then use that number? I didnt think it made sense to use the numbers for my photo galleries. I feel really stupid about this question but have been looking on here forever and seem to be stuck on this really little thing!
Please help!
Heather NEsbitt
heathernesbitt.smugmug.com:barb
Allen
Jul-03-2008, 09:50 PM
I read the tutorial on how to make a nav bar, and I am confused by the red XXXXXX I am supposed to replace with the gallery address numbers. Are these galleries that we use as text pages to put service prices? do I need to make an empty gallery and then use that number? I didnt think it made sense to use the numbers for my photo galleries. I feel really stupid about this question but have been looking on here forever and seem to be stuck on this really little thing!
Please help!
Heather NEsbitt
heathernesbitt.smugmug.com:barb
I'm assuming you're referring to the nav buttons like guestbook, about and
pricing. Each of those are pages created for conveying information. It's
what is referred to as an "html" page, not for photos like a regular gallery.
They are just galleries without photos. You can add text and such to the
gallery description, like your bio info or your general prices.
Then the nav would link to the gallery like this
<a href="http://nickname.smugmug.com/gallery/1234456_FgVh2">guestbook</a>
heathernesbitt
Jul-03-2008, 10:19 PM
[quote=Allen]I'm assuming you're referring to the nav buttons like guestbook, about and
Yes, this is what I am talking about! But how do I make an empty gallery to get the 123456 number?
heathernesbitt
Jul-03-2008, 10:25 PM
whoops, ok, got an empty gallery, lemme see if this works.
ttbest
Jul-04-2008, 04:43 AM
Allen,
Is there an easy way to explain what you told me to do? It worked, I'm just trying to understand the code so that in the future, if I have a page I have to swap out, I'll be able to do it without bothering you.
In this about gallery
http://agapephotos.smugmug.com/gallery/5314707_QWjb2
replace this line in the description
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
with this
<img src="/photos/324831636_jLdhv-L.jpg" />
That IS your new image.
ttbest
Jul-04-2008, 04:38 PM
Hey Allen,
I tried to clean up the galleries so I deleted the "Current" gallery. The "New" galley you helped me hook to the "About Me" tab in the nav bar. Once I deleted the old one (Called "Current") the About Me page now just goes to the smugmug homepage.
In this about gallery
http://agapephotos.smugmug.com/gallery/5314707_QWjb2
replace this line in the description
<img src="/photos/324438880_SYM7C-L.jpg.jpg">
with this
<img src="/photos/324831636_jLdhv-L.jpg" />
That IS your new image.
Allen
Jul-04-2008, 04:46 PM
Hey Allen,
I tried to clean up the galleries so I deleted the "Current" gallery. The "New" galley you helped me hook to the "About Me" tab in the nav bar. Once I deleted the old one (Called "Current") the About Me page now just goes to the smugmug homepage. I think your new about gallery is set to unlisted so no way to find it without a
direct link. Can you go to that gallery and copy the address and post here?
or just replace the red in this with the new number and key.
<li><a href="/gallery/5314707_QWjb2">About Me</a></li>
ttbest
Jul-04-2008, 05:02 PM
Ok-that did it but it's still on journal style. So now the "About Me" tab as well as the "Contact" tab on Navbar are both on journal style. We had this problem yesterday but I forgot how you fixed it.
I think your new about gallery is set to unlisted so no way to find it without a
direct link. Can you go to that gallery and copy the address and post here?
or just replace the red in this with the new number and key.
<li><a href="/gallery/5314707_QWjb2">About Me</a></li>
Allen
Jul-04-2008, 05:30 PM
Ok-that did it but it's still on journal style. So now the "About Me" tab as well as the "Contact" tab on Navbar are both on journal style. We had this problem yesterday but I forgot how you fixed it.
You keep changing galleries.:D Ok, this is your new about gallery fixes.
Change it to journal style under customize gallery.
Remove this CSS
/* about me gallery */
.gallery_5314707 .play_slideshow,
.gallery_5314707 #albumNav_top,
.gallery_5314707 #albumNav_bottom,
.gallery_5314707 .journal_entry, /* hides photos in gallery */
.gallery_5314707 #breadcrumb {display: none;}
.loggedIn .gallery_5313779 #breadcrumb {display: block;}
and replace with this
/* about me gallery */
.gallery_5319332 .play_slideshow,
.gallery_5319332 #albumNav_top,
.gallery_5319332 #albumNav_bottom,
.gallery_5319332 .journal_entry, /* hides photos in gallery */
.gallery_5319332 #breadcrumb {display: none;}
.loggedIn .gallery_5319332 #breadcrumb {display: block;}
Add this to the gallery description.
<html>
<center>
<img src="/photos/324831636_jLdhv-L-1.jpg">
</center>
<html>
ttbest
Jul-04-2008, 06:19 PM
I know Allen,
I'm sorry - I just changed once because I didn't catch a typo. Anyway, on my About Me gallery that worked.
Any thoughts on my Contact gallery for the Contact tab on my navbar. I added this gallery for this tab. We haven't worked on it yet. I will change it to journal style but I think I need the CSS code from you.
You keep changing galleries.:D Ok, this is your new about gallery fixes.
Change it to journal style under customize gallery.
Remove this CSS
/* about me gallery */
.gallery_5314707 .play_slideshow,
.gallery_5314707 #albumNav_top,
.gallery_5314707 #albumNav_bottom,
.gallery_5314707 .journal_entry, /* hides photos in gallery */
.gallery_5314707 #breadcrumb {display: none;}
.loggedIn .gallery_5313779 #breadcrumb {display: block;}
and replace with this
/* about me gallery */
.gallery_5319332 .play_slideshow,
.gallery_5319332 #albumNav_top,
.gallery_5319332 #albumNav_bottom,
.gallery_5319332 .journal_entry, /* hides photos in gallery */
.gallery_5319332 #breadcrumb {display: none;}
.loggedIn .gallery_5319332 #breadcrumb {display: block;}
Add this to the gallery description.
<html>
<center>
<img src="/photos/324831636_jLdhv-L-1.jpg">
</center>
<html>
mafotografix
Jul-04-2008, 06:21 PM
I really appreciate some help.
I tried following the first page of instructions from http://dgrin.com/showthread.php?t=42747&highlight=pull+menu
and I got about this far but I need some help.
My website is www.mafotografix.com
I've left my original nav bar there while trying to construct the new pull down one.
There are only 3 tabs and the first two are pull downs.
While I'll fuss with the looks and colors later, what I did was to cut and paste SteveM's codes and customize them but the major problems I having now are:
1. The menus are not behaving like Steve's http://www.downriverphotography.com/ ie they don't fly out to the right side and the text is not right aligned like his.
2. How do I center the whole nav menu?
3. The nav buttons get hidden behind the thumbnails and photos instead of hover over the background.
4. Three links don't work ie, 'Female Models, Male Models, and Animals' - Going to Control Panel/Homepage, the galleries are there and working. The gallery numbers match up.
http://www.mafotografix.com/gallery/5327572_XFDYC#272249557_XYdpk
http://www.mafotografix.com/gallery/5328484_nAbNg#325476414_rghpU
http://www.mafotografix.com/gallery/4970921_JZcdt#297626960_M7HJk
:scratch :cry
Could someone please help me? Thank you
This is my code:
<!-- UNDER CONSTRUCTION - CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div align="center">
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="http://www.mafotografix.com">Welcome»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://mafotografix.com/gallery/3678505">FAQ & Contact</a></li>
<li><a href="http://mafotografix.com/gallery/2610643" title="BIO & Guestbook">BIO & Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop">Galleries»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://mafotografix.com/gallery/2587535">Arch</a></li>
<li><a href="http://mafotografix.com/gallery/2624368">Food</a></li>
<li><a class="drop">People»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/5327572">Female Models</a></li>
<li><a href="http://www.mafotografix.com/gallery/5328484">Male Models</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop">Events»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/2624503">Weddings</a></li>
<li><a href="http://www.mafotografix.com/gallery/4240905">Fashion show</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop">Sports»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/3766352">Hidetada Yamagishi</a></li>
<li><a href="http://www.mafotografix.com/gallery/3783806">Silvio Samuel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop">Nature»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/2906862">Landscape</a></li>
<li><a href="http://www.mafotografix.com/gallery/4970921">Animals</a></li>
<li><a href="http://www.mafotografix.com/gallery/2583968">Flora & Fauna</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://mafotografix.com/gallery/2643534">Grafix</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="http://www.mafotografix.com/clients">Clients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
</ul>
</div>
</div>
<!-- End Navbar Code -->
CSS:
/* UNDER CONSTRUCTION - CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me 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 {
margin: auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:750px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}
/* 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:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:0;
width:100; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid 0;
border-width:1px 1px 0 0;
background:0;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:0;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:0;
}
.menu ul ul :hover > a.drop {
background:0;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:0;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:0;
}
.menu ul ul ul :hover > a {
background:0;
}
/* 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:31px;
left:0;
width:125px; /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}
/* position the third level flyout menu */
.menu ul ul ul{
left:125px;
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-125px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:0
color:#A0000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:125px;
w\idth:129px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#A00000;
background:0;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#A0000;
background:0;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
/* End Navbar Code */
Allen
Jul-04-2008, 07:05 PM
I know Allen,
I'm sorry - I just changed once because I didn't catch a typo. Anyway, on my About Me gallery that worked.
Any thoughts on my Contact gallery for the Contact tab on my navbar. I added this gallery for this tab. We haven't worked on it yet. I will change it to journal style but I think I need the CSS code from you.
Put this in the contact gallery description.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
Allen
Jul-04-2008, 07:28 PM
I really appreciate some help.
I tried following the first page of instructions from http://dgrin.com/showthread.php?t=42747&highlight=pull+menu
and I got about this far but I need some help.
My website is www.mafotografix.com (http://www.mafotografix.com)
I've left my original nav bar there while trying to construct the new pull down one.
There are only 3 tabs and the first two are pull downs.
While I'll fuss with the looks and colors later, what I did was to cut and paste SteveM's codes and customize them but the major problems I having now are:
1. The menus are not behaving like Steve's http://www.downriverphotography.com/ ie they don't fly out to the right side and the text is not right aligned like his.
2. How do I center the whole nav menu?
3. The nav buttons get hidden behind the thumbnails and photos instead of hover over the background.
4. Three links don't work ie, 'Female Models, Male Models, and Animals' - Going to Control Panel/Homepage, the galleries are there and working. The gallery numbers match up.
http://www.mafotografix.com/gallery/5327572_XFDYC#272249557_XYdpk
http://www.mafotografix.com/gallery/5328484_nAbNg#325476414_rghpU
http://www.mafotografix.com/gallery/4970921_JZcdt#297626960_M7HJk
:scratch :cry
Could someone please help me? Thank you
This is my code:
...
This should fix your html. Not familar with the CSS you are using.
I use this version (http://allen-steve.smugmug.com/gallery/2078255). btw, you have to have a href in every "a" link for IE to work. I added in href="#nopick" in the ones without.
<!-- UNDER CONSTRUCTION - CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="/">Welcome»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/3678505">FAQ & Contact</a></li>
<li><a href="/gallery/2610643" title="BIO & Guestbook">BIO & Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="#nopick">Galleries»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2587535">Arch</a></li>
<li><a href="/gallery/2624368">Food</a></li>
<li><a class="drop" href="#nopick">People»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/5327572">Female Models</a></li>
<li><a href="http://www.mafotografix.com/gallery/5328484">Male Models</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#nopick">Events»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/2624503">Weddings</a></li>
<li><a href="http://www.mafotografix.com/gallery/4240905">Fashion show</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#nopick">Sports»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/3766352">Hidetada Yamagishi</a></li>
<li><a href="http://www.mafotografix.com/gallery/3783806">Silvio Samuel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#nopick">Nature»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mafotografix.com/gallery/2906862">Landscape</a></li>
<li><a href="http://www.mafotografix.com/gallery/4970921">Animals</a></li>
<li><a href="http://www.mafotografix.com/gallery/2583968">Flora & Fauna</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/2643534">Grafix</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="http://www.mafotografix.com/clients">Clients</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
<!-- End Navbar Code -->
mafotografix
Jul-05-2008, 02:10 AM
Hi Allen,
Thanks so much for the CSS & HTML. I could customize it better. But some issues still persist:
1. The 3 links are still broken.
2. I can't seem to get the menu to move to the extreme right. I'm trying to align it to the same location where you see the 'Themes' button. I will be having a logo on the other left end.
3. The pull down buttons are still behind the photos.
Side note: The nav button alignments are slightly different when viewed with FireFox and Safari. I primarily work with Safari. If you notice the pull down button box under 'Welcome', the boxes are slightly smaller on the right side viewed with Safari. Very strange.
I'm hoping to get the new nav working this weekend.
Thank you again.
There's the CSS code (modified):
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 20px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 100; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: right; /* 0 auto to 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 0px 0 0px; */ /* 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: 1em; /* main buttons */
color: grey; /* main buttons text non-hover, main menu text not moused over*/
text-decoration:none;
text-align: right; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
border: 1px solid grey; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: 0; /* main button color, main backgrd when moused over*/
padding-left: 0px;
padding-right: 10px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: red; /* main when hover DD, main menu text*/
background: black; /* main when hover DD, main menu backgrd*/
}
.menu ul li:hover ul {
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 */
right: 10px;
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: black; /* DD FO non-hover, other backgrd that's not moused over*/
color: white; /* DD FO non-hover, other text that's not moused over*/
height: auto;
line-height: 20px; /* DD FO box height */
padding left: 0px;
padding right: 10px;
width: 100px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: black; /* DD FO hover when hover mouse over text in 2nd level*/
color: red; /* DD FO hover when hover mouse over text in 2nd level*/
}
.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: red; /* main hover, when mouse over main text menu*/
background: black; /* main hover, when mouse over main menu backgrd */
}
.menu ul li a:hover ul {
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 */
right: 10px;
}
.menu ul li a:hover ul li a {
display: block;
background: black; /* IE DD color non-hover */
color: grey; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding left: 0px;
padding right: 10px;
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: black; /* DD FO hover includes menu 6 */
color: red; /* DD FO hover includes menu 6 */
}
.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:450;
}
/* 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;
}
ttbest
Jul-05-2008, 04:49 AM
That's already in the edit description
Put this in the contact gallery description.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
Allen
Jul-05-2008, 06:49 AM
That's already in the edit description
I don't see nothing in the description of the contact gallery (http://agapephotos.smugmug.com/gallery/5317009_MCBVd)?:scratch
This whole thing in there?
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
ttbest
Jul-05-2008, 07:01 AM
Yes it is. I've checked twice and just re-pasted it in there. No change.
I don't see nothing in the description of the contact gallery (http://agapephotos.smugmug.com/gallery/5317009_MCBVd)?:scratch
This whole thing in there?
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
Allen
Jul-05-2008, 07:04 AM
Hi Allen,
Thanks so much for the CSS & HTML. I could customize it better. But some issues still persist:
1. The 3 links are still broken.
... You need the gallery secutity key for all new galleies. example below.
<li><a href="http://www.mafotografix.com/gallery/5327572_XFDYC">Female Models</a></li>
Also in menu CSS change all these
background: 0;
to this
background: #000;
Allen
Jul-05-2008, 08:38 AM
...2. I can't seem to get the menu to move to the extreme right. I'm trying to align it to the same location where you see the 'Themes' button. I will be having a logo on the other left end.
3. The pull down buttons are still behind the photos.
...
I removed the comments so you could see the changes easier.
.menu {
position: relative;
float: right;
display: block;
z-index: 99;
padding: 20px 0px 20px 0px;
height: 20px;
width: 400px;
}
This wiil put the banner to the left.
#my_banner {
float: left;
width: 458px;
height: 80px;
margin: 0 auto;
background: url(http://mafotografix.smugmug.com/photos/157689078-L.jpg) no-repeat;
}
/*
.homepage #my_banner {
display: block;
margin: 0 auto;
}*/
You have a bunch of dashes right above the menu css and it's b0rking the
css under it, remove them. The z-index is not working, why menu falls
behind photos.
---------------
mafotografix
Jul-06-2008, 04:49 AM
I removed the comments so you could see the changes easier.
.menu {
position: relative;
float: right;
display: block;
z-index: 99;
padding: 20px 0px 20px 0px;
height: 20px;
width: 400px;
}
This wiil put the banner to the left.
#my_banner {
float: left;
width: 458px;
height: 80px;
margin: 0 auto;
background: url(http://mafotografix.smugmug.com/photos/157689078-L.jpg) no-repeat;
}
/*
.homepage #my_banner {
display: block;
margin: 0 auto;
}*/
You have a bunch of dashes right above the menu css and it's b0rking the
css under it, remove them. The z-index is not working, why menu falls
behind photos.
---------------
Thanks Allen.
I managed to tweek as you advised and got the z-index to work :D :clap
Now I need to learn how to arrange the banner, nav menu, and foot note/counter position differently on different pages. I sort of gotten the banner to work in my pages.
Could you show me how to do the following:
1. 'Welcome' page - how to center the pull down nav and my banner is not showing for some reason.
2. 'FAQ, BIO and Client' pages - how to align the nav to the edge of the frame. The banner (ie 'MAFG' logo) is correctly aligned in these 3 pages ie aligned to the left frame edge.
3. For the gallery pages - how to align the nav to the edge of the enlarged photo.
4. For the gallery pages - how to align the banner to the edge of the first thumbnail?
5. For the 'Events' pages (weddings and fashion shows) how come the font size suddenly increase in size. In fact everything seems to be enlarged slightly for these two pages only.
6. For the FAG and BIO pages - how to make the font less bold looking; the fonts type in the CSS box is made to be bold. It is difficult to read at the moment. I want a crisp font similar to the pull down nav font.
7. How do I make the page nav (those page numbers right above the thumbnails) and the photo nav, align at the bottom of the photos and to the right?
8. Could you show me how to flip the thumbnails to the right and the enlarged photo on the left?
9. How to you reposition the counter and smugmug ad to the align the edge of the photo (right) or thumbnail (left)?
10. Lastly, how to you add background space to the top portion of the banner?
I'm slowly but surely getting there.
Thank you for your help! Don't know what I'd do without you :bow
www.mafotografix.com
Allen
Jul-06-2008, 07:27 AM
...
1. 'Welcome' page - how to center the pull down nav and my banner is not showing for some reason. Move it to the outside.
...
You have comments within comments, not good, some of the time, IE esp.
don't like it. Moving it outside and the banner pops right up.
/*#my_banner { /* previous banner */
width: 458px;
height: 80px;
margin: 0 auto;
background: url(http://mafotografix.smugmug.com/photos/157689078_TwsKy-L.jpg) no-repeat;
}*/
like this
/* previous banner */
/* #my_banner {
width: 458px;
height: 80px;
margin: 0 auto;
background: url(http://mafotografix.smugmug.com/photos/157689078_TwsKy-L.jpg) no-repeat;
} */ In your nav html remove the class on this with no drop.
<li><a class="drop" href="http://www.mafotografix.com/clients">Clients</a></li>
to this
<li><a href="http://www.mafotografix.com/clients">Clients</a></li>
You have a backward opening comment tag here. */ should be /*, though
it's not really needed because you don't have display none in your banner CSS.
*/.homepage #my_banner {
display: block;
margin: 0 auto;
}*/
You are missing the . in front of all these.
.gallery_3323034 #filmstrip {background-image: none;}
.gallery_3323034 #filmstrip {margin-top: -100px;}
.gallery_3323034 #albumNav_top {display: none;}
.gallery_3323034 #albumNav_bottom {display: none;}
You have float right in this, remove it and the nav will center, but you have
to minimize the width until it wraps to two lines for it to really center. (340px centers it)
/* Common Styling */
.menu {
...
width: 400px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
float: right;
...
}
Allen
Jul-06-2008, 07:34 AM
2. 'FAQ, BIO and Client' pages - how to align the nav to the edge of the frame. The banner (ie 'MAFG' logo) is correctly aligned in these 3 pages ie aligned to the left frame edge.
3. For the gallery pages - how to align the nav to the edge of the enlarged photo.
4. For the gallery pages - how to align the banner to the edge of the first thumbnail?
10. Lastly, how to you add background space to the top portion of the banner?
Add the bold in this order, general first then specific ones. Everything in the
general applies except for the changes. In this the relative is used.
.menu {
...
...
}
.category.category_Clients .menu,
.gallery_2610643 .menu,
.gallery_3678505 .menu {
left: 180px;
top: -40px;
}
.galleryPage .menu {
float: right;
right: 40px;
}
.galleryPage #my_banner {
margin: 10px 0 0 20px;
}
In this above, margin: 10px 0 0 20px;, it adds a top margin. Do it in the general #my_banner rule
and you'll have the space above the banner on all pages. Those are, top-right-bottom-left.
mafotografix
Jul-06-2008, 09:43 AM
Add the bold in this order, general first then specific ones. Everything in the
general applies except for the changes. In this the relative is used.
.menu {
...
...
}
.category.category_Clients .menu,
.gallery_2610643 .menu,
.gallery_3678505 .menu {
left: 180px;
top: -40px;
}
.galleryPage .menu {
float: right;
right: 40px;
}
.galleryPage #my_banner {
margin: 10px 0 0 20px;
}
In this above, margin: 10px 0 0 20px;, it adds a top margin. Do it in the general #my_banner rule
and you'll have the space above the banner on all pages. Those are, top-right-bottom-left.
Thank you, thank you Allen! :clap :bow :whew
The menu is still a little screwy on different pages but I'll try to mess around with the codes and see what works.
Purkhiser
Jul-06-2008, 04:01 PM
Hi!
I think this is where I'm suppose to ask navbar questions!:scratch
I'm having trouble changing one of my links to my navbar.
www.purkhiserphotography.com (http://www.purkhiserphotography.com)
I'm wanting to plug in the new number for my "prices" sheet when you click it on the navbar tab. I want it to pull up just like the current one, only with my new information. When I plug in the new number it boots you to the actual gallery with all the pages instead of pulling the page up.
The customization line currently looks like this:
<li><a href="/gallery/2688228/1/223994833/Original">Prices</a></li>
I want to plug in:
<li><a href="/gallery/2688228/1/326806481/Original">Prices</a></li>
but it looks totally different. Although, all I did was update my current sheet and upload it.
What am I doing wrong?
:dunno
Carrie
Allen
Jul-06-2008, 04:09 PM
Hi!
I think this is where I'm suppose to ask navbar questions!:scratch
I'm having trouble changing one of my links to my navbar.
www.purkhiserphotography.com (http://www.purkhiserphotography.com)
I'm wanting to plug in the new number for my "prices" sheet when you click it on the navbar tab. I want it to pull up just like the current one, only with my new information. When I plug in the new number it boots you to the actual gallery with all the pages instead of pulling the page up.
The customization line currently looks like this:
<li><a href="/gallery/2688228/1/223994833/Original">Prices</a></li>
I want to plug in:
<li><a href="/gallery/2688228/1/326806481/Original">Prices</a></li>
but it looks totally different. Although, all I did was update my current sheet and upload it.
What am I doing wrong?
:dunno
Carrie
Is this the new one?
http://www.purkhiserphotography.com/gallery/2688228_W65MX/1/326819981_U2Lu6/Original
Purkhiser
Jul-06-2008, 04:25 PM
Is this the new one?
http://www.purkhiserphotography.com/gallery/2688228_W65MX/1/326819981_U2Lu6/Original (http://www.purkhiserphotography.com/gallery/2688228_W65MX/1/326819981_U2Lu6/Original)
This is the new one:
http://purkhiserphotography.smugmug.com/gallery/2688228_W65MX#326806481_NGndN
Allen
Jul-06-2008, 04:42 PM
This is the new one:
/gallery/2688228_W65MX#326806481_NGndN (http://purkhiserphotography.smugmug.com/gallery/2688228_W65MX#326806481_NGndN)
[/quote]
Does this link in your nav work then?
/gallery/2688228_W65MX/1/326806481_NGndN/Original
Purkhiser
Jul-06-2008, 04:52 PM
[/url]
Does this link in your nav work then?
/gallery/2688228_W65MX/1/326806481_NGndN/Original[/quote]
Hey Thanks! It works!
Carrie
Allen
Jul-06-2008, 04:56 PM
Does this link in your nav work then?
/gallery/2688228_W65MX/1/326806481_NGndN/Original
Hey Thanks! It works!
Carrie[/quote]
Great :thumb I had to change to traditional style, click on photo to bring up
large, delete CSS with WebDev so the sizes would show below photo. Then
pick original to get that page.:D
Purkhiser
Jul-06-2008, 05:03 PM
:thumb
Thanks - I can plug stuff in but that's all. You guys are the masters at actually figuring this stuff out! I would have been here all :bash night trying to see what I was doing wrong.
Thanks a million!
Carrie:D
Unbrok3n
Jul-06-2008, 09:16 PM
I apologize in advance for this question as im sure its been asked too many times. Im trying to add a navbar so that I can put a slidewhow on my homepage and still have my site be easy to navigate. However, in the tutorial by Ivar (http://dgrin.smugmug.com/gallery/1932803) I get confused with the html part. It says to copy and paste (i can do that haha) but where you fill in the gallery ID im confused. Do you have to do that for every single gallery?? Also, the next step says to add whole links...do I add links or gallery ids? I know this is a really stupid question, but i am very very new to html. Thanks for any help.
Allen
Jul-06-2008, 10:18 PM
I apologize in advance for this question as im sure its been asked too many times. Im trying to add a navbar so that I can put a slidewhow on my homepage and still have my site be easy to navigate. However, in the tutorial by Ivar (http://dgrin.smugmug.com/gallery/1932803) I get confused with the html part. It says to copy and paste (i can do that haha) but where you fill in the gallery ID im confused. Do you have to do that for every single gallery?? Also, the next step says to add whole links...do I add links or gallery ids? I know this is a really stupid question, but i am very very new to html. Thanks for any help. Sorry about the confusion, it's not always obvious how this stuff happens
and we've all been there. I assume you been to this tutor (http://dgrin.smugmug.com/gallery/2160039) and found the link
to the navbar tutor.
In the first tutor it explains how to create a duplicate homepage called
galleries. The new galleries page and homepage will be identical with all the
same boxes. Some CSS will used to turn things on and off on each.
If you just have a slideshow on your homepage and toggle the
galleries/categories box off with CSS you'll need the link in your nav to get
to your galleries.
In the nav will be a link to the new galleries page which will show all your
public galleries/categories.
<li><a href="/galleries">Galleries</a></li>
And you can add links to special galleries like a guestbook.
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
XXXXXX_xxxxx is the gallery number and it's case sensitive key
Go ahead and paste what's shown for the navbar in your header. Also paste
in the CSS shown. All this can be edited later, won't hurt anything. You can
add the actual numbers later when you create them.
Holler back here if you have any questions or run into trouble.
Unbrok3n
Jul-07-2008, 09:20 AM
Thanks for the reply! Im really sorry, but I'm still really confused...i have looked at the tutorial you linked, but I dont see anything about creating a duplicate homepage...the first tutor is about creating a banner (which i did). What is the duplicate homepage for?
So if im adding a navbar accoring to the tutor, in the part where I put the gallery id in css (where it has the red x's) what gallery do I put there? And in the next step where links are being put in, what is that and what should i put there?
Once again, im really sorry for being so stupid. If you could really dumb things down, that would be awesome :)
Sorry about the confusion, it's not always obvious how this stuff happens
and we've all been there. I assume you been to this tutor (http://dgrin.smugmug.com/gallery/2160039) and found the link
to the navbar tutor.
In the first tutor it explains how to create a duplicate homepage called
galleries. The new galleries page and homepage will be identical with all the
same boxes. Some CSS will used to turn things on and off on each.
If you just have a slideshow on your homepage and toggle the
galleries/categories box off with CSS you'll need the link in your nav to get
to your galleries.
In the nav will be a link to the new galleries page which will show all your
public galleries/categories.
<li><a href="/galleries">Galleries</a></li>
And you can add links to special galleries like a guestbook.
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
XXXXXX_xxxxx is the gallery number and it's case sensitive key
Go ahead and paste what's shown for the navbar in your header. Also paste
in the CSS shown. All this can be edited later, won't hurt anything. You can
add the actual numbers later when you create them.
Holler back here if you have any questions or run into trouble.
Allen
Jul-07-2008, 09:46 AM
Thanks for the reply! Im really sorry, but I'm still really confused...i have looked at the tutorial you linked, but I dont see anything about creating a duplicate homepage...the first tutor is about creating a banner (which i did). What is the duplicate homepage for?
So if im adding a navbar accoring to the tutor, in the part where I put the gallery id in css (where it has the red x's) what gallery do I put there? And in the next step where links are being put in, what is that and what should i put there?
Once again, im really sorry for being so stupid. If you could really dumb things down, that would be awesome :) Scroll down to "The Galleries Page I-III" sections, this adds the galleries
page which is a duplicate homepage. The CSS in "The Galleries Page II" will
hide things on either the homepage or galleries page.
The nav is constructed with a bunch of links/buttons (<li>.....</li>). You
can add any link you like. These all go between the <ul> & </ul> tags. The
three in red can be used if you're going to create those galleries otherwise
just remove those lines.
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Information</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
... more links can be add here or inserted between any of the above.
</ul>
</div>
Go to any gallery and look at the url in the browser address/location bar.
As an example for your "The Sun" gallery this is the url with the gallery number in red.
http://provethesunshine.smugmug.com/gallery/5322542_2LhQg#325121300_JdDBd
A little clearer?
Unbrok3n
Jul-07-2008, 09:49 AM
Ya, that's a little clearer. So it doesnt matter what gallery I choose to put in, just as long as it is a gallery id? Thanks for all your help.
Scroll down to "The Galleries Page I-III" sections, this adds the galleries
page which is a duplicate homepage. The CSS in "The Galleries Page II" will
hide things on either the homepage or galleries page.
The nav is constructed with a bunch of links/buttons (<li>.....</li>). You
can add any link you like. These all go between the <ul> & </ul> tags. The
three in red can be used if you're going to create those galleries otherwise
just remove those lines.
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Information</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
... more links can be add here or inserted between any of the above.
</ul>
</div>
Go to any gallery and look at the url in the browser address/location bar.
As an example for your "The Sun" gallery this is the url with the gallery number in red.
http://provethesunshine.smugmug.com/gallery/5322542_2LhQg#325121300_JdDBd
A little clearer?
Unbrok3n
Jul-07-2008, 09:50 AM
and quickly, where are the <ul> & </ul> tags?
Ya, that's a little clearer. So it doesnt matter what gallery I choose to put in, just as long as it is a gallery id? Thanks for all your help.
Allen
Jul-07-2008, 10:03 AM
and quickly, where are the <ul> & </ul> tags?
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Information</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
... more links can be add here or inserted between any of the above.
</ul>
</div>
Ther are many links you can use.
Link to category page. Use %20 for any spaces in cat name
<li><a href="/Flowers">Flowers</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Still%20Life">Still Life</a></li>
Link to popular or keyword galleries
<li><a href="/keyword">Keywords</a></li>
<li><a href="/popular">Popular Photos</a></li>
outside like
<li><a href="http://myblog.com">My Blog</a></li>
ttbest
Jul-07-2008, 11:27 AM
Hi Allen,
The whole code for the contact page is in my description. I know you've said you do not see it but I've checked twice. Can you help?
Also, I've replaced my about me page (labeled New in my family gallery) with a new page called About Me Take 2 (in my family gallery). I replaced the numbers in my CSS code as you showed me how to do but I'm unsure about the description and where you get those numbers for the edit description box. Can you help?
Thanks,
Tanya Best
I don't see nothing in the description of the contact gallery (http://agapephotos.smugmug.com/gallery/5317009_MCBVd)?:scratch
This whole thing in there?
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
Allen
Jul-07-2008, 11:39 AM
Hi Allen,
The whole code for the contact page is in my description. I know you've said you do not see it but I've checked twice. Can you help?
Also, I've replaced my about me page (labeled New in my family gallery) with a new page called About Me Take 2 (in my family gallery). I replaced the numbers in my CSS code as you showed me how to do but I'm unsure about the description and where you get those numbers for the edit description box. Can you help?
Thanks,
Tanya Best
Are you missing the html tags in your contact gallery description?
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
You need to chnage the gallery number in your CSS
/* about me gallery */
.gallery_5352761 .play_slideshow,
.gallery_5352761 #albumNav_top,
.gallery_5352761 #albumNav_bottom,
.gallery_5352761 .journal_entry, /* hides photos in gallery */
.gallery_5352761 #breadcrumb {display: none;}
.loggedIn .gallery_5352761 #breadcrumb {display: block;}
to these
/* about me gallery */
.gallery_5319332 .play_slideshow,
.gallery_5319332 #albumNav_top,
.gallery_5319332 #albumNav_bottom,
.gallery_5319332 .journal_entry, /* hides photos in gallery */
.gallery_5319332 #breadcrumb {display: none;}
.loggedIn .gallery_5319332 #breadcrumb {display: block;}
ttbest
Jul-07-2008, 12:51 PM
Allen,
1) Yes I have the <html> at the beginning and end.
2)The code you told me to replace, put the old gallery back (marked old in the family gallery). I'm trying to get the AboutMetake2 gallery hooked to my About me tab in the navbar.
Are you missing the html tags in your contact gallery description?
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
<html>
You need to chnage the gallery number in your CSS
/* about me gallery */
.gallery_5352761 .play_slideshow,
.gallery_5352761 #albumNav_top,
.gallery_5352761 #albumNav_bottom,
.gallery_5352761 .journal_entry, /* hides photos in gallery */
.gallery_5352761 #breadcrumb {display: none;}
.loggedIn .gallery_5352761 #breadcrumb {display: block;}
to these
/* about me gallery */
.gallery_5319332 .play_slideshow,
.gallery_5319332 #albumNav_top,
.gallery_5319332 #albumNav_bottom,
.gallery_5319332 .journal_entry, /* hides photos in gallery */
.gallery_5319332 #breadcrumb {display: none;}
.loggedIn .gallery_5319332 #breadcrumb {display: block;}
Allen
Jul-07-2008, 01:15 PM
Allen,
1) Yes I have the <html> at the beginning and end.
2)The code you told me to replace, put the old gallery back (marked old in the family gallery). I'm trying to get the AboutMetake2 gallery hooked to my About me tab in the navbar.
My goof, sorry, the last html needs a / in your contact gallery.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
</html>
ttbest
Jul-07-2008, 04:59 PM
Allen,
I put this code in and there seems to be two pages on one page now.
My goof, sorry, the last html needs a / in your contact gallery.
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
</html>
Allen
Jul-07-2008, 05:14 PM
Allen,
I put this code in and there seems to be two pages on one page now.
Set the contact gallery to journal style under customize gallery and it'll fix it.
ttbest
Jul-07-2008, 05:29 PM
Allen,
Thanks that fixed it. By now, I should've known that journal style thing.
I pasted my previous question to you below- Again, just trying to swap out a gallery called "Old" with the gallery called "AboutMeTake2". :
2)The code you told me to replace, put the old gallery back (marked old in the family gallery). I'm trying to get the AboutMetake2 gallery hooked to my About me tab in the navbar.
Set the contact gallery to journal style under customize gallery and it'll fix it.
Allen
Jul-07-2008, 05:41 PM
Allen,
Thanks that fixed it. By now, I should've known that journal style thing.
I pasted my previous question to you below- Again, just trying to swap out a gallery called "Old" with the gallery called "AboutMeTake2". :
2)The code you told me to replace, put the old gallery back (marked old in the family gallery). I'm trying to get the AboutMetake2 gallery hooked to my About me tab in the navbar. In your header nav html change to the red.
<li><a href="/gallery/5319332_xyRvR">About Me</a></li>
In the "new about" gallery.
http://agapephotos.smugmug.com/gallery/5352761_EAh5U
Add this to the "new about" gallery description.
<html>
<center>
<img src="/photos/324831636_jLdhv-L.jpg" />
</center>
</html>
in your CSS change to the red.
/* about me gallery */
.gallery_5352761 .play_slideshow,
.gallery_5352761 #albumNav_top,
.gallery_5352761 #albumNav_bottom,
.gallery_5352761 .journal_entry, /* hides photos in gallery */
.gallery_5352761 #breadcrumb {display: none;}
.loggedIn .gallery_5352761 #breadcrumb {display: block;}
mafotografix
Jul-07-2008, 05:49 PM
Thank you, thank you Allen! :clap :bow :whew
The menu is still a little screwy on different pages but I'll try to mess around with the codes and see what works.
Hi Allen,
Sorry to be such a pain in the u know where, but I think I really messed it up.
I've been using Apple Safari to design. Today I viewed my website using IE6 and it is horrible! The pull down menu doesn't work in IE and the banner position is all wrong.
I think I need to start all over again. Safari and Firefox seem to be similar and I thought I was getting the hang of it (ie I got the Banner to sit nicely, I had only the menu placement to resolve).
How can we view it correctly in all three?
Could you help me start from the begining? What should I get rid off and what should stay?
This is what I envision, it is quite simple really:
1. Home/Welcome page - everything centered (banner design #1, menu, all footer notes)
2. All other pages - Banner Design #2 aligned with text or photo margin on the left. Menu and foot notes aligned with text of photo margin on the right.
They auto adjust as the page size changes.
I didn't think it would be that difficult. Sigh.
Allen
Jul-07-2008, 06:08 PM
Hi Allen,
Sorry to be such a pain in the u know where, but I think I really messed it up.
I've been using Apple Safari to design. Today I viewed my website using IE6 and it is horrible! The pull down menu doesn't work in IE and the banner position is all wrong.
I think I need to start all over again. Safari and Firefox seem to be similar and I thought I was getting the hang of it (ie I got the Banner to sit nicely, I had only the menu placement to resolve).
How can we view it correctly in all three?
Could you help me start from the begining? What should I get rid off and what should stay?
This is what I envision, it is quite simple really:
1. Home/Welcome page - everything centered (banner design #1, menu, all footer notes)
2. All other pages - Banner Design #2 aligned with text or photo margin on the left. Menu and foot notes aligned with text of photo margin on the right.
They auto adjust as the page size changes.
I didn't think it would be that difficult. Sigh.
The drops are working in IE6, just not positioned right. I'll see if I can fix it, be back.
Allen
Jul-07-2008, 06:50 PM
....
Onr thing throwing it off is the gif size in your banner div. You have it set
to 750x120, change it to 230, your actual banner size. Check height also.
Height and width should be same size as banner image size.
<div id="my_banner"><a href="http://mafotografix.smugmug.com"><img src="/img/spacer.gif" border="0" height="120" width="750"></a></div>
This is probably throwing the other browser off and pushing nav to the right.
Change that and will look again.
Unbrok3n
Jul-07-2008, 06:50 PM
One quick question, do I need to put actual links between the quotation marks in this? The part of the tutorial where it says that "you have to tell it!" is confusing. So I need to put the gallery ID and the link? sorry again.
Scroll down to "The Galleries Page I-III" sections, this adds the galleries
page which is a duplicate homepage. The CSS in "The Galleries Page II" will
hide things on either the homepage or galleries page.
The nav is constructed with a bunch of links/buttons (<li>.....</li>). You
can add any link you like. These all go between the <ul> & </ul> tags. The
three in red can be used if you're going to create those galleries otherwise
just remove those lines.
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Information</a></li>
<li><a href="/gallery/XXXXXX_xxxxx">Guestbook</a></li>
... more links can be add here or inserted between any of the above.
</ul>
</div>
Go to any gallery and look at the url in the browser address/location bar.
As an example for your "The Sun" gallery this is the url with the gallery number in red.
http://provethesunshine.smugmug.com/gallery/5322542_2LhQg#325121300_JdDBd
A little clearer?
Allen
Jul-07-2008, 06:51 PM
One quick question, do I need to put actual links between the quotation marks in this? The part of the tutorial where it says that "you have to tell it!" is confusing. So I need to put the gallery ID and the link? sorry again.
They can be edited or added later. No problem leaving in for now until you
have actual links to put in.
Unbrok3n
Jul-07-2008, 06:59 PM
OK. so I followed the 3 galleries tutorial, linked in my navbar to the new "galleries" page I made. And now my homepage has no galleries on it, and when I hit "galleries" in the navbar, it just stays on that page. Only my bio is there...off the top of your head would you know what I did wrong? I put the link "provethesunshine.smugmug.com/galleries in the gallleries part of the html.
All my galleries and stuff are still there in owner view (does that ever change?)
sorry :(
Unbrok3n
Jul-07-2008, 07:02 PM
scratch that. forgot a letter in the footer javascript
unfortunately, im sure ill have more questions soon. thanks for being so understanding with us stupid newbs :)
OK. so I followed the 3 galleries tutorial, linked in my navbar to the new "galleries" page I made. And now my homepage has no galleries on it, and when I hit "galleries" in the navbar, it just stays on that page. Only my bio is there...off the top of your head would you know what I did wrong? I put the link "provethesunshine.smugmug.com/galleries in the gallleries part of the html.
All my galleries and stuff are still there in owner view (does that ever change?)
sorry :(
Allen
Jul-07-2008, 07:05 PM
scratch that. forgot a letter in the footer javascript
unfortunately, im sure ill have more questions soon. thanks for being so understanding with us stupid newbs :)
Keep bringing them on.:D We've all been there and hopefully remember our
mistakes so we can help.
Unbrok3n
Jul-07-2008, 07:25 PM
OK, bad news, I already have a weird problem. Good news, I'm starting to slightly understand this stuff :)
So, I had my galleries link in the navbar working fine. So I just created a quick "about me" gallery, copy and pasted the link, and put it between the parentheses in the html. When I hit update, the about me works, but when I hit "galleries" in my navbar, it either just stays on the same page or goes to the smugmug homepage. If I delete the about me page, the galleries works again. Any ideas?
I deleted the "about me" link. So galleries work now.
ttbest
Jul-07-2008, 07:27 PM
Hi Allen,
So I need to change the numbers in the About gallery back to what I had them. It's nice to know I had something right.:clap Anyway, so I understand where those numbers came from. Can you just email me real quick and tell me where the 5319332_xyRvR
In your header nav html change to the red.
<li><a href="/gallery/5319332_xyRvR">About Me</a></li>
In the "new about" gallery.
http://agapephotos.smugmug.com/gallery/5352761_EAh5U
Add this to the "new about" gallery description.
<html>
<center>
<img src="/photos/324831636_jLdhv-L.jpg" />
</center>
</html>
in your CSS change to the red.
/* about me gallery */
.gallery_5352761 .play_slideshow,
.gallery_5352761 #albumNav_top,
.gallery_5352761 #albumNav_bottom,
.gallery_5352761 .journal_entry, /* hides photos in gallery */
.gallery_5352761 #breadcrumb {display: none;}
.loggedIn .gallery_5352761 #breadcrumb {display: block;}
Allen
Jul-07-2008, 07:29 PM
OK, bad news, I already have a weird problem. Good news, I'm starting to slightly understand this stuff :)
So, I had my galleries link in the navbar working fine. So I just created a quick "about me" gallery, copy and pasted the link, and put it between the parentheses in the html. When I hit update, the about me works, but when I hit "galleries" in my navbar, it either just stays on the same page or goes to the smugmug homepage. If I delete the about me page, the galleries works again. Any ideas?
Remove the extra /
<li><a href="/http://provethesunshine.smugmug.com/gallery/5356789_YBKfR">About Me</a></li>
Here's your nav with relative links. You can leave off the site part.
http://provethesunshine.smugmug.com
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5356789_YBKfR">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX">Drop a Line</a></li>
</ul>
</div>
ttbest
Jul-07-2008, 07:30 PM
Yes this is part 2 of my previous message. Trying to get slick and use a smiley guy and accidentally sent it.
Anyway, just wondering where the 5319332.... number came from and also the 324831636.... for the new gallery description? Where you came up with them so I can start to grasp this HTML CSS stuff.
In your header nav html change to the red.
<li><a href="/gallery/5319332_xyRvR">About Me</a></li>
In the "new about" gallery.
http://agapephotos.smugmug.com/gallery/5352761_EAh5U
Add this to the "new about" gallery description.
<html>
<center>
<img src="/photos/324831636_jLdhv-L.jpg" />
</center>
</html>
in your CSS change to the red.
/* about me gallery */
.gallery_5352761 .play_slideshow,
.gallery_5352761 #albumNav_top,
.gallery_5352761 #albumNav_bottom,
.gallery_5352761 .journal_entry, /* hides photos in gallery */
.gallery_5352761 #breadcrumb {display: none;}
.loggedIn .gallery_5352761 #breadcrumb {display: block;}
Unbrok3n
Jul-07-2008, 07:33 PM
thank you Allen!
Allen
Jul-07-2008, 07:35 PM
Yes this is part 2 of my previous message. Trying to get slick and use a smiley guy and accidentally sent it.
Anyway, just wondering where the 5319332.... number came from and also the 324831636.... for the new gallery description? Where you came up with them so I can start to grasp this HTML CSS stuff.
Look in the address/location of the browser for the url.
http://agapephotos.smugmug.com/gallery/5319332_xyRvR
Right click on the photo and see properties or if your share photo button was
visible you'd pick that to get the link.
http://agapephotos.smugmug.com/photos/324831636_jLdhv-L.jpg
ttbest
Jul-07-2008, 07:46 PM
Thanks for the info. Allen. I'm printing all of this out and who knows- someday maybe I'll be able to help someone too.
My about page is still screwed up slightly. Hopefully an easy fix. The correct image (simply labeled "2") is at the bottom of the screen and the old- incorrect one is at the top of the screen. I've deleted the old one from my gallery but for some reason it's stuck there. The new one, at the bottom, has my new email address- agapephotos@charter.net- just so you know what I'm talking about.
Look in the address/location of the browser for the url.
http://agapephotos.smugmug.com/gallery/5319332_xyRvR
Right click on the photo and see properties or if your share photo button was
visible you'd pick that to get the link.
http://agapephotos.smugmug.com/photos/324831636_jLdhv-L.jpg
Allen
Jul-07-2008, 08:14 PM
Thanks for the info. Allen. I'm printing all of this out and who knows- someday maybe I'll be able to help someone too.
My about page is still screwed up slightly. Hopefully an easy fix. The correct image (simply labeled "2") is at the bottom of the screen and the old- incorrect one is at the top of the screen. I've deleted the old one from my gallery but for some reason it's stuck there. The new one, at the bottom, has my new email address- agapephotos@charter.net- just so you know what I'm talking about.
In the description change this
<html>
<center>
<img src="/photos/324831636_jLdhv-L.jpg">
</center>
</html>
to this with the correct photo
<html>
<center>
<img src="/photos/327737961_axcCE-L.jpg">
</center>
</html>
Unbrok3n
Jul-07-2008, 08:36 PM
I did what you said and it was working fine, (both about me and galleries was working) but sometimes I can access the gallery page and sometimes I cant. I didnt change anything. Is that a normal glitch? or is there something I should do?
Remove the extra /
<li><a href="/http://provethesunshine.smugmug.com/gallery/5356789_YBKfR">About Me</a></li>
Here's your nav with relative links. You can leave off the site part.
http://provethesunshine.smugmug.com
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5356789_YBKfR">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX">Drop a Line</a></li>
</ul>
</div>
Unbrok3n
Jul-07-2008, 08:45 PM
OK, I figured out that what happens is when I go to visitor mode, if I am HOME i can go to galleries or about me fine. However, If I am in about me, then try to go to galleries, it wont let me (it goes to the smugmug homepage or something) any ideas?
Allen
Jul-07-2008, 08:48 PM
OK, I figured out that what happens is when I go to visitor mode, if I am HOME i can go to galleries or about me fine. However, If I am in about me, then try to go to galleries, it wont let me (it goes to the smugmug homepage or something) any ideas?
Fix this link in your nav
<li><a href="/galleries">Galleries</a></li>
mafotografix
Jul-08-2008, 01:10 AM
Onr thing throwing it off is the gif size in your banner div. You have it set
to 750x120, change it to 230, your actual banner size. Check height also.
Height and width should be same size as banner image size.
<div id="my_banner"><a href="http://mafotografix.smugmug.com"><img src="/img/spacer.gif" border="0" height="120" width="750"></a></div>
This is probably throwing the other browser off and pushing nav to the right.
Change that and will look again.
Hi Allen,
I changed it to the simpler one:
<div id="my_banner"></div>
Unfortunately, I still can't get the pull down menu to work in IE6. I tried several computers at different locations :(
BTW, is it possible add a screen to the menu's background; like the way smugmug's gallery thumbnail page selections are?
Thanks.
ttbest
Jul-08-2008, 04:54 AM
Allen,
Thank you for all your time. I'm very happy with how my homepage came together.
Look in the address/location of the browser for the url.
http://agapephotos.smugmug.com/gallery/5319332_xyRvR
Right click on the photo and see properties or if your share photo button was
visible you'd pick that to get the link.
http://agapephotos.smugmug.com/photos/324831636_jLdhv-L.jpg
Allen
Jul-08-2008, 06:17 AM
Hi Allen,
I changed it to the simpler one:
<div id="my_banner"></div>
Unfortunately, I still can't get the pull down menu to work in IE6. I tried several computers at different locations :(
BTW, is it possible add a screen to the menu's background; like the way smugmug's gallery thumbnail page selections are?
Thanks.
The drop is working in iE6 here but way to the right.
Move the left to about -150 or so to line up the drop fpr IE6.
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DropDown container up down */
background: black; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
right: 10px;
}
"add a screen to the menu's background" not sure what you mean by this.
Unbrok3n
Jul-08-2008, 06:50 AM
Sorry...but how do you mean? I replaced /galleries with the link to the galleries page I made. What else needs to be there?
And how do you know all this stuff?? Its crazy!! haha. thanks so much.
Fix this link in your nav
<li><a href="/galleries">Galleries</a></li>
mafotografix
Jul-08-2008, 09:49 AM
The drop is working in iE6 here but way to the right.
Move the left to about -150 or so to line up the drop fpr IE6.
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DropDown container up down */
background: black; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
right: 10px;
}
"add a screen to the menu's background" not sure what you mean by this.
Hi Allen,
Did you mean way to the 'left'? That's how I'm seeing the menu. It is way to the left for all pages except all gallery pages; which are just to the right of the banner. No menu or banner is on the right margin.
A 'screen' means it is not solid but translucent. For example to screen 20% means to let 20% of the background show through. The example is smugmug's own default gallery page pull down selection (above the thumbnails).
Let me try the code you gave me.
mafotografix
Jul-08-2008, 11:19 AM
Hi Allen,
Did you mean way to the 'left'? That's how I'm seeing the menu. It is way to the left for all pages except all gallery pages; which are just to the right of the banner. No menu or banner is on the right margin.
A 'screen' means it is not solid but translucent. For example to screen 20% means to let 20% of the background show through. The example is smugmug's own default gallery page pull down selection (above the thumbnails).
Let me try the code you gave me.
Update the code didn't work :( No change. So I hid it.
Here's what I've been seeing. These are the 3 typical page layouts. There are two types of banners. And they are in the correct location here. But the pull down menus are not working (IE) and are on the left not right (which they should be for 'galleries' and 'clients'). The menu for the opening page should be centered under the banner.
http://mafotografix.smugmug.com/photos/328120447_Quftj-L.jpg
http://mafotografix.smugmug.com/photos/328120471_RyukF-L.jpg
http://mafotografix.smugmug.com/photos/328120515_4gFur-L.jpg
Allen
Jul-08-2008, 11:31 AM
Hi Allen,
Did you mean way to the 'left'? That's how I'm seeing the menu. It is way to the left for all pages except all gallery pages; which are just to the right of the banner. No menu or banner is on the right margin.
A 'screen' means it is not solid but translucent. For example to screen 20% means to let 20% of the background show through. The example is smugmug's own default gallery page pull down selection (above the thumbnails).
Let me try the code you gave me.
Try opacity, 2nd line for IE
.... {
opacity: .7;
filter: alpha(opacity=70);
}
I'll look as soon as the movie I'm watching is over. :D
Allen
Jul-08-2008, 12:59 PM
..
Change your banner html in your header to this so IE can be worked on a fix.
The gif is too large. Can't troubleshoot IE without it changed. It creates a
big blank area to the right of the banner that IE is trying to avoid.
<div id="my_banner">
<a href="http://mafotografix.smugmug.com">
<img src="/img/spacer.gif" border="0" height="57" width="231" />
</a></div>
EDit: back with IE6 fixes, still need gif size fixed above. Copy your current CSS for backup first.
The IE drop & flyout in IE were just off the screen.
Here's the whole thing, changes thru-out. The menu and banner can be moved some after seeing
if this works everywhere.
body {
font-family: "Myriad Pro", arial, sans-serif !important;
}
#my_banner {
float: left;
width: 231px;
height: 57px;
margin: 20px 0 0 40px;
background: url(http://mafotografix.smugmug.com/photos/326283506_E8dEb-M.jpg) no-repeat;
}
.gallery_3678505 #my_banner,
.gallery_2610643 #my_banner,
.category_Clients #my_banner,
.category_Architecture #my_banner,
.category_Food #my_banner,
.category_People #my_banner,
.gallery_2624503 #my_banner,
.gallery_4240905 #my_banner,
.category_Sports #my_banner,
.category_Graphics #my_banner,
.category_Nature #my_banner {
background: url(http://mafotografix.smugmug.com/photos/326079108_xdRot-L.jpg) no-repeat;
}
#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: hidden;
}
#categoriesBox .boxTop {
display: none;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* removes the full-screen slideshow buttons */
.play_slideshow {
display: none;
}
#feeds {
display:none;
}
p.updated {
display: none;
}
a.title, .title, {
color: #A00000;
}
a:hover img.imgBorder,
.imgBorderOn {
border-color: #A00000;
}
/* Change default image border color */
.imgBorder {
border-color: #A00000;
}
/* kill page navigation */
.gallery_2610643 .pageNav {display: none;}
.gallery_3678505 .pageNav {display: none;}
.gallery_2609830 .pageNav {display: none;}
.homepage #galleryTitle {
display: none;
}
/* change the arrows for changing the filmstrip direction */
#filmstrip #leftMove {
/* IE PNG FIX */
filter: progidXImageTransform.Microsoft.AlphaImageLoader(e nabled=true, sizingMethod=scale src='/img/filmstrip_right_black.png');
}
/* BACKGROUND FOR NON-IE */
#filmstrip #leftMove[id] {
background: url(/img/filmstrip_right_black.png) no-repeat;
}
#filmstrip #rightMove {
/* IE PNG FIX */
filter: progidXImageTransform.Microsoft.AlphaImageLoader(e nabled=true, sizingMethod=scale src='/img/filmstrip_left_black.png');
}
/* BACKGROUND FOR NON-IE */
#filmstrip #rightMove[id] {
background: url(/img/filmstrip_left_black.png) no-repeat;
}
/* For Earth theme to show banner and nav */
#extraDiv1 {display: none;}
.gallery_3323034 #filmstrip {background-image: none;}
.gallery_3323034 #filmstrip {margin-top: -100px;}
.gallery_3323034 #albumNav_top {display: none;}
.gallery_3323034 #albumNav_bottom {display: none;}
#mystatcounter {
text-align: center;
margin: 0 auto;
}
/* Flash page */
body {
opacity: 1;
}
#bioBox .photo {
display: none;
}
#userBio {
text-align: center;
}
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
float: right;
right: 80px;
top: 0px;
display: block;
z-index: 99;
padding: 10px 0px 0px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 350px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
/* margin: 0 auto; */ /* 0 auto will center navbar width above */
}
.menu ul {
padding: 9px 0px 0px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
.menu ul li {
/* margin: 0 0px 0 0px; */ /* 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: 1em; /* main buttons */
color: grey; /* main buttons text non-hover, main menu text not moused over*/
text-decoration: none;
text-align: right; /* right align text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
border: 1px solid black; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: black; /* main button color, main backgrd when moused over*/
padding-left: 0px;
padding-right: 10px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: red; /* main when hover DD, main menu text*/
background: black; /* main when hover DD, main menu backgrd*/
}
.menu ul li:hover ul {
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 */
right: 10px;
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: black; /* DD FO non-hover, other backgrd that's not moused over*/
color: white; /* DD FO non-hover, other text that's not moused over*/
height: auto;
line-height: 20px; /* DD FO box height */
padding left: 0px;
padding right: 0px;
width: 100px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: black; /* DD FO hover when hover mouse over text in 2nd level*/
color: red; /* DD FO hover when hover mouse over text in 2nd level*/
}
.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: red; /* main hover, when mouse over main text menu*/
background: #000000; /* main hover, when mouse over main menu backgrd */
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: -120px; /* DD right left */
}
.menu ul li a:hover ul li a {
display: block;
background: black; /* IE DD color non-hover */
color: grey; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* 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: black; /* DD FO hover */
color: red; /* 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: 0px; /* 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: 105px;
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:450;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 105px; /* 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;
}
mafotografix
Jul-08-2008, 02:18 PM
Change your banner html in your header to this so IE can be worked on a fix.
The gif is too large. Can't troubleshoot IE without it changed. It creates a
big blank area to the right of the banner that IE is trying to avoid.
................................... [/code]
Thanks, I'll definately try it out :)
At work right now ... but I can't wait to get off work to get this try this out.
So what movie were you watching? I just saw Wall-E and it was great!!! Ironman next ... & then the Mummy! :)
Unbrok3n
Jul-08-2008, 02:26 PM
I've to change it in every way I can think of. However, if i try to navigate to my galleries page from anywhere in my navbar (about me, guestbook, etc) it just goes to the homepage. Please help :( thanks in advance!
Sorry...but how do you mean? I replaced /galleries with the link to the galleries page I made. What else needs to be there?
And how do you know all this stuff?? Its crazy!! haha. thanks so much.
Allen
Jul-08-2008, 02:33 PM
Thanks, I'll definately try it out :)
At work right now ... but I can't wait to get off work to get this try this out.
So what movie were you watching? I just saw Wall-E and it was great!!! Ironman next ... & then the Mummy! :)
Watchin' ole Bruce gettin' beat down to his last drop of blood and still coming
out on top.:rofl "Live Free or Die Hard"
About the menu and banner, I think one version will work very close on all
pages, at least that's where to start. Maybe take some slight tweaks. Took
awhile to get the drops and flyouts to behave in IE using CSSVista to tweak
like WebDev does for Firefox.
Allen
Jul-08-2008, 02:36 PM
I've to change it in every way I can think of. However, if i try to navigate to my galleries page from anywhere in my navbar (about me, guestbook, etc) it just goes to the homepage. Please help :( thanks in advance!
In your header nav html change this line
<li><a href="provethesunshine.smugmug.com/galleries">Galleries</a></li>
to this
<li><a href="http://provethesunshine.smugmug.com/galleries">Galleries</a></li>
or this using a relative link
<li><a href="/galleries">Galleries</a></li>
Allen
Jul-08-2008, 03:53 PM
Thanks, I'll definately try it out :)
At work right now ... but I can't wait to get off work to get this try this out.
So what movie were you watching? I just saw Wall-E and it was great!!! Ironman next ... & then the Mummy! :)
Ok, if you only paste it in it works in IE and also not leave the old in
there. You have two sets of CSS now.:D
Unbrok3n
Jul-08-2008, 05:46 PM
Thank you so much :)
In your header nav html change this line
<li><a href="provethesunshine.smugmug.com/galleries">Galleries</a></li>
to this
<li><a href="http://provethesunshine.smugmug.com/galleries">Galleries</a></li>
or this using a relative link
<li><a href="/galleries">Galleries</a></li>
slevin11
Jul-08-2008, 06:38 PM
I am trying to put a nav bar in one of my gallery pages. Can anyone point me in the direction of a good tutorial on how to do that or show me how its done?
-Mark
http://apointofviewimages.smugmug.com/
Allen
Jul-08-2008, 08:16 PM
I am trying to put a nav bar in one of my gallery pages. Can anyone point me in the direction of a good tutorial on how to do that or show me how its done?
-Mark
http://apointofviewimages.smugmug.com/
Assuming you want a different one in the gallery. Add the red to your
header and change the links in navcontainer2.
<div id="navcontainer" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
<div id="navcontainer2" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
Change this in your CSS
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
to this and the class menu will apply to both navs.
Change the xxxxxxx to the gallery number.
.gallery_xxxxxxx #navcontainer {display: none;}
.gallery_xxxxxxx #navcontainer2 {display: block;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}
slevin11
Jul-09-2008, 01:50 AM
Assuming you want a different one in the gallery. Add the red to your
header and change the links in navcontainer2.
<div id="navcontainer" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
<div id="navcontainer2" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
Change this in your CSS
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
to this and the class menu will apply to both navs.
Change the xxxxxxx to the gallery number.
.gallery_xxxxxxx #navcontainer {display: none;}
.gallery_xxxxxxx #navcontainer2 {display: block;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}
Ok, I tried applying that and I added the gallery information in the CSS as you said. This is the end result of all the code that . By the way this is the page that I want to make the changes to:
http://www.smugmug.com/gallery/5352130_wNiRU
CSS:
/*navbar*/
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
.gallery_ 5352130_wNiRU #navcontainer {display: none;}
.gallery_ 5352130_wNiRU #navcontainer2 {display: block;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* remove bio photo*/
#bioBox .photo {
display: none;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
Header:
<div align="center">
<h2>Point of View Images</h2>
</div>
<h2>Point of View Images</h2>
</div>
<div id="navcontainer" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</div>
</ul>
</div>
<div id="navcontainer2" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
<div id="navcontainer2" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/5352130_wNiRU">Your Investment</a></li>
</ul>
</div>
-Mark
http://apointofviewimages.smugmug.com/
Allen
Jul-09-2008, 06:52 AM
Ok, I tried applying that and I added the gallery information in the CSS as you said. This is the end result of all the code that . By the way this is the page that I want to make the changes to:
http://www.smugmug.com/gallery/5352130_wNiRU
...
You have hide ower checked on that gallery and your CSS and nav is not active. Uncheck it.
In CSS below,
Removed the #navcontainer CSS
Removed _wNiRU and space after the _
.gallery_ 5352130_wNiRU #nav... >> .gallery_5352130 #nav...
Added #navcontainer2, so it would not show on all pages
Here's your whole CSS.
#navcontainer2,
.gallery_5352130 #navcontainer {display: none;}
.gallery_5352130 #navcontainer2 {display: block;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* remove bio photo*/
#bioBox .photo {
display: none;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
#userBio {text-align: center !important;}
slevin11
Jul-09-2008, 07:04 AM
You have hide ower checked on that gallery and your CSS and nav is not active. Uncheck it.
In CSS below,
Removed the #navcontainer CSS
Removed _wNiRU and space after the _
.gallery_ 5352130_wNiRU #nav... >> .gallery_5352130 #nav...
Added #navcontainer2, so it would not show on all pages
Here's your whole CSS.
#navcontainer2,
.gallery_5352130 #navcontainer {display: none;}
.gallery_5352130 #navcontainer2 {display: block;}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #00000;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* remove bio photo*/
#bioBox .photo {
display: none;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
#userBio {text-align: center !important;}
Awesome, you have definitly made my day.:ivar :barb
mafotografix
Jul-09-2008, 10:43 AM
Try opacity, 2nd line for IE
.... {
opacity: .7;
filter: alpha(opacity=70);
}
I'll look as soon as the movie I'm watching is over. :D
Hi Allen,
Where do I put this code again? Not too sure where 2nd line is, :scratch
In the galleries, is it possible to flip the thumbnails from displaying on left to right?
I have a shoot this weekend so for now I just had the banner and menu centered so that it doesn't seem so 'under construction'.
Thanks again.
Mike
Allen
Jul-09-2008, 11:15 AM
Hi Allen,
Where do I put this code again? Not too sure where 2nd line is, :scratch
In the galleries, is it possible to flip the thumbnails from displaying on left to right?
I have a shoot this weekend so for now I just had the banner and menu centered so that it doesn't seem so 'under construction'.
Thanks again.
Mike
The opacity? Have to find your original question where you wanted it.
No can flip.
mafotografix
Jul-09-2008, 01:58 PM
Try opacity, 2nd line for IE
.... {
opacity: .7;
filter: alpha(opacity=70);
}
I'll look as soon as the movie I'm watching is over. :D
Hi Allen,
The original is here :barb
I had asked for help how to make the background of the pull down menu's less opaque.
Allen
Jul-09-2008, 02:07 PM
Hi Allen,
The original is here :barb
I had asked for help how to make the background of the pull down menu's less opaque.
Try adding the bold to these two.
.menu ul li:hover ul {
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 */
right: 10px;
width: 104px; /* unknown */
opacity: .7;
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: -120px; /* DD right left */
filter: alpha(opacity=70);
}
ttbest
Jul-09-2008, 06:01 PM
Hi Allen-
I swapped out my header and footer because I finally finalized my logo and artwork. I learned how to actually swap them but the sizing is not right.
The Navbar I also need to change to have a black background.
Could you help me?
Tanya
In the description change this
<html>
<center>
<img src="/photos/324831636_jLdhv-L.jpg">
</center>
</html>
to this with the correct photo
<html>
<center>
<img src="/photos/327737961_axcCE-L.jpg">
</center>
</html>
Allen
Jul-09-2008, 06:21 PM
Hi Allen-
I swapped out my header and footer because I finally finalized my logo and artwork. I learned how to actually swap them but the sizing is not right.
The Navbar I also need to change to have a black background.
Could you help me?
Tanya First put the same photo number in these.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 140px;
margin: 0 auto;
background: url(/photos/328977899_KTQSC-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
Change this
#navcontainer {
background: #F58DA2;
height: 20px;
}
to this
#navcontainer {
background: #000;
height: 20px;
}
ttbest
Jul-09-2008, 06:53 PM
Ok I did that- now what?
First put the same photo number in these.
#my_banner {display: none;
position: relative;
left: -210px;
width: 750px;
height: 140px;
margin: 0 auto;
background: url(/photos/328977899_KTQSC-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/318649302_XDc2B-O.png');
}
Change this
#navcontainer {
background: #F58DA2;
height: 20px;
}
to this
#navcontainer {
background: #000;
height: 20px;
}
Allen
Jul-09-2008, 07:01 PM
Ok I did that- now what?
I tried to find your new banner and footer image but couldn't tell which ones
in your site files gallery.
What is this left for? You want your banner on the far left or centered?
#my_banner {display: none;
position: relative;
left: -210px;
...
...
You want a black background for your header, nav and footer?
Change these if you do.
#my_header,
#myFooter {
background: #000;
}
#navcontainer {
background: #000;
height: 20px;
}
#navcontainer ul li a {
text-decoration: none;
font-size: 120%;
padding: .2em 1em;
color: #A89B91;
background-color: #000;
}
ttbest
Jul-09-2008, 07:23 PM
My header, footer and new pages are at agapephotos-photography.
Yes I do want my banner centered so what should I change this to:
#my_banner {display: none;
position: relative;
left: -210px
I then need to change out my pages - Contact, About me and tips. Is there an easy swap out way? I tried doing the About Me page and this is what I did-
DESCRIPTION:
<html>
<center>
<img src="/photos/328977148_5ENDn-L.jpg"/>
</center>
</html>
CSS:
/* about me gallery */
.gallery_5372339.play_slideshow,
.gallery_5372339 #albumNav_top,
.gallery_5372339 #albumNav_bottom,
.gallery_5372339.journal_entry, /* hides photos in gallery */
.gallery_5372339 #breadcrumb {display: none;}
.loggedIn.gallery_5372339 #breadcrumb {display: block;}
The old one is still hooked to the navbar though.
I tried to find your new banner and footer image but couldn't tell which ones
in your site files gallery.
What is this left for? You want your banner on the far left or centered?
#my_banner {display: none;
position: relative;
left: -210px;
...
...
You want a black background for your header, nav and footer?
Change these if you do.
#my_header,
#myFooter {
background: #000;
}
#navcontainer {
background: #000;
height: 20px;
}
#navcontainer ul li a {
text-decoration: none;
font-size: 120%;
padding: .2em 1em;
color: #A89B91;
background-color: #000;
}
Allen
Jul-09-2008, 07:41 PM
My header, footer and new pages are at agapephotos-photography.
Yes I do want my banner centered so what should I change this to:
#my_banner {display: none;
position: relative;
left: -210px
I then need to change out my pages - Contact, About me and tips. Is there an easy swap out way? I tried doing the About Me page and this is what I did-
DESCRIPTION:
<html>
<center>
<img src="/photos/328977148_5ENDn-L.jpg"/>
</center>
</html>
CSS:
/* about me gallery */
.gallery_5372339.play_slideshow,
.gallery_5372339 #albumNav_top,
.gallery_5372339 #albumNav_bottom,
.gallery_5372339.journal_entry, /* hides photos in gallery */
.gallery_5372339 #breadcrumb {display: none;}
.loggedIn.gallery_5372339 #breadcrumb {display: block;}
The old one is still hooked to the navbar though.
Remove the left: -210px, it's not need and your banner will center.
What do you mean "swap out"? You creating new galleries for the existing
ones? There is no need to change galleries, just edit the contents of the
current one and your nav would not change.
ttbest
Jul-10-2008, 03:56 AM
I know that's how you do it for CSS and HTML documents but mine are actually images that I created in PS so I can't do what you're recommending. So I actually re-created the pages and put them in the Photography gallery.
Remove the left: -210px, it's not need and your banner will center.
What do you mean "swap out"? You creating new galleries for the existing
ones? There is no need to change galleries, just edit the contents of the
current one and your nav would not change.
Allen
Jul-10-2008, 06:26 AM
I know that's how you do it for CSS and HTML documents but mine are actually images that I created in PS so I can't do what you're recommending. So I actually re-created the pages and put them in the Photography gallery.
Don't think you have the idea of what is really happening.:D Create one
gallery for each of those, upload the photo used in that gallery, to that
gallery. In each gallery description you'll link to the photo in that gallery. If
you want a different photo in the gallery upload to that gallery and in the
description change the photo link.
In other words use only those three galleries and they'll remain linked in your
navbar.
ttbest
Jul-10-2008, 06:41 AM
I tried that and posted what I did in post 2227 above. I must have something wrong though because it doesn't work. I posted the new ones the same way I posted the current ones. If you look in agapephotos-galleries-photography, you'll see the pages I'm talking about. The white background ones are currently hooked to navbar. I'm trying to swap out the black ones. I tried the About me gallery.
Don't think you have the idea of what is really happening.:D Create one
gallery for each of those, upload the photo used in that gallery, to that
gallery. In each gallery description you'll link to the photo in that gallery. If
you want a different photo in the gallery upload to that gallery and in the
description change the photo link.
In other words use only those three galleries and they'll remain linked in your
navbar.
Allen
Jul-10-2008, 08:44 AM
I know that's how you do it for CSS and HTML documents but mine are actually images that I created in PS so I can't do what you're recommending. So I actually re-created the pages and put them in the Photography gallery.
Don't think you have the idea of what is really happening.:D Create one
gallery for each of those, upload the photo used in that gallery, to that
gallery. In each gallery description you'll link to the photo in that gallery. If
you want a different photo in the gallery upload to that gallery and in the
description change the photo link.
In other words use only those three galleries and they'll remain linked in your
navbar.
ttbest
Jul-10-2008, 05:27 PM
Allen,
I thought that's what I did in post 2226 above. Can you tell me what I did wrong?
Don't think you have the idea of what is really happening.:D Create one
gallery for each of those, upload the photo used in that gallery, to that
gallery. In each gallery description you'll link to the photo in that gallery. If
you want a different photo in the gallery upload to that gallery and in the
description change the photo link.
In other words use only those three galleries and they'll remain linked in your
navbar.
Allen
Jul-10-2008, 06:43 PM
Allen,
I thought that's what I did in post 2226 above. Can you tell me what I did wrong?
I then need to change out my pages - Contact, About me and tips. Is there an easy swap out way?
The only things needed to be swapped out is the photo number in each gallery
description. You created a new gallery for the new photo. :D
This make any sense?
ppeter
Jul-10-2008, 06:54 PM
I would like to add drop down menu to my galleries heading in my nav bar. I've looked thru this thread but as I am a novice at this it gets a "little" too confusing. Can someone help or is their a tutorial somewhere I can follow ?
Thanks
Allen
Jul-10-2008, 07:03 PM
I would like to add drop down menu to my galleries heading in my nav bar. I've looked thru this thread but as I am a novice at this it gets a "little" too confusing. Can someone help or is their a tutorial somewhere I can follow ?
Thanks
Take a look here (http://allen-steve.smugmug.com/gallery/2327835) (simple example) then here (http://allen-steve.smugmug.com/gallery/2011077) (detailed) and here (http://allen-steve.smugmug.com/gallery/2078255) (CSS needed).
Put together a menu tree and I can quickly throw it together.
Something like this between the code tags, # sign in tool bar above reply box.
I pasted from notepad and used spaces for indents.
home
about
galleries
nature
animals
flowers
family
guestbook
ppeter
Jul-10-2008, 08:10 PM
Take a look here (http://allen-steve.smugmug.com/gallery/2327835) (simple example) then here (http://allen-steve.smugmug.com/gallery/2011077) (detailed) and here (http://allen-steve.smugmug.com/gallery/2078255) (CSS needed).
Put together a menu tree and I can quickly throw it together.
Something like this between the code tags, # sign in tool bar above reply box.
I pasted from notepad and used spaces for indents.
home
about
galleries
nature
animals
flowers
family
guestbook
Thanks Allen, I had a look at the links and I think I understand but then start to get lost . For example I did this but then dont know where to look for the other menu button links (see bold) So if could set this up for me that would be great. I also wnat to keep the sysle and color of my current nav bar .......
<div class="menu">
<ul>
<li><a href="<A href="http://ppeter.smugmug.com">Menu">http://ppeter.smugmug.com">Menu 1</a></li>
<li><a class="drop" href="link">Menu 2</a></li>
<li><a href="Link">Menu 3
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<A href="http://ppeter.smugmug.com/Events">Drop">http://ppeter.smugmug.com/Events">Drop 1</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Nature">Drop">http://ppeter.smugmug.com/Nature">Drop 2</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Pets">Drop">http://ppeter.smugmug.com/Pets">Drop 3</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Photography">Drop">http://ppeter.smugmug.com/Photography">Drop 3</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Places">Drop">http://ppeter.smugmug.com/Places">Drop 4</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Travel">Drop">http://ppeter.smugmug.com/Travel">Drop 5</a></li>
<li><a href="<A href="http://ppeter.smugmug.com/Family">Drop">http://ppeter.smugmug.com/Family">Drop 6</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="Guest book">Menu 4</a></li>
<li><a href="Contact me ">Menu 5</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Allen
Jul-10-2008, 08:23 PM
Thanks Allen, I had a look at the links and I think I understand but then start to get lost . For example I did this but then dont know where to look for the other menu button links (see bold) So if could set this up for me that would be great. I also wnat to keep the sysle and color of my current nav bar .......
... Try this. Also switched to relative links. You can leave off the
http://ppeter.smugmug.com part, much easier to read, shorter.
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_xxxxx">About Me</a></li>
<li><a class="drop" href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Events">Events</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Pets">Pets</a></li>
<li><a href="/Photography">Photography</a></li>
<li><a href="/Places">Places</a></li>
<li><a href="/Travel">Travel</a></li>
<li><a href="/Family">Family</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/5297221_d4PJ6">Guest book</a></li>
<li><a href="javascript:norobotmail('ppeter', 'adam.com.au')">Contact me</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
I edit it in notepad and use spaces for the indents and copy out of there to the header.
If you use a word processor you get that crazy code like in your post. Also paste it
in here between the code tags to preserve the indents/spaces. See # in toolbar of
reply box. It adds these tags to paste between
ppeter
Jul-10-2008, 08:34 PM
Try this. Also switched to relative links. You can leave off the
http://ppeter.smugmug.com part, much easier to read, shorter.
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_xxxxx">About Me</a></li>
<li><a class="drop" href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Events">Events</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Pets">Pets</a></li>
<li><a href="/Photography">Photography</a></li>
<li><a href="/Places">Places</a></li>
<li><a href="/Travel">Travel</a></li>
<li><a href="/Family">Family</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/5297221_d4PJ6">Guest book</a></li>
<li><a href="javascript:norobotmail('ppeter', 'adam.com.au')">Contact me</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
I edit it in notepad and use spaces for the indents and copy out of there to the header.
If you use a word processor you get that crazy code like in your post. Also paste it
in here between the code tags to preserve the indents/spaces. See # in toolbar of
reply box. It adds these tags to paste between
Do I replace my current code with the above in my Header tag ?
What do I need to do in my css page ?
Allen
Jul-10-2008, 08:54 PM
Do I replace my current code with the above in my Header tag ?
What do I need to do in my css page ?
Your navbar html really should be in your header next to your banner and not
head tag box. You can leave to old one there for now and put the new one in
your header. While working on it you can add this to your CSS to hide the
new one till it's working good.
.menu {display: none;}
You can paste the CSS as is from that page then go down thru it and adjust
colors, backgrounds, widths, etc. Most of the lines are labeled what they do.
ttbest
Jul-11-2008, 12:18 PM
I can't believe that I can't get this....I was an engineer for 8 years and can't quite grasp this stuff!!!!!
Was I supposed to put the new contact page etc. in the same gallery as the old one?
I am obviously completely screwed up because when I look at my new about me page (the one that I told you I attempted to make work on my own) , you said the only thing I needed to do was make sure the right description is there. I clicked on properties of the image and put that number in the description for that page. :scratch
The only things needed to be swapped out is the photo number in each gallery
description. You created a new gallery for the new photo. :D
This make any sense?
Allen
Jul-11-2008, 03:55 PM
I can't believe that I can't get this....I was an engineer for 8 years and can't quite grasp this stuff!!!!!
Was I supposed to put the new contact page etc. in the same gallery as the old one?
I am obviously completely screwed up because when I look at my new about me page (the one that I told you I attempted to make work on my own) , you said the only thing I needed to do was make sure the right description is there. I clicked on properties of the image and put that number in the description for that page. :scratch Here's a summary of all three galleries. Keep these same galleries so your
navbar links don't change and use the photo you want in each. The only
thing below that gets changed if you're replacing the photo is the red photo
number.
About gallery http://agapephotos.smugmug.com/gallery/5357014_Bhevv
Under customize gallery set a larger size, set way too small now.
<html>
<center>
<img src="/photos/328977148_5ENDn-S.png-L.jpg">
</center>
</html>
CSS (you're missing the space between the red.) Fix the red. Also add the bold line.
/* about me gallery */
.gallery_5357014.play_slideshow,
.gallery_5357014 #albumNav_top,
.gallery_5357014 #albumNav_bottom,
.gallery_5357014 .journal_entry, /* hides photos in gallery */
.gallery_5357014 #breadcrumb {display: none;}
.loggedIn .gallery_5357014 .journal_entry, /* shows photos logged in */
.loggedIn.gallery_5357014 #breadcrumb {display: block;}
Pricing gallery http://agapephotos.smugmug.com/gallery/5314518_zeJKg
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
</html>
CSS, fix the red. Also add the bold line.
/* prices gallery */
.gallery_5314518 .play_slideshow,
.gallery_5314518 #albumNav_top,
.gallery_5314518 #albumNav_bottom,
.gallery_5314518 .journal_entry, /* hides photos in gallery */
.gallery_5314518 #breadcrumb {display: none;}
.loggedIn .gallery_5314518 .journal_entry, /* shows photos logged in */
.loggedIn .gallery_5314518 #breadcrumb {display: block;}
Pricing gallery http://agapephotos.smugmug.com/gallery/5317009_MCBVd
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
</html>
CSS good. Also add the bold line.
/* contact gallery */
.gallery_5317009 .play_slideshow,
.gallery_5317009 #albumNav_top,
.gallery_5317009 #albumNav_bottom,
.gallery_5317009 .journal_entry, /* hides photos in gallery */
.gallery_5317009 #breadcrumb {display: none;}
.loggedIn .gallery_5317009 .journal_entry, /* shows photos logged in */
.loggedIn .gallery_5317009 #breadcrumb {display: block;}
ttbest
Jul-11-2008, 07:12 PM
Thank you Allen-
I think I finally have the right galleries hooked to the navbar. They are all really small though. Can you take a look at my About Me, Contact, Pricing tabs on my navbar? How do I get them bigger and fit the page? I'm sure the pricing page will take up more than a screen so you'll have to scroll to see the rest but the Contact and About Me pages should fill a page I think.
Thank you for all your time. I'm sorry this is drawn out. I'm glad I've got my pages where I want them!:clap :clap
Here's a summary of all three galleries. Keep these same galleries so your
navbar links don't change and use the photo you want in each. The only
thing below that gets changed if you're replacing the photo is the red photo
number.
About gallery http://agapephotos.smugmug.com/gallery/5357014_Bhevv
Under customize gallery set a larger size, set way too small now.
<html>
<center>
<img src="/photos/328977148_5ENDn-S.png-L.jpg">
</center>
</html>
CSS (you're missing the space between the red.) Fix the red. Also add the bold line.
/* about me gallery */
.gallery_5357014.play_slideshow,
.gallery_5357014 #albumNav_top,
.gallery_5357014 #albumNav_bottom,
.gallery_5357014 .journal_entry, /* hides photos in gallery */
.gallery_5357014 #breadcrumb {display: none;}
.loggedIn .gallery_5357014 .journal_entry, /* shows photos logged in */
.loggedIn.gallery_5357014 #breadcrumb {display: block;}
Pricing gallery http://agapephotos.smugmug.com/gallery/5314518_zeJKg
<html>
<center>
<img src="/photos/324422585_QWKJ7-X3.jpg">
</center>
</html>
CSS, fix the red. Also add the bold line.
/* prices gallery */
.gallery_5314518 .play_slideshow,
.gallery_5314518 #albumNav_top,
.gallery_5314518 #albumNav_bottom,
.gallery_5314518 .journal_entry, /* hides photos in gallery */
.gallery_5314518 #breadcrumb {display: none;}
.loggedIn .gallery_5314518 .journal_entry, /* shows photos logged in */
.loggedIn .gallery_5314518 #breadcrumb {display: block;}
Pricing gallery http://agapephotos.smugmug.com/gallery/5317009_MCBVd
<html>
<center>
<img src="/photos/324661228_cuHjZ-X3-1.jpg">
</center>
</html>
CSS good. Also add the bold line.
/* contact gallery */
.gallery_5317009 .play_slideshow,
.gallery_5317009 #albumNav_top,
.gallery_5317009 #albumNav_bottom,
.gallery_5317009 .journal_entry, /* hides photos in gallery */
.gallery_5317009 #breadcrumb {display: none;}
.loggedIn .gallery_5317009 .journal_entry, /* shows photos logged in */
.loggedIn .gallery_5317009 #breadcrumb {display: block;}
Allen
Jul-11-2008, 07:32 PM
Thank you Allen-
I think I finally have the right galleries hooked to the navbar. They are all really small though. Can you take a look at my About Me, Contact, Pricing tabs on my navbar? How do I get them bigger and fit the page? I'm sure the pricing page will take up more than a screen so you'll have to scroll to see the rest but the Contact and About Me pages should fill a page I think.
Thank you for all your time. I'm sorry this is drawn out. I'm glad I've got my pages where I want them!:clap :clap
Under customize gallery for each of those galleries check original.
Largest size: ? Medium Large XLarge X2Large X3Large Original
ttbest
Jul-12-2008, 04:16 AM
Allen-
I did that in each of the galleries and nothing!:scratch
Under customize gallery for each of those galleries check original.
Largest size: ? Medium Large XLarge X2Large X3Large Original
Allen
Jul-12-2008, 07:39 AM
Allen-
I did that in each of the galleries and nothing!:scratch
You now need to change the display size in each gallery description.
about
<img src="/photos/328977148_5ENDn-S.png-L.jpg">
to this
<img src="/photos/328977148_5ENDn-L.png">
pricing
<img src="/photos/328976955_n88wZ-M.png">
to this
<img src="/photos/328976955_n88wZ-XL.png">
contact
<img src="/photos/328977476_Hy5af-S-1.png">
to this
<img src="/photos/328977476_Hy5af-M.png">
adamolszanski
Jul-12-2008, 09:29 AM
I have a problem with my navbar, more precisely the width of the navbar is changing according to the page such as: homepage, galleries, about me etc. I guess that the cause of the problem is that I use different themes .... consequently, different theme for homepage, different theme for "galleries" and so. Is there any way to make something with my navbar so it is not changing its size? One more thing: how can I add some additional stuff between particular parts of my navbar, squares, stars, points etc?
THANKS !
Allen
Jul-12-2008, 10:10 AM
I have a problem with my navbar, more precisely the width of the navbar is changing according to the page such as: homepage, galleries, about me etc. I guess that the cause of the problem is that I use different themes .... consequently, different theme for homepage, different theme for "galleries" and so. Is there any way to make something with my navbar so it is not changing its size? One more thing: how can I add some additional stuff between particular parts of my navbar, squares, stars, points etc?
THANKS !
Got a link to your site? Would be easier if these could be seen.
adamolszanski
Jul-12-2008, 10:29 AM
Got a link to your site? Would be easier if these could be seen.
aaahhh Im sorry :) I forgot to add the link.
Here it is: http://artderien.smugmug.com/
Allen
Jul-12-2008, 10:54 AM
I have a problem with my navbar, more precisely the width of the navbar is changing according to the page such as: homepage, galleries, about me etc. I guess that the cause of the problem is that I use different themes .... consequently, different theme for homepage, different theme for "galleries" and so. Is there any way to make something with my navbar so it is not changing its size? One more thing: how can I add some additional stuff between particular parts of my navbar, squares, stars, points etc?
http://artderien.smugmug.com/
THANKS !
Remove this from your CSS or add comment tags around it.
/* If you want to have the galleries show up on your homepage when you
are logged in, you can add the following below this code: */
You can add a | between each button.
<li><a href="/">Home</a></li>|
<li><a href="/gallery/5386160_hAPfB">About Me</a></li>|
<li><a href="/galleries">Galleries</a></li>|
<li><a href="http://www.ibiblio.org/wm/paint/auth/klimt/">Gustav Klimt</a></li>|
Add in the bold and the font will stay the same on all pages as your homepage.
#navcontainer ul li a {
text-decoration: none;
padding: .1em 3em;
color: #fff;
background-color: #000000;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
font-size: 12px;
}
adamolszanski
Jul-12-2008, 12:52 PM
Remove this from your CSS or add comment tags around it.
/* If you want to have the galleries show up on your homepage when you
are logged in, you can add the following below this code: */
You can add a | between each button.
<li><a href="/">Home</a></li>|
<li><a href="/gallery/5386160_hAPfB">About Me</a></li>|
<li><a href="/galleries">Galleries</a></li>|
<li><a href="http://www.ibiblio.org/wm/paint/auth/klimt/">Gustav Klimt</a></li>|
Add in the bold and the font will stay the same on all pages as your homepage.
#navcontainer ul li a {
text-decoration: none;
padding: .1em 3em;
color: #fff;
background-color: #000000;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
font-size: 12px;
}
Thanks Allen !!!! Now it works perfectly :)
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.