View Full Version : Logo(needs linked) + Navbar alignment + underline
k.a.r.l.o.
Sep-24-2008, 07:38 PM
Hey guys, been cranking away at this and haven't found a solution in the forums. I would like to have a line added directly below my logo and navbar that runs the width of the page. I would also like my navbar to be lined up so that it's bottom edge lines up with the bottom edge of my logo.
Also, when I click my logo it takes me to smugmug.com. Any way to point it home?
karlophoto.smugmug.com
Allen
Sep-24-2008, 08:12 PM
Hey guys, been cranking away at this and haven't found a solution in the forums. I would like to have a line added directly below my logo and navbar that runs the width of the page. I would also like my navbar to be lined up so that it's bottom edge lines up with the bottom edge of my logo.
Also, when I click my logo it takes me to smugmug.com. Any way to point it home?
karlophoto.smugmug.com
Welcome to Dgrin :wave
Can't find your logo to click on? Was it part of the Smugmug header that
you turned off? Then might remove the two smuglogo CSS items.
Replace your header with this.
<div id="my_header">
<div id="my_banner"></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXX_YYYYY">News</a></li>
<li><a href="karlophoto.smugmug.com/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXX_YYYYY">About Me</a></li>
<li><a href="/gallery/XXXXXX_YYYYY">Contact</a></li>
</ul>
</div> <!-- closes navcontainer -->
</div> <!-- closes my_header -->
Add the first one and change the next two in your CSS
#my_header {
height: 101px;
border-bottom: 4px double #444;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}
#my_banner {
width: 472px;
height: 101px;
margin: 0;
background: url(http://karlophoto.smugmug.com/photos/379615311_mMb5w-L.jpg) no-repeat;
}
#navcontainer {
float: right;
margin: -40px 0; /* top/bottom right/left */
}
k.a.r.l.o.
Sep-24-2008, 08:41 PM
oooh.....awesome. i was hoping you'd swoop down and save me. :barb
replaced the code. navbar stopped functioning and is only on my main page. can we move it to the bottom right just above the new line?
k.a.r.l.o.
Sep-24-2008, 09:08 PM
Sweet! I figured out how to locate the navbar where I want it got it functioning again. Just need a few more tweaks.
1.) can i make my logo clickable to bring you back to karlophoto.smugmug.com?
2.) how do I remove the 2nd line above my photo on the journal pages?
3.) the picture isn't showing up on my "about me" page.
http://karlophoto.smugmug.com/gallery/6059368_vsDqV
That should do it!
Allen
Sep-25-2008, 07:51 AM
Sweet! I figured out how to locate the navbar where I want it got it functioning again. Just need a few more tweaks.
1.) can i make my logo clickable to bring you back to karlophoto.smugmug.com?
2.) how do I remove the 2nd line above my photo on the journal pages?
3.) the picture isn't showing up on my "about me" page.
http://karlophoto.smugmug.com/gallery/6059368_vsDqV
That should do it! Change this in your header
<div id="my_banner"></div>
To this
<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" width="472" height="101" border="0" alt="">
</a></div>
Are you referring to the double line under the banner? Add a specific rule
for that gallery.
#my_header {
height: 101px;
border-bottom: 4px double #444;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}
.gallery_6059368 #my_header {
border-bottom: 2px solid #444;
}
I see your photo, did you get it fixed?
k.a.r.l.o.
Sep-25-2008, 08:08 AM
COOL! I'm almost there :barb!
Yeah, I was able to fix a lot of things last night.
Could you look at one last thing for me? I took out the splash on my slideshow and now I have a strange flicker before it starts. Any ideas?
Allen
Sep-25-2008, 08:58 AM
COOL! I'm almost there :barb!
Yeah, I was able to fix a lot of things last night.
Could you look at one last thing for me? I took out the splash on my slideshow and now I have a strange flicker before it starts. Any ideas?
Have no idea on the flash, maybe someone else can help. Might post the in
the flash slideshow thread.
k.a.r.l.o.
Sep-25-2008, 09:15 AM
will do. YOU ROCK!
:thumb
k.a.r.l.o.
Sep-26-2008, 09:17 AM
hmmmm....for some reason my navbar isn't locking in. My current desktop is set to 1680 x 1050 and it looks in place. I just saw it on a normal (non-widescreen) monitor and the navbar jumped down below the double black lines. any ideas?
Allen
Sep-26-2008, 09:40 AM
hmmmm....for some reason my navbar isn't locking in. My current desktop is set to 1680 x 1050 and it looks in place. I just saw it on a normal (non-widescreen) monitor and the navbar jumped down below the double black lines. any ideas?
Change these
#my_header {
height: 101px;
border-bottom: 4px double #444;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}
#my_banner {
width: 472px;
height: 101px;
margin: 5px 0; /* top/bottom right/left */
background: url(http://karlophoto.smugmug.com/photos/379615311_mMb5w-L.jpg) no-repeat;
}
#navcontainer {
float: right;
margin: -45px 0 0; /* top right/left bottom */
}
Remove these, no longed needed.
.smuglogo {
width: 472px !important;
height: 101px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://karlophoto.smugmug.com/photos/379615311_mMb5w-L.jpg') !important;
}
.smuglogo[class] {
background-image: url(http://karlophoto.smugmug.com/photos/379615311_mMb5w-L.jpg) !important;
}
/* this part hides the your photos/home, login and help links */
#toolbar a.nav {display: none;}
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.