Menu alignment help

you want that much larger image that is linked from photobucket.. to be in the center of your page, next to that smaller home link?

yuck, but ok..

Look at the source of the page:

<li class="first current_page_item"><a href="https://gcr.shlinklincolnsports.com/" title="Home">Home</a></li>

<li><a href="https://bullrock7.com/phpBB/viewforum.php?f=7"><img vertical-align="center" src="https://i160.photobucket.com/albums/t190/shlinklincoln/Shlink%20LIncoln%20Sports/bullrock7.jpg" alt="Golf Card Discussion Forum" align="right"></a></li>

Now give me a second .. Im looking at the CSS

Thanks for your help.

I made the image to be small enough to fit in the green menu bar. Does photobucket somehow mess that up?

I just want the image to sit right aligned in the middle of the menu, equal to the “Home.”

Maybe it is my image. Checking it out now.

you are forcing that image to be aligned to the right side of the page.. its in the code I just pasted above. How do expect to style that if you are doing that.

I should have actually looked at that first; I didnt check what you had there until I removed ALL of your CSS and saw it pegged to the right border still.

Your putting that image inside an unordered list.

1. Dont pin it to the side.
2. Style the <ul> bits to place the entire list in the center.
3. Style the list items to align items to one another.

Image is 240 x 48. Should fit in the menu bar.

I get it. How can I align the picture in CSS? I’ll update the code to delete out the alignment of the image.

Go get firefox.

Go get the web developer extension for firefox

Install it.

Open your site.

Right click in Firefox.

Go to web developer -> CSS -> Edit CSS

Play all you like.

(The pertinent CSS bits are going to be the ul li stuff inside #menu)

This stuff:

#menu
{
	position: relative;
        text-align: left;
	background-color: #008000;
	height: 3.5em;
	padding: 0 1.0em;
	margin: 0 0 2px;
}
#menu ul
{
	padding:1em 0 0 0;
	margin:0;
}
#menu ul li
{
	position: relative;
	display: inline;
	padding:0;
	margin:0;
}
#menu ul li a:link, #menu ul li a:visited
{
	color: #fff;
	padding: 0.5em 1.0em 0.9em 1.0em;
	text-decoration: none;
	border:none;
}
#menu ul li a:hover, #menu ul li a:active, #menu ul li.current_page_item a
{
	background-color: black;
	border: none;
}

Once you have played around with your CSS using the method above, you can copy and paste those changes into your style.css

Thank you.

you should also know that there are spaces in that image name. Thats a no-no, and you WILL encounter display issues having done that. Not all browsers are kind enough to fix those sorts of oversights.