Nieuws blokken stylen
Afbeelding hoe ik het graag wil: http://tinypic.com/r/69hlhu/5
ik wil graag mijn nieuwsblokken stylen zoals in de bijgevoegde afbeelding. Mijn artikel ziet er zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<article>
<h1>Titel</h1><h3>Datum</h3>
<p>Hier het nieuws artikel</p>
<img src="">
</article>
CSS:
article {
width: 500px;
margin: 0 auto;
}
h1 {
display:block;
}
h3 {
display:block;
float:right; /* float right zodat ie standaard rechts bovenin staat */
}
p{
float:left;
width:300px;
}
img {
float:left;
width:200px;
}
<h1>Titel</h1><h3>Datum</h3>
<p>Hier het nieuws artikel</p>
<img src="">
</article>
CSS:
article {
width: 500px;
margin: 0 auto;
}
h1 {
display:block;
}
h3 {
display:block;
float:right; /* float right zodat ie standaard rechts bovenin staat */
}
p{
float:left;
width:300px;
}
img {
float:left;
width:200px;
}
En wat lukt er niet?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>HTML Sheet</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#wrapper {
width: 900px;
margin: 0 auto;
}
header {
height: 50px;
background-color: red;
}
footer {
height: 100px;
background-color: red;
}
section {
min-height: 500px;
background-color: yellow;
}
.test-article {
width: 500px;
background-color: blue;
display: block;
margin: 0 auto;
padding-top: 10px;
}
.test-h1 {
background-color: orange;
float: left;
top: 0px;
left: 0px;
width: 275px;
}
.test-h3 {
background-color: green;
float: right;
right: 0px;
top: 0px;
width: 225px;
text-align: right;
}
.test-p {
width: 300px;
background-color: purple;
float:left;
display: block;
}
.test-image {
width: 200px;
background-color: grey;
float:left;
display:block;
}
.test-price {
float: right;
}
.test-order {
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<header>Header</header>
<section>
<article class="test-article">
<h1 class="test-h1">Titel van het evenement</h1>
<h3 class="test-h3">Datum: 10-05-1991 23:00</h3>
<p class="test-p">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<img class="test-image" src="image.jpg">
<h4 class="test-price">Kleine info</h4>
<h4 class="test-price"><a href="#">Link naar iets</a></h4>
</article>
<article class="test-article">
<h1 class="test-h1">Titel van het evenement</h1>
<h3 class="test-h3">Datum: 10-05-1991 23:00</h3>
<p class="test-p">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<img class="test-image" src="image.jpg">
<h4 class="test-price">Kleine info</h4>
<h4 class="test-price"><a href="#">Link naar iets</a></h4>
</article>
</section>
<footer>Footer</footer>
</div>
</body>
</html>
<html>
<head>
<title>HTML Sheet</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#wrapper {
width: 900px;
margin: 0 auto;
}
header {
height: 50px;
background-color: red;
}
footer {
height: 100px;
background-color: red;
}
section {
min-height: 500px;
background-color: yellow;
}
.test-article {
width: 500px;
background-color: blue;
display: block;
margin: 0 auto;
padding-top: 10px;
}
.test-h1 {
background-color: orange;
float: left;
top: 0px;
left: 0px;
width: 275px;
}
.test-h3 {
background-color: green;
float: right;
right: 0px;
top: 0px;
width: 225px;
text-align: right;
}
.test-p {
width: 300px;
background-color: purple;
float:left;
display: block;
}
.test-image {
width: 200px;
background-color: grey;
float:left;
display:block;
}
.test-price {
float: right;
}
.test-order {
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<header>Header</header>
<section>
<article class="test-article">
<h1 class="test-h1">Titel van het evenement</h1>
<h3 class="test-h3">Datum: 10-05-1991 23:00</h3>
<p class="test-p">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<img class="test-image" src="image.jpg">
<h4 class="test-price">Kleine info</h4>
<h4 class="test-price"><a href="#">Link naar iets</a></h4>
</article>
<article class="test-article">
<h1 class="test-h1">Titel van het evenement</h1>
<h3 class="test-h3">Datum: 10-05-1991 23:00</h3>
<p class="test-p">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<img class="test-image" src="image.jpg">
<h4 class="test-price">Kleine info</h4>
<h4 class="test-price"><a href="#">Link naar iets</a></h4>
</article>
</section>
<footer>Footer</footer>
</div>
</body>
</html>
Gewijzigd op 23/05/2013 14:09:35 door Donny Wie weet
Zou ik dat clear:both; ook in mn article kunnen gebruikne?