1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

HTML Problem with banner

Discussion in 'Web Development' started by navyfalcon, Sep 25, 2010.

  1. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Problem with Banner.
    How do I change the code so the menu centers itself with the right side and is up so it is even with the bottom of the picture, or a little higher.
    Changing the page a little per suggestions from website review
    Just the banner is shown below and the banner code
    -
    Thank You
    falcon

    http://freetutorials.name/Reference1/ABMath.html
    -
    AAMath Banner

    <dl><!--========== Banner ==========-->
    <dd>
    <div id="header">
    <img src="../Images/Back to School.jpg" width="300" height="250" align="left" alt="students">
    <center><h2>AAMath with Formulas</h2></center>
    <p>&nbsp;Algebra: &nbsp;3-D &amp; 2-D Geometric shapes. Calculator; Volume &amp; Surface Area for 3-D shapes. And
    calculates Area for 2-D figures
    </p>
    <br><br>
    <p><a id="articlelink" href="../Reference1/Virtual TI Emulator.html">articles</a>
    <a id="homelink" href="../index.html">home</a>
    <div class="pd_menu_01">
    <ul>
    <ul><li><a href="/">MENU 1</a>
    <ul>
    <li><a href="#outline">Program Outline</a></li>
    <li><a href="#program">Program Listing</a></li>
    <li><a href="#cmds">Reference Commands</a></li>
    <li><a href="#screenshots">TI-83/84 Screenshots</a></li>
    <li><a href="#links">Reference Links</a></li>
    <li><a href="#calc">Online Calculator</a></li>
    </ul>
    </li></ul>
    <ul><li><a href="/">MENU 2</a>
    <ul>
    <li><a href="#area">Area Tutorial</a></li>
    <li><a href="#math">Math Resources</a></li>
    <li><a href="Virtual TI Emulator.html">TI 83/84 Emulator</a></li>
    <li><a href="Algebra Solutions.html">Algebra Solutions</a></li>
    <li><a href="AreaVol.html">AreaVol</a></li>
    <li><a href="Figure.html">Figure</a></li>
    <li><a href="Geometric shapes.html">Geometric shapes</a></li>
    </ul>
    </li>
    </div></p><br><br>

    </div>
    </dd>
    </dl>
     
    navyfalcon, Sep 25, 2010
    #1
  2. enigma1

    enigma1 New Member

    You need to revise the html/css and fix errors etc. Here is a sample of code, I used some of the I-Metrics CMS styles.

    Code:
    <!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" dir="ltr" lang="en">
<head>
<style type="text/css">
body {font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #333333; margin:0; padding:0; }
div { position: relative; margin:0; padding:0; }
.floater { float:left; }
.wider { width: 100%; }
.bounder { width: 100%; height: 100%; overflow:hidden; }
.balancer {margin: 0px auto 0px auto;}
</style
</head>
<body bgcolor="#FAEBD7">
  <div class="wider">
    <div class="floater">
      <img src="image.jpg" width="300" height="240" align="left" alt="math calcuator">
    </div>
    <div>
      <h2>AAMath with Formulas</h2>
      <p>&nbsp;Algebra: &nbsp;3-D &amp; 2-D Geometric shapes. Calculator; Volume &amp; Surface Area for 3-D shapes. And
         calculates Area for 2-D figures
      </p>
      <div class="bounder balancer" style="width: 400px;">
          <ul><li><a href="/">MENU 1</a>
            <ul>
              <li style="text-align: left;"><a href="#outline">Program Outline</a></li>
              <li><a href="#program">Program Listing</a></li>
              <li><a href="#cmds">Reference Commands</a></li>
              <li><a href="#screenshots">TI-83/84 Screenshots</a></li>
              <li><a href="#links">Reference Links</a></li>
              <li><a href="#calc">Online Calculator</a></li>
            </ul>
          </li></ul>
          <ul><li><a href="/">MENU 2</a>
            <ul>
              <li><a href="#area">Area Tutorial</a></li>
              <li><a href="#math">Math Resources</a></li>
              <li><a href="Virtual TI Emulator.html">TI 83/84 Emulator</a></li>
              <li><a href="Algebra Solutions.html">Algebra Solutions</a></li>
              <li><a href="AreaVol.html">AreaVol</a></li>
              <li><a href="Figure.html">Figure</a></li>
              <li><a href="Geometric shapes.html">Geometric shapes</a></li>
            </ul>
          </li></ul>
      </div>
    </div>
  </div>
</body>
</html>
    You need to apply your menus and setup the html for the various paths you use. But the idea is to use a 100% document centering the div that contains the menu using a fixed width div under the text on the right. So the outer div sets up the document to 100% with the wider class.

    Two divs follow, the first contains only the image floated, the 2nd the text and menu on the right. The div with the menu is under the text on the right and uses a fixed width and the balancer to center it horizontally.

    As you resize the document the right side may end up under the picture as the viewport is reduced. When you increase the viewport the menu is centered on the right side.

    See if you can apply it to your document.
     
    enigma1, Sep 26, 2010
    #2
  3. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Leave it to enigma1 to always come up with an answer and a complete understandable explanation. enigma1 You should be writing and selling books or at the least Small chapters in a ebook form. You really do have a readable style.
     
    ishkey, Sep 26, 2010
    #3
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member

    I agree with the ebook. Many out there but few with real knowledge.
    A book on hints and tips for HTML and CSS.
    -
    Thank You
    falcon
     
    navyfalcon, Sep 26, 2010
    #4