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

7328Re: [NH] Position Image Using CSS

Expand Messages
  • Mick Housel
    Nov 20, 2013
      If you are using this on only one specific page with a single photo then
      you can use the id attribute to make sure it only applies to one
      specific item. Code would be similar to this :
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      #imgname
      {
      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.
      <img id="imgname" 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.
      This is some text. This is some text. This is some text.
      </p>
      </body>

      </html>

      Hope this helps a bit. A simple way to view an id as opposed to using a
      class is id is for a single item in a page/site while classes cover
      multiple items with the same traits.

      Mick

      On 11.20.13 02: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@...
      > <mailto: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
      >
      > _
      >
      >
      >
      >
      >
    • Show all 26 messages in this topic