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
buddyb 0 Junior Poster
steveneven 0 Junior Poster
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> </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> </td></tr></table></td></tr>
</table>
</html>might do it for you.
Let me know
SE (Dave)
steveneven 0 Junior Poster
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
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
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
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.