Du bist nicht angemeldet.

Meine erste Site mit ein wenig PHP

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

1

Dienstag, 1. Juli 2003, 18:42

Meine erste Site mit ein wenig PHP

Hi Leute!

Ich hätte da mal eine Seite zur Bewertung. Hier eine kurze Hintergrundinfo:

Einer unserer Kunden bekommt von uns eine neue Website. Das Design ist mehr oder weniger vorgegeben, genau wie eine horizontale Navigationsleiste.

Der Kunde stellte sich das ganze so vor, dass die Menüs bei Mausberührung herunterklappen. Er zeigte mir im Netz ein paar Beispiele, sie natürlich alle auf JS basierten.

Ich konnte ihm jedoch klar machen, dass auf die Verwendung von JS unbedingt verzichtet werden sollte.

Ich habe versuchst, eine Möglichkeit zu finden, um dies etwas anders zu realisieren. Hier kamen meine ersten, und noch rudimentären, PHP-Kentnisse zum tragen. Aber sehst selbst...

Ich habe mir selbst bei der Gestaltung folgende Ziele gesetzt:

1. reines und valides XHTML

2. Jegliche Gestaltung in externe StyleSheets

3. Layout passt sich automatisch an die Umgebung an (print css funktioniert noch nicht!)

4. Möglichst große Usability, wie z.B. Darstellung in Lynx

Die Site ist noch völlig in der Entwicklung. Der Inhalt fehlt gänzlich und ich arbeite erst seit zwei Tagen daran.

Dennoch würde mich interessieren, inwieweit ich die Ziele erreicht habe.

Besonders würde mich interessieren, was Ihr von der Navigation haltet.

Hier der Link: Zur Testseite

Valides XHTML ist es auf jeden Fall schon mal: http://validator.w3.org/check?uri=http%3…lash%2Fhome.php

Und das CSS ebenfalls: http://jigsaw.w3.org/css-validator/valid…=1&profile=css2

Im Lynx-Viewer schauts eigentlich auch gut aus. Selbst die Navigation funzt problemlos: http://www.delorie.com/web/lynxview.cgi?…lash%2Fhome.php


So, jetzt seit Ihr dran!

Jede Kritik ist willkommen! Verbesserungsvorschläge natürlich noch mehr... ;)

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

t-ob-i

Profi

Beiträge: 1 221

  • Private Nachricht senden

2

Dienstag, 1. Juli 2003, 19:35

Guten Abend,

ich Kurzkommentar - leider habe ich zu mehr keine Zeit - das Navigationsprinzip ist einfach genial.
Mir gefällt es echt gut. Du sparst dir ziemlich geschickt die seperate Katogorien - Beschreibungsseite und verzichtest trotzdem auf JS. *daumenhoch*

Tobias
Signatur von »t-ob-i« {SIGNATUR}

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

3

Dienstag, 1. Juli 2003, 19:44

ThAnX!

Genau das war beabsichtigt. Und da das ganze per PHP funktioniert, also serverseitig, kann eigentlich auch nichts schiefgehen... :D
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Snoop

Profi

Beiträge: 1 187

  • Private Nachricht senden

4

Dienstag, 1. Juli 2003, 20:22

Bislang sieht die Seite imho sehr gut aus!

Navigation wirkt durchdacht ... die Frage ist zwar wie mit den aufklappenden Div-Containern die älteren Browser reagieren, aber wenn das erstmal egal ist, dann ists ja okay ;) ...

Mir gefällt die Navigation auf jeden Fall - auch die sich ändernden Farben sind hübsch.

Das Design wirkt insgesamt sauber, grafisch nicht zu aufwendig - aber dennoch hübsch und nicht zu steril... - der Quellcode scheint auf dem ersten Blick allright. Zu mehr Analyse fehlt mir momentan die Zeit ... sieht aber schomal gut aus!
Signatur von »Snoop« The use of COBOL cripples the mind; its teaching should, therefore, be
regarded as a criminal offence.
-- Edsger W. Dijkstra, SIGPLAN Notices, Volume 17, Number 5 (11.05.1930 - 07.08.2002)

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

5

Dienstag, 1. Juli 2003, 20:52

Auch Dir erst einmal vielen Dank.

Die Farben (bis auf das Blau wahrscheinlich) sind noch nicht verbindlich.

Wie ältere Browser reagieren weiß ich auch noch nicht. Sicherheitshalber werden die StyleSheets per @import angesprochen.

Ich denke ich werde grundlegende Dinge wie das Logo in ein separates Sheet legen, welches auf dem herkömlichen Weg angesprochen wird.
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

mrhappiness

Profi

Beiträge: 1 061

  • Private Nachricht senden

6

Dienstag, 1. Juli 2003, 23:41

ich kann mich meinen vorschreibern nur anschließen: sieht wirklich gut aus, mir gefallen vor allem die seiten in orange und dunkelgraublau, das grün ist zu knallig für meinen geschmack

könntest ja auch evtl. die menüs mit js auflappen lassen
nachdem jeder punkt auf jeden fall zugänglich ist, ist es ja nicht verwerflich zusätzlich etwas js einzusetzen
Signatur von »mrhappiness« Ich denke, also bin ich. Einige sind trotzdem...

memowe

Erleuchteter

Beiträge: 3 324

Vorname: Mirko

  • Private Nachricht senden

7

Mittwoch, 2. Juli 2003, 00:45

Guten Abend. :)

Da hat er Recht, wenn die Seiten ohne JavaScript uneingeschränkt benutzbar sind, dann ist JavaScript (so es nicht ablenkt oder gar nervt) vollkommen OK. Mir gefällt die Seite optisch auch sehr gut.

Das Konzept mit dem pseudo-aufklappenden Menü empfinde ich jedoch teilweise als nachteilbehaftet: Jeder Klick bei so einem Menü erfordert einen eigenen Request, was bei Vielklickern zu hoher Serverlast führen kann. Zudem dauert ein Request einer für den Browser unbekannten Seite wesentlich länger, als wenn Du nur per JavaScript ein Menü sichbar schaltetest (wobei bei letzterem wieder die Zugänglichkeit gefährdet ist). Letzendlich hast Du ein Unterseitenkonzept gewählt, das aber zu einer bloßen Änderung in der Navigation degeneriert und das empfinde ich als Unterforderung der verwendeten Ressourcen. Wenn Du sowieso eine Seite neu lädst, dann kannst Du auch auf der Seite eine Kurzbeschreibung der Unterseiten angeben, wie bei vielen Seiten üblich und bewährt. Zudem widerspricht dieses dynamische Menü-Generieren bei gleichem Inhalt ein bisschen dem Prinzip, für eine Seite genau einen URI zu verwenden. Du hast damit für jede Seite eine Menge verschiedener URIs mit jeweils unterschiedlicher Navigation.

Das ist konzeptionell halt etwas unsauber, aber inwiefern es zu Problemen führt, sollte man erstmal ausprobieren. Aber der Ansatz ist kreativ und IMHO neu. Sowas unterstütze ich. Du solltest uns berichten, ob es im Zuge weiterer Entwicklungen mit diesem Konzept zu Fehlerquellen kommt.

Ein möglicher Haken könnte die Verwendung von Formularen sein, da bei einem neuen Request ein bereits ausgefülltes Formular nicht übernommen wird. Hier wird also das Prinzip von einzelnen Webseiten zur Erzeugung eines User-Interfaces missbraucht, was bei speziellen Einsatzzwecken auch OK ist. Bei einer solchen Webseite bin ich da sehr skeptisch. Aber ich würde mich für Dich freuen, wenn das Konzept aufginge und später keine Fehler deswegen auftauchten, die umständlich würgarounded werden müssten (das Formular wäre so ein Fall...).

Übrigens ist das noch nicht so ganz userfreundlich. Ein einmal aufgeklapptes Menü bekommt man so schnell nicht wieder zugeklappt. Jedenfalls nicht so, wie man es zunächst erwarten würde. Hier müsstest Du den ursprünglichen Link auf die vorherige Seite referenzieren. Das wäre aber ein Würgaround und aus der daraus resultierenden Inkonsistenz von Linktext und referenzierter Seite könnten Verwirrungen erwachsen. Ich wünsche Dir, dass Du diese Probleme in den Griff bekommst.

Von der Optik her ist mir nur negativ aufgefallen, dass die aufgeklappten Menüs bei mir ein Stück über den ursprünglichen Link ragen und diesen teilweise verdecken. Ist das beabsichtigt? Oder ist das darauf zurückzuführen, dass die Seite eventuell für das fehlerhafte Box-Modell vom IE pessimiert sein könnte? ;)

Ich hoffe, das hilft ein bisschen weiter.
Mirko :)
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

ARESOL

Profi

Beiträge: 1 050

  • Private Nachricht senden

8

Mittwoch, 2. Juli 2003, 07:56

Guten Morgen,

Seite gefällt mir sehr gut, doch konnte ich das Menü erst sehen´, als ich die Seite im Netscape anzeigen lies. Mein Internet Explodierer und auch Opera zeigten das Menü garnicht an. Außerdem ist mir aufgefallen, dass der Text in der bei den Browsern verschieden angezeigt wird, ich dachte das wäre nicht möglich bei Validität???

Das wärs erstmal. Ansonsten ist die Seite wirklich gut.

Große Bewertung gibt es, wenn die Seite noch ein Stückchen weiter ist.
Signatur von »ARESOL« wieder da

Investorman

Erleuchteter

Beiträge: 3 610

  • Private Nachricht senden

9

Mittwoch, 2. Juli 2003, 08:38

Zitat

Original von ARESOL
Mein Internet Explodierer und auch Opera zeigten das Menü garnicht an.
Sorry, das kann ich nicht bestätigen. :) Mit ist allerdings die exakte Farbzuteilung nicht ganz klar: Manchmal habe ich für ein und denselben Menüpunkt unterschiedliche Farben (orange, grau, grün); je nach dem, in welcher "Ebene" ich auf einen Menüounkt klicke. Grundsätzliche gefällt die Seite aber auch mir! :))

Anmerkung: Kann man nicht die DIV-Container (für die Navigationselemente) per MouseOver "aufklappen" lassen, dh sichtbar machen? Wäre doch eine elegante Möglichkeit ...
Signatur von »Investorman« ______________________________

Investorman.com || Webmasterrecht.de || Recht interessant - Die Linksammlung zum Internetrecht

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

10

Mittwoch, 2. Juli 2003, 08:56

Euch allen erst einmal vielen Dank!

[q=mr_happiness]das grün ist zu knallig für meinen geschmack[/q]

Wie bereits erwähnt, sind die Farben noch nicht definitv. Das grün sieht richtig giftig aus... ;)

[q=mr_happiness]könntest ja auch evtl. die menüs mit js auflappen lassen
nachdem jeder punkt auf jeden fall zugänglich ist, ist es ja nicht verwerflich zusätzlich etwas js einzusetzen[/q]

Darauf würde ich gerne, wenn möglich, gänzlich verzichten.

[q=memowe]Letzendlich hast Du ein Unterseitenkonzept gewählt, das aber zu einer bloßen Änderung in der Navigation degeneriert und das empfinde ich als Unterforderung der verwendeten Ressourcen. Wenn Du sowieso eine Seite neu lädst, dann kannst Du auch auf der Seite eine Kurzbeschreibung der Unterseiten angeben, wie bei vielen Seiten üblich und bewährt.[/q]

Daran habe ich auch schon gedacht. So dass ein Klick auf Über mcs z.B. kein Div öffnet sondern eine eigene über_mcs-Seite, auf der ein kurzer Inhaltsüberblick gegeben wird inkl. Links.

Nur ein erneuter Klick auf dieser Seite würde dann den Div öffnen.... Mal sehen...

[q=memowe]aber inwiefern es zu Problemen führt, sollte man erstmal ausprobieren. Aber der Ansatz ist kreativ und IMHO neu. Sowas unterstütze ich. Du solltest uns berichten, ob es im Zuge weiterer Entwicklungen mit diesem Konzept zu Fehlerquellen kommt.[/q]

ThAnX! :]

Ich werde an diesem Konzept auf jeden Fall erst einmal festhalten. Über den Verlauf der Entwicklung und den Praxiserfahrungen halte ich Euch auf dem laufenden...

[q=memowe]Ein möglicher Haken könnte die Verwendung von Formularen sein, da bei einem neuen Request ein bereits ausgefülltes Formular nicht übernommen wird.[/q]

Auf die Seite kommt nur ein einfaches Kontaktformular. Und wenn von dort aus jemand eine andere Seite anwählt, wieso sollte der Inhalt des Formulares erhalten bleiben? Entweder hat er das Formular ja bereits abgeschickt oder möchte es gar nicht, oder?

Oder verstehe ich Dich da falsch? ?(

[q=memowe]Übrigens ist das noch nicht so ganz userfreundlich. Ein einmal aufgeklapptes Menü bekommt man so schnell nicht wieder zugeklappt. Jedenfalls nicht so, wie man es zunächst erwarten würde. Hier müsstest Du den ursprünglichen Link auf die vorherige Seite referenzieren. Das wäre aber ein Würgaround und aus der daraus resultierenden Inkonsistenz von Linktext und referenzierter Seite könnten Verwirrungen erwachsen. Ich wünsche Dir, dass Du diese Probleme in den Griff bekommst.[/q]

Da gebe ich Dir vollkommen recht. Da werde ich mir mal was überlegen.... ?( :thinker:

[q=memowe]Von der Optik her ist mir nur negativ aufgefallen, dass die aufgeklappten Menüs bei mir ein Stück über den ursprünglichen Link ragen und diesen teilweise verdecken. Ist das beabsichtigt?[/q]

Nö, siehe weiter unten.

[q=memowe]Oder ist das darauf zurückzuführen, dass die Seite eventuell für das fehlerhafte Box-Modell vom IE pessimiert sein könnte?[/q]

Also eigentlich ist es mein Bestreben die Seiten eben nicht für irgendetwas zu optimieren. Da ich aber erst seit 3 Werktagen an diesem Projekt arbeite, bin ich noch nicht dazu gekommen, Tests mit versch. Browsern durchzuführen.

Gerade eben habe ich mir die Seite im Mozilla angesehen. Du hast recht, die Navigationsleiste ist tatsächlich zu tief. Aber woran kann das liegen?

Hier ein Mozilla 1.4 Screenshot

Hier ein IE 6 Screenshot

Hier folgt der Quellcode:

PHP-Quelltext

 
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

<?php echo "<?xml version="1.0" encoding="iso-8859-1"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>)) mcs promotion - creative solutions - Ihr Fullservice Partner für Ihre Promotion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import url(../../rec/css/orange.css);</style>
<style type="text/css" media="print">@import url(../../rec/css/print.css);</style>
</head>
<body>
<p id="head"><img src="../../rec/bilder/logo_orange.jpg" width="187" height="85" 
title="" alt=")) mcs promotion" /></p>
<p id="headb"><img src="../../rec/bilder/balken_orange.jpg" width="400" height="16" title="" alt="" /></p>
<div id="flash"><img src="../../rec/bilder/head2.jpg" width="400" height="85" alt="" title="" /></div>
<div id="navbox">
  <p> <a href="#" class="mena">home</a> <a href="../kopievonflash/home.php?nav=1" class="men">über 
    mcs</a> <a href="../kopievonflash/home.php?nav=2" class="men">konzepte</a> 
    <a href="../kopievonflash/home.php?nav=3" class="men">kompetenzen</a> <a href="../kopievonflash/home.php?nav=4" class="men">produkte</a> 
    <a href="../kopievonflash/home.php?nav=5" class="men">kontakt</a> <a href="../kopievonflash/impressum.php?flash=1" class="men">impressum</a> 
    <a href="../kopievonflash/sitemap.php?flash=1" class="men">sitemap</a></p>
</div>
<?php 
    if($nav == 1) { ?>
<div id="navdp1"> 
  <?php include('../../rec/data/ger/links/ueber_mcs.txt'); ?>
</div>
    <?php } ?>
<?php 
    if($nav == 2) { ?>
<div id="navdp2"> 
  <?php include('../../rec/data/ger/links/konzepte.txt'); ?>
</div>
    <?php } ?>
<?php 
    if($nav == 3) { ?>
<div id="navdp3"> 
  <?php include('../../rec/data/ger/links/kompetenzen.txt'); ?>
</div>
    <?php } ?>
<?php 
    if($nav == 4) { ?>
<div id="navdp4"> 
  <?php include('../../rec/data/ger/links/produkte.txt'); ?>
</div>
    <?php } ?>
<?php 
    if($nav == 5) { ?>
<div id="navdp5"> 
  <?php include('../../rec/data/ger/links/kontakt.txt'); ?>
</div>
    <?php } ?>
<div id="ueberschrift"> 
  <?php include('../../rec/data/ger/kompetenzen/ippag_head.txt'); ?>
</div>
<div id="text"> 
  <?php include('../../rec/data/ger/kompetenzen/ippag_content.txt'); ?>
</div>
<div id="bilder"><img src="../../rec/bilder/kanne.jpg" width="142" height="142" title="" alt="Beispielbild" /><br />
  <img src="../../rec/bilder/kanne.jpg" width="142" height="142" title="" alt="Beispielbild" /></div>
<div id="lang"><a href="#" class="langtext"><img src="../../rec/bilder/english.jpg" width="13" height="30" 
title="" alt="View this page in" /> 
  english</a></div>
<div id="footer"> 
  <p>© 2003 - mcs Werbemittel-Vertriebs GmbH</p>
</div>
</body>
</html>


Hier das CSS:

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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335

/****************************** 
**                           **
**   mcs Werbemittel GmbH    **
** CSS Bildschirmdarstellung **
**                           **
******************************/

/*** Allgemeines - START ***/

body {
	background-color: #ffffff; 
	color		: black;	   
	font-family	: sans-serif;  
	line-height	: 100%;		   
	margin		: 0;		   
	padding		: 0 0 1em;	   
}

/*** Allgemeines - ENDE ***/ 

/*** Kopfzeile - START ***/

#head { 
	margin : 0;
	color : white;
	background-color: #f26522;
	text-align : right;
	padding : 0;
	}

#head img {
	vertical-align : bottom;
	}

#headb {
	margin : 0;
	color : white;
	background-color: #f26522;
	text-align : right;
	padding : 0;
	border-bottom : 1px solid #f26522;
	}
	
#headb img {
	vertical-align : bottom;
	}
	
#flash {
	position:absolute; top: 0px; left:0px;
	color : white;
	background-color: #f26522;
	height : 85px;
	width : 400px;
	}
	
/*** Kopfzeile - ENDE ***/

/****************************************************************/

/*** Navigationleiste - START ***/

a:link.men, a:visited.men, a:active.men {
	background-color : #fff0d8;
	font-family : sans-serif;
	font-size : 0.8em;
	font-weight : normal;
	color : #f26522;
	text-decoration : none;
	margin-right : 0.5em;
	padding-top : 4px;
	padding-bottom : 4px;
	padding-left : 10px;
	padding-right : 10px;
	border : 1px solid #f26522;
	}

a:hover.men {
	color : #f26522;
	background-color : #ffffff;
	font-family : sans-serif;
	padding-top : 4px;
	padding-bottom : 4px;
	padding-left : 10px;
	padding-right : 10px;
	border : 1px solid #f26522;
	}

a:link.mena, a:visited.mena, a:active.mena { /*** Navigationsleiste - AKTIV ***/ 
	color : #f26522;
	background-color : #ffffff;
	font-family : sans-serif;
	font-size : 0.8em;
	font-weight : normal;
	text-decoration : none;
	margin-right : 0.5em;
	padding-top : 4px;
	padding-bottom : 4px;
	padding-left : 10px;
	padding-right : 10px;
	border : 1px solid #f26522;
	}

a:hover.mena { /*** Navigationsleiste - AKTIV ***/
	color : #f26522;
	background-color : #ffffff;
	font-family : sans-serif;
	padding-top : 4px;
	padding-bottom : 4px;
	padding-left : 10px;
	padding-right : 10px;
	border : 1px solid #f26522;
	}

#navbox {
	position:absolute; 
	left:40px; 
	top:92px;
	height:40px;
}

/*** Navigationsleiste - ENDE ***/

/*** Navigation DropDown - START ***/

a:link.mendp, a:active.mendp, a:visited.mendp {
		color			: #f26522;
		background-color: #fff0d8;
		font-family		: sans-serif;
		font-size		: 0.8em;
		font-weight		: normal;
		text-decoration : none;
        }

a:hover.mendp {
		color			: black;
		background-color: #fff0d8;
		font-family		: sans-serif;
		font-size		: 0.8em;
		font-weight		: normal;
		text-decoration : none;
        }

#navdp1 { 
		position:absolute; 
		left:104px; 
		top:120px; 
		z-index:2;
		color			: #f26522;
		background-color:#fff0d8; 
		}

#navdp1 p { 
		margin-left:0.7em; 
		margin-top:0.4em; 
		margin-right:0.7em; 
		margin-bottom:0.4em; 
		line-height:130%; 
		}
		
#navdp2 { 
		position:absolute; 
		left:191px; 
		top:120px; 
		z-index:2;
		color			: #f26522;
		background-color:#fff0d8; 
		}

#navdp2 p { 
		margin-left:0.7em; 
		margin-top:0.4em; 
		margin-right:0.7em; 
		margin-bottom:0.4em; 
		line-height:130%; 
		}

#navdp3 { 
		position:absolute; 
		left:276px; 
		top:120px;
		z-index:2;
		color			: #f26522;
		background-color:#fff0d8; 
		}
		
#navdp3 p { 
		margin-left:0.7em; 
		margin-top:0.4em; 
		margin-right:0.7em; 
		margin-bottom:0.4em; 
		line-height:130%; 
		}
		
#navdp4 { 
		position:absolute; 
		left:387px; 
		top:120px;
		z-index:2;
		color			: #f26522;
		background-color:#fff0d8; 
		}
		
#navdp4 p { 
		margin-left:0.7em; 
		margin-top:0.4em; 
		margin-right:0.7em; 
		margin-bottom:0.4em; 
		line-height:130%; 
		}
		
#navdp5 { 
		position:absolute; 
		left:467px; 
		top:120px; 
		z-index:2;
		color			: #f26522;
		background-color:#fff0d8; 
		}
		
#navdp5 p { 
		margin-left:0.7em; 
		margin-top:0.4em; 
		margin-right:0.7em; 
		margin-bottom:0.4em; 
		line-height:130%; 
		}
		
/*** Navigation DropDown - ENDE ***/

/****************************************************************/

/*** Inhalt - START ***/

/*** Überschrift - START ***/

#ueberschrift {
	font-family:sans-serif;
	font-size:1em;
	font-weight:bold;
	position:absolute;
	top:150px;
	left:40px;
	z-index:1;
	}

/*** Überschrift - ENDE ***/

/*** Text/Bilder - START ***/

#text { 
	font-family:sans-serif;
	font-size:0.8em;
	font-weight:normal;
	position:absolute;
	top:200px;
	left:40px;
	height:55%;
	width:60%;
	max-height:55%;
	overflow:auto;
	z-index:1;
	}
	
#bilder {
	position:absolute;
	top:200px;
	left:70%;
	height:55%;
	max-height:55%;
	overflow:auto;
	width:auto;
	z-index:1;
	}

/*** Text/Bilder - ENDE ***/

/*** Inhalt - ENDE ***/

/****************************************************************/

/*** Sprachauswahl - START ***/

#lang {
	position:absolute; 
	bottom: 30px; 
	left:40px;
	}
	
a:link.langtext, a:active.langtext, a:visited.langtext {
		color			: #f26522;
		background-color: white;
		font-family		: sans-serif;
		font-size		: 0.8em;
		font-weight		: normal;
		text-decoration : none;
        }

a:hover.langtext {
		color			: silver;
		background-color: white;
		font-family		: sans-serif;
		font-size		: 0.8em;
		font-weight		: normal;
		text-decoration : none;
        }

.langtext img {
		border : 0;
		vertical-align:middle;
		}

/*** Sprachauswahl - ENDE ***/

/*** Footer - START ***/

#footer {
	position:absolute; 
	bottom: 0px; 
	left:0px;
	color : white;
	background-color: #f26522;
	height : 20px;
	width : 100%;
	padding : 0; 
	}

#footer p {
	font-family:sans-serif;
	font-size : 12px;
	text-align:right;
	margin-right:0.5em;
	margin-top:0.2em;
	}

/*** Footer - ENDE ***/


[q=ARESOL]Seite gefällt mir sehr gut, doch konnte ich das Menü erst sehen´, als ich die Seite im Netscape anzeigen lies. Mein Internet Explodierer und auch Opera zeigten das Menü garnicht an. Außerdem ist mir aufgefallen, dass der Text in der bei den Browsern verschieden angezeigt wird, ich dachte das wäre nicht möglich bei Validität???[/q]

Also dass verstehe ich auch nicht... ?( Welche IE- und Opera-Version benutzt Du?

Werf mal ein Blick auf die Screenshots. Inwiefern sieht die Schrift anders aus?

[q=Investorman]Mit ist allerdings die exakte Farbzuteilung nicht ganz klar: Manchmal habe ich für ein und denselben Menüpunkt unterschiedliche Farben (orange, grau, grün); je nach dem, in welcher "Ebene" ich auf einen Menüounkt klicke.[/q]

Also gedacht ist das mit den Farben so:

"Home" und "über_mcs" -> eine Farbe

"Konzepte" -> eine Farbe

"Kompetenzen" -> eine Farbe usw.

Momentan haben die meisten Seiten noch die Blautöne, weil ich mit denen angefangen habe. Die anderen Farben habe ich sprichwörtlich "auf die Schnelle" zusammengehauen, damit man sich ein Bild der Farbänderungen machen kann.

[q=Investorman]Anmerkung: Kann man nicht die DIV-Container (für die Navigationselemente) per MouseOver "aufklappen" lassen, dh sichtbar machen? Wäre doch eine elegante Möglichkeit ...[/q]

Das wäre eine tolle Sache, keine Frage! :D

Aber ich habe die Befürchtung, dass dies nicht ohn JS geht.

Zwar haben ein paar von Euch geschrieben, etwas JS wäre denkbar. Aber ich dachte, gerade in der Navigation wäre es ein Faux Pas, JS zu verwenden... ?(

Ich habe mich noch nie mit JS beschäftigt, da ich immer von allen Seiten Unkenrufe über die JS-Verwendung gehört habe. Wie würde so ein (möglichst einfaches) Script denn aussehen?

Um eine möglichst große Usability zu gewährleisten wäre es vielleicht sinnvoll, die Menüs zwar mit JS aufklappen zu lassen, aber für jeden Punkt eine Beschreibungsseite zu erstellen, die in der Beschreibung funktionierende Links zu den Unterseiten enthält...

Für weitere Anmerkungen oder Anregungen bin ich dankbar! :) :) :)

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »LapisInfernalis« (2. Juli 2003, 09:02)

memowe

Erleuchteter

Beiträge: 3 324

Vorname: Mirko

  • Private Nachricht senden

11

Mittwoch, 2. Juli 2003, 09:45

Zitat

Original von LapisInfernalis
[q=memowe]Ein möglicher Haken könnte die Verwendung von Formularen sein, da bei einem neuen Request ein bereits ausgefülltes Formular nicht übernommen wird.[/q]
Auf die Seite kommt nur ein einfaches Kontaktformular. Und wenn von dort aus jemand eine andere Seite anwählt, wieso sollte der Inhalt des Formulares erhalten bleiben?

Wegen Deines Konzeptes. Das ist ja der Witz. Du verwendest mehrere Request nur um ein Menü aufklappen zu lassen. Aber normale GUIs verändern den Inhalt nicht wenn man bloß Menüs öffnet. Die Diskrepanz dabei ist, dass es eben nicht das erwartete Verhalten ist, was geschieht, da trotz gleichen Seiteninhalts bei einer Änderung des Menüs die komplette Seite neu geladen werden muss. Dies ist einfach nur eine Ungereimtheit, die für Benutzer aus der Benutzung der Seite, so wie man es von anderen Menüs gewohn ist, erwachsen KANN.

Zitat

[q=Investorman]Anmerkung: Kann man nicht die DIV-Container (für die Navigationselemente) per MouseOver "aufklappen" lassen, dh sichtbar machen?[/q]
Das wäre eine tolle Sache, keine Frage! :D

Aber ich habe die Befürchtung, dass dies nicht ohn JS geht.

Zwar haben ein paar von Euch geschrieben, etwas JS wäre denkbar. Aber ich dachte, gerade in der Navigation wäre es ein Faux Pas, JS zu verwenden... ?(

Es ist ein Fauxpas, in der Navigation JavaScript so zu verwenden, dass sie nicht ohne JavaScript benutzbar ist. In Deinem Fall umgehst Du den Einsatz von JavaScript durch einen Workaround indem Du einigermaßen trickreich die clienseitige Dynamik durch serverseitige ersetzt. Daraus erwachsen aber möglicherweise einige Ungereimtheiten.

Zitat

Wie würde so ein (möglichst einfaches) Script denn aussehen?

Das, was Invetsti meinte, sähe so aus, wenn mich mein schlechtes javaScript-Verständnis nicht täuscht:

Quellcode

 
1

<a href="..." onclick="document.getElementById('untermenü').style.display='block';">Link</a>

Aber das ist Quatsch, da bei onclick auch der Link an sich ausgelöst wird. Man müsste sich also entscheiden. Wenn man beim klicken ein Menü sehen will und kein Request ausgelöst werden soll, dann wäre das per Definition ohne JavaScript unbenutzbar.

Eine (klassische) Alternative wäre das mit "echten" Unterseiten. Dann müsste bei einem Klick auf den Menüpunkt einfach die Unterseite aufgerufen werden, die die weiteren Unterseiten verlinkt/erklärt. Bei einem onmouseover (nicht beim Klicken) könnte man ZUSÄTZLICH für die, die JavaScript anhaben, ein kleines Menü einblenden, das den direkten Sprung auf Unterseiten erlaubt.

Zitat

Um eine möglichst große Usability zu gewährleisten wäre es vielleicht sinnvoll, die Menüs zwar mit JS aufklappen zu lassen, aber für jeden Punkt eine Beschreibungsseite zu erstellen, die in der Beschreibung funktionierende Links zu den Unterseiten enthält...

Das ist ein Ansatz, den ich ausgesprochen userfreundlich und praktikabel einschätze und selbst vielfach verwende.

Mirko :)
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

12

Mittwoch, 2. Juli 2003, 10:10

[q=memowe]Wegen Deines Konzeptes. Das ist ja der Witz. Du verwendest mehrere Request nur um ein Menü aufklappen zu lassen. Aber normale GUIs verändern den Inhalt nicht wenn man bloß Menüs öffnet. Die Diskrepanz dabei ist, dass es eben nicht das erwartete Verhalten ist, was geschieht, da trotz gleichen Seiteninhalts bei einer Änderung des Menüs die komplette Seite neu geladen werden muss. Dies ist einfach nur eine Ungereimtheit, die für Benutzer aus der Benutzung der Seite, so wie man es von anderen Menüs gewohn ist, erwachsen KANN.[/q]

Alles klar! Verstanden... :D

Ich denke das finden wir heraus, wenn sich zeigt, wie sich dieses Prinzip in der Praxis bewährt... Mal abwarten...

[q=memowe]Eine (klassische) Alternative wäre das mit "echten" Unterseiten. Dann müsste bei einem Klick auf den Menüpunkt einfach die Unterseite aufgerufen werden, die die weiteren Unterseiten verlinkt/erklärt. Bei einem onmouseover (nicht beim Klicken) könnte man ZUSÄTZLICH für die, die JavaScript anhaben, ein kleines Menü einblenden, das den direkten Sprung auf Unterseiten erlaubt.[/q]

Jepp, genau das ist es was ich meine. Nur wie würde das JS dazu aussehen?

Ich glaube ich durchstöbere mal die Linksammlung... 8o
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

memowe

Erleuchteter

Beiträge: 3 324

Vorname: Mirko

  • Private Nachricht senden

13

Mittwoch, 2. Juli 2003, 10:32

Zitat

Original von LapisInfernalis
[Unterseitenkonzept, zusätzlich Menüs einblenden per JS]
Jepp, genau das ist es was ich meine. Nur wie würde das JS dazu aussehen?

Das wäre etwas mit

Quellcode

 
1
2
3

<a   href="unterseite.html"
     onmouseover="document.getElementById('menu1').style.display='block';"
     onmouseout="document.getElementById('menu1').style.display='none';">Link</a>

Du hättest dann also alle DIVs (id= menu1, menu2, ...) schon drin, allerdings per CSS auf display: none geschaltet. Bei einem mouseover-Event wird dann das Element sichtbar geschaltet und andersherum. Der Kotschnipsel ist ungetestet. Ich verwende JavaScript nicht oft, hoffe aber trotzdem, dass er funktioniert.

Mirko :)
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

14

Mittwoch, 2. Juli 2003, 11:08

Vielen Dank

Ich werde das mit dem JS bei der nächsten Gelegenheit einmal ausprobieren.

[q=memowe]...allerdings per CSS auf display: none... [/q]

Bevor ich auf die Idee gekommen bin das mit den Div's so zu lösen, habe ich die Anzeige ebenfalls mit PHP und display:none gesteuert.

Das funktionierte dann so, dass die DIVs alle im Quelltext standen, aber per PHP wurde dann entweder ein Style mit den Werten zur Anzeige oder Display:none ausgegeben.

Der einzige Nachteil war, sofern man dies als Nachteil bezeichnen kann, dass im Textbrowser wie Lynx dennoch alle Divs, respektive deren Inhalt, angezeigt wurde.

Mal schauen. Ich probiers auf jeden Fall mal aus.

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

DukeXP

Profi

Beiträge: 1 553

  • Private Nachricht senden

15

Mittwoch, 2. Juli 2003, 11:44

Ich habe den Entwurf mit verschiedenen Browsern getestet, lediglich mit Opera 5.0 ist die Navigation vollkommen unbenutzbar. Besucher mit diesem Browser schließt du damit also auf alle Fälle komplett aus.

Signatur von »DukeXP« Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

Investorman

Erleuchteter

Beiträge: 3 610

  • Private Nachricht senden

16

Mittwoch, 2. Juli 2003, 13:00

Zu der Idee mit den DIV-Containern:

Man könnte doch die DIV-Container für die Navigation einfach in die Ebene HINTER die eigentliche Seite bringen und den jeweiligen Conatiner beim MouseOver eine ebene nach vorne "holen", sprich sichtbar machen. (Stichwort: z-index)
Signatur von »Investorman« ______________________________

Investorman.com || Webmasterrecht.de || Recht interessant - Die Linksammlung zum Internetrecht

LapisInfernalis

Super Moderator

  • »LapisInfernalis« ist der Autor dieses Themas

Beiträge: 2 817

  • Private Nachricht senden

17

Mittwoch, 2. Juli 2003, 13:06

@Duke XP

So, ich habe jetzt eine Kleinigkeit geändert. Würdest Du bitte bei Gelegenheit noch einmal überprüfen, wie die Seiten im Opera angezeigt werden? Danke ;)

@alle

Hat den schon jemand eine Idee, warum der Container mit der Navigation bei den unterschiedlichen Browsern an unterschiedlichen Positionen in der Horiontalen angezeigt wird?

@Investorman

Aber dafür müsste man doch ein Objekt, eine Art Fläche, haben, welche zwischen Inhalt und Nav-Container liegt, oder?
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »LapisInfernalis« (2. Juli 2003, 13:08)

DukeXP

Profi

Beiträge: 1 553

  • Private Nachricht senden

18

Mittwoch, 2. Juli 2003, 16:24

Zitat

Original von LapisInfernalis
@Duke XP

So, ich habe jetzt eine Kleinigkeit geändert. Würdest Du bitte bei Gelegenheit noch einmal überprüfen, wie die Seiten im Opera angezeigt werden? Danke ;)


... kann keinen Unterschied feststellen.
Signatur von »DukeXP« Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

Lesezeichen: