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

I've now uploaded some pages - please take a look

Expand Messages
  • Bert Coules
    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
    Message 1 of 7 , Nov 19, 2012
      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.
    • 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 2 of 7 , Nov 19, 2012
        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 3 of 7 , Nov 19, 2012
          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 4 of 7 , Nov 19, 2012
            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 5 of 7 , Nov 28, 2012
              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 6 of 7 , Nov 28, 2012
                >> 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 7 of 7 , Nov 29, 2012
                  > 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.