HTML Image Alignment

Discussion in 'HTML' started by RigasMinho, Oct 23, 2006.

  1. RigasMinho

    RigasMinho Guest

    Hello,
    I have this issue where somehow i want the first image to be placed all
    the way on the left part of the screen.

    While the 2nd image has to be placed a little bit to the right side of
    the left margin.

    I cant seem to get it to work:
    <body style="margin-left:50;margin-right=50" >
    <img src="test.GIF" />
    <img src="test2.jpg" />

    If i change teh body style to "margin-left:0;
    then it aligns both pictures to the left.

    I only want the first picture aligned to the left but cant get the
    second picture to align someplace else.

    Any ideas?
     
    RigasMinho, Oct 23, 2006
    #1
    1. Advertising

  2. RigasMinho wrote:
    > Hello,
    > I have this issue where somehow i want the first image to be placed all
    > the way on the left part of the screen.
    >
    > While the 2nd image has to be placed a little bit to the right side of
    > the left margin.
    >
    > I cant seem to get it to work:
    > <body style="margin-left:50;margin-right=50" >

    #1 50 what? With CSS you must specify the *units* for most lengths, 50px
    a assume?

    > <img src="test.GIF" />
    > <img src="test2.jpg" />


    #2 images are inline not block element by default so by your markup
    test2.jpg would follow to the right of test.GIF


    >
    > If i change teh body style to "margin-left:0;
    > then it aligns both pictures to the left.
    >
    > I only want the first picture aligned to the left but cant get the
    > second picture to align someplace else.


    Yes, give it a different style, In HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/stylesheet">
    BODY { margin: 0 50px; }
    .hugLeft { margin-left: -50px; }
    .offsetLeft { margin-left: 20px; }
    </style>
    </head>
    <body>
    <div class="hugLeft">
    <img src="text.GIF" alt="test1">
    Should hug the left side of window
    </div>
    <div class="hugLeft">
    <img src="text2.jpg" alt="test2">
    Should be 70px offset from side of window
    </div>
    <p>
    Standard 50px margin for page....
    </p>
    </body>
    </html>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 23, 2006
    #2
    1. Advertising

  3. RigasMinho

    dorayme Guest

    In article
    <>,
    "RigasMinho" <> wrote:

    > Hello,
    > I have this issue where somehow i want the first image to be placed all
    > the way on the left part of the screen.
    >
    > While the 2nd image has to be placed a little bit to the right side of
    > the left margin.
    >
    > I cant seem to get it to work:
    > <body style="margin-left:50;margin-right=50" >
    > <img src="test.GIF" />
    > <img src="test2.jpg" />
    >
    > If i change teh body style to "margin-left:0;
    > then it aligns both pictures to the left.
    >
    > I only want the first picture aligned to the left but cant get the
    > second picture to align someplace else.
    >
    > Any ideas?


    Is this no good?

    <div>
    <img src="unknown.gif" alt="test1">
    Should hug the left side of window
    </div>
    <div style="margin-left:70px;">
    <img src="unknown.gif" alt="test2">
    Should be 70px offset from side of window
    </div>

    --
    dorayme
     
    dorayme, Oct 23, 2006
    #3
  4. RigasMinho

    RigasMinho Guest

    Dorayme - your solution works thanks.

    I actually figured it out before your post but i appreciate your help.
    dorayme wrote:
    > In article
    > <>,
    > "RigasMinho" <> wrote:
    >
    > > Hello,
    > > I have this issue where somehow i want the first image to be placed all
    > > the way on the left part of the screen.
    > >
    > > While the 2nd image has to be placed a little bit to the right side of
    > > the left margin.
    > >
    > > I cant seem to get it to work:
    > > <body style="margin-left:50;margin-right=50" >
    > > <img src="test.GIF" />
    > > <img src="test2.jpg" />
    > >
    > > If i change teh body style to "margin-left:0;
    > > then it aligns both pictures to the left.
    > >
    > > I only want the first picture aligned to the left but cant get the
    > > second picture to align someplace else.
    > >
    > > Any ideas?

    >
    > Is this no good?
    >
    > <div>
    > <img src="unknown.gif" alt="test1">
    > Should hug the left side of window
    > </div>
    > <div style="margin-left:70px;">
    > <img src="unknown.gif" alt="test2">
    > Should be 70px offset from side of window
    > </div>
    >
    > --
    > dorayme
     
    RigasMinho, Oct 25, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nathan Sokalski
    Replies:
    2
    Views:
    456
    Eliyahu Goldin
    Jun 8, 2005
  2. Don@NoSpam

    Help with image/text alignment

    Don@NoSpam, May 30, 2004, in forum: HTML
    Replies:
    10
    Views:
    713
    Don@NoSpam
    Jun 2, 2004
  3. Adrian Bailey

    Image alignment

    Adrian Bailey, Apr 1, 2005, in forum: HTML
    Replies:
    2
    Views:
    504
    Nico Schuyt
    Apr 1, 2005
  4. Lukasz Indyk
    Replies:
    4
    Views:
    418
    Diez B. Roggisch
    May 17, 2004
  5. CRON
    Replies:
    5
    Views:
    404
Loading...

Share This Page