nav bar help

scar488 · August 16, 2007

ahhhh...i workd on this all night and couldnt figure it out...can you point me in the right direction....i started over like 5 times and couldnt get it...and switchd back to the old look until i figured it out....thanks for help

Allen · August 16, 2007

scar488 wrote:

ahhhh...i workd on this all night and couldnt figure it out...can you point me in the right direction....i started over like 5 times and couldnt get it...and switchd back to the old look until i figured it out....thanks for help

Have a link to your site? Be much easier to help.

Edit: SMS-racing? right?

I don't see a navbar, you remove it? Put what you think in and
we can troubleshoot.

scar488 · August 16, 2007

yah sms-racing.com

yah i removed it cause i cudnt get it to work...let me try again and ill let u no when im rdy

scar488 · August 16, 2007

k i put in the css codes and header code....for the nav bar

Allen · August 16, 2007

scar488 wrote:

k i put in the css codes and header code....for the nav bar

What happened to all the red and your banner?

scar488 · August 16, 2007

oops...i accidentaly pasted over em..give me one sec....ill get em bak

scar488 · August 16, 2007

there back..hahah....

scar488 · August 16, 2007

well not completly bak..arrrrrrrrr...ahha..one sec

scar488 · August 16, 2007

well something is not right...might something in my header but im not sure...i keep gettin the code on my homepage...i think i left something out

Allen · August 16, 2007

scar488 wrote:

well not completly bak..arrrrrrrrr...ahha..one sec

Your CSS

#my_banner {
  width: 535px;
  height: 55px;
  margin: 0 auto;
  margin-bottom: 10px;
  background: url(http://scarmack.smugmug.com/photos/182273305-O.png) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://scarmack.smugmug.com/photos/182273305-O.png'); 
}
a:hover img.imgBorder,
.imgBorderOn {
border-color: #0000CD;
} 
#feeds { 
display:none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer { 
display: none; 
}
/* hides the word home */
#userHome {
display: none;
}
/* remove the 's */
.possess {
display: none;
}
#feeds { 
display:none; 
}
/* Change default image border color */

.imgBorder {
    border-color: #EE0000; 
}
/* Change color of links */

a:active,
a:link,
a:visited {
color:#EE0000;
}

a:hover {
color:#0000CD;
}

.box {
background-color: #EE0000;
}

#popularPhotos.box,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}
.title, a.title,
#albumTitle,
#userBio,
.homepage .boxTop .title,
.miniBox .albumTitle a.nav,
.boxBottom p.updated,
.boxBottom p.description 
{color: red !important;}
#smugmug.smugmug,
#smugmug_small.smugmug_small,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}

.nav,
#footer span,
#footer .nav,
#albumDescription,
.title, a.title,
#albumTitle,
#userBio,
.homepage .boxTop .title,
.miniBox .albumTitle a.nav,
.boxBottom p.updated,
.boxBottom p.description 
{color: red !important;}

Your header stuff

    <div id="my_banner">
<a href="http://sms-racing.com/">
<img src="/img/spacer.gif" alt="sms-racing" border="0" height="55" width="750">
</a></div>

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">Info</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="http://nickname.smugmug.com">New</a></li>
<li><a href="http://nickname.smugmug.com">Top photos</a></li>
</ul>
</div>

You had half of your CSS in your header.

scar488 · August 16, 2007

wooooo..miracle worker...got it back..

Allen · August 16, 2007

scar488 wrote:

wooooo..miracle worker...got it back..

Rats, I didn't include the nav CSS. Hang on.

Edit:

#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 1.4em;
    color: red;
    background-color: #000;
    border: 4px double red;
}
#navcontainer ul li a:hover {
    color: #f70;
    background-color: #000;
    border: 4px double #f70;
}

scar488 · August 16, 2007

ight got that...now how do i link em to the correct places

Allen · August 16, 2007

scar488 wrote:

ight got that...now how do i link em to the correct places

What happen to all the stuff on your homepage? Are they in your control panel?

You have links to them?

You want these filled in? Is Top Photos the popular ones? added that below.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">Info</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/xxxxxxxx">New</a></li>
<li><a href="/popular">Top photos</a></li>
</ul>
</div>

scar488 · August 16, 2007

Allen wrote:

What happen to all the stuff on your homepage? Are they in your control panel?

You have links to them?

You want these filled in? Is Top Photos the popular ones? added that below.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">Info</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/xxxxxxxx">New</a></li>
<li><a href="/popular">Top photos</a></li>
</ul>
</div>

yes their in my control...i want my homepage to look as neat as i can..

no i do not have links to em...how do i get them?

yes top photos is popular

Allen · August 16, 2007

scar488 wrote:

yes their in my control...i want my homepage to look as neat as i can..

no i do not have links to em...how do i get them?

yes top photos is popular

Are you going to link to all your categories and pages with the navbar? I
would turn all that stuff on and just hide with CSS, at least for now so we can
find links and things.

scar488 · August 16, 2007

k...ur the boss..haha..just tell me wat to do,,,

Allen · August 16, 2007

scar488 wrote:

k...ur the boss..haha..just tell me wat to do,,,

Depends on how you want to get to different things. Like a link to each
category, sub-category, info, guestbook type galleries, etc.

Like this takes you to your family cat.
http://sms-racing.com/Family

BTW, add the bold for it's border.

#category.category,
#popularPhotos.box,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}
.title, a.title,
#albumTitle,
#userBio,
.homepage .boxTop .title,
.miniBox .albumTitle a.nav,
.boxBottom p.updated,
.boxBottom p.description
{color: red !important;}
#smugmug.smugmug,
#smugmug_small.smugmug_small,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}

Add the margin-bottom to create a gap also.

#navcontainer ul {
margin: 0;
margin-bottom: 20px;
padding: 0;
list-style-type: none;
text-align: center;
}

scar488 · August 16, 2007

Allen wrote:

Depends on how you want to get to different things. Like a link to each
category, sub-category, info, guestbook type galleries, etc.

Like this takes you to your family cat.
http://sms-racing.com/Family

BTW, add the bold for it's border.

#category.category,
#popularPhotos.box,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}
.title, a.title,
#albumTitle,
#userBio,
.homepage .boxTop .title,
.miniBox .albumTitle a.nav,
.boxBottom p.updated,
.boxBottom p.description
{color: red !important;}
#smugmug.smugmug,
#smugmug_small.smugmug_small,
#bioBox,
#featuredBox,
#categoriesBox
{border-color: red;}

Add the margin-bottom to create a gap also.

#navcontainer ul {
margin: 0;
margin-bottom: 20px;
padding: 0;
list-style-type: none;
text-align: center;
}

ight let me try this real quick and see if i can do it..lol..one sec

Allen · August 16, 2007

I'm guessin' you'll want a slideshow on your homepage and
everything else hidden.
the show will use your biobox so lets create a gallery for your bio stuff.
Create a new gallery under the other category and add some
text to it's description. I'll use your current bio stuff and put it in
the gallery description and the gallery will be the "info" link in your
navbar. Got it?

scar488 · August 16, 2007

i got the rider to work...bc that i can link to but for the NEW and TOP PHOTOS and GALLERY its diff bc their not just one gallery...their a group...how would i go about that

Allen · August 16, 2007

You added this new to the bottom of your CSS. There's existing one
up farther that just needs to be edited to add the bold.

#navcontainer ul {
margin: 0;
margin-bottom: 20px;
padding: 0;
list-style-type: none;
text-align: center;
}

scar488 · August 16, 2007

Allen wrote:

I'm guessin' you'll want a slideshow on your homepage and
everything else hidden.
the show will use your biobox so lets create a gallery for your bio stuff.
Create a new gallery under the other category and add some
text to it's description. I'll use your current bio stuff and put it in
the gallery description and the gallery will be the "info" link in your
navbar. Got it?

yup

Allen · August 16, 2007

Add this to your CSS, gets the border on pages like Riders

#galleriesBox .boxBottom {
border: 4px double red;}

scar488 · August 16, 2007

k added

Allen · August 16, 2007

Here's your info gallery with the stuff from your bio.
http://scarmack.smugmug.com/gallery/3319322

Add this to your CSS

.gallery_3319322 #galDescImg {
   position: relative;
   height: 150px;
   width:  200px;
   margin-top:  20px;
   margin-left: 30px;
   border:4px double red;
}

.gallery_3319322 #galDescText {
   position: relative;
   font-size: 1.2em;
   font-weight: bold;
   color: red;
   text-align: justify;
   width:  420px;
   margin-top:   -170px;
   margin-left:   280px;
}

.gallery_3319322 #albumDescription {
   border: 4px double red;
}

   /* remove stuff for clean page look */
.gallery_3319322 .nophotos h3 {display: none;}
.gallery_3319322 #breadcrumb {display: none;}

Add this to your gallery description.

<html>
<div id="galDescImg">
<img src="/photos/173238261-S.jpg" width="200" height="150">
</div>

<div id="galDescText">
<p>
Name: Sean Michael Scarmack (SMS).<br>
Goal: Is to get the best photos for you possible. If this means taking 100 photos just to get 5 perfect photos, so be it.<br>
Camera: Brand new Nikon D40. Got it 7-7-07 from parents as a early birthday gift.<br>
Lense: 70-300mm and 18-55mm.<br>
<br>
Best way to contact me is by email. So email me or i'll see you around<br>
<br>
<a href="mailto:puffdaddy11@hotmail.com">Email me</a> , <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&amp;friendid=105530518&amp;MyToken=81e73f8b-4df9-402b-b4ef-3306cd62dc86%20">myspace</a><br>
<br>
Next event: RocK n Ride was a blast. Pics are up!<br>
*TV Land 8-22<br>
*Steel City 8-25<br>
*Site will be updated every race.
</p>
</div>
</html>

In your header nav html
change this
<li><a href="/gallery/xxxxxxxx">Info</a></li>
to this
<li><a href="/gallery/3319322">Info</a></li>

Under customize galley for the info gallery:
Make the info gallery private so it won't show in your galleries box.
Set the style to journal.

scar488 · August 16, 2007

did it work?

Allen · August 16, 2007

scar488 wrote:

did it work?

rofl I had added this to the wrong thead in the customize forum. It
was ment for here.

Great, now set the gallery to journal style under gallery customization so it
doesn't resize from smugmug to smugmug_small.

scar488 · August 16, 2007

better?

Allen · August 16, 2007

Looks great in Firefox, needs slight tweaking in IE6. Will look into
that as soon as you get it set to journal style.

scar488 · August 16, 2007

i set it to journal

nav bar help

Comments