Member Avatar for ZeroEddy

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
  • 221 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ZeroEddy
Member Avatar for mj2012

try margin-top

Member Avatar for diafol

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.

Member Avatar for ZeroEddy

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
Member Avatar for diafol

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

Member Avatar for ZeroEddy

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

Member Avatar for JorgeM

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{ }

Member Avatar for ZeroEddy

Thanks so much it works perfect.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.