0

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

http://www.eliving.com/graceweb/bellevuegrace2.htm

2
Contributors
4
Replies
5
Views
12 Years
Discussion Span
Last Post by buddyb
0

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)

0

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)

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

0

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?

<!-- NAVBAR -->
<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

This topic has been dead for over six months. 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.