css news article layout problems

StackOverflow https://stackoverflow.com/questions/20622938

  •  02-09-2022
  •  | 
  •  

题

I am doing css/html for a school assignment, but I got stuck. I am trying to build a newsoverview but I don't know how to build this in the good/qualitative way.

Problems:

  1. Is this a good way to put 'Laatste nieuws' in that position?
  2. I want to get rid of the div's because I think it will be better to use ul/li, but I don't know how I can use it in this case.
  3. Positioning title and description of each article like the 1st picture.

I need: http://i.imgur.com/vz51zyA.png

I have: http://i.imgur.com/4wTmtXu.png

<div id="newsListContainer">
                <div id="newsListHeader"><h1>Laatste nieuws</h1></div>
                <div class="newsListItem">
                    <img src="img/item3.jpg" width="100" height="75">
                    <h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>

CSS:

#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}

#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}

.newsListItem {
margin-left:150px;
}

.newsListItem img{
float:left;
}

HTML UPDATED:

<div id="newsListContainer">
                <div id="newsListHeader"><h1>Laatste nieuws</h1></div>
                <ul><li class="newsListItem">
                    <img src="img/item3.jpg">
                    <h2> Lorem Ipsum is simply dummy text of  </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </li></ul>
                <ul><li class="newsListItem">
                    <img src="img/item3.jpg">
                    <h2> Lorem Ipsum is simply dummy text of  </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </li></ul>
            </div>

CSS UPDATED:

#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}

#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}

.newsListItem {
/*margin-left:150px;*/
padding-left: 115px;
}

.newsListItem img{
float:left;
width: 100px;
margin-left: -115px; /* SAME AS PADDING ABOVE */
有帮助吗？

解决方案

In answer to your questions, and trying not to do your assignment for you:

  1. Yes, the header is outside the 'list' of items which is good. Do you need the <div id="newsListHeader"> container though?
  2. A list would be better, try it and see how you get on (<ul><li class="newsListItem">News item here</li></ul>).
  3. This can be tricky at first and there's many ways of doing it (css html news list creation little help please). My preferred technique if I know the width of the image, is to add a padding to the .newsItemContainer and then negatively margin back the image by the same width. That means that the text will always line up along that padding line.

Code snippet:

.newsListItem {
  padding-left: 115px;
}

.newsListItem img {
  float: left;
  width: 100px;
  /* Added */
  margin-left: -115px;
  /* SAME AS PADDING ABOVE */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <div class="newsListItem">
    <img src="http://placehold.it/100x75" width="100" height="75">
    <h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div class="newsListItem">
    <img src="http://placehold.it/100x75" width="100" height="75">
    <h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</body>

</html>

其他提示

.newsListItem img{
float:left;
margin-right:16px;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top