SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning images horizontally?

    I'm new to CSS and am trying to figure out what the best way is to align 3 images horizontally on the browser window. One image needs to be lined up to the left, one in the center, and one to the right. Here is my code:

    <body>
    <div id="header">
    <p>
    <img src="image1.jpg" width="73" height="65" alt="Image1" />
    </p>
    <p>
    <img src="image2.jpg" width="210" height="65" alt="Image2" />
    </p>
    <p>
    <img src="image3.jpg" width="210" height="65" alt="Image3" />
    </p>
    </div>
    </body>

    I know I can do this easily with the <table> tag, but since I guess this is considered style instead of structure, I would think the proper way to do it would be with CSS. And, I'm sure there is probably several ways to do it with CSS, but I'm just looking for suggestions on what the best way is.

    Thanks

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="navmenu">
    <li><a href="www.blakeanthonydesign.com">home</a></li>
    <li><a href="www.blakeanthonydesign.com">link</a></li>
    <li><a href="www.blakeanthonydesign.com">link</a></li>
    <li><a href="www.blakeanthonydesign.com">link</a></li>
    </ul>
    </div>
    #navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }
    #navmenu li {display: inline; }
    #navmenu ul li a {text-decoration:none; margin: 4px;
    padding: 5px 20px 5px 20px; color: blue;
    background: pink;}
    #navmenu ul li a:hover {color: purple;
    background: yellow; }
    Use Html to align the Structure of the images. And then you can set the specifications with CSS, Color's etc.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="header">
      <img src="image1.jpg" width="73" height="65" alt="Image1" class="left" />
      <img src="image3.jpg" width="210" height="65" alt="Image3" class="right" />
      <img src="image2.jpg" width="210" height="65" alt="Image2" />
    </div>
    Code:
    #header {
      text-align: center;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions. I have it working now!


Bookmarks

Posting Permissions

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