How to align navbar with custom header?

[OceanEm12]

Hi, I'm just having an issue with my header and navbar-- the header is up high enough, but I want to adjust the navbar to be align with the second line of my logo. How can I do this??

www.emmawilloughbyphotography.smugmug.com (http://www.emmawilloughbyphotography.smugmug.com)

Thanks!

[J Allen]

See if you like this.....


Change your whole CSS box to this:




/*=====Banner=====*/
#my_banner {
width: 400px;
height: 150px;
margin: .5em;
background: url(/photos/576300512_KmJtY-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader
(enabled=true,sizingmethod=image,src='/photos/576300512_KmJtY-O.png');}






/*=====Nav-Bar=====*/
#navcontainer ul
{margin: .5em;
padding: 1;
list-style-type: none;
float:right}

#navcontainer
{position:relative;
bottom:70px;
margin-right:110px}

#navcontainer ul li {display: inline;}


#navcontainer ul li a
{text-decoration: none;
font-family: Arial Narrow;
background-color: none;
color: none;
text-decoration: none;
word-spacing: 0.2em;
text-align: right;
letter-spacing: 2px;
line-height: 2em;
font-size: 1.2em;
padding: .7em;
color: #FFFFFF;
background-color: none;}

#navcontainer ul li a:hover
{color: #339999;
background-color: none;}






/*=====Header-Line=====*/
#my-headerline
{margin-bottom:10px;
border-bottom: 1px solid #339999;
margin-left:70px;
margin-right:70px;
position:relative;
bottom:20px}






/*=====Bio-Box=====*/
#bioBox .photo
{display: none;}

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

#homepage,
#bioBox
{margin: 0 auto;
width: 910px;}







/*====Tighten Homepage====*/
#userBio {padding:0;}
#homepage {padding-top:0;}
.homepage #breadcrumb
{display:none;}






/*=====Galleries Page=====*/
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.galleries #bioBox
{display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox,
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox
{display: block;}




#categoriesBox .boxTop {
display: none;
}

#photoKeywords {
display: none;
}







#bioBox {border: none;}

/* about gallery */
.gallery_7218763 #albumNav_top,
.gallery_7218763 #albumNav_bottom,
.notLoggedIn .gallery_7218763 #breadcrumb {display: none;}
/* CONTACT GALLERY */ .gallery_7218763 .pageNav {display: none;}.gallery_7218763 .nophotos {display: none;}.gallery_7218763 #breadcrumb {display: none} .notLogedIn #breadCrumbTrail {display: none;}

/* rates gallery */
.gallery_7219155 #albumNav_top,
.gallery_7219155 #albumNav_bottom,
.notLoggedIn .gallery_7219155 #breadcrumb {display: none;}
.gallery_7219155 .pageNav {display: none;}.gallery_7219155 .nophotos {display: none;}.gallery_7219155 #breadcrumb {display: none}

#journal .caption {
padding-top:0;}









Then add this line to your custom header box if you would like a line under both of them...



<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="http://www.emmawilloughbyphotography.smugmug.com/">home</a></li>
<li><a href="http://www.emmawilloughbyphotography.smugmug.com/gallery/7218763_CY6Ds">about me</a></li>
<li><a href="http://www.emmawilloughbyphotography.smugmug.com/galleries">galleries</a></li>
<li><a href="http://www.emmawilloughbyphotography.smugmug.com/gallery/7219155_HVvXF">rates &amp; contact</a></li>
</ul>
</div>
<div id="my-headerline"> </div>

[J Allen]

Should look like this.....



http://www.joerallen.com/photos/576457764_J6gvq-XL.jpg

[J Allen]

Try setting your theme to "elegant black and white" and we'll hide all the junk you dont want.

[OceanEm12]

Try setting your theme to "elegant black and white" and we'll hide all the junk you dont want.

You're a lifesaver!!! Thank you SO MUCH

Here are the things I'd like to change:
-have one continuous font on my site
-transparent gallery "boxes"/menus
-the ability to change my background (just to something simple)
-a shadowed/beveled border around the home slideshow, similar to http://ronmartinsen.smugmug.com/, and border around thumbnails.

Haha, another long list!
Emma

[J Allen]

So change my ENTIRE CSS box to the one you posted?


:nod

Only thing that will change is what you see on my screen shot..

[J Allen]

Add this to your css to remve the half border and line up your galleries 4 across:




/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}


/*====No More Background====*/
.boxBottom,
.boxTop,
.box
{background:none !important;}


/*=====Galleries 4 Across=====*/
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[J Allen]

Dont forget to set the rest of your galleries to the default home page theme...that way your site, all your pages look the same..if thats what you want. :thumb

[J Allen]

Also if you add this line to your slideshow code, it will bring it up closer to the top:



<script>
var ssConfig = {
AlbumID: '7219001',
newWindow: 'false',
imgAlign: 'top',
transparent: 'true',
splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png',
showLogo: 'false',
clickUrl: 'http://www.smugmug.com',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '350'
};

SM.flash.insertSlideshow(800, 600, ssConfig, 'transparent');
</script>

[J Allen]

-have one continuous font on my site

what font style?


-transparent gallery "boxes"/menus

Not sure what you mean here...


-the ability to change my background (just to something simple)

You can add your own background image or just set your own background color using css for both


-a shadowed/beveled border around the home slideshow, similar to http://ronmartinsen.smugmug.com/, and border around thumbnails.

This site is using an image to achieve the border..here's the Image (http://ronmartinsen.smugmug.com/photos/517878808_X2UFX-O.jpg)

[OceanEm12]

what font style?



Not sure what you mean here...



You can add your own background image or just set your own background color using css for both


This site is using an image to achieve the border..here's the Image (http://ronmartinsen.smugmug.com/photos/517878808_X2UFX-O.jpg)

If I could encode Arial Narrow or Georgia as my font, that would be great. Or Tahoma.

Regarding the boxes: this might have just been with my Black Arts theme, but everytime I changed the background using the easy customizer, the main boxes (holding the slideshow and gallery thumbnails) would have a black background and were not transparent. I was just wondering if there was a way I could get rid of it.

Thanks for solving the mystery of the image border! lol Haha, how do I do that??

AND thanks once again for doing this not only for me, but all the other people on dgrin!:clap