1

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: https://i.stack.imgur.com/HZh7T.png

I have: https://i.stack.imgur.com/qK3PD.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 */
Engin
  • 135
  • 1
  • 10

2 Answers2

0

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>
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • You might want to elaborate on that. In my demo, it seems to be exactly what you want you asked for. – davidpauljunior Dec 17 '13 at 23:04
  • Firstly, thank you very much for your help! I've changed my code to your suggestions but it dit not work exactly. I've created newsListedHeader to make it easy to add new components to the header in future... Could you explain me how I can use the ul/li for multiple newsItems in future? – Engin Dec 17 '13 at 23:11
  • Instead of using `
    `, use `
    `. Then fix any necessary styles for lists, e.g. `list-style: none;`. But, if you've tried and you can't get it working, you need to show your efforts in a Fiddle or JSBin so I can see where you've gone wrong.     – davidpauljunior Dec 17 '13 at 23:14
  • I don't have the right yet to give you points, otherwise I would give you all points available :( Thank you so much for helping me! – Engin Dec 17 '13 at 23:37
  • You just click the tick on the left of my answer. – davidpauljunior Dec 17 '13 at 23:42
  • I tried your code but my newsitems are still not positioned like your example :S I have tried the same code, still not the same. – Engin Dec 19 '13 at 19:05
  • So you've removed the correct answer? 'Tried same code, still not the same'. It's not the same code then because I've given you a link that clearly shows it working perfectly – davidpauljunior Dec 19 '13 at 21:13
-1
.newsListItem img{
float:left;
margin-right:16px;
}
PeauntbutterJellyTime
  • 101