1
\$\begingroup\$

I am working on a website and I've created four text/image news blocks. I am not sure if it's the right / most efficient way to do this.

See my code here at jsfiddle

HTML:

<div id="wrapper">
     <div id="header">
        <div id="logo">
           <a href="index.html"><img src="img/logo.png" alt="logo"></a>
        </div>
     </div>
     <div id="headNews">
        <div class="headNewsItem">
           <a href="#">
              <div class="imageContainer">
                 <img src="img/headNews1.jpg" width="242" height="124" alt="headNewsImage1">
              </div>
              <div class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
           </a>
        </div>
        <div class="headNewsItem">
           <a href="#">
              <div class="imageContainer">
                 <img src="img/headNews2.jpg" width="242" height="124" alt="headNewsImage2">            
              </div>
              <div class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
           </a>
        </div>
        <div class="headNewsItem">
           <a href="#">
              <div class="imageContainer">
                 <img src="img/headNews3.jpg" width="242" height="124" alt="headNewsImage3">
              </div>
              <div class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
           </a>
        </div>
        <div id="headNewsItemLast">
           <a href="#">
              <div id="imageContainer">
                 <img src="img/headNews4.jpg" width="242" height="124" alt="headNewsImage4">
              </div>
              <div class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
           </a>
        </div>
     </div>
     <div id="midSection">
        fasdfasf

     </div>
</div>

CSS:

body{
background: url("../img/bg.jpg") repeat-x;
}

#wrapper{
margin: 0 auto;
width: 980px;
}

#header{
float: left;
width: 100%;
height: 70px;
}

#logo img{
float: left;
margin-top: 20px;
}

#headNews{
float: left;
margin-top: 20px

}

.headNewsItem{
float: left;
margin-right: 4px;
width: 242px;
height: 184px;
}

#headNewsItemLast{
float: left;
width: 242px;
height: 184px;
}

.headNewsItem  img {
display: block;
}

#headNewsItemLast img{
display: block;
}

.textContainer{
font-family: Arial;
line-height: 21px;
font-size: 14px;
color: #c8cbcb;
height: 40px;
padding: 10px 15px;
background-image: linear-gradient(#262828,#1c1e1e);
}

#midSection{
float:left;
width: 100%;
height: 800px;
margin-top: 20px;
background-color: #FFF;

}
\$\endgroup\$
  • 1
    \$\begingroup\$ Honestly, what you have looks fine to me. It may be worth looking at some of the frameworks like Bootstrap to see if either they do what you want and you can just use them or if their CSS gives you any ideas. \$\endgroup\$ – Tim B Jan 4 '14 at 2:17
  • \$\begingroup\$ Ok nice to hear, but is there no way to get rid of the styling of the last news block, because it is almost the same except the right-margin? \$\endgroup\$ – user3104933 Jan 4 '14 at 10:21
  • \$\begingroup\$ But this will cause strange behaviour because there are no dimensions set.. Is there no way to inherit all properties from .headNewsItem except the margin? \$\endgroup\$ – user3104933 Jan 4 '14 at 11:28
  • \$\begingroup\$ Honestly, when it looks like a table, use <table>. The 'Table considered harmful' meme has to be taken with a grain of salt. It will be less html, less css and easier to maintain. \$\endgroup\$ – konijn Jan 4 '14 at 15:22
2
\$\begingroup\$

I wouldn't say that there's a right or a wrong way to do it. The only problem with what you're doing is that it only works well when you have a device that is wide enough to display all of those items on one line (ie. it doesn't work so well for handheld devices).

My recommendation would be to use the CSS multi-column module, which is responsive by default without having to use media queries.

http://jsfiddle.net/cTM3L/1/

<div id="wrapper">
    <div id="header">
            <div id="logo"> <a href="index.html"><img src="img/logo.png" alt="logo"></a>

            </div>
    </div>
    <ul id="headNews">
            <li class="headNewsItem">
                <a href="#">
                    <div class="imageContainer">
                         <img src="img/headNews1.jpg" width="242" height="124" alt="headNewsImage1">
                    </div>
                    <p class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </a>
            </li>

            <li class="headNewsItem">
                <a href="#">
                    <div class="imageContainer">
                         <img src="img/headNews2.jpg" width="242" height="124" alt="headNewsImage2">            
                    </div>
                    <p class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </a>
            </li>

            <li class="headNewsItem">
                <a href="#">
                    <div class="imageContainer">
                         <img src="img/headNews3.jpg" width="242" height="124" alt="headNewsImage3">
                    </div>
                    <p class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </a>
            </li>

            <li class="headNewsItem">
                <a href="#">
                    <div id="imageContainer">
                         <img src="img/headNews4.jpg" width="242" height="124" alt="headNewsImage4">
                    </div>
                    <p class="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </a>
            </li>
    </ul>
    <div id="midSection">fasdfasf</div>
</div>

The CSS:

@import url(reset.css);
 body {
    background: url("../img/bg.jpg") repeat-x;
}
#wrapper {
    margin: 0 auto;
}
#header {
    height: 70px;
}
#logo img {
    float: left;
    margin-top: 20px;
}
#headNews {
    margin-top: 20px;
    -webkit-columns: 242px;
    -moz-columns: 242px;
    columns: 242px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    list-style: none;
    padding-left: 0;
}
.headNewsItem {
    margin-right: 4px;
    width: 242px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid; /* Moz is weird */
    break-inside: avoid;
    margin-top: 10px;
}
.headNewsItem:first-child {
    margin-top: 0;
}
.headNewsItem a, .headNewsItem img {
    display: block;
}
.textContainer {
    font-family: Arial;
    line-height: 21px;
    font-size: 14px;
    color: #c8cbcb;
    height: 40px;
    padding: 10px 15px;
    background-image: linear-gradient(#262828, #1c1e1e);
}
#midSection {
    width: 100%;
    margin-top: 20px;
    background-color: #FFF;
}

There's quite a few other things I would change here, but most of them are not relevant to the requested reviewed. Just make sure you're using the most specific tag that appropriately describes your content: avoid using div for everything (check out some of those HTML5 tags you seem to have missed such as header, figure/figcaption, aside, etc.). Also, there are better ways to clear floats than to use more floats.

\$\endgroup\$
-1
\$\begingroup\$

As I mentioned in a comment, those blocks look like a 1 row table.

I redid your code with a table and it is actually shorter ( I could take out a few divs ) and it does require less css. I also extracted the style on the image into a css rule.

http://jsfiddle.net/konijn_gmail_com/w9f6F/4/

HTML:

<div id="wrapper">
    <div id="header">
        <div id="logo"> <a href="index.html"><img src="img/logo.png" alt="logo"/></a>

        </div>
    </div>
    <table>
        <tr>
            <td class="headNewsItem"> <a href="#">
                 <img src="img/headNews1.jpg" alt="headNewsImage1"/>
                 <div class="textContainer">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit
                 </div>
               </a> 
            </td>
            <td class="headNewsItem"> <a href="#">
                 <img src="img/headNews2.jpg" alt="headNewsImage2"/>
                 <div class="textContainer">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit
                 </div>
               </a> 
            </td>
            <td class="headNewsItem"> <a href="#">
                 <img src="img/headNews3.jpg" alt="headNewsImage3"/>
                 <div class="textContainer">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit
                 </div>
               </a> 
            </td>
            <td class="headNewsItem"> <a href="#">
                 <img src="img/headNews4.jpg" alt="headNewsImage4"/>
                 <div class="textContainer">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit
                 </div>
               </a> 
            </td>
        </tr>
    </table>
    <div id="midSection">fasdfasf</div>
</div>

CSS :

@import url(reset.css);
 body {
    background: url("../img/bg.jpg") repeat-x;
}
#wrapper {
    margin: 0 auto;
    width: 980px;
}
#header {
    float: left;
    width: 100%;
    height: 70px;
}
#logo img {
    float: left;
    margin-top: 20px;
}
#headNews {
    float: left;
    margin-top: 20px
}
.headNewsItem {
    float: left;
    width: 242px;
    height: 184px;
}
.headNewsItem img {
    width: 242px;
    height:124px;
}
.textContainer {
    font-family: Arial;
    line-height: 21px;
    font-size: 14px;
    color: #c8cbcb;
    height: 40px;
    padding: 10px 15px;
    background-image: linear-gradient(#262828, #1c1e1e);
}
#midSection {
    float:left;
    width: 100%;
    height: 800px;
    margin-top: 20px;
    background-color: #FFF;
}
\$\endgroup\$
  • \$\begingroup\$ Is it justified to use tables in this case? \$\endgroup\$ – user3104933 Jan 5 '14 at 13:55
  • \$\begingroup\$ In my opinion, yes. \$\endgroup\$ – konijn Jan 5 '14 at 19:46
  • \$\begingroup\$ Wrong. Tables are for tabular data, not layout. If you had to come up with labels for each of your table's columns, what would they be? If each column has the same label, then you should not be using a table. When you have tags that have specific meaning, you can't just use them just because you like how they look. Assistive devices such as screen readers treat tables in a special way. \$\endgroup\$ – cimmanon Jan 6 '14 at 15:27
  • \$\begingroup\$ Tables go both ways, row 1 is image, row 2 is text, I merged the rows because I could. How would a screen reader go wrong with this table? \$\endgroup\$ – konijn Jan 6 '14 at 15:43
  • \$\begingroup\$ The only way this data could be presented as tabular data is for there to be one news item per row, with the title in one column and the image in the other. What you have is a misuse of the table element. \$\endgroup\$ – cimmanon Jan 6 '14 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.