Loading ...
Sorry, an error occurred while loading the content.

Re: [HTML-on-the-WEB] I've now uploaded some pages - please take a look

Expand Messages
  • Thomas Hruska
    ... You have img tags as backgrounds instead of using CSS background among other problems. As I mentioned before, relative and absolute positioning are a
    Message 1 of 7 , Nov 19, 2012
    • 0 Attachment
      On 11/19/2012 5:30 AM, Bert Coules wrote:
      > I've temporarily uploaded two pages in the hope that it might help someone here solve a puzzle for me. If you've a moment to take a look, I'd be grateful.
      >
      > The problem is with the padding-bottom value of the area main_panel. This is set to 200px in the css file. And for this page, it works perfectly:
      >
      > http://tinyurl.com/d2m837m
      >
      > However, for this page:
      >
      > http://tinyurl.com/d2j4w52
      >
      > it doesn't.
      >
      > Apart from the text and the images, the coding for the two html files is identical. It's the amount of text in the nested panel which makes the difference: clearly something happens to the main_panel padding when the text panel reaches a certain height.
      >
      > Can anything be done about this? Many thanks.

      You have 'img' tags as backgrounds instead of using CSS 'background'
      among other problems. As I mentioned before, relative and absolute
      positioning are a nightmare to work with. I'm not sure how to fix the
      problem other than starting over.


      Looking at the page from a high-level perspective, here's what I would do:

      1) Main background image of Holmes holding pipe and main content area.
      A background image and simply doing a 'margin-left: 216px;' on a 'div'
      should be sufficient.

      2) The header is floated left. No need to do this since the parent div
      will already be aligned properly. Just apply some margins to the
      header. One issue you might want to consider: You've isolated letters
      in each word of Sherlock Holmes such that SEO might be an issue
      (S+herlock and H+olmes).

      3) You appear to want a black border and then a dull yellow green
      border on the main area. I would use 'border' and two divs to
      accomplish that. 'outline' is mostly used for inline elements (e.g. the
      dotted border around clicked anchor tags) and it isn't included in
      dimension calculations, which will cause problems. On the outer div,
      use 'margin-bottom: 100px; border: medium solid #666600;' (although you
      should prefer figuring out all padding and margins in 'ems' and I prefer
      pixels for borders instead of arbitrary measurements). To use the
      background image, 'float' and 'width' on the inner div as you are doing
      now, adjusting the width of the div by the size of the black border if
      you need it to be super-exact. Add a third div inside the second div
      and apply 'margin-bottom: 200px;' to it - you could also apply padding
      here so all the elements that will reside within won't have to specify
      it. You may need to add an empty div that does a '<div style="clear:
      both;"></div>' to the end of the third div to get the appropriate
      padding and margins to apply.

      4) The menu bar appears at the end of the content and is absolutely
      positioned to the beginning of the page. I understand what you are
      doing here (attempting SEO to move the body content higher), but it is
      going to be a lot less messy to just apply some margins to the menu and
      move the HTML to the top of the main content area.

      5) What remains is a two-column layout. There are two ways to do this:
      'float' and 'width' with 'clear: both' at the end or Holy Grail using
      a lot of hard to follow CSS ('left', 'right', etc.) but guarantees
      things like equal column height and the ability to position content
      before sidebars. I have 13 Holy Grail wireframe layouts in Barebones
      CMS that can easily be extracted but I've found digging around using
      Firebug to figure out how they work can be a nightmare. Until you get
      comfortable enough with CSS, I say avoid the 'position' keyword - most
      designs can be done without it and without hacks. So, two divs:
      'float: left; width: 500px; margin-right: 10px;' (left panel) and
      'float: left; width: 250px;' (right panel). You may have to adjust for
      the borders. Watch for visual overlap by a few pixels in Firebug. The
      'float' keyword was never meant to be used for design and layouts, so
      always keep that in mind that using it is playing with fire. The fewer
      uses of 'float' that you have, the better off you'll be.

      6) Inside the left panel div, add a div that gets the 'background' and
      'padding' applied to it.

      7) The right panel contains multiple photos and names. Each one of
      those should be wrapped with a div that uses a CSS class with simple
      margins and padding.

      IMO, your CSS will look a LOT cleaner, be more maintainable, and be more
      reliable. I don't have a fix for your problem other than to redo it. I
      dug around in Firebug for a while and decided it wasn't worth the effort.


      One other thing: Consider using PHP. You can write a 'header.php' and
      'footer.php' file that do nothing more than contain HTML. Then you
      include the header and footer files on your individual pages. The
      content is the bulk of the logic on each page and making changes to the
      entire site becomes a lot easier - just make one change in one spot in
      the header or footer and the entire site updates instead of having to
      make a lot of changes across a lot of files.


      While this design is an improvement over your current site, it says
      "1999" to me, not 2012. Which, given the age of the show, I suppose is
      fine as long as you are fine with it. The "repeating paper" background
      used for the body content is really old-school. I also see JPEG
      compression artifacts all over the place. There might not be anything
      you can do about that though, but if you can get PNGs to be just as
      small in file size without any artifacts, all the better.

      --
      Thomas Hruska
      CubicleSoft President

      Barebones CMS is a high-performance, open source content management
      system for web developers operating in a team environment.

      An open source CubicleSoft initiative.
      Your choice of a MIT or LGPL license.

      http://barebonescms.com/
    • Bert Coules
      Thomas, Many thanks for all that: I m grateful to you for taking the time to look and to comment so thoroughly. It s back to the drawing board, obviously. ...
      Message 2 of 7 , Nov 19, 2012
      • 0 Attachment
        Thomas,

        Many thanks for all that: I'm grateful to you for taking the time to look and to comment so thoroughly. It's back to the drawing board, obviously.

        > ...it says "1999" to me, not 2012.

        And that, as you suspected, is fine with me, though I might well remove the paper-texture background as I haven't been fond of that ever since I first tried it.

        > I also see JPEG compression artifacts all over the place.

        That surprises me a little. What screen size and resolution are you using? I thought that PNGs were recommended only for graphics.

        Bert
      • Bert Coules
        Thomas, ... So the the entire background would be a single image that s just plain black apart from the figure on the left? That s an approach I hadn t
        Message 3 of 7 , Nov 19, 2012
        • 0 Attachment
          Thomas,

          One immediate follow-up question, if I may:

          > 1) Main background image of Holmes holding
          > pipe and main content area.

          So the the entire background would be a single image that's just plain black apart from the figure on the left? That's an approach I hadn't considered (obviously) because I was under the impression that whole-background images were not a good idea because of loading speed and similar issues.

          Assuming that I've understood you correctly, this points up a difficult I've found: of getting reliable and above all up-to-date advice. Practices and methods obviously change with time, and much of the online unformation seems to be quite old-hat or contradictory.

          OK: I'll investigate whole-background images and the best way to handle them.

          Bert
        • Bert Coules
          Thomas, Sorry to have been so long in responding to your extremely detailed help. I ve started again from scratch following your guidelines and the coding
          Message 4 of 7 , Nov 28, 2012
          • 0 Attachment
            Thomas,

            Sorry to have been so long in responding to your extremely detailed help. I've started again from scratch following your guidelines and the coding does seem to be much cleaner and neater, as you predicted.

            One thing: you say

            > One issue you might want to consider: You've isolated letters
            > in each word of Sherlock Holmes such that SEO might be an issue
            > (S+herlock and H+olmes).

            Would it be better, do you think, to make the heading an image? Do search engines pick up on the alt titles of images tagged as headings if there is no actual text heading for them to latch onto?

            Many thanks.
          • Bas van Hoorn
            ... If you want the capitals to stand out, there s also a CSS :first-letter pseudo-element. The heading must be a block-level element for it to work, though.
            Message 5 of 7 , Nov 28, 2012
            • 0 Attachment
              >> One issue you might want to consider: You've isolated letters
              >> in each word of Sherlock Holmes such that SEO might be an issue
              > >(S+herlock and H+olmes).

              > Would it be better, do you think, to make the heading an image?
              > Do search engines pick up on the alt titles of images tagged as
              > headings if there is no actual text heading for them to latch onto?

              If you want the capitals to stand out, there's also a CSS :first-letter
              pseudo-element. The heading must be a block-level element for it to work,
              though.
            • Bert Coules
              ... I m not familiar with that; I ll look into it. Thanks.
              Message 6 of 7 , Nov 29, 2012
              • 0 Attachment
                > If you want the capitals to stand out, there's
                > also a CSS :first-letter pseudo-element.

                I'm not familiar with that; I'll look into it. Thanks.
              Your message has been successfully submitted and would be delivered to recipients shortly.