Tekenen met PHP en/of HTML in combinatie met CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

30/11/2013 12:26:44
Quote Anchor link
Hallo allemaal,

Voor een genealogiewebsite is mij gevraagd een "grafisch" overzicht te maken van de stamboom.
Dit betekent dat:

1. Op de bovenste rij 8 kaders komen te staan voor de namen van de grootouders
2. Op de tweede rij staan 4 kaders voor de namen van de ouders
3. Op de derde rij staan twee kaders voor de namen van de geselecteerde personen
4. Op de vierde rij staat één kader voor de namen van de kinderen van de geselecteerde personen

Bovenstaande heb ik als volgt opgebouwd:

HTML-code
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
<div class="box">
   <div class="portfolio">
      <!-- Grootouders -->
      <div>
         <div class="vader_8"></div>
         <div class="moeder_8"></div>
         <div class="vader_8"></div>
         <div class="moeder_8"></div>
         <div class="vader_8"></div>
         <div class="moeder_8"></div>
         <div class="vader_8"></div>
         <div class="moeder_8"></div>
         <div class="clear"></div>
      </div>
      <div class="regelhoogte50"></div>
      <!-- Ouders -->
      <div>
         <div class="blank_half"></div>
         <div class="vader_8"></div>
         <div class="blank_8"></div>
         <div class="moeder_8"></div>
         <div class="blank_8"></div>
         <div class="vader_8"></div>
         <div class="blank_8"></div>
         <div class="moeder_8"></div>
         <div class="clear"></div>
      </div>
      <div class="regelhoogte50"></div>
      <!-- Probant -->
      <div class="midden">
         <div class="blank_8"></div>
         <div class="blank_8"></div>
         <div class="blank_8"></div>
         <div class="vader_8"></div>
         <div class="moeder_8"></div>
         <div class="clear"></div>
      </div>
      <div class="regelhoogte50"></div>
      <!-- Kinderen -->
      <div>
         <div class="blank_8"></div>
         <div class="blank_8"></div>
         <div class="blank_8"></div>
         <div class="kids_16"></div>
      </div>
      <div class="clear"></div>
   </div>
   <div class="clear"></div>
</div>


CSS-code
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
.vader_8 {
    float: left;
    width: 95px;
    position: relative;
    background: lightcyan;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd;
    min-height: 200px;
    max-height: 200px;
}

.moeder_8 {
    float: left;
    width: 95px;
    position: relative;
    background: lightpink;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd;
    min-height: 200px;
    max-height: 200px;
}

.blank_8 {
    float: left;
    width: 95px;
    position: relative;
    background: white;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid white;
    border-radius: 4px;
    min-height: 200px;
    max-height: 200px;
}

.blank_half {
    float: left;
    width: 43px;
    position: relative;
    background: white;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid white;
    border-radius: 4px;
    min-height: 200px;
    max-height: 200px;
}

.kids_16 {
    float: left;
    width: 210px;
    position: relative;
    background: whitesmoke;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd;
    min-height: 200px;
    max-height: 200px;
}


Nu wil ik verbindingslijnen gaan tekenen vanuit het midden van de bovenkant naar het miiden van de onderkant van bovenliggende rij. Hoe pak ik dit nu aan?
 
PHP hulp

PHP hulp

22/12/2024 07:59:57
 
Eddy E

Eddy E

30/11/2013 13:01:03
Quote Anchor link
Persoonlijk zou ik bij zoiets 'vaststaands' een SVG maken.
En daarin kan je ook gewoon tekst zetten.

Je laadt de SVG in je PHP in, verandert de 'standaard'-tekst en klaar.
Kan je het zo mooi maken als je zelf wilt.
 
George van Baasbank

George van Baasbank

30/11/2013 13:51:53
Quote Anchor link
Hoe bedoel je dat: Laadt SVG in je PHP????
 
Eddy E

Eddy E

30/11/2013 21:15:51
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
$svg = file_get_contents("path/to/picture.svg");
$svg = str_replace("overgrootmoeder_moeders_kant", "Jannigje De Bruin");
// etc
echo $svg;
?>
 
George van Baasbank

George van Baasbank

01/12/2013 12:17:23
Quote Anchor link
Eddy,

Bedankt voor je suggestie. Ik ga kijken of ik zoiets kan maken. Mijn probleem zou kunnen zijn: Waar en hoe plaats ik de te vervangen string. Maar dat is/wordt een uitdaging voor mij.
 



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.