0

I am having a problem in trying to line up my image inside the navbar list items area. There seems to be padding coming into the image therefore having it in the wrong area. I have put padding:0 and margin:0 in lots of areas but still nothing. Any help on trying to solve the matter would be great. Thanks in advance. Below is my navbar code.

Thanks Edmond

#navbar{
    width:800px;
    border:1px solid #000;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
}
<!--start of navbar-->
#navbar ul{
    margin:0;
    padding:0;
}
#navbar ul li{
    float:left;
    position:relative;
    list-style-type:none;
    margin:0;
    padding:0;  
}
#navbar ul li a{
    width:190px;
    height:25px;
    display:block;
    color:red;
    text-align:center;
    line-height:0;
    margin:0;
    padding:0;
    text-decoration:none;
    font-size:20px;
    background-image:url(images/navback.jpg);
}
<!--end of navbar-->
4
Contributors
7
Replies
25
Views
3 Years
Discussion Span
Last Post by ZeroEddy
0

Which image are you talking about - the css background image or an image tag? As you do not include your HTML nor even a screenshot, it's hard to help.

0

I am sorry it is the image in the #navbar ul li a

9817c9967bb4c31500d453469bace758

I want the image (black image) to be align at the top and with the text

Edited by ZeroEddy

0

Erm, that's not much help. Its a 300x35 image. I can't see it. Also, the underlying HTML is needed.

0

Here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="headText">
Ned Kelly's
</div><!--end of headText-->
<div id="headText2">
Bar Tipperary
</div><!--end of headText-->
</div><!--end of header-->
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end of navbar-->
<div id="content">
Content
</div><!--end of content-->
</div><!--end of container-->
</body>
</html>

3ec3c6d35c411a5f3611df368d7782f5

My aim is to get the black image to sit behind the text and to align at the top of the header. Hope this helps

1

Multiple ways to resolve this. its hard, at leat for me, without actually having your background image file for the nav bar to test it since this requires precise positioning.

One option is to add another div inside your navbar div, <div id="tabs"></div>, then style that div so that its position is absolute within the navbar div. Style that div to have the "tabs background", then move it using {position:absolute;top:0px;left:0px} until you get it placed exactly where you want it.

#tabs {
   background-image:url(images/navback.jpg);
   position:absolute;
   top:0px;
   left:0px;
}

For this to work, you have to assign the position:relative to the navbar div.. #navbar {position:relative}.

Then remove background-image:url(images/navback.jpg); from #navbar ul li a{ }

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.