help formatting html only...

[mrfizzed]

i added an html only page here
http://reflectivephotoworks.smugmug.com/gallery/5100689_8ZQSH
id like to format it so the font and whatnot look ilke this:
http://reflectivephotoworks.smugmug.com/gallery/4250947

help please
i know myself how to add it to navbar and such but need help with the formatting

[Allen]

i added an html only page here
http://reflectivephotoworks.smugmug.com/gallery/5100689_8ZQSH
id like to format it so the font and whatnot look ilke this:
http://reflectivephotoworks.smugmug.com/gallery/4250947

help please
i know myself how to add it to navbar and such but need help with the formatting
Add these to your CSS

.gallery_5100689 #albumDescription {
font-family: garamond, lucida calligraphy, tahoma, verdana, georgia, comic sans;
font-size: 17px;
color: white;}

/* html only page for gallery How to order*/
.gallery_5100689 .nophotos { display: none; }

[mrfizzed]

believe it or not i am figuring some of this stuff out on my own. that being said i am having trouble with my navbar, well not trouble per se but customizing it the way i want it.
heres the dilemma...
i added two buttons to it today (order questions, portfolio)
right now i think every button is 105px wide, including flyouts and drop downs. id like to be able to make certain buttons different widths but do not know how. for example the home, about, contact buttons in my opinion can be made narrower in order to clean up the navbar and deal with spacing between words on it. how would i accompolish this?

[Allen]

believe it or not i am figuring some of this stuff out on my own. that being said i am having trouble with my navbar, well not trouble per se but customizing it the way i want it.
heres the dilemma...
i added two buttons to it today (order questions, portfolio)
right now i think every button is 105px wide, including flyouts and drop downs. id like to be able to make certain buttons different widths but do not know how. for example the home, about, contact buttons in my opinion can be made narrower in order to clean up the navbar and deal with spacing between words on it. how would i accompolish this?
Replace these and see if it does it.

.menu {
position: relative;
display: block;
z-index: 99;
float: right;
padding: 0px 0px 0px 10px; /* spacing around menu - top right bottom left */
height: 40px; /* menu container */
/* width: 670px; */ /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
/* _width: 630px; */ /* IE6 if different */
margin: 0 20px auto 0; /* this should center navbar, if not tweak with left's below */
top: -42px;
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11px; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration: none;
font-family: verdana;
text-align: center; /* centers text in buttons */
width: 75px; /* main box width */
height: 20px; /* main box height */
border: 1px solid #000; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #000; */ /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 60px; width: 75px; /* IE main button */
}

[mrfizzed]

actually allen i did that but it just bunched everytyhing together, and too much so. whole navbar was somewhat centered and wrapped too
is there a way to make individual buttons different widths instead of all of them being 105px?

Replace these and see if it does it.

.menu {
position: relative;
display: block;
z-index: 99;
float: right;
padding: 0px 0px 0px 10px; /* spacing around menu - top right bottom left */
height: 40px; /* menu container */
/* width: 670px; */ /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
/* _width: 630px; */ /* IE6 if different */
margin: 0 20px auto 0; /* this should center navbar, if not tweak with left's below */
top: -42px;
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11px; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration: none;
font-family: verdana;
text-align: center; /* centers text in buttons */
width: 75px; /* main box width */
height: 20px; /* main box height */
border: 1px solid #000; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #000; */ /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 60px; width: 60px; /* IE main button */
}

[Allen]

actually allen i did that but it just bunched everytyhing together, and too much so. whole navbar was somewhat centered and wrapped too
is there a way to make individual buttons different widths instead of all of them being 105px?
That worked for FF and IE6. btw, changed the width value to 75 in last item for IE.

Try changing this one also to this

* html .menu ul li a, .menu ul li a:visited {
width: 70px; width: 70px; /* IE main button */
}

[mrfizzed]

now the navbar itself looks ok but the drop downs are differnt widths than the main navbar buttons. can this be fixed in one of two ways?
#1 make the drop downs the same width as the button its droppping down from or
#2 make only certain navbar buttons (galleris, services for example) wider so they match the drop down below them?