Hallo allen.
ik heb een website die ik aan het bouwen ben, maar krijg hem niet goed weer gegeven wat ik wil.
De gehele pagina dient zich netjes boven in beeld te tonen in normale scherm weergave en bij t verkleinen in mobiele weergave mooi mee bewegen.
zie me webpagina nu online: check
Probleem is ik niet weet je een link plaatst zoals de dj foto (die nu in een frame staat)
ook de play overzicht staat daarmee niet goed op zijn plaats.
Heel de boel staat als t ware scheef op de weergave wat eigenlijk bedoeling was.
iemand enige idee wat ik eraan kan doen, om t op te lossen?
mijn huidige pagina nu:
ik heb een website die ik aan het bouwen ben, maar krijg hem niet goed weer gegeven wat ik wil.
De gehele pagina dient zich netjes boven in beeld te tonen in normale scherm weergave en bij t verkleinen in mobiele weergave mooi mee bewegen.
zie me webpagina nu online: check
Probleem is ik niet weet je een link plaatst zoals de dj foto (die nu in een frame staat)
ook de play overzicht staat daarmee niet goed op zijn plaats.
Heel de boel staat als t ware scheef op de weergave wat eigenlijk bedoeling was.
iemand enige idee wat ik eraan kan doen, om t op te lossen?
mijn huidige pagina nu:
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
| * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 30%;
background:#000000;
}
body {
height: 100%;
margin: 0;
color: #fff;
background: url("http://www.hitdance.nl/plaatjes/achtergrond.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
img {
border: 0;
vertical-align: middle;
}
.container:before,
.container:after,
.row:before,
.row:after {
display: table;
content: " ";
}
.container:after,
.row:after {
clear: both;
}
.container {
min-height: 100%;
max-width: 970px;
margin: 0 auto;
padding: 15px;
}
@media (min-width: 768px) {
.container {
width: 730px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
.row {
position: relative;
}
.container > .row {
margin-right: -15px;
margin-left: -15px;
}
.row > div {
float: left;
position: relative;
padding-right: 15px;
padding-left: 15px;
min-height: 1px;
}
#header img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
#header-midden {
width: 100%;
}
#header-links,
#header-rechts {
width: 50%;
}
@media (min-width: 768px) {
#header-links,
#header-rechts {
width: 25%;
}
#header-links {
position: absolute;
left: 0%;
display : inline-block;
margin : 5px 0;
padding : 5%;
width : 40%;
display : block;
list-style : none;
border : 0;
}
#header-midden {
position: absolute;
left: 25%;
width: 50%;
}
#header-rechts {
position: absolute;
left: 90%;
}
.djdisplay {
height : 160px;
width : 100%;
border: 0;
}
#header-rechts audio {
display: block;
width: 99.999%;
max-width: 100%;
}
#nav {
width: 100%;
}
.nav, .nav li, .nav a {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.nav {
float: left;
width: 100%;
margin-bottom: 10px;
position: relative;
list-style-type: none;
}
.nav li {
float: left;
width: 23%;
margin: 0 1%;
list-style-type: none;
vertical-align: middle;
}
.nav li:hover {
cursor: pointer;
}
.nav a {
display: block;
text-decoration: none;
padding: 10px 10px;
line-height: 1;
background-color: #33c;
color: #fff;
text-align: center;
white-space: nowrap;
}
@media (min-width: 768px) {
.nav a {
padding: 6px 10px;
}
}
@media (min-width: 992px) {
.nav a {
padding: 14px 10px;
}
} |
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
| <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wat is er nieuw op hitdance radio</title>
<meta name="description" content="dance, hardstyle, apresski">
<meta name="keywords" content="online, dj, muziek, hard dance">
<base href="http://www.hitdance.nl/">
<link rel="stylesheet" href="hitdance2.css">
</head>
<body>
<div class="container">
<div id="header" class="row">
<div id="header-midden">
<img src="plaatjes/logo.png" alt="" />
<div id="menu" class="row">
<ul class="nav">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
</div>
</div>
<div id="header-links">
<iframe src="http://server13003.irserv2.com/djdisplay/" class="djdisplay"></iframe>
</div>
<div id="header-rechts">
<audio controls preload='metadata'>
<source src='http://178.251.24.69:7039/stream'>
</audio>
<iframe src="http://178.251.24.69:2199/recentfeed/ebosman/html/" name="Play history" style="background-color: #cccccc; height: 85px;"></iframe>
<H3 STYLE="background-color: #0099ff;">stemra licentie: SW15n:00</h3>
<H3 STYLE="background-color: #ff9900;">Sena: n.r. SW 966.15</h3>
</div>
</div>
</div>
</body>
</html> |
/u/715027/crop6047c50ae8d4c.png?f=community)
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
:strip_exif()/u/294184/20150204_SITE_GIF_VALKUIL-resized.gif?f=community)
:strip_icc():strip_exif()/u/192890/brain.jpg?f=community)
:strip_icc():strip_exif()/u/616288/crop5708e3eea33db_cropped.jpeg?f=community)
:strip_icc():strip_exif()/u/253641/crop686f9cec6f8b1_cropped.jpg?f=community)
:strip_icc():strip_exif()/u/53213/crop57ace20969734.jpeg?f=community)
/u/78932/Jewel3GoT.png?f=community)
/u/107051/jeroenmadtrix60.png?f=community)
Dit topic is gesloten.
