input form mit JS problem --> uri value

**brüllwürfel** · 23.03.2004, 13:36

@asp2php --> Habe ich früher so praktiziert, ist aber bei einem Umfang von 50 domains
und ner Menge HTML, JS, und PHP nochmehr überflüssiger Code, zumal wenn man mit
CMS und TPLs (PHP) arbeitet wird das mit den Browserweichen sehr sehr unübersichtlich
und ist immer scheinbar die einfachste aber im Endeffekt der ineffizienteste Weg für
einen Webdesigner. Es gibt für fast alle Darstellungsprobleme Kniffs und Tricks um die
Browserdifferenzen im Zaum zu halten (wenn man bereit ist in Look-Uniformität ein paar
Abstriche zu machen).

Ich habe meine Frage im Endeffekt schon selbst beantwortet und habs auch hingekriegt,
und damit dieses Thread auch Sinn macht, hier noch mal die Zusammenfassung:

1. Wir gehen davon aus , das die Unterschiede der Browser sich wie in den oberen
Einträgen des Threads zusammenfassen lassen (wir sprechen hier aussschließl. von
FORMULAREN) ergänzen möchte ich noch das sich Text direkt vor oder hinter Formular
Elementen zw. MAC und PC IE auch unterschiedlich vertical ausrichtet (wir sprechen von
minimalen Unterschieden)

2. Wir wissen dass Formulare keine Inline Elemente sind also immer eine neue Zeile
anfangen wollen, das lösen wir, wenn wir alle Felder in einer Zeile (Höhe) haben wollen
z.B. mit

PHP-Code:


<form style="display:inline">

(Achtung INPUT Felder brauchen kein inline Attribut!)

Nun ist das mit der Zeile vom Look her so'ne Sache: Das kann unter Umständen bei MAC
oder PC mehr wie'ne hügelige Dorfstasse als wie eine schöne Zeile aussehen (Buttons
und Inputs oder selects unterschiedlich groß und der Text dazwischen nicht auf gleicher
Höhe und vieles mehr)

3. Eine Kombination aus verschiedenen "Helferlein" schafft hier zumindest, dass die Zeile
mit den verschiedenen Formularen, deren Kinder Elementen sowie Zwischentexte
auf MAC sowie PC IE vertikal mittig ausgericht eine saubere Zeile ergeben und optisch
auch ungefähr den Eindruck gleichgroßer Darstellungen erzeugen(wenn man damit
leben kann dass die Buttons regulär auf MAC und PC etwas anders aussehen):

Ich poste hier mal den Code von meinem Beispiel, wo man auch erkennen kann, dass ich
zusätzlich eine Tabelle brauchte, denn !!! INLINE GESETZTE OBJEKTE DURCH CSS
KÖNNEN NICHT MEHR "ALIGNED" WERDEN (linker ode rechter Bildschirmrand z.B.):

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>{title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

<!--

// Formulareingabeüberwachung via JS

//-->

</script>

<style type="text/css">

<!--

body{background-color:#DEDEDE;border-width:0px;margin:0px;padding:0px;

color:#333333;font-family:Verdana,Helvetica,Geneva,Arial,sans-serif;font-size:9.4px;}

#form1{margin:0;padding:0;height:13.4px;color:#333333;

font-family:Verdana,Helvetica,Geneva,Arial,sans-serif;font-size:9.4px;}

#form2{margin:0;padding:0;color:#333333;

font-family:Verdana,Helvetica,Geneva,Arial,sans-serif;font-size:9.4px;}

a:link, a:hover, a:visited, a:active{

color:#333333;font-family:Verdana,Helvetica,Geneva,Arial,sans-serif;

font-size:9.4px;text-decoration:none;}

-->

</style>

</head>

<body bgcolor="#FFFFFF" text="#333333" link="#333333" alink="#333333" vlink="#333333">

<table style="margin:0px;padding:0px;border:0px;position:absolute;top:1px;

left:0px;width:99%;">

<tr><td style="vertical-align:middle;">

<form action="" style="display:inline;margin-left:10px;">

<select name="Auswahl" id="form1" onchange="

Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)">

<option label="Kopfetikett" selected>Kopfetikett</option>

<optgroup label="english">

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

</optgroup>

<optgroup label="deutsch">

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

<option value="http://www...">Bezeichnung für die Adresse</option>

</optgroup>

</select>

</form></td>

<td style="vertical-align:middle;margin:0px;padding:0px;border:0px;">

<table style="position:relative;margin:0px;padding:0px;border:0px;"><tr>

<form name="Newsletter" action="../../news/action.php" method="get" 

style="display:inline;text-indent:6px;" onSubmit="return SMEnavmail()">

<td style="vertical-align:middle;text-align:right;widht:40px;">

&nbsp;&nbsp;Newsletter:&nbsp;</td>

<td style="vertical-align:middle;">

<input id="form1" type="Text" name="email" size="27" value="Email Adresse bitte 

eingeben">&nbsp;</td>

<td style="vertical-align:middle;">

<input id="form1" type="Radio" name="action" value="reg" checked></td>

<td style="vertical-align:middle;">&nbsp;bestellen&nbsp;</td>

<td style="vertical-align:middle;">

<input id="form1" type="Radio" name="action" value="del"></td>

<td style="vertical-align:middle;">&nbsp;abbestellen&nbsp;&nbsp;&nbsp;</td>

<td style="vertical-align:middle;">

<input id="form2" type="submit" name="senden" 

value="&nbsp;best&auml;tigen&nbsp;">&nbsp;&nbsp;&nbsp;</td>

</form></tr></table></td>

<td style="text-align:right">&copy;2004 <b>{Firmenlogo}</b></td></tr></table></body></html>

HINWEIS ( so oder so ähnlch könnte der Code für eine generelle Taskleiste in eurem
Network aussehen, wenn ihr diese über mehere Domains halten wollt müsst ihr die
selector links jedoch so verlinken, dass die task im index liegt und die eigenltichen
Seiten im index2 innerhalb des Framesets liegen)

Es ist übrigens empfehlenswert, um alle Browser hundertprozentig anzusprechen (ohne
Interpretationsfehler), CSS für das zu bearbeitendes Objekt immer in einer Zeile
und ohne White Space zu schreiben (habs hier nur wegen Optik umgebrochen)
und CSS auch nicht über <LINK ....> zu importieren!!! Das ist eine selten
im Netz dokumentierte Aussage die ich hier dennoch mache,
da sie bewiesen ist durch selbst erlebte Interpretationsprobleme von CSS
auf allen gängigen Browsern.

Wie ihr sehen könnt habe ich bei einigen Formular Elementen auf Höhenangaben
verzichtet und bei einigen nicht. Das hat mit dem unterschiedlichen Verhalten auf MAC
und PC zu tun, wenn man Größenangaben gemacht. Ich finde das brauch ich nicht
weiter zu kommentieren, denn da gibt es eine tolle Dokumentation drüber auf der
Tutorial Seite für Einsteiger:

www.schattenbaum.net

Respekt für all die Mühe die dort in den Erklärungen für Anfänger stecken. Die
Erläuterungen sind mit viel Liebe gemacht worden, und haben mir damals sehr geholfen.

So, Ich hoffe ich konnte einigen helfen die Fehler die ich anfangs machte zu vermeiden
und Stunden Arbeit zu sparen, wenn man die Formulare plötzlich auf anderen Rechnern
sieht und in Schock ähnliche Zustände verfällt.

MFG, brüllwürfel

**wahsaga** · 23.03.2004, 15:16

Original geschrieben von brüllwürfel
Es ist übrigens empfehlenswert, um alle Browser hundertprozentig anzusprechen (ohne Interpretationsfehler), CSS für das zu bearbeitendes Objekt immer in einer Zeile und ohne White Space zu schreiben (habs hier nur wegen Optik umgebrochen) und CSS auch nicht über <LINK ....> zu importieren!!!

letzteres ist auf jeden fall unsinnig, und führt den sinn von CSS ab adsurdum.

ein browser, der damit nicht klarkommt, ist kaputt.

**brüllwürfel** · 25.03.2004, 15:10

dann gibt es ein paar kaputte browser auf dem markt die tabellen css nicht bei <LINK... interpretieren.

...das wurde auch schon einmal dokumentiert. Wie so oft - sollte man um wirklich sicher zu gehen hundertprozent sichere kleine Umwege gehen.
Mein Vorschlag der Güte (Empfielt sich sowieso bei Templates):

PHP-Code:


<html>

<head>

<title>Meine Empfehlung um sicher zu gehen</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="Javascript">

<!--

if, else ...bla bla

//-->

</script>

<style type="text/css">

<!--

<?php include("http://www.domain.com/css/css.php"); ?>

-->

</style>

</head>

<body>

"Es gibt Lösungen die bietet dir kein Programmierer oder Overhead, 

die musst du selber finden."

</body>

</html>

PS: Ist ein Auto absurdum geführt, wenn es trotz vorschriftsmäßiger Wartung absäuft?
Oder frag mal einen Web Noob ob ihm nicht alles absurd vorkommt und unlogisch was das Editier und Programmier Angebot und dessen Umwege im Netz betrifft....

Mit lieben Gruß, Brüllwürfel

input form mit JS problem --> uri value

Kommentar

Kommentar

Kommentar

Wird geladen... Bitte warte.

input form mit JS problem --> uri value

Kommentar

Kommentar

Kommentar