View Full Version : Creating Equal space between Menu Items
miltronix
Mar-13-2010, 07:24 AM
I have two problems.
#1-How do I make the spacing between my menu words equal? "Home" and "Blog" are very far apart whereas "About Me" and "Portfolio" are much closer.
#2-How do I remove the extra space after "Rates" in the menu? I feel that it's making my banner a little too long and may require some people to have to scroll if their monitors aren't very wide.
I'm asking about the home page on my site:
www.miltonyangphotography.com
jfriend
Mar-13-2010, 07:37 AM
In this part of your CSS, remove the lines in red and add the line in green:
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #8DC63F; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
padding: 0 15px;
height: 20px; /* main box height */
border: 1px solid white;/ /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px; /* top right bottom left */
background: white; /* main button color */
/*background: #66CD00;*/ /* lime green main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}
To get rid of the extra space after Rates, remove the line in red below:
.menu {
float: right;
position: relative;
display: block;
z-index: 99;
padding: 50px 0px 0px 0px;/* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 600px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0px 0px 0px 0px; /*Top right bottom left*/
}
Also, you may want to fix the spelling mistake in the link in your first post. I assume the correct link is: http://www.miltonyangphotography.com/.
Allen
Mar-13-2010, 07:41 AM
I have two problems.
#1-How do I make the spacing between my menu words equal? "Home" and "Blog" are very far apart whereas "About Me" and "Portfolio" are much closer.
#2-How do I remove the extra space after "Rates" in the menu? I feel that it's making my banner a little too long and may require some people to have to scroll if their monitors aren't very wide.
I'm asking about the home page on my site:
www.miltonyangphotoraphy.com (http://www.miltonyangphotoraphy.com)
The menu div that the buttons are left justified in is too wide.
.menu {
float: right;
position: relative;
display: block;
z-index: 99;
padding: 50px 0px 0px 0px;/* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 510px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0px 0px 0px 0px; /*Top right bottom left*/
}
jwvanderbeck
Mar-13-2010, 08:08 AM
Odd. I can't even go to your site. When I click the link in your signature I ended up at my local ISP's search page :scratch
miltronix
Mar-13-2010, 08:22 AM
Thank you for the help. The fixes worked perfectly!
I'm not sure why the link in my sig didn't work. I clicked on it and it went to my site.
I fixed the link in my first post as well.
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.