Beginner having problems with aligning gif's and text

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Lesjen
    New Member
    • Aug 2007
    • 5

    Beginner having problems with aligning gif's and text

    Hi all.
    I'v just started to learn/use css and at my first try I've got a little problem.

    I want picture.gif at the left, wrapped text in the middle, and picture.gif at the right.

    I've tried different css code after suggestions I found via google but not the right one.

    Will someone give me a hint on which way I should proceed?

    Thanks :-)
  • Death Slaught
    Top Contributor
    • Aug 2007
    • 1137

    #2
    Originally posted by Lesjen
    Hi all.
    I'v just started to learn/use css and at my first try I've got a little problem.

    I want picture.gif at the left, wrapped text in the middle, and picture.gif at the right.

    I've tried different css code after suggestions I found via google but not the right one.

    Will someone give me a hint on which way I should proceed?

    Thanks :-)
    I'm no CSS expert and i hate the langauge anyways i just learned enough to suit my person then i stay as far away as humanly possible but heres a link to w3schools you most likely can find your answer there. Good Luck!

    Thanks, Death Slaught

    Comment

    • Lesjen
      New Member
      • Aug 2007
      • 5

      #3
      Originally posted by Death Slaught
      I'm no CSS expert and i hate the langauge anyways i just learned enough to suit my person then i stay as far away as humanly possible but heres a link to w3schools you most likely can find your answer there. Good Luck!

      Thanks, Death Slaught
      Hi Dean.

      I've been there, read the tutorial but not been able to apply the suggested code to get the result I want.
      /Leslie
      Last edited by Lesjen; Aug 21 '07, 08:11 PM. Reason: Corrected a spelling error

      Comment

      • Death Slaught
        Top Contributor
        • Aug 2007
        • 1137

        #4
        Originally posted by Lesjen
        Hi Dean.

        I've been there, read the tutorial but not been able to apply the suggested code to get the result I want.
        /Leslie
        well i think i might have found a way to make it work but please explain what isnt working is it the pics or the text?

        Comment

        • Lesjen
          New Member
          • Aug 2007
          • 5

          #5
          Originally posted by Death Slaught
          well i think i might have found a way to make it work but please explain what isnt working is it the pics or the text?

          If you take a look at http://www.eskk.nu/leslie/ I think you'll see the problem.

          Comment

          • drhowarddrfine
            Recognized Expert Expert
            • Sep 2006
            • 7434

            #6
            Leslie,
            I'm glad to see you validated your html and css to make sure it was standard and compliant. You'd be surprised how many come here with problems yet have tens to hundreds of errors but wonder what is wrong.

            First, even though your doctype is valid, IE won't recognize it and go into quirks mode. I don't know why you commented out the second half but remove the comments to get the full tag line.

            Part of your problem lies with forgetting that images are inline elements and you cannot position inline elements because they are the same as a word in a paragraph, it can't be moved. So I suggest you look into taking those images out of the paragraphs and only let the <p> contain text. Then, float:left; the images to see if that's what you want.

            Another possibility is to make the images block level, that is, in CSS, display:block; Then they can be repositioned.

            Look into styling your images, the size, with CSS rather than html attributes.

            I am impressed with your html for being so new. At least you read the right book. :)

            Comment

            • Lesjen
              New Member
              • Aug 2007
              • 5

              #7
              Originally posted by drhowarddrfine
              Leslie,
              I'm glad to see you validated your html and css to make sure it was standard and compliant. You'd be surprised how many come here with problems yet have tens to hundreds of errors but wonder what is wrong.

              First, even though your doctype is valid, IE won't recognize it and go into quirks mode. I don't know why you commented out the second half but remove the comments to get the full tag line.

              Part of your problem lies with forgetting that images are inline elements and you cannot position inline elements because they are the same as a word in a paragraph, it can't be moved. So I suggest you look into taking those images out of the paragraphs and only let the <p> contain text. Then, float:left; the images to see if that's what you want.

              Another possibility is to make the images block level, that is, in CSS, display:block; Then they can be repositioned.

              Look into styling your images, the size, with CSS rather than html attributes.

              I am impressed with your html for being so new. At least you read the right book. :)
              Thanks for the nice words :-) I'll try to keep up the good work.
              I've now got the hang of it I think.
              But it looks a little weird in IE6, I've read about the problems with IE, any suggestions on how to adjust so it looks the same in Firefox and IE?
              /Leslie
              Last edited by Lesjen; Aug 21 '07, 10:24 PM. Reason: Solved the problem

              Comment

              • drhowarddrfine
                Recognized Expert Expert
                • Sep 2006
                • 7434

                #8
                I don't know what you mean by the "right" image. And do you mean you want your images to appear on the right but text on the left?

                Comment

                • Lesjen
                  New Member
                  • Aug 2007
                  • 5

                  #9
                  Originally posted by drhowarddrfine
                  I don't know what you mean by the "right" image. And do you mean you want your images to appear on the right but text on the left?
                  I got it right :-)
                  I moved the text below the pictures in the html document and then I used css code float: left and code float: right.

                  Another question!

                  Should I use one styles document for all my pages making sections or should each page have it's own?
                  /Leslie

                  Comment

                  • drhowarddrfine
                    Recognized Expert Expert
                    • Sep 2006
                    • 7434

                    #10
                    To maintain consistency across all pages, we usually keep one style sheet. If some pages need additional unique styling, for some reason, you can include it or use @import.

                    Comment

                    Working...