HTML & CSS, Tekst blok maken!

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Randy VD

Randy VD

09/12/2013 09:41:25
Quote Anchor link
Hallo allemaal,
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
Afbeelding

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)
PHP script in nieuw venster Selecteer het PHP script
1
We maken een bestand met de naam: blokje.php


Stap 2:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
Open het bestand en kijk Stap 3.


Stap 3:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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>


Stap 4:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
PHP hulp

PHP hulp

28/02/2025 03:00:36
 
- Ariën -
Beheerder

- Ariën -

09/12/2013 09:46:02
Quote Anchor link
Waarom plaats je dit in het forum? Dit is niet de plaats voor tutorials.
 
Randy VD

Randy VD

09/12/2013 09:47:07
Quote Anchor link
- Aar - op 09/12/2013 09:46:02:
Waarom plaats je dit in het forum? Dit is niet de plaats voor tutorials.


Sorry :p
 
- Ariën -
Beheerder

- Ariën -

09/12/2013 09:50:27
Quote Anchor link
Als je het een tutorial wilt noemen, mis ik veel uitleg over de gebruikte CSS-eigenschappen.
 
CNEPHP -

CNEPHP -

09/12/2013 10:09:03
Quote Anchor link
En het lijkt me beter om te documenteren in [*code][*/code] ipv. quotes
Gewijzigd op 09/12/2013 10:10:03 door CNEPHP -
 
Albert de Wit

Albert de Wit

09/12/2013 11:02:57
Quote Anchor link
Wat - Aar - eerder zei, als je een tutorial schrijft, doe dan moeite om het uit te leggen. Niet het 'copy dis en paste in ur code'. Die tijd ligt achter ons.
Gewijzigd op 09/12/2013 11:05:03 door Albert de Wit
 
Wouter J

Wouter J

09/12/2013 12:57:14
Quote Anchor link
En ook de zinsopbouw kan wat beter. Bijv. de eerste zin...

Daarnaast nog een tip: Je gebruikt veel te specifieke selectors, dat maakt het heel traag. En het kan veel simpeler in de HTML code.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.