Hallo,
Ik ben hier voor het eerst en hoop dat iemand mij kan helpen met het volgende probleem.
Ik heb in html een div page
Daarin staan nog 3 div's
div image1
div image2
div image3
In deze 3 div's staat in elk een plaatje.
Echter krijg ik het niet voor elkaar om de 3 div's naast elkaar op gelijke hoogte te plaatsen.
Het moet een Responsive webpagina worden dus de 3 div's schalen mee met het scherm grote.
Hieronder de CSS en HTML die ik gemaakt heb.
CSS
HTML
Wie kan mij helpen met dit probleem.
Ik ben hier voor het eerst en hoop dat iemand mij kan helpen met het volgende probleem.
Ik heb in html een div page
Daarin staan nog 3 div's
div image1
div image2
div image3
In deze 3 div's staat in elk een plaatje.
Echter krijg ik het niet voor elkaar om de 3 div's naast elkaar op gelijke hoogte te plaatsen.
Het moet een Responsive webpagina worden dus de 3 div's schalen mee met het scherm grote.
Hieronder de CSS en HTML die ik gemaakt heb.
CSS
code:
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
119
120
121
122
123
124
125
126
127
128
129
| body {
padding: 0px;
margin:0px;
font-family: Cambria, Georgia, serif;
line-height: 1.2em;
font-size:100%;
background:#CCC url(img/noise.png);
}
#header, #footer, h1, h2, h3 {
font-family: 'Open Sans Condensed', sans-serif;
}
#header {
background-color: #0c0709;
background-repeat: no-repeat;
max-width:1280px;
margin: 0;
padding: 0;
height: 99px;
}
#footer {
color: #399;
background:#333 url(img/noise.png);
padding:0;
margin:0;
clear: both;
width: 100%;
}
#footer h3 {
padding: 30px 40px;
}
#content{
max-width:1280px;
margin: 0 auto;
}
#page {
width: 100%;
height:100%;
}
#image1 {
width: 25%;
margin: 30% 0 0 5%;
padding: 0;
}
#image2{
width: 25%;
margin: -14% 0 0 37%;
padding: 0;
}
#image3{
width: 25%;
margin: -14% 0 0 69%;
padding: 0;
}
.img {
width:100%;
max-width:350px;
height: auto;
margin-left: auto;
margin-right: auto;
}
/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
body{
font-size: 120%;
}
#image1 {
margin: 0;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
width:50%;
}
#image2 {
margin: 0;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
width:50%;
}
#image3 {
margin: 0;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
width:50%;
}
@media screen and (max-width: 480px) {
body{
font-size: 120%;
}
#image1{
margin: 0;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
width:60%;
}
#image2{
margin: 0;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
width:60%;
}
#image3{
margin: 0;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
width:60%;
} |
HTML
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <body>
<div id="header"><img src="img/logo1.png" height="99" alt=""></div>
<div id="content">
<div id="page">
<div id="image1"><img src="img/test1.png" width="350" height="146" alt="responsive design image" class="img"></div>
<div id="image2">
<img src="img/test2.png" width="350" height="146" alt="responsive design image" class="img"></div>
<div id="image3">
<img src="img/test3.png" width="350" height="146" alt="responsive design image" class="img"> </div>
</div>
</div>
</div>
<div id="footer">
<h3>footer tekst</h3>
</div>
</body> |
Wie kan mij helpen met dit probleem.
:strip_exif()/u/26632/dosprompt2.gif?f=community)
:strip_icc():strip_exif()/u/192566/crop57fe1283d179a_cropped.jpeg?f=community)
/u/465874/mark.png?f=community)
/u/473286/crop64b52a7b9cefc_cropped.png?f=community)
.
. Alleen weten niet veel mensen dat en daarom kom je voor lastige situaties te staan. Aan de HTML van de topicstarter te zien, zou hij dit probleem dus ook krijgen wat resulteert in een volgende vraag, die ik voor probeerde te zijn. Wanneer je de html elementen niet tegen elkaar aan kunt zetten, kun je ook de font-size op 0 zetten van het element eromheen. Maar goed, dat zijn allemaal aparte oplossingen, die je kunt voorkomen met een float en een clear.:strip_exif()/u/21451/spinal150.gif?f=community)
:strip_icc():strip_exif()/u/29539/crop5be1c87ad1a01_cropped.jpeg?f=community)
:strip_icc():strip_exif()/u/12461/crop65b195553d948.jpg?f=community)