Member Avatar for kylestudent 
<HTML>
<HEAD>
<head>
<TITLE>Minecraft Worlds</TITLE>
</HEAD>
<BODY>
<BODY BACKGROUND="Background(1).gif">


<CENTER><TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>

<TD WIDTH="989" HEIGHT="200" BACKGROUND="logo.png" VALIGN="bottom">

<FONT SIZE="+1" COLOR="yellow"></FONT></TD>

</TR>
</TABLE></CENTER>
<CENTER><TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>

<TD WIDTH="1006" HEIGHT="27" BACKGROUND="menu_bg.png" VALIGN="top">

<FONT SIZE="+1" COLOR="Red"><IMG SRC="forum.png"></FONT></TD>

</TR>
</TABLE></CENTER>


<CENTER><TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>

<TD WIDTH="989" HEIGHT="742" BACKGROUND="picture1.png" VALIGN="top">

<CENTER><FONT SIZE="+1" COLOR="yellow"></FONT></TD><CENTER>

</TR>
</TABLE>
<IMG SRC="menu_bg.png">
</CENTER>
</BODY>
</HTML>

This is the code ive been working on for practice, and this is what i get out of it

http://s962.photobucket.com/albums/ae108/Brideaukyle1/?action=view&current=help.png

but i want the bar to look like this

http://s962.photobucket.com/albums/ae108/Brideaukyle1/?action=view&current=Untitled-1.png

and to be able to add more buttons

ive tried making the bar a table and putting the bar as the background then adding the buttons thats what the picture ^^ up there shows you, but i want it to be centered.

the name of the bar in the code is
menu_bg.png
and the button is
forum.png

and can someone also tell me how to make a topic go to solved?

  • 5 Contributors
  • 7 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by techRobo

Dani AI

Generated

Good start — the layout problems come from using table-based markup, deprecated attributes (like BACKGROUND, <center>, <font>), and a few malformed tags. was right to flag unclosed/duplicate tags: keep one <head> and one <body>, close tags, and move presentation into CSS. was on the right track: switch to CSS-based containers instead of tables. Modern, simple approach is to center a fixed or max-width container and lay out buttons with Flexbox so they sit side-by-side and stay centered as you add more.

A minimal pattern that replaces your table/navbar:

<nav class="site-nav">
  <div class="nav-inner">
    <a class="nav-btn" href="#">Forum</a>
    <a class="nav-btn" href="#">Downloads</a>
    <a class="nav-btn" href="#">About</a>
  </div>
</nav>
.site-nav {
  background: url('menu_bg.png') center no-repeat;
}
.nav-inner {
  max-width: 1006px; /* match your bar image width or use a comfortable max */
  margin: 0 auto;    /* centers the bar */
  display: flex;
  justify-content: center;
  gap: 10px;         /* space between buttons */
  padding: 4px 0;
}
.nav-btn {
  display: inline-block;
  color: yellow;
  text-decoration: none;
  padding: 4px 10px;
  height: 27px;      /* match your bar height */
  line-height: 27px;
}

To add buttons: add more <a class="nav-btn"> elements. For image-buttons use an <img> inside the anchor or apply a CSS background per button (sprites are best for performance). If your bar graphic is a fixed image, set .nav-inner width to that image width and center with margin: 0 auto; if it should repeat horizontally, use background-repeat: repeat-x.

Debugging tips: validate markup with the W3C validator, inspect computed box sizes with browser devtools, and remove deprecated tags. Floats will work for quick side-by-side layout, but Flexbox is simpler and more robust today — see MDN on Flexbox for details: Flexbox basics. To mark the thread solved, follow 's advice and click "Mark this thread as solved" under "Has this thread been answered?"

Recommended Answers

All 7 Replies

Member Avatar for Ezzaral

> and can someone also tell me how to make a topic go to solved?
You can click the "Mark this thread as solved" link under the heading "Has this thread been answered?" heading at the bottom of the thread.

Member Avatar for floatingDivs

Tables are NOT the way to go. Learn how to create websites with divs. They'll make your life a lot easier and the troubleshooting (if there is any) will be a breeze compared to tables (in my opinion).

However, if you do decide to stick with a table layout, consider using padding and margin to "align" the bar with the navigation menu.

Member Avatar for Rajib Ganguly

Correct alignment needs properly tagged element also please check the html where some tag is not closing properly

Member Avatar for kylestudent

Tables are NOT the way to go. Learn how to create websites with divs. They'll make your life a lot easier and the troubleshooting (if there is any) will be a breeze compared to tables (in my opinion).

However, if you do decide to stick with a table layout, consider using padding and margin to "align" the bar with the navigation menu.

ive been looking at the <div> tag, i know how to to align it center left or right but the one thing i would like to know is how to place things side by side like put a content box and then a facebook page like button embedded beside it if you know what i mean?

Member Avatar for floatingDivs

ive been looking at the <div> tag, i know how to to align it center left or right but the one thing i would like to know is how to place things side by side like put a content box and then a facebook page like button embedded beside it if you know what i mean?

I think the CSS style you want to use is float.

Member Avatar for kylestudent

I think the CSS style you want to use is float.

alright ill look into it thanks :)

Member Avatar for techRobo

Nice solution.
good work... like it...

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.