Jetzt kostenlos Anmelden!

Fujitsu Männlich

User wurde gesperrt

Beiträge: 92

Geschlecht: Männlich

PHPKIT Version: keine

1

Montag, 3. März 2008, 02:24

[CSS] Bestimmte Texte Wörter automatisch anpassen

Hallo Freunde,

ich arbeite in Moment mit CSS und habe da eine Frage:

Ist es möglich das aus einem Text bestimmte Wörter automatisch durch eine style.css Datei angepasst werden können?

Beisppiel Text:

Fischers Fritze, fischt frische Fische. Frische Fische, fischt Fischers Fritze.

Ich möchte, dass die CSS Datei automatisch erkennt: "Aha, da steht Fritze und Fritze muss ich rot und dick machen". Also Quasi das diese CSS Datei dann "Fritze" automatisch rot macht und auch dick. Weis jemand wie das geht?

Also mit Div wäre das doof, da würde es ja Probleme geben wie z.B:

Quellcode

1
2
3
4
5
  <div class="newsitem">
	<div class="title">BeispielText</div>
	<div class="body"> <img src="img/somepicture.gif" width="120" height="120" class="left" alt=""/>Fischers Fritze, fischt frische Fische. Frische Fische, fischt Fischers Fritze.</div>
	<div class="clearer"><span></span></div>
  </div>


Also eigentlich habe ich davon keine Ahnung, darum die Frage an euch ob das geht!?

DIE CSS Datei wäre folgende:

Quellcode

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
/* Standard element */
* {
	margin: 0;
	padding: 0;
}
body {
	background: #999 url(img/bg.gif) repeat-y;
	font-family: Tahoma,sans-serif;
	font-size: 0.8em;
	padding-left: 25px;
}
p {
	margin-bottom: 1.2em;
}
ul {
	margin: 0 0 10px 22px;
}
li {
	list-style-image: url(img/li.gif);
}

/* misc */
.clearer {
	clear: both;
}
div.quote {
	border-left: 4px solid #36C;
	clear: both;
	color: #555;
	display: block;
	font: italic 1.1em Verdana,serif;
	margin: 12px 0 12px 16px;
	padding-left: 12px;
}

/* top & header */
.top {
	background: url(img/top.gif);
	color: #FFF;
	height: 45px;
	width: 939px;
}
.top h1 {
	font: bold 2em sans-serif;
	padding: 8px 16px 0;
}
.top h1 span {
	font: normal 60% Verdana,sans-serif;
}
.header {
	background: url(img/header.gif); 
	height: 101px;
	width: 939px; 
}

#thumbgallery {
clear:both; 
padding:0 0 0 9px; 
margin: 0 0 2px 0; 
background:inherit;
}

.thumbs img{
position:relative;
padding:0;
margin:10px 2px 2px 2px;
border:2px solid #d3d3d3;
background:inherit;
}

.thumbs img:hover{
border:2px solid #5d7ca1;
}

/* menu */
div.menu ul {
	float: left;
	margin: 0 1px 0 0;
}
div.menu li {
	list-style-image: none;
}
div.menu a {
	background: #4B4B4B;
	color: #DDD;
	display: block;
	font-family: sans-serif;
	font-size: 85%;
	padding: 5px 0 5px 8px;
	text-decoration: none;
	width: 180px;
}
div.menu a#current {
	background: #666; color: #FFF;
}
div.menu a:hover {
	background: #555; color: #FFF;
}
div.menu li {
	list-style-type: none;
	margin: 0 0 1px 0;
	padding: 0;
}

/* left side */
div.content_left {
	margin: 1px;
	width: 593px;
}
div.date {
	background: #0070CD url(img/bgdate.gif) repeat-x;
	color: #FFF;
	font-weight: bold;
	padding: 10px;
}
div.newsitem {
	background: #F0F0F0 url(img/bg_newsitem.png) repeat-x;
	border: 1px solid #EEE;
	border-color: #EEE #EEE #DDD #EEE;
	clear: both;
	color: #333;
	line-height: 1.5;
	margin: 6px;
	padding: 10px;
}
div.newsitem img {
	border: 3px double #CCC;
	height: 120px;
	margin: 6px 10px 10px 10px;
	width: 120px;
}
div.newsitem img.left {
	float: left;
}
div.newsitem img.right {
	float: right;
}
div.newsitem .title {
	color: #0066CC;
	font: bold 1.2em Tahoma,sans-serif;
	padding: 3px 4px;
}
div.newsitem .body {
	font-family: "Trebuchet MS",Tahoma,sans-serif;
	font-size: 0.9em;
	text-align: justify;
	color: #000099;
}


/* right side */
div.content_right {
	width: 331px;
	position: absolute;
	top: 116px;
	left: 620px;
}

div.links a {
	background: url(img/bg_navitem.gif) repeat-x #FFF;
	border-bottom: 1px solid #EEE;
	display: block;
	font: bold 0.8em Verdana,Tahoma,sans-serif;
	padding: 6px 0 8px 8px;
	text-decoration: none; color: #333;
}
div.links a:hover {
	color: #0080DD; background-position: left bottom;
}
div.links div.line {
	height: 1px; background-color: #EEEEF5;
}
div.links .title {
	background: #333 url(img/bgsubtitle.gif) repeat-x;
	color: #FFF;
	font: normal 85% Tahoma,sans-serif;
	padding: 5px 8px;
}

/* footer */
div.footer {
	background: #F0F0F0 url(img/bgdate.gif) repeat-x;
	border: 1px solid #EEE;
	color: #FFF;
	margin-left: 6px;
	width: 581px;
}
div.footer .copyright {
	padding: 6px 12px;
}
div.footer a {
	color: #FFF;
	font: bold 1em "Trebuchet MS",sans-serif;
	text-decoration: none;
}


Danke im Voraus!
  • Zum Seitenanfang
  • Zum Seitenende

KingEli Männlich

weiß wie man Threads erstellt

Beiträge: 187

Geschlecht: Männlich

Wohnort: Waldachtal-Hörschweiler

PHPKIT Version: 1.6.03

2

Montag, 3. März 2008, 02:42

Du kannst nur folgendes machen.

Quellcode

1
2
3
4
5
6
7
8
9
10
p:first-letter ------- Anfangsbuchstabe anders darstellen
p:first-line ------ erste Zeile eines Absatzes anders darstellen

:before und :after
Du hast z.B. <span>Ein Text</span> jetzt kannst Du da
span:before{content:"Fischers Fritze"; color: #000;}
Hier fügt er vor "einText" Fischers Fritze ein.
oder
span:after{content:"FritzeFischers"; color: #000;}
Hier fügt er nach "einText" FritzeFischers ein.


So viel wie ich weiß, geht nicht mehr.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »KingEli« (3. März 2008, 13:56)

  • Zum Seitenanfang
  • Zum Seitenende

archipage Männlich

kennt keine frische Luft

Beiträge: 456

Geschlecht: Männlich

PHPKIT Version: 1.6.1

3

Montag, 3. März 2008, 07:37

wenn es eine lösung geben könnte nur so, das du javascript als hilfe braucht, soweit ich denke. aber da musste echt mal die javascript-profis fragen :rolleyes:
  • Zum Seitenanfang
  • Zum Seitenende

Fujitsu Männlich

User wurde gesperrt

Beiträge: 92

Geschlecht: Männlich

PHPKIT Version: keine

4

Donnerstag, 6. März 2008, 13:40

Wenns mit JS geht, dann bitte ich um Hilfe :D
  • Zum Seitenanfang
  • Zum Seitenende