#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2009
    Posts
    2
    Rep Power
    0

    Menu images aren't seamless - wrap


    I am having issues with a horizontal menu bar. The menu is supposed to be created with 4 images seamlessly aligned, but I find that there is a 3px space between each when I load the page. This causes the width of the 4 images to exceed the specified width specified for that id and a wraparound occurs.

    Page: www .sjbcathedral. org/php/sample.php

    CSS:
    Code:
    body {
       height:100%; 
       max-height:100%; 
       padding:0; 
       margin:0; 
       border:0;
       background:url(../images/redbkgnd.jpg); 
       overflow:auto; 
       text-align:center;
    }
    
    img {border:0px; margin:0px; padding:0px;}
    
    #container {
      margin-left:auto;
      margin-right:auto;
      height:auto;
      text-align:left;
      width:995px;
      background:url(borderShadow2.png);
    
    #menuBar {
      width:905px
      height:35px
    }
    menuBar PHP:
    PHP Code:
    <div id="menuBar">

    <
    img src="menu1_MassTimes.jpg" ></img>
    <
    img src="menu2_OurSchool.jpg" ></img>
    <
    img src="menu3_OurClergy.jpg" ></img>
    <
    img src="menu4_ContactUs.jpg" ></img>

    </
    div
    I'm new around here and to webdesign in general...

    Thanks for the help!

    Best,
    Andrew
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Images are inline replaced elements, and that space is equivalent to word spacing. You could give #menuBar {word-spacing: -3px;}, or you could float the images.

    Images may not have a closing tag in html.

    Menus are, by definition, lists. That should be code as an unordered list.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2009
    Posts
    2
    Rep Power
    0
    The word-spacing worked. Also noticed I left off ' ; ' from two lines in menuBar.

    Excellent! Thank you!

    As far as unordered lists: Are you recommending that rather than just referencing the image locations in menuBar.php, I rewrite the code in ul format?

    Andrew
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    It would be more semantic; the structure would reflect reality. Look at the menus as I've marked them in my own site (link in sig).

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo