need help from a CSS wiz - create a table "look" without using a table_问答_开发者

I'm trying to create a page which looks somewhat like this:

http://www.drmichaelbogdan.com/plastic-surgery/

(I'm referring to the "Find Out More About Our Featured Procedures:" table with alternating colors).

I prefer to refrain from using tables, since from what I understand, it is much wiser to use "pure" css.

Alas, I my CSS skills are somewhat lacking.

Is there anyone out there which can help me create this look in CSS?

my HTML "structure" looks like this:

<div id="latestArticlesWrapper">
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
</div>

If needed, and if you think that it'll help, I can change the tags from "div" to anything you say, as long as it "helps the cause" :-) (perhaps for the odd/even requirement - the divs are created in a loop...)

Obviously, it should look good on all major browsers (Firefox, Chrome and IE for that matter).

Well, as usual - IE is giving me problems. It looks great on Firefox, it really does, but on IE - it gets messed up

I did change the html and CSS a bit, here is what I am using now:

HTML:

<div id="latestArticlesWrapper">
       <div class = "<%= (oddEven = !oddEven) ? "newArticle white" : "newArticle yellow"%>"> 
             <div class = "newArticleImage">
             </div>
             <div class="newArticleData">
                <span class="newArticleTitle"></span>
                <span class="newArticleDate"></span>
                <span class="newArticleContent"></span>
                <span class="newArticleLink"></span>

             </div>
       </div>
</div>

CSS:

#latestArticlesWrapper {
    width:100%;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:146px;
}

.yellow {
    background:#F2E4C2; 
}
.white 
{
    background:#fff;
}

.newArticleImage {
    width:96px;
    height:96px;
    margin-right:20px;
    margin-top:10px;
    float:right;
}

.newArticleData {
    margin-right:20px;
    margin-top:10px;
    float:right;
    width:404px;
}

.newArticleData h3 {
    padding:0;
    margin:0;
    margi开发者_开发知识库n-bottom:3px;
}

.newArticleTitle 
{
    float: right;
}

.newArticleDate
{
    float: left;
    padding-left: 5px;
    padding-right:20px;
    background:url(../images/icons/date.png) right no-repeat;
}

.newArticleContent
{
    float: right;
}

.newArticleLink
{
    float: left;
}

So.... How do I make IE happy? :-P

You've got the html part correct so far. You just need to add some float elements:

div.latestArticlesWrapper
{
    width: #px; /* static width */
}

div.newArticle, div.newArticleAlt
{
    float: left;
    width: #px;  /* should be the width of the entire area to force the float to wrap */
}

div.newArticle
{
    background-color: #ffffff;
}

div.newArticleAlt
{
    background-color: #eeeeee;
    /* alternate row color, use conditional to separate */
}

div.newArticleImage
{
    float: left;
    width: #px;
    padding: #px; /* width + padding = total width */
}

div.newArticleData
{
    float: left;
    width: #px;
    /* don't put padding here for text. use the <p> tag or another <div> */
}

Because you asked for a site like the one referenced (which is a static width), I've put style in here for static widths. If you have a dynamic width site, you'll have to work the widths in a different way.

here my try: http://jsbin.com/umeno3

html

<div id="latestArticlesWrapper">
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
      <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
</div>

css

#latestArticlesWrapper {
    width:560px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:116px;
}

.yellow {
    background:#F2E4C2; 
}
.white {
    background:#fff;
     }
.newArticleImage {
    width:96px;
    height:96px;
    margin-left:20px;
    margin-top:10px;
    float:left;
}

.newArticleData {
    margin-left:20px;
    margin-top:10px;
    float:left;
    width:404px;
}

h3 {
    padding:0;
    margin:0;
    margin-bottom:3px;
}

to change row's bakcground color, you just change the class near newArticle class

PS: For tabular data as your example I advice you to use table, it's more semantic, then you can style it through css. But if you still want do it with divs, then you can follow the above solution.

Can I suggest using a slightly different html structure? I'd suggest the following, given the content itself:

<div id="latestArticlesWrapper">
    <dl>
        <dt>Rhinoplasty (nose job)</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</dd>
        <dt>Breast enlargement</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" />With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</dd>
        <dt>Mommy makeover</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" />After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</dd>
    </dl>
</div>

With the css:

dt, dd {
    position: relative;
    padding: 0 0 0 110px;
}
dd img {
    position: absolute;
    top: -1em;
    left: 0.2em;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 1em 0;
}

JS Fiddle demo.

I'll note that there's nothing intrinsically wrong with the html you posted, it's just that the above has the advantage of being simpler, with fewer elements to worry about, and takes advantage of the semantics of the dl (definition list) element, and an easier intro from W3schools.

Save this to a file and open in a browser...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Latest Articles Example</title>
    <style>
        #latestArticlesWrapper { font-family:arial,sans-serif; width:560px; }
        #latestArticlesWrapper .odd { background-color:#F2E4C2; }
        #latestArticlesWrapper .even { background-color:#FFFFFF; }
        .newArticleImage { text-align:center; margin:10px 0 10px 0; float:left; display:inline; width:140px; }
        .newArticleData { float:left; display:inline; width:410px; padding:0 10px 0 0;}
        .newArticleData h4 { font-size:14px; margin:10px 0 0 0;}
        .newArticleData p { font-size:0.8125em;  margin:5px 0 0 0; line-height:1.5em; }
    </style>

    <!-- The following styles are from http://www.positioniseverything.net/easyclearing.html -->
    <style type="text/css">
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix {display: inline-block;}  /* for IE/Mac */
    </style>
    <!--[if IE]>
    <style type="text/css">
        .clearfix { zoom: 1; display: block; }
    </style>
    <![endif]-->
</head>
<body>

<div id="latestArticlesWrapper">
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Rhinoplasty (Nose Job)</h4>
            <p>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</p>
        </div>
    </div>
    <div class="newArticle even clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Breast Enlargement</h4>
            <p>With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</p>
        </div>
    </div>
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Mommy Makeover</h4>
            <p>After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</p>
        </div>
    </div>
</div>

</body>
</html>

looks like i was too late!