Toon posts:

[css]border die geen ruimte inneemt en tekst als achtergrond

Pagina: 1
Acties:

donderdag 22 januari 2004 00:29

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Zal maar gelijk met wat voorbeelden beginnen.
Dit is wat ik nu heb voor een online agenda:

Afbeeldingslocatie: http://www.excudo.net/got/agenda2.png

Dat wordt gemaakt door deze code:
HTML:
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

 <td valign="top" id="tijden">
    <span style="color: #F00;">08:00</span><br>
    <span style="color: #005;">08:15</span><br>
    <span style="color: #005;">08:30</span><br>
    <span style="color: #005;">08:45</span><br>
    <span style="color: #F00;">09:00</span><br>
    <span style="color: #005;">09:15</span><br>
    <span style="color: #005;">09:30</span><br>
    <span style="color: #005;">09:45</span><br>
    <span style="color: #F00;">10:00</span><br>
    <span style="color: #005;">10:15</span><br>
    <span style="color: #005;">10:30</span><br>
    <span style="color: #005;">10:45</span><br>
    <span style="color: #F00;">11:00</span><br>
    <span style="color: #005;">11:15</span><br>
    <span style="color: #005;">11:30</span><br>
    <span style="color: #005;">11:45</span><br>
    <span style="color: #F00;">12:00</span><br>
    <span style="color: #005;">12:15</span><br>
    <span style="color: #005;">12:30</span><br>
    <span style="color: #005;">12:45</span><br>
    <span style="color: #F00;">13:00</span><br>
    <span style="color: #005;">13:15</span><br>
    <span style="color: #005;">13:30</span><br>
    <span style="color: #005;">13:45</span><br>
    <span style="color: #F00;">14:00</span><br>
    <span style="color: #005;">14:15</span><br>
    <span style="color: #005;">14:30</span><br>
    <span style="color: #005;">14:45</span><br>
    <span style="color: #F00;">15:00</span><br>
    <span style="color: #005;">15:15</span><br>
    <span style="color: #005;">15:30</span><br>
    <span style="color: #005;">15:45</span><br>
    <span style="color: #F00;">16:00</span><br>
    <span style="color: #005;">16:15</span><br>
    <span style="color: #005;">16:30</span><br>
    <span style="color: #005;">16:45</span><br>
    <span style="color: #F00;">17:00</span><br>
    <span style="color: #005;">17:15</span><br>
    <span style="color: #005;">17:30</span><br>
    <span style="color: #005;">17:45</span><br>
    <span style="color: #F00;">18:00</span><br>
 </td>
 <td valign="top" style="padding: 0px 2px; line-height: 9pt;">
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
    &nbsp;<br>
 </td>
 <td valign="top" class="dagtext">
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div class="reminder">
        <a href="javascript: popup('view.php?id=24','viewWin','700','450');" style="font-weight: bold;">
        woensdag almere dag???</a> <i>[Locatie: almere]</i><br> 
        &nbsp;<br> 
        &nbsp;<br> 
        &nbsp;<br> 
        &nbsp;<br> 
        &nbsp;
    </div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div class="bezet">
        <a href="javascript: popup('view.php?id=13','viewWin','700','450');" style="font-weight: bold;">
        gezonde zaak</a> gezonde zaak fittest deel II<br> 
        &nbsp;<br> 
        &nbsp;<br> 
        &nbsp;
    </div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFF;" class="spantext">&nbsp;</div>
    <div style="background-color:#FFD;" class="spantext">&nbsp;</div>
 </td>

Cascading Stylesheet:
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

/* het relevante gedeelte van de css file */
#tijden, .dagtext, .weektext {
    vertical-text: top;
    font-size: 8pt;
    line-height: 9pt;
    }
#tijden {
    text-align: right;
    padding: 1px 1px 1px 1px;
    }
.locatie {
    line-height: 9pt;
    font-size: 8pt;
    padding:0px 4px;
    background-color:#F0F;
    border: 1px solid #0000EE;
    }
.dagtext, .weektext {
    padding: 0px 1px;
    border: 1px solid #005;
    background-image:url('images/agenda/text-line.gif');
    font-family: Fixedsys;
    }
.dagtext {
    width: 500px;
    }
.weektext {
    width: 100px;
    }
.spantext {
    background-image:url('images/agenda/text-line.gif');
    }
.reminder {
    background-color: #F1F4CC;  /* #9C0 */
    }
.bezet {
    background-color: #F2F6F5;  /* #0C9 */
    }

er hangt een database achter en de code wordt door een PHP script gegenereerd
btw, de reden dat er een <td> is met alleen maar  <br>s, is omdat er toevallig niets staat. Er kan daar eventueel ook nog informatie komen.

Probleem 1:
Wat ik nu graag zou willen is dit:

Afbeeldingslocatie: http://www.excudo.net/got/agenda3.png

Ik wil dus graag dat er rechtsonderin in een bepaalde kleur kan worden aangegeven om wat voor'n agendapunt het gaat. Echter, omdat die lijn al door een achtergrondplaatje gemaakt wordt gaat dat niet als achtergrond en ben ik aan het zoeken naar een css-oplossing waarbij ik het gewoon met text kan doen. Ik ben vervolgens al gaan zitten klooien met float en z-indexen, maar kom niet tot het gewenste resultaat. De bedoeling is dat de tekst er als een soort achtergrond komt te staan. Dus dat de eigenlijke tekst die ook in die ruimte komt te staan er eventueel overheen kan lopen.
vraag: Is dit mogelijk en zo ja, kan iemand me een zetje in de goeie richting geven?

Probleem 2:
Wat ik ook graag zou willen is dit:

Afbeeldingslocatie: http://www.excudo.net/got/agenda4.png

Dus, om het geheel wat te accentueren, dat een gekleurd gedeelte een border krijgt. Het probleem is alleen dat een border ruimte inneemt waardoor het geheel niet meer op de goede hoogte komt te staan met de tijden in de linker TD-cell. Ik heb al zitten klooien met negatieve margins enzo, maar dat boodt niet echt een oplossing.
vraag: Wederom: Is dit mogelijk en zo ja, kan iemand me een zetje in de goeie richting geven? :)

edit: Hou er dus rekening mee dat dit door een script wordt gegenereerd en ik met relatieve dingen moet werken. Ik heb al aan een position: absolute gedacht, maar dat gaat niet werken door de manier waarop het gegenereerd wordt.

[ Voor 56% gewijzigd door marty op 22-01-2004 00:33 ]

donderdag 22 januari 2004 00:42

Acties:

Verwijderd

Juist omdat je met een script werkt kan je dus ook heel goed een andere class meegeven als het de laatste div van een afspraak moet zijn.

Nu weet ik niet hoe je script eruit ziet, maar als elk segment uit 15 minuten bestaat, dan moet je makkelijk bij de laatste een achtergrondplaatje met een background-position: right kunnen triggeren dmv een andere class.

[ Voor 4% gewijzigd door Verwijderd op 22-01-2004 00:43 ]

donderdag 22 januari 2004 00:42

Acties:

Verwijderd

foutje...verkeerde button

[ Voor 93% gewijzigd door Verwijderd op 22-01-2004 00:43 ]

donderdag 22 januari 2004 01:15

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Verwijderd schreef op 22 januari 2004 @ 00:42:
Nu weet ik niet hoe je script eruit ziet, maar als elk segment uit 15 minuten bestaat, dan moet je makkelijk bij de laatste een achtergrondplaatje met een background-position: right kunnen triggeren dmv een andere class.
marty schreef op 22 januari 2004 @ 00:29:
Echter, omdat die lijn al door een achtergrondplaatje gemaakt wordt gaat dat niet als achtergrond en ben ik aan het zoeken naar een css-oplossing waarbij ik het gewoon met text kan doen.
:z

donderdag 22 januari 2004 08:19

Acties:
  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Probeer het eens met correct (X)HTML:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<table>
    <thead>
        <tr>
            <th>tijd</th>
            <th>afspraak</th>
        </tr>
    </thead>
    <tbody>
        <!-- (...) -->
        <tr>
            <td>9:00</td>
            <td>woensdag almere dag???</td>
        </tr>
        <!-- (...) -->
        <tr>
            <td>11:00</td>
            <td>gezondezonde zaak</td>
        </tr>
        <!-- (...) -->
    </tbody>
</table>

donderdag 22 januari 2004 09:50

Acties:

Verwijderd

marty schreef op 22 januari 2004 @ 01:15:
:z
maar die lijn hoeft niet dmv een achtergrond img, die kan je ook met een class fixen.

donderdag 22 januari 2004 12:35

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
creative8500 schreef op 22 januari 2004 @ 08:19:
Probeer het eens met correct (X)HTML:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<table>
    <thead>
        <tr>
            <th>tijd</th>
            <th>afspraak</th>
        </tr>
    </thead>
    <tbody>
        <!-- (...) -->
        <tr>
            <td>9:00</td>
            <td>woensdag almere dag???</td>
        </tr>
        <!-- (...) -->
        <tr>
            <td>11:00</td>
            <td>gezondezonde zaak</td>
        </tr>
        <!-- (...) -->
    </tbody>
</table>
Waar is dit precies een antwoord op en hoe biedt dat een oplossing?
Verwijderd schreef op 22 januari 2004 @ 09:50:
[...]

maar die lijn hoeft niet dmv een achtergrond img, die kan je ook met een class fixen.
Dat gaat niet. Dan zou ik van iedere regel een aparte div moeten maken en die een border-bottom geven. Dat heb ik al geprobeerd, maar krijg daar erg veel problemen mee. Die border neemt namelijk ook weer ruimte in waardoor ik met de line-height moet gaan zitten klooien en daar gaat het fout. Hij laat het dan in mozilla bijvoorbeeld overlappen, waardoor je om de regel een lijn mist.

vrijdag 23 januari 2004 13:04

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
* trap *

niemand?
Pagina: 1
Reageer