Announcement

Collapse
No announcement yet.

Text wrap around image?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Text wrap around image?

    On my portfolio website i want to have a picture on the home page and have text wrap around it and i cant for the life of me get it to work!

    im at work now so i dont know the exact code i have but its something like

    <img src="picture.jpg" alight="left" border="" width="" (and so forth) so does the text i want to wrap around the picture go right here? />

    I tried putting it there, but it doesnt do anything, it goes right over the image, I tried putting it outside the closing brackets but that doesnt work either. I also have the image in its own div.. would that affect it at all? any help would be appreciated

  • #2
    It might help in this case if you post an image. Are you aligning the image to the left or right of the document? centering it?

    Only information relating to the image should go in the image tag: src, height, width, border, alignment, alt.
    Professional Pixel Pusher — Designing the world around you. | Working daily to reach 10,000 hours of practice.

    Comment


    • #3
      No, the text shouldn't be inside the img tag. If the image is in it's own div, then you need to float the div containing the image in order to get the text outside to wrap around it.

      Digi
      The world is divided into people who think they are right.
      —Anonymous

      Comment


      • #4
        Originally posted by digizan View Post
        No, the text shouldn't be inside the img tag. If the image is in it's own div, then you need to float the div containing the image in order to get the text outside to wrap around it.

        Digi
        sounds like a sure way to develop div-i-tit-is though!

        usually with every site i do, i put a couple 'master' styles inside eric meyers reset. one of them is a class named left

        example:

        CSS:
        .left { padding: 0 7px 7px 0; }
        .right{ padding: 0 0 7px 7px; }

        once you have those, you can simply apply that class to anything you want to float left or right.

        example of your content:

        <div id="content">
        <p>
        <img src="imagepathhere.jpg" alt="alternative text here" class="left" />
        Text text text text text!
        </p>
        </div>

        Comment


        • #5
          Originally posted by kevincdg View Post
          sounds like a sure way to develop div-i-tit-is though!
          Yes, it's definitely a prescription for divitis.

          To clarify: I wasn't recommending that the OP use a div. Since he didn't even know that he shouldn't be putting the text he wants to wrap inside the <img> tag, I figured that talking about CSS and other best practices would be pointless, ergo I told him to simply float the div that he said he was already using for the image.

          Sadly, I'm learning not to waste too much time giving new members comprehensive answers as many of them never come back to read them—or so it seems, since they often don't even bother to acknowledge that you've made an effort to help them.

          Digi
          The world is divided into people who think they are right.
          —Anonymous

          Comment


          • #6
            yea, i see what you mean, but that doesn't mean it's bad. i can't say how many times i've searched through the forums and found an answer that someone else asked and someone else answered, even if the OP never bothered to thank them.

            figure it's better to take the time to answer if you have it and maybe someone else down the line will get use of it =)

            Comment


            • #7
              Originally posted by kevincdg View Post
              figure it's better to take the time to answer if you have it and maybe someone else down the line will get use of it =)
              True that.

              Digi
              Last edited by digizan; 10-03-2009, 04:46 PM.
              The world is divided into people who think they are right.
              —Anonymous

              Comment


              • #8
                Originally posted by kevincdg
                usually with every site i do, i put a couple 'master' styles inside eric meyers reset. one of them is a class named left
                Although it may make life easier introducing presentational naming into the structure of document introduces presentation into what should only be structural.

                In my option .left and .right is just as bad as .red,.blue,.yellow,.color-000,.font-12-helvetica-red,.style-2,etc.
                Last edited by tZ; 10-03-2009, 05:19 PM.

                Comment


                • #9
                  i've found it especially useful when working with CMS's systems, whether it's open source or a developers own that incorporates an FCKeditor. the problem with those, is that they rely off the class name when selecting a style. it mainly simplifies the clients life, as well as the training for non savvy people when they can select 'left' from a dropdown menu and apply it to their image if they'd like to float it to the left.

                  i can't remember the last site i've worked on that wouldn't include a CMS. my goal is to make the site as functional and semantic as possible, while trying to keep it so the client can update their site as easily as possible as well.

                  it'd be nice if we only had to appeal to one things, but there are several different audiences with every site that we must keep in mind -- something where i think presentational naming can help (in extreme moderation, of course).

                  open to better ideas and solutions also

                  Comment


                  • #10
                    The reality is that packages such as FCKEditor and Tinymce use inline and presentational naming to achieve their goals. I understand and accept this. However, you should avoid it for non user controlled areas of content.

                    Comment


                    • #11
                      When ideals get in the way of practicality it's ok to ignore them. Not every page has to be perfect.

                      Personally I use the class "inset" and don't deal with many sites with owner or user-generated content, so all the insets go to either the right or left. The bigger deal is calling a right-hand navigation and left-hand content "right" and "left" and having someone come back and put the navigation on the left.

                      And I could give two craps about "divitis." If there's a logical tag to use, use it. If not, don't freak out. A lot of the semantic naming ideal falls apart when you're organizing content in the main body of the site, as opposed to the outer "frame".
                      Swedish Meatball Pornography

                      Comment


                      • #12
                        I'm just starting to get into CSS, but creating a class just for image padding tends to work well for me.

                        Comment

                        Search

                        Collapse

                        Advertisement

                        Collapse

                        Latest Topics

                        Collapse

                        • PrintDriver
                          Reply to Text only printer?
                          PrintDriver
                          If you want your letter to get through the mail without melting in the rain, you might lean more toward laser. But check before you buy that the stock you want to use will make the turn through the fuser....
                          Today, 06:11 AM
                        • corabict
                          Comment on Classrom Ads Projects
                          corabict
                          That;s true and it's sensible, but it's hard because for someone that's not a pro or a beginner as myself doing good design is accidental , there's always a room for improvement. So when he gets no feedback...
                          Today, 03:10 AM
                        • schteeeeve
                          Reply to Text only printer?
                          schteeeeve
                          Hey PD. Cheers for replying. I posted the above a tad tired so I'll try to clear up your questions...

                          So about the purpose of the machine. It's only job really is to make sure that letters...
                          Today, 02:42 AM
                        • B
                          Reply to Help Recreating this Type of Graphic: Any software suggestions
                          B
                          My definition of data visualization is just that, the visualization of data. This could be anything from a simple Excel pie chart to something as elaborate as what the OP posted. I don't know how you've...
                          Today, 12:29 AM
                        • bigdata
                          Reply to Help Recreating this Type of Graphic: Any software suggestions
                          bigdata
                          Apologies for taking this much of the OP's thread and I get what you guys are saying.

                          But data visualization is about the flow of data from there to there.

                          The examples posted...
                          Yesterday, 10:28 PM

                        GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright © 2016 Mediabistro Holdings
                        Working...
                        X