Laying out images for a landing page

Question

I'm beginning to learn HTML and CSS, and since our lead developer is busy finishing up our project, I was asked to code the landing page.

I read up on some tutorials and beginning books, so I have a general grasp of things. But I'm curious as to how I use HTML and CSS to layout images efficiently.

When I first made the site, I used relative and absolute positioning to layout all the images. That was not good.

This time I decided to use margins/padding to organize it, but I still feel like there is a much better to lay all this out.

Basically I just want to be able to code the website, where if I add an image or move around images, the original pieces of the website don't end up going all over the place.

This is a rough image of what our landing page is supposed to look like:

HTML

<div id="container">

    <img src="images/iphone.png" alt="iPhone" id="iphone" />

     <div id="imagesBlock">
        <img src="images/DashLogo.png" alt="Dash Logo" id="DashLogo" />

        <!--<div id="snappyText">
            <p>Ever think, "Where are the most mediocre places</p> 
            <p>to eat around here? I want me some of that."</p>
        </div>  -->

        <img src="images/textQuestion.png" alt="textQuestion" id="textQuestion">

        <img src="images/videoThumbnail.png" alt="Video Screenshot" id="videoThumbnail" />

        <!--<div id="response">
            <p>Yeah, neither do we.</p>
        </div>-->
        <img src="images/textResponse.png" alt="textResponse" id="textResponse"/>

        <a href="http://itunes.apple.com/app/memix-pro/id300136119?mt=8" title="App Store" target="_blank" ><img src="images/appStoreOrange.png" alt="App Store" id="appStoreOrange" /></a>

        <a href="http://twitter.com/#!/thedashapp" class="twitter" title="twitter link" target="_blank" ></a>

        <a href="http://www.facebook.com/" class="facebook" title="facebook link"target="_blank" ></a>
     </div> 

CSS

body{
    background:url(images/whiteBackground.png);
}

.container{
    width:1200px;
    margin:0 auto;
    position:relative;
}

#iphone{
    margin-left: 166px;
    margin-top: 88px;
}
/* images Block */

#imagesBlock{
    position:relative;
    left: 550px;
    bottom:592px;
    width: 515px;
}

#DashLogo{

}

#textQuestion{
    margin-top:35px;
}

#videoThumbnail{
    margin-top:20px;
}

#textQuestion{
}

#textResponse{
    margin-bottom: 50px;
    margin-left: 30px;
}

#appStoreOrange{
    margin-top: 20px;
}

.twitter{
    width:117px;
    height:112px;
    display: block;
    background: url(images/twitter.png);
    margin-left: 280px;
    margin-top:-105px;
}

/*.twitter:hover{
    background-image: url(images/twitterBlue.png);
}*/

.facebook{
    width:117px;
    height:112px;
    display:block;
    background: url(images/facebook.png);
    margin-left:400px;
    margin-top:-112px;
}

/*.facebook:hover{
    background-image:url(images/facebookBlue.png);
}*/

Answer 1

A good tip is to layout in columns and not rows, similar to a newspaper. That is, divide the page into columns and stack the contents as rows, similar to Pinterest. So, in your site, that makes the iPhone 1 column, and the rest in another column. Now this simplifies things.

Stacking the rest as rows controls their bounds and acts as groupings. That way, if one of these rows were to expand like if the slogan has more text, it does not affect the layout of the next row since the next row clears below it cleanly.

As for pseudocode, it looks something like (Sorry, I really hate typing the <> and {}):

HTML:

div id="wrapper"

  div class="left"
    img src="iphone.png"

  div class="right"

    img class="row" src="logo.png" 

    p class="row"
      Picking good food fast

    p class="row"
      Ever think...

    div class="row"
      img src="thumb"
      span
        Yeah...

    ul class="row"
      li
        a
          img src="appstore.png"
      li
        a
          img src="twitter.png"
      li
        a
          img src="facebook.png"

CSS:

#wrapper
  overflow:hidden //just a clearfix
  zoom:1          

.row  
  display:block  //this makes the element a box
  clear:both     //nothing is at the left and right, and must be above and below

.left
  float:left
  width: something

.right
  overflow:hidden //ensures that the right column does not wrap around left

---

Off-topic:

Substituting text for images is not good for several reasons:

• It's a whole lot heavier than text
• SEO (if ever it isn't a myth) isn't that good as they say compared to a text site. So if this is a landing page, better pack it with good description text to summarize the site.
• Without properly titled images, screen readers suffer
• Resizing the browser either squishes the images or if they scale, the text also shrinks making them unreadable.
• Like you mentioned, they are hard to move around

However, a little mix of text and images won't hurt. A general tip is to turn into text whatever can be turned into text. That would be:

• Your logo text "dash"
• The slogan
• Your catch phrases

And don't forget to mind the semantics. Use the proper tags for the job.