Banner and Navbar Alignment Help

[billhughlett]

Hi friends -

First post here for me...I've finally taken the plunge to try and do something with my site.

I've been muddling through many of the tutorials and threads but can't figure out how to (1) get my navbar to left-align with my header and the gallery thumbnails on my home page (see first screen-shot below) and (2) how to get both the header and navbar to left-align with the left most edge of the gallery pages (see second screen-shot).

Any help gratefully accepted.

Bill

http://hhh.smugmug.com/photos/119643795-S.jpg

http://hhh.smugmug.com/photos/119643814-S.jpg

[Pupator]

Bill,

Looks to me like you got this figured out? Let me know if you still need any help!

[billhughlett]

Bill,

Looks to me like you got this figured out? Let me know if you still need any help!

No I haven't gotten it figured out - I actually don't have a clue....the screen shots in my original post have red arrows showing where I want the navbar and header to be on my home page and on the gallery pages. I have spent hours scouring this forum to no avail. Any help would be greatly appreciated.

Bill

hhh.smugmug.com

[Barb]

No I haven't gotten it figured out - I actually don't have a clue....the screen shots in my original post have red arrows showing where I want the navbar and header to be on my home page and on the gallery pages. I have spent hours scouring this forum to no avail. Any help would be greatly appreciated.

Bill

hhh.smugmug.com

Hi Bill,

Welcome to DGrin :wave

For your navbar, if you do not want it centered, change the red in your navbar code:

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

It can be text-align: left, which will take it to the left margin.

Your banner works the same way:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/119582374-O.jpg) no-repeat;
}

The red centers it. You can play with that a bit to see if you get the look you want. Be sure to holler back with questions.

[Pupator]

No I haven't gotten it figured out - I actually don't have a clue....
Bill


Sorry about that Bill! I looked at your site myself and thought the nav bar and logo looked good and in place. Regardless, it looks like Barb has you taken care of.

[billhughlett]

Hi Bill,

Welcome to DGrin :wave

For your navbar, if you do not want it centered, change the red in your navbar code:

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

It can be text-align: left, which will take it to the left margin.

Your banner works the same way:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/119582374-O.jpg) no-repeat;
}

The red centers it. You can play with that a bit to see if you get the look you want. Be sure to holler back with questions.

Barb -

Sorry, I must not be communicating my problem very well. Can you see the screenshots in my original post? I've already tried to set the navbar to 'text-align left' and it sends it way past the left edge of the page, all the way to the left edge of the screen. I don't want either the navbar or the banner centered, I want them to left-align with the embedded smugmug content on the homepage and the gallery pages. See the red vertical line on my screen shots and the red arrows pointing to where I want the banner and navbar to go. Does this make sense??

Bill

[billhughlett]

Hi Again Barb -

Just to be clear, here is what happens when I "text-align: left" the navbar:

Bill

http://hhh.smugmug.com/photos/119743630-S.jpg

[Pupator]

Bill,

Can I have a link to the page? When I visit your gallery I don't find a page with this problem.

[Barb]

Hi Again Barb -

Just to be clear, here is what happens when I "text-align: left" the navbar:

Bill

http://hhh.smugmug.com/photos/119743630-S.jpg

Hi Bill,

I see now what it is you wish to do.

There are probably a couple different ways to do this. One is, you can play with the margin-left code in the code I referred to above. For example:

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
margin-left: 100px;
}

Your banner works the same way:

#my_banner {
width: 750px;
height: 150px;
margin-left: 100px;
background: url(/photos/119582374-O.jpg) no-repeat;
}

Not sure the px is correct, but you can play with that. You will, however, need to adjust that for the different viewing styles.

Another way that would work is to give your site a wrapper, i.e., <div id="sitewrapper">. The div would start above your header and end below your footer. In your CSS you would give that div a width. You will also need to adjust the sitewrapper for the different viewing styles. If you had a sitewrapper, you could left justify your banner and navbar.

And there is always the possibility that I'm overthinking this and someone else will come in with a very simple answer !!

[billhughlett]

Bill,

Can I have a link to the page? When I visit your gallery I don't find a page with this problem.

Hi Pupator -

If you went to hhh.smugmug.com and the navbar looked centered it was because I changed the coding back to 'text-align: center" so I wouldn't have to look at the katywampus layout :-). The screenshot shows what happens when the text is aligned to the left. Looks like Barb's next response might hold some promise...I think I'm beginning to understand this a bit better.

Bill

[billhughlett]

Hi Bill,

I see now what it is you wish to do......And there is always the possibility that I'm overthinking this and someone else will come in with a very simple answer !!

Hey Barb -

Thanks for the suggestions...I think I'm beginning to understand the issue better. I'll try your suggestions today regarding the spacing and ponder the wrapper idea which is a bit over my head! I'll let you know a little later today how things went. Really appreciate the help. Best -

Bill

[ivar]

Hi Bill,

Add the green stuff to your CSS, and you should be set.
The navbar 'hugs' the left side of the main page. You can move it more inwards by using the margin-left. (indicated in red in the text) Increase the number to get it more to the right.
#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/119582374-O.jpg) no-repeat;
}

.Large #my_banner,
.Original #my_banner {
width: 800px;
}

.smugmug #my_banner,
.critique #my_banner {
width: 960px;
}


#userName {
display: none;
}

#galleryTitle {
display: none;
}

#breadcrumb {
display: none;
}

.map_this {
display: none;
}

.box {background-color: #fff;}

#navcontainer {
width: 750px;
margin: 0 auto;
}

.Large #navcontainer,
.Original #navcontainer {
width: 800px;
}

.smugmug #navcontainer,
.critique #navcontainer {
width: 960px;
}


#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
/* change the margin left if you want to move the navbar to the right */
margin-left: 0px;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}


#photoKeywords {
display: none;
}

#exifOtherSizes {display: none;
}

#caption_bottom {color: #B3B3B3;}

#userHome {
display: none;
}

.possess {
display: none;
}

.cartlink_footer { display: none; }

#feeds {
display:none;
}

[Barb]

Hi Bill,

Add the green stuff to your CSS, and you should be set.

:clap:clap

[billhughlett]

Hi Bill,

Add the green stuff to your CSS.....

Ivar & Barb -

Thanks, you guys are too much. This worked great for what I need right now....this stuff is so over my head :-). Really appreciate the help. Happy New Year!

Bill