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

7326Re: [NH] Position Image Using CSS

Expand Messages
  • M Peloquin
    Nov 20, 2013
    • 0 Attachment
      I use the float right style often on the library web site.  You can use this easily and inline just in case you don't want all images to float right as you would if you use the instance you have below.  Here is an example page (http://library.austincc.edu/gen-info/ACC-ID-about.php) and here is some partial code that places the image.


      <img src="wordle-white-SVC2-185.png" border="0" alt="Services and Programs" style="float:right;margin-top:40px;border: 1px solid silver; margin-left: 30px;"/>

      <h2>Why Do I Need an ACC ID Card? </h2>
      <p>&nbsp;</p>
      <div class="innertube" id="oneColContent">
      <div>
        <h3 class="style4">It's Required </h3>
        <ul><li>A current <strong>ACC ID</strong> proves that you are an enrolled  student or faculty/staff member and are therefore eligible to check out  material and use the Computer Center.</li>
          </ul>
        <h3><span class="style4">It's Fast</span></h3>
        <ul>
          <li>Over 700,000 people visit the ACC Libraries and over 330,000 items are checked  out each year. The best means of making this process fast, safe, and efficient is through the use of the ACC ID card. </li>
        </ul>


      On 11/20/2013 4:35 AM, Ray Shapp wrote:
       
      Hi Wayne,

      Thanks for the reply.

      I took your advice and looked up "float", and found a good example at http://www.w3schools.com/css/css_float.asp

      The code below works on that website, and, although I haven't tried it on my site, it looks like it will work for me. 


      <!DOCTYPE html>
      <html>
      <head>
      <style>
      img
      {
      float:right;
      }
      </style>
      </head>

      <body>
      <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
      <p>
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      <img src="logocss.gif" width="95" height="84" />
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      </p>
      </body>

      </html>

      Thank you for your help.

      Ray Shapp
      ---


      On Wed, Nov 20, 2013 at 3:48 AM, Wayne VanWeerthuizen <waynemv@...> wrote:
       

      I think what is to put the img tag in the middle of the group of paragraphs. Then style it with "float: right"



      On 11/19/2013 11:27 PM, Ray Shapp wrote:
      >
      >
      > Hi Group,
      >
      > Please tell me how to write an in-line CSS style that will allow me to specify where an image will appear on a page of text. All my attempts put the image either totally above or totally below the text.
      >
      > The page has six brief paragraphs which are each enclosed in <p> </p> tags. The photo is about 1/3 of the page width, and I would like it to sit flush with the right margin and let the text wrap above, below, and along the left side of the photo. In subsequent revisions, the amount of text might grow a little. Ideally, I'd like to specify that the top of the image appear about 1/4 of the way down from the top of the text. This is easy to do in a Word document, but I haven't been able to mark up a web page successfully.
      >
      > Many thanks for your help.
      >
      > Ray Shapp

      _



      -- 
      
      ++++++++++++++++++++++++++++++++++++++++++++++++++++
      The shortest distance between two points in always
      under construction.
      ++++++++++++++++++++++++++++++++++++++++++++++++++++
      Margaret Peloquin, Head Librarian, Professor - EVC
      Austin Community College - Austin, Texas
      512.223.5117 || Fax: 512.223.5111
      peloquin@... || http://library.austincc.edu
      
    • Show all 26 messages in this topic