Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help the noob with positioning

    Please help the noob!

    I am having trouble getting images to position correctly with CSS/HTML.

    I want to position 3 photos (size 150x113) within a blank space to the right of a short paragraph.

    HTML Code looks like this (Strict DOCTYPE):

    <div class="roleimage1"><img src="placeholder.jpg" alt="placeholder"></div>
    <div class="roleimage2"><img src="placeholder.jpg" alt="placeholder"></div>
    <div class="roleimage3"><img src="placeholder.jpg" alt="placeholder"></div>

    <p>
    The companies are spread out around Melbourne:<br />
    <a href="headquarters.html"><span class="wep">Headquarters (HQ):</span></a> Hawthorn<br />
    <a href="acoy.html"><span class="wep">Alpha (A) company:</span></a> Sunshine<br />
    <a href="bcoy.html"><span class="wep">Bravo (B) company:</span></a> Surrey Hills<br />
    <a href="ccoy.html"><span class="wep">Charlie (C) company:</span></a> Sandringham<br />
    <a href="dcoy.html"><span class="wep">Delta (D) company:</span></a> McLeod<br />
    <a href="sptcoy.html"><span class="wep">Support (Spt) company:</span></a> Moonee Ponds<br />
    </p>

    First, I tried this CSS:

    .roleimage1 {
    float: right;
    width: 150px;
    }

    .roleimage2 {
    float: right;
    width: 150px;
    }

    .roleimage3 {
    float: right;
    width: 150px;
    }

    However, this shoved them all to the right hand side. Not what I wanted.

    Then I tried this:

    .roleimage1 {
    float: right;
    width: 150px;
    margin: 0 150px 0 0;
    }

    .roleimage2 {
    float: right;
    width: 150px;
    margin: 0 30px 0 0;
    }

    .roleimage3 {
    float: right;
    width: 150px;
    margin: 0 30px 0 0;
    }

    This puts them in the position I want, at 1024 x 768. But when you get to 800 x 600, it squashes everything up, and any higher it's too spaced out. How can I get the images to stay evenly spaced, slightly left of the centre, and work in different resolutions using CSS? Help me, please!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link / screen shot?

    It would really help to see what this is supposed to look like: can you supply a link to an online page, or else make a screen shot /sketch of the desired effect?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The page is here:

    http://www.users.on.net/~kynocht/role.html

    I want the 3 images to go to the right of this paragraph:

    "The companies are spread out around Melbourne:
    Headquarters (HQ): Hawthorn
    Alpha (A) company: Sunshine
    Bravo (B) company: Surrey Hills
    Charlie (C) company: Sandringham
    Delta (D) company: McLeod
    Support (Spt) company: Moonee Ponds"

    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •