Changing banner and pulling my hair out!

[CarolinaMoon]

I decided to freshen up my site with a new banner and look. I can not for the life of me figure out the CSS to make the changes I would like to have. I have tried multiple way of doing things but nothing is working. Please someone help...

I am trying to get my SmugMug site to look like this non-SM site: www.mikemeyerphotography.com (http://www.mikemeyerphotography.com). I would like to have my new banner at the top of my flash slideshow left justified and my links right justified. Both on the same line if you will.

Secondly, I would like to increase the photo size of my slideshow. What area of CSS do I change for that also?

If you have any other suggestions to get it looking the same that would be greatly appreciated also. Thanks in advance.

www.kenleyphotography.com (http://www.kenleyphotography.com)

[TexasFamily]

what about trying something like this...???
i haven't looked at your code to see if it will mess anything else up...?


<div id="navcontainer">
<ul>
<li><a href=""><img width="40%" src="filename.jpg"/></a></li>
<li><a href="http://kenleyphotography" linkindex="1">HOME</a></li>
<li><a href="/galleries" linkindex="2">PORTFOLIOS</a></li>
<li><a href="/gallery/###" linkindex="3">SERVICES</a></li>
<li><a href="/gallery/###" linkindex="4">ABOUT</a></li>
<li><a href="mailto:">CONTACT</a></li>
<li><a href="http://kenleyphotography" linkindex="5">BLOG</a></li>
<li><a href="/gallery/###" linkindex="6">CLIENTS</a></li>
</ul>
</div>

i would recommend firebug...a firefox add-in...
you can wysiwyg your own site.

http://img98.imageshack.us/img98/8616/navbarpf9.jpg

Edward

[CarolinaMoon]

Edward,
Thank you for the reply but it did not work for me. I am not too sure what I was doing wrong but it wasn't working.

Any other ideas out there in Digital Grin land?

[TexasFamily]

did you try the text in red or the text highlighted in the image?
the red text was just an example...the text in the image should work.

Edward

[CarolinaMoon]

Edward,
I finally got your suggestion to work but the banner graphic is too distorted from the reduction plus there was a purple box around the banner. There must be an another way to get the banner on the same line as the links without distorting the graphic. I would like to try and keep it the size it currently is. I do appreciate your help.

Can anyone else suggestion something new to try? Thanks.

[CarolinaMoon]

Ok, after doing a little googling of CSS I think I figured out how to do it. I don't know if its the right way but it seems to look the way I wanted it to.

Now I need help in making my slideshow images larger to the left margin of the banner and right justified margin of the nav bar. Any suggestions?

[TexasFamily]

if it looks the way you want it then its the right way ;)
it looks really good btw!

take a look at this in your css...

#my_banner
it has a left:400px;
maybe change it to left:10%;

maybe change this too...?
#navcontainer ul
width:90%;

then you will have 10% on both Right & Left side
for all those different shapes/sizes of monitors

only problem i think you may have with % & two seperate divs
you may overwrite img or menu some on smaller screens...


Edward

[CarolinaMoon]

Edward,
I like the idea and made the change...thank you. I was considered about smaller monitors. I am working on a 17" but when I pulled the page up on a 15" the banner overlapped the nav bar. I actually made the change to 80% and 20% trying to not have the two items so spread out.

I was curious if I could get the nav bar any closer to the banner without the two items interfering with each other. What do you think?

Thanks and I appreciate you helping me.
Rob

[CarolinaMoon]

Also, I got this email from a friend when I asked her to check out the new look...

The only other concern I ran into was that it was not centered on my screen. I had to scroll down and to the right to see the entire page. Is there a way to crop it?

[TexasFamily]

what about trying this out...

<div id="navcontainer">
<ul>
<li><a href="http://kenleyphotography.smugmug.com"><img src="http://kenleyphotography.smugmug.com/photos/303757001_CgaWd-XL.jpg" border="0"></a></li>
<li><a linkindex="1887" href="http://kenleyphotography.smugmug.com">HOME</a></li>
<li><a linkindex="1888" href="/galleries">PORTFOLIOS</a></li>
<li><a linkindex="1889" href="/gallery/3419852">SERVICES</a></li>
<li><a linkindex="1890" href="/gallery/2931735">ABOUT</a></li>
<li><a href="mailto:rob@kenleyphotography.com">CONTACT</a></li>
<li><a linkindex="1891" href="http://kenleyphotography.smugmug.com">BLOG</a></li>
<li><a linkindex="1892" href="/gallery/3422198">CLIENTS</a></li>
</ul>
</div>
in FF for me the menu is lined up with the bottom of your y's
might need to play with css to move nav words up...
i think you could vertical spacing set to middle like in a table...i didn't try it
i think it looks OK with the nav words down low.

in FF for me the menu then wraps to two rows as the window gets smaller
if you go small enough it moves down below the image...altogether
but they do not overlap.

#navcontainer ul {
font-family:Trebuchet MS;
font-size:10pt;
list-style-type:none;
margin:0pt auto;
padding:0pt;
text-align:right;
width:100%;
}

try changing it to
text-align:center;
width:100%;



Edward

[CarolinaMoon]

Woo-hoo! Ok, we are getting there...

Now do you think there is any way to 1)put more space between the banner and the nav bar? 2)is there anyway to either "bump" up the nav bar or "bump" down the banner so they look more like they are on the same line?

Thanks Edward!

[TexasFamily]

;)

are you sure you want to keep the list method...ul's li's?
i'm too tired to think about centering that...maybe someone else can center the list...

but if you want to try something else...don't forget to make a copy of everything that you already have ;)


<div id="navcontainer" style="padding-left: 5%; padding-right: 5%; padding-top: 10px;">
<table width="100%" border="0">
<tbody><tr>
<td>
<a set="yes" linkindex="1" href="http://kenleyphotography.smugmug.com">
<img border="0" src="http://kenleyphotography.smugmug.com/photos/303757001_CgaWd-XL.jpg"/>
</a>
</td>
<td>
<a linkindex="276" href="http://kenleyphotography.smugmug.com" set="yes">HOME</a>
</td>
<td>
<a linkindex="277" href="/galleries" set="yes">PORTFOLIOS</a>
</td>
<td>
<a linkindex="278" href="/gallery/3419852" set="yes">SERVICES</a>
</td>
<td>
<a linkindex="279" href="/gallery/2931735" set="yes">ABOUT</a>
</td>
<td>
<a href="mailto:rob@kenleyphotography.com">CONTACT</a>
</td>
<td>
<a linkindex="280" href="http://kenleyphotography.smugmug.com" set="yes">BLOG</a>
</td>
<td>
<a linkindex="281" href="/gallery/3422198" set="yes">CLIENTS</a>
</td>
</tr>
</tbody></table>
</div>

you will have to change your css to format the links like you had them
copy the content in this section...
#navcontainer ul li
try changing them to this...
#navcontainer tr td

i think you might also want to remove this...it is pushing everything down.


<div id="my_banner">
<a href="http://www.kenleyphotography.com" linkindex="0">
<img width="500" height="88" border="0" src="/img/spacer.gif"/>
</a></div>


Edward

[CarolinaMoon]

I made some changes and went back to the original but I still have the line under the nav bar. I would like to remove the line but can't figure what I had in there to keep it out. Shoot!

[TexasFamily]

i like this one better too...if the screen gets smaller they just wrap to the next line and user doesn't have to scroll..

underlined links is an easy one...look for this in your css...

#navcontainer ul li

you need one for links... <a>

#navcontainer a {
text-decoration: none; /* no underline */
color: #ffffff /* white text */
}

if you want all your links to be white ... just leave off the #navcontainer

by adding the #navcontainer ... in front of the a ...
only links inside this container will have no underlines and be white

Edward

[CarolinaMoon]

Edward, I appreicate your help...thanks.:clap

Ok, now I would like to redo two things:

1. I would like to make my slideshow as wide as the left side of the banner and the right side of nav bar. I would like the hide to be just enough that someone with whatever size monitor would not have to scroll to see the slideshow. In other words, I want some big a*s pictures on my homepage. I will make them only in landscape.

2. What size would my images need to be resized to in order to do the above?

Rob