WordPress.org

Ready to get started?Download WordPress

Forums

Menu alignment help (9 posts)

  1. shlinklincoln
    Member
    Posted 6 years ago #

    I added a image button to my menu bar but I cannot get it to center within the menu. I want the "Home" link and the "Message Board" button to be on the same line, in the center of the menu bar.

    I'm sure I'm missing a simple snippet of code. Can anyone point me in the right direction?

    http://gcr.shlinklincolnsports.com

    Here's the code:

    http://wordpress.pastebin.com/m5954bad7

    Thanks in advance for any help.

  2. whooami
    Member
    Posted 6 years ago #

    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="http://gcr.shlinklincolnsports.com/" title="Home">Home</a></li>

    <li><a href="http://bullrock7.com/phpBB/viewforum.php?f=7"><img vertical-align="center" src="http://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

  3. shlinklincoln
    Member
    Posted 6 years ago #

    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.

  4. whooami
    Member
    Posted 6 years ago #

    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.

  5. shlinklincoln
    Member
    Posted 6 years ago #

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

  6. shlinklincoln
    Member
    Posted 6 years ago #

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

  7. whooami
    Member
    Posted 6 years ago #

    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

  8. shlinklincoln
    Member
    Posted 6 years ago #

    Thank you.

  9. whooami
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic