Need help on centering

Question

buddyb 0 Junior Poster

21 Years Ago

I would appreciate someone looking at my site, the source code and giving just a wee bit of direction. You'll notice I've got a nav bar table on the left, and a basic table on the right. In the nav bar table I've included a background and some buttons. My buttons are all flush left; can't seem to get them centered over that background image. Any help or suggestions appreciated.
Thanks, BuddyB

user-interface web-design

2 Contributors
4 Replies
108 Views
1 Day Discussion Span
Latest Post 21 Years Ago Latest Post by buddyb

Dani AI

Generated 10 Months Ago

Brief summary and a practical path forward. ’s idea to put the button images inside a centered container fixed the geometric centering; the remaining "right of center" look that reported is just a visual offset caused by the nav background image’s drop shadow. Two safer, more maintainable options:

Replace the table nav with a narrow sidebar and center the button column with CSS (flexbox keeps things simple and responsive):

<nav class="sidebar">
  <ul class="nav-list">
    <li><a class="nav-btn" href="#"><img src="btn-1.png" alt="..."></a></li>
    <li><a class="nav-btn" href="#"><img src="btn-2.png" alt="..."></a></li>
  </ul>
</nav>

.sidebar {
  width:170px;
  background: url('nav-bg.png') no-repeat center top;
  box-sizing:border-box;
}

.nav-list {
  list-style:none;
  margin:0;
  padding-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center; /* centers the buttons horizontally */
}

If you must keep the table, center an inner block with a robust absolute-centering technique so you do not hard-code pixel offsets:

.nav-cell { position:relative; width:170px; background:url('nav-bg.png') no-repeat center top; }
.nav-inner { position:absolute; left:50%; transform:translateX(-50%); top:/*adjust*/; }

Notes and troubleshooting

The drop-shadow in the background shifts the visual center; either remove that shadow from the image and add it via CSS (box-shadow or a pseudo-element) or nudge the inner column slightly (use transform or padding) instead of fixed left values.
Make images display:block to avoid inline-image spacing, remove stray <br>s, and give buttons alt text for accessibility.
Use DevTools: toggle outlines/borders and inspect computed background-position, width and padding to see exactly where things sit.

For modern references see Flexbox basics (MDN) and CSS positioning (MDN).

All 4 Replies

steveneven 0 Junior Poster

21 Years Ago

Just guessing... Try something like this:

change your source from this:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body topmargin="10" background="bodybground.gif">
</body>
<!-- PAGE POSTIONING TABLE -->

<table align="center" width="720" height="600" border="0"  bordercolor="#CC0000" cellpadding="0" border="0" bgcolor="#FFFFFF">
<tr><td>
<!-- NAVBAR -->
<table align="left" width="170" height="600"border="0" bordercolor="#FF9900"><tr><td height="600" align="left" style="background: url(l-navbar.gif) center no-repeat;><img src="buttns/pastorbuttn.gif><br><img src="buttns/pastorbuttn.gif"><br><img src="buttns/boardbuttn.gif"><br><img src="buttns/staffbuttn.gif"><br><img src="buttns/musicbuttn.gif"><br><img src="buttns/honorbuttn.gif"><br><img src="buttns/womensbuttn.gif"><br><img src="buttns/Youthbuttn.gif"></td></tr></table>

<!-- BODY LAYOUT --><table align="right" width="580" height="600" border="0" bordercolor="#00FF00"><tr><td>&nbsp;</td></tr></table></td></tr>


</table>
</html>

to this:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body topmargin="10" background="bodybground.gif">
</body>
<!-- PAGE POSTIONING TABLE -->

<table align="center" width="720" height="600" border="0"  bordercolor="#CC0000" cellpadding="0" border="0" bgcolor="#FFFFFF">
<tr><td>
<!-- NAVBAR -->
<table align="left" width="170" height="600"border="0" bordercolor="#FF9900">
<tr>
<td height="600" align="left" style="background: url(l-navbar.gif) center no-repeat;><img src="buttns/pastorbuttn.gif><br>
<div style="text-align: center;"><img src="buttns/pastorbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/boardbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/staffbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/musicbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/honorbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/womensbuttn.gif" /></div><br>
<div style="text-align: center;"><img src="buttns/Youthbuttn.gif" /></div>
</td>
</tr>
</table>

<!-- BODY LAYOUT --><table align="right" width="580" height="600" border="0" bordercolor="#00FF00"><tr><td>&nbsp;</td></tr></table></td></tr>


</table>
</html>

might do it for you.

Let me know

SE (Dave)

Reply to this topic

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.

steveneven 0 Junior Poster · Answer 1 · 2005-02-05T07:07:55+00:00

the main difference is the CSS align part

<div style="text-align: center;"><img src="buttns/musicbuttn.gif" /></div>

The bold parts, just incase you didn't see them right away. ;)

SE (Dave)

buddyb 0 Junior Poster · Answer 2 · 2005-02-05T10:27:22+00:00

bordercolor="#FF9900"><tr><td height="600" align="left" style="background: url(l-navbar.gif) center no-repeat;>
<img src="buttns/pastorbuttn.gif><br>
<img src="buttns/pastorbuttn.gif"><br>
<img src="buttns/boardbuttn.gif"><br>
<img src="buttns/staffbuttn.gif"><br>
<img src="buttns/musicbuttn.gif"><br>
<img src="buttns/honorbuttn.gif"><br>
<img src="buttns/womensbuttn.gif"><br>
<img src="buttns/Youthbuttn.gif"></td></tr></table>
SE (Dave)

Dave, you're too, too :cheesy: cool. It worked like a charm! It just goes to show I need to get more into CSS quickly. The one thing I didn't understand was the double repeat of the Pastor's button. What is the purpose of the first entry after "center no-repeat;>?" When I didn't include it the Pastor's button did not center. I did leave out the <br>s because it created more room between buttons than I wanted, plus the table is narrow enough for it not to be necessary. Thank you very much for that lesson.
BuddyB

buddyb 0 Junior Poster · Answer 3 · 2005-02-06T04:02:25+00:00

SE,
What you have me did the job, but when I inspected the finished results I found my buttons appearing to be right of center, but they're not really. There's a drop shadow in the background, so it just appears this way. I found a fix, and it works, but probably puts conflicting code in my work. I probably need to change it somewhat. What do you think?

<tr><td><table align="left" width="170" height="600"border="1" bordercolor="#FF9900"><tr><td height="600" align="left" style="background: url(l-navbar.gif) center no-repeat;><img src="buttns/pastorbuttn.gif>
<div style="Position : Absolute ; Left : 110px ; Top : 120px ; Width : 227px ;" />
<div style="text-align: center;"><img src="buttns/pastorbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/boardbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/staffbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/musicbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/honorbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/womensbuttn.gif" /></div>
<div style="text-align: center;"><img src="buttns/Youthbuttn.gif" /></div>
</td></tr></table></td>

The absolute left and top places the buttons where I want them in the layout, however I don't understand the width. The 227 doesn't match the table width, but when I take that out, or change the number the buttons go to the left.
Thanks, BuddyB

Need help on centering

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers