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

CSS alignment query: how can I do this?

Expand Messages
  • Bert Coules
    I m slowly getting to grips with using CSS but I ve run up against a brick wall with this (and searching onlin for a solution has sp far proved only
    Message 1 of 11 , Nov 2, 2012
    View Source
    • 0 Attachment
      I'm slowly getting to grips with using CSS but I've run up against a brick wall with this (and searching onlin for a solution has sp far proved only confusing).

      My site uses a common layout for all the pages. One element is a main display area, the content of which changes from page to page, while everything outside this area remains the same. This area is defined in style.css as "content_main". This is the code I'm using, exactly as in the template I downloaded:

      #content_main
      {
      background-image:url(images/main_back.png);
      background-repeat:repeat-y;
      width:659px;
      padding-left:15px;
      padding-right:15px;
      }

      On one page I want to set up, in this area, a small array of images, three across, each with a word or two underneath. I tried this:

      <img src="pic_one.jpg" style="width: 30%"; alt="one" />
      <img src="pic_two.jpg" style="width: 30%";" alt="two" />
      <img src="pic_three.jpg" style="width: 30%";" alt="three" />

      and so on (pic_four, pic_five, etc...).

      This gives me the images in the layout I want, but I can't work out three things:

      How to centre the array in the display area.

      How to put some vertical and horizontal space between the pictures.

      How to put a word or two of text underneath each image.

      If anyone can point me to a solution I'd be very grateful.

      Many thanks.
    • Bert Coules
      A couple of surplus marks got into my previous post. Sorry about that, but it should be pretty obvious which they are. Bert
      Message 2 of 11 , Nov 2, 2012
      View Source
      • 0 Attachment
        A couple of surplus " marks got into my previous post. Sorry about that, but it should be pretty obvious which they are.

        Bert
      • kemark9
        To your CSS sheet add the following: .left { float: left; width: auto; margin-right: 10px; } .right { float: right; width: auto; margin-left: 10px; } .center {
        Message 3 of 11 , Nov 2, 2012
        View Source
        • 0 Attachment
          To your CSS sheet add the following:

          .left {
          float: left;
          width: auto;
          margin-right: 10px;
          }

          .right {
          float: right;
          width: auto;
          margin-left: 10px;
          }

          .center {
          display: block;
          text-align: center;
          margin: 20px auto;

          Then use <span class="left"><img src="pic_one.jpg" style="width: 30%"; alt="one" /></span><span class="center"><img src="pic_two.jpg" style="width: 30%";" alt="two" />
          </span><span class="right"><img src="pic_three.jpg" style="width: 30%";" alt="three" /></span>

          Use the same spans to line up your text underneath.

          You could also use a table to do this and set the <td class="left"> etc.

          Margaret



          [Non-text portions of this message have been removed]
        • Bert Coules
          Margaret, many thanks for that; I ll give it a go. Interesting that you say I could use a table. I do in fact know how to do that but I thought the technique
          Message 4 of 11 , Nov 2, 2012
          View Source
          • 0 Attachment
            Margaret, many thanks for that; I'll give it a go.

            Interesting that you say I could use a table. I do in fact know how to do that but I thought the technique was rather frowned on these days in favour of CSS-based coding. Is it really so bad to use tables for layout?

            Bert
          • Bert Coules
            Margaret, For some reason, your suggestion isn t working. I can see exactly why it should work and I copied your coding precisely, but it s having no effect.
            Message 5 of 11 , Nov 2, 2012
            View Source
            • 0 Attachment
              Margaret,

              For some reason, your suggestion isn't working. I can see exactly why
              it should work and I copied your coding precisely, but it's having no
              effect.

              I tried experimenting with just one image in a row, positioning it first
              left then right then centre. Nothing happened: it just remained at the
              left hand margin of the display area. And I remembered that in a much
              earlier attempt (with text rather than images) I couldn't get "align" to
              work in that area either.

              So I assume there must be some other bit of code which is over-riding
              these commands. I can't see yet what it might be but I'll investigate
              further.







              [Non-text portions of this message have been removed]
            • Bert Coules
              I think I found the culprit. In the style sheet appears this: * { margin: 0 auto 0 auto; text-align: left; } I didn t understand the significance of the
              Message 6 of 11 , Nov 2, 2012
              View Source
              • 0 Attachment
                I think I found the culprit. In the style sheet appears this:

                *
                {
                margin: 0 auto 0 auto;
                text-align: left;
                }

                I didn't understand the significance of the asterisk (at first I thought it was left over from a "remark" line which had been deleted and wasn't doing anything) but when I looked it up I discovered that it makes the statement that follows apply universally within that section.

                I tried removing those lines. The image positioning immediately worked. Unfortunately, all my other pages, which were aligned left (where I wanted them) then became centred.

                So clearly I have to nullify that align-left command just for my page of images. I'm going to try defining the images and their text as a separate <div></div> section and finding the appropriate code to stop the alignment.

                Let's see how that might work...
              • Bert Coules
                Well, I ve given up for tonight and to make myself feel better I ve written the page using table tags. The layout is exactly what I wanted, the coding isn t
                Message 7 of 11 , Nov 2, 2012
                View Source
                • 0 Attachment
                  Well, I've given up for tonight and to make myself feel better I've written the page using table tags. The layout is exactly what I wanted, the coding isn't particularly clumsy, complicated or difficult to follow, and to be frank I can't see what's wrong with doing it that way.

                  But I'd still like to find out where I was going astray before.
                • kemark9
                  Bert -- tables always have a place in content display. While frowned upon now for the entire page (unless it s an entire page of data), what you re describing
                  Message 8 of 11 , Nov 3, 2012
                  View Source
                  • 0 Attachment
                    Bert -- tables always have a place in content display. While frowned upon now for the entire page (unless it's an entire page of data), what you're describing doing with your images certainly lends itself to using a table.

                    Margaret

                    [Non-text portions of this message have been removed]
                  • Bert Coules
                    Margaret, thank you. I am reassured and will continue on my tabular path. Bert
                    Message 9 of 11 , Nov 3, 2012
                    View Source
                    • 0 Attachment
                      Margaret, thank you. I am reassured and will continue on my tabular path.

                      Bert
                    • Thomas Hruska
                      ... Purists would say this is the wrong approach, especially with mobile devices with narrow screens becoming a prominent part of web design these days. When
                      Message 10 of 11 , Nov 3, 2012
                      View Source
                      • 0 Attachment
                        On 11/3/2012 8:20 AM, Bert Coules wrote:
                        > Margaret, thank you. I am reassured and will continue on my tabular path.
                        >
                        > Bert

                        Purists would say this is the wrong approach, especially with mobile
                        devices with narrow screens becoming a prominent part of web design
                        these days. When you develop first for mobile websites, you start
                        changing the entire design from the ground up such that things like this
                        aren't really an issue.

                        I, personally, am completely against CSS resets. They always find
                        inopportune times to interfere with the way a page has been designed,
                        which you just discovered and will encounter again and again and again
                        until you stop using them. The !important keyword is also a hack - if
                        you ever have to use it, you are doing it wrong. The correct way to do
                        CSS is to use a CSS hierarchy and is a lot less painful to use that way.
                        It is a little more verbose, but entire projects have been created
                        involving laziness around the concept of writing CSS correctly (e.g.
                        SCSS - I don't recommend using SCSS since it is easier to write the CSS
                        hierarchy out).

                        What is the correct approach? To be honest, a table works rather well
                        for grouping objects and centering the whole lot. Fire and forget. It
                        might be better to find a way to avoid centering stuff in the first
                        place. Good mobile designs tends to scale well to desktop layouts.

                        Anyway, just a few thoughts to mull over. The table is fine. Don't
                        feel like you have to go back and wrestle with it. Something for next
                        time though.

                        --
                        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, thanks for that. I am now doubly reassured. It seemed to me as I was writing the page using tables that the process was far quicker and cleaner
                        Message 11 of 11 , Nov 3, 2012
                        View Source
                        • 0 Attachment
                          Thomas Hruska wrote:

                          > To be honest, a table works rather well
                          > for grouping objects and centering the whole lot.
                          > Fire and forget.

                          Thomas, thanks for that. I am now doubly reassured. It seemed to me as I was writing the page using tables that the process was far quicker and cleaner than it would be with CSS (though of course that could well be because I know tables and I'm still getting to grips with CSS) and the final code isn't particularly clumsy or difficult to follow and above all does what you tell it to.

                          So I'll carry on.

                          Mobile phones, pads and the like... I've very little experience of them as a user so it's tricky to think in terms of their specific design needs. But I take your point, of course. For now I want to get the site up and running again; a mobile-friendly rethink can come later.

                          Bert
                        Your message has been successfully submitted and would be delivered to recipients shortly.