tekst naast chatbox doen en fouten ontdekken
Ik ben al een tijdje bekend met html en css, En wist er enigszins wat mee te doen.
Nu was ik bezig met echt een pagina maken en ben heel erg aan het experimenteren.
Nu stuit ik op een aantal vragen.
Vraag 1 :
Ik heb een css en een html code. Nu wil ik de tekst naast de chatbox doen. Heb al verschillende dingen geprobeerd zoals align of float. Ik kom er niet uit. De site is www.webcommunity.tk en de broncodes zijn :
CSS :
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
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
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: Capriola, sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: ;
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}
.div1 {
width: 1263px;
height: 500px;
background-color: #FFFFFF; )
.element1 {
font-size: 15px;
}
.element2 {
font-size: 30px;}
padding: 0;
margin: 0;
line-height: 1;
font-family: Capriola, sans-serif;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: ;
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
height: 69px;
background: url(bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#cssmenu ul{
background: url(nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li{
float: left;
list-style: none;
}
#cssmenu ul li a{
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a{
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover, #cssmenu ul li.active a{
background: url(color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
}
.div1 {
width: 1263px;
height: 500px;
background-color: #FFFFFF; )
.element1 {
font-size: 15px;
}
.element2 {
font-size: 30px;}
HTML INDEX :
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
<html>
<head>
<title>Hoi</title>
<style type="text/css">
body {
background-image: url(belangrijk.png);}
</style>
<link href="homecss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="div1">
<p class="element2">Test test test test test test</p>
<p class="element1">Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina </p>
<div id="822444439642290645" align="right" style="width: 100%; overflow-y: hidden;" class="wcustomhtml"><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" FlashVars="id=185125026" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb"></a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=185125026"></a></small><br>
</div>
</div>
</body>
</html>
<head>
<title>Hoi</title>
<style type="text/css">
body {
background-image: url(belangrijk.png);}
</style>
<link href="homecss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="div1">
<p class="element2">Test test test test test test</p>
<p class="element1">Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina Test index pagina, Test index pagina </p>
<div id="822444439642290645" align="right" style="width: 100%; overflow-y: hidden;" class="wcustomhtml"><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" FlashVars="id=185125026" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb"></a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=185125026"></a></small><br>
</div>
</div>
</body>
</html>
De chatbox is van xat, Belangrijk vind ik sowieso dat ik ook twee p elementen naast elkaar wil kunnen plaatsen.
VRAAG 2 :
Nog een vraag :) Hebben de broncodes ook echte fouten, Ik weet dat het html 4 is en dat er een nieuwere versie is. Maar ik vond geen goede online gratis cursus daarvan op w3schools na maar die was niet nederlands. Ik wil mijn kennis wel bijwerken met die cursus, Is die daar geschikt voor.
Dus hebben de broncodes fouten, zoja welke en waarom. Ik weet dat er nog iets bij moet bij <html> maar dat doe ik later :)
En is die cursus geschikt.
In iedergeval al heel erg bedankt, Ik moet het allemaal nog een beetje leren.
Graag de volgende keren de [code]-tags gebruiken ipv de quote-tags.[/modedit]
Gewijzigd op 20/05/2013 23:31:05 door Nick Dijkstra
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="div1">
<div id="tekst">
<p class="element2">blabla</p>
<p class="element1">blabla</p>
</div>
<div id="822444439642290645">
chatbox
</div>
</div>
<div id="tekst">
<p class="element2">blabla</p>
<p class="element1">blabla</p>
</div>
<div id="822444439642290645">
chatbox
</div>
</div>
Vervolgens geef je de divs "tekst" en "822444439642290645" in je CSS een float:left en ze zouden naast elkaar moeten staan.
Ik zal nu even een goede titel doen.