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
  • 232 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ZeroEddy

Dani AI

Generated

Short version: the visual misalignment happened because the decorative image was tied to each link box (and the link box height/line-height didn’t match the image), so the image couldn’t sit flush with the top of the header. was right to ask for the HTML, ’s margin-top idea is a quick hack, and ’s approach of taking the image out of the link flow (an absolutely positioned background element) is the robust fix — it lets the background span and align to the navbar/container independently of each anchor.

Two clean options that avoid fragile manual offsets:

  • Put the background on the navbar container and make the links vertically centered inside it. This keeps the image pinned to the top of the bar and the text centered in the clickable area.
#navbar { position: relative; background: url(images/navback.jpg) no-repeat top center; }
#navbar a { display: block; height: 30px; line-height: 30px; text-align: center; }
  • Use a CSS pseudo-element so you don’t need extra markup; it behaves like ’s absolute div but stays in CSS only. Set the pseudo-element behind the links and use z-index/pointer-events so it doesn’t interfere.
#navbar { position: relative; }
#navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35px; /* match image height */
  background: url(images/navback.jpg) no-repeat top left;
  pointer-events: none; z-index: 0;
}
#navbar ul, #navbar a { position: relative; z-index: 1; }

Quick checklist: confirm the image height matches the visual area (or use background-size to scale), set background-repeat: no-repeat if needed, remove default page margins (reset body{margin:0}), and avoid pixel-only margin-top hacks since font or layout changes will break them. If you used ’s extra element and it fixed things, it’s a solid choice; the pseudo-element is just a CSS-only alternative.

Recommended Answers

All 7 Replies

Member Avatar for mj2012

try margin-top

Member Avatar for Member #120589

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 Member #120589

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.