HTML & CSS, Tekst blok maken!
Wij gaan maken een test css blokje uit eigen handen.
Het gaat oom een blokje wat niet zomaar te coderen is voor beginners.
Het Blokjee
Hoe gaan we dit doen?
We gaan dit doen om eerst jou kladblok of ander progama te openen.
Ik zelf heb Notepad ++.
We gaan dit nu in stappen uitvoeren!
Stap 1:
Code (php)
1
We maken een bestand met de naam: blokje.php
Stap 2:
Code (php)
1
Open het bestand en kijk Stap 3.
Stap 3:
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
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
Zet in het bestand:
<style type='text/css'>
html body div.content div div.c_box
{
box-shadow: 0px 0px 7px #666;
position: relative;
background: rgba(255, 255, 255, 0.9);
margin-bottom: 6px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #000000;
overflow: hidden;
}
html body div.content div div.c_box div.heading
{
position: relative;
background: rgba(255, 255, 255, 0.9);
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
padding:9px;
}
html body div.content div div.c_box div.heading span.close
{
position: relative;
float: right;
cursor: pointer;
color: #FFFFFF;
}
html body div.content div div.c_box div.heading span.close:hover
{
color: #FF0080;
}
html body div.content div div.c_box div.inner
{
position: relative;
padding: 6px;
font-size: 11px;
}
html body div.content div div.c_box div.heading.tabs
{
text-align: left;
clear: both;
padding: 2px !important;
height: 22px;
}
html body div.content div div.c_box div.heading.tabs div.tab
{
position: relative;
float: left;
margin: 0px 5px;
padding: 3px 8px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-user-select: none;
}
html body div.content div div.c_box div.heading.tabs div.tab:hover
{
background: #FFFFFF;
color: #333333;
cursor: pointer;
text-shadow: none;
}
html body div.content div div.c_box div.heading.tabs div.tab.selected
{
background: #FFFFFF;
color: #333333;
cursor: default;
border-radius: 4px 4px 0px 0px;
padding: 3px 8px 7px 8px;
margin-bottom: -6px;
text-shadow: none;
}
html body div.content div div.c_box div.heading.tabs div.tab.static
{
background: transparent;
color: #FFFFFF;
cursor: default;
}
</style>
<style type='text/css'>
html body div.content div div.c_box
{
box-shadow: 0px 0px 7px #666;
position: relative;
background: rgba(255, 255, 255, 0.9);
margin-bottom: 6px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #000000;
overflow: hidden;
}
html body div.content div div.c_box div.heading
{
position: relative;
background: rgba(255, 255, 255, 0.9);
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
padding:9px;
}
html body div.content div div.c_box div.heading span.close
{
position: relative;
float: right;
cursor: pointer;
color: #FFFFFF;
}
html body div.content div div.c_box div.heading span.close:hover
{
color: #FF0080;
}
html body div.content div div.c_box div.inner
{
position: relative;
padding: 6px;
font-size: 11px;
}
html body div.content div div.c_box div.heading.tabs
{
text-align: left;
clear: both;
padding: 2px !important;
height: 22px;
}
html body div.content div div.c_box div.heading.tabs div.tab
{
position: relative;
float: left;
margin: 0px 5px;
padding: 3px 8px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-user-select: none;
}
html body div.content div div.c_box div.heading.tabs div.tab:hover
{
background: #FFFFFF;
color: #333333;
cursor: pointer;
text-shadow: none;
}
html body div.content div div.c_box div.heading.tabs div.tab.selected
{
background: #FFFFFF;
color: #333333;
cursor: default;
border-radius: 4px 4px 0px 0px;
padding: 3px 8px 7px 8px;
margin-bottom: -6px;
text-shadow: none;
}
html body div.content div div.c_box div.heading.tabs div.tab.static
{
background: transparent;
color: #FFFFFF;
cursor: default;
}
</style>
Stap 4:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
We hebben nu al de css erin gezet nu het blokje eronder:
<div class="c_box tabs">
<div class="heading tabs red"><div class="tab selected" id="tab_me_tags_popu">Welkom</div></div>
<div class="inner">
<b>Welkom!</b>
</div>
</div>
<div class="c_box tabs">
<div class="heading tabs red"><div class="tab selected" id="tab_me_tags_popu">Welkom</div></div>
<div class="inner">
<b>Welkom!</b>
</div>
</div>
Kijk nu in je bestand om hem te openen in een webbrowser.
Je ziet je blokje!
Gewijzigd op 09/12/2013 10:53:27 door Randy VD
- Aar - op 09/12/2013 09:46:02:
Waarom plaats je dit in het forum? Dit is niet de plaats voor tutorials.
Sorry :p
Gewijzigd op 09/12/2013 10:10:03 door CNEPHP -
Gewijzigd op 09/12/2013 11:05:03 door Albert de Wit
Daarnaast nog een tip: Je gebruikt veel te specifieke selectors, dat maakt het heel traag. En het kan veel simpeler in de HTML code.