topnavar link not same distance

Discussion in 'CSS' started by giusbit, May 15, 2009.

0
  1. #1
    hi,
    check the top navbar of my site
    i need the link to have same distance from the image

    here's the css

    <style type="text/css">
#top_menu
{
   background:url('/images/top_menu_bg.png') 0 0 repeat-x;
}
#top_menu ul
{
   margin:0;
   padding:0;
   list-style-type:none;
}
#top_menu ul li 
{
   float:left;
}
#top_menu ul li a
{
   background:url('/images/top_menu_item_bg.png') 16px 6px no-repeat;
}
#top_menu ul li a:hover
{
   color:#EBD687;
}
</style>
    Code (markup):
    what should i edit?
     
    giusbit, May 15, 2009 IP
  2. lifesgood

    lifesgood Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Add padding-left:20px 20px being whatever much you want into #top_menu ul li a

    so it should look like

    #top_menu ul li a
    {
    background:url('/images/top_menu_item_bg.png') 16px 6px no-repeat;
    padding-left:20px;
    }

    edit: Actually, I'm a bit confused now. You want SOME distance or all of them to have same distance..cause from my browser, they look like they all have the same distance.
     
    lifesgood, May 15, 2009 IP
  3. giusbit

    giusbit Active Member

    Messages:
    199
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    look now: second link doesn't get same distance of other links
     
    giusbit, May 16, 2009 IP
  4. lifesgood

    lifesgood Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You need to look at what you code is doing for the top menu...

    
#top_menu {
	height: 30px;
	background: url(http://casino-list.net/images/top_menu_bg.png) repeat-x;
	padding-left: 20px;
	
}

#bottom_menu a,
#top_menu a {
	float: left;
	width: 140px;
	margin-right: 20px;
	padding-top: 7px;
	padding-bottom: 5px;
	color: #fff;
	font-weight: bold;
	font-family: Tahoma, san serif;
	text-align: center;
	text-transform: uppercase;
}
#top_menu
{
   background:url('http://casino-list.net/images/top_menu_bg.png') 0 0 repeat-x;
}
#top_menu ul
{
   margin:0;
   padding:0;
   list-style-type:none;
}
#top_menu ul li a
{
   background:url('images/top_menu_item_bg.png') 16px 6px no-repeat;
    Code (markup):
    You got your text align centered so of course it's going to look like everything is off of the image file. just remove text-align:center off the #top_menu a selector then put a padding-left enough to just push it a bit right of the image file.

    Actually, wait that won't work. You have a float in there which will force the links all the way to the left anyways. Who the hell created that code anyways? It's all backwards.

    Read this on how to make menu lists: http://css.maxdesign.com.au/listamatic/
     
    lifesgood, May 17, 2009 IP