Willkommen ~Gast!
Registrieren || Einloggen || Hilfe/FAQ || Staff
Probleme mit der Registrierung im Forum? Melde dich unter registerEin Bild.
Autor Beitrag
000
03.10.2009, 17:11
luckerking

Hey,

ich versuche einen Link und einen Submit Button identisch zu gestalten.
Leider ist der Abstand bei dem Submit Button oben etwas zu groß.
Hat jemand eine Ahnung, wie ich das lösen kann?

.html
Quellcode:<html>
<head>
    <title>Button test</title>
    <style>
         .submit{
            display : inline;
            border: solid 1px black;
            background-color:#D6D6D6;
            padding: 1px 3px;
            margin: 2px 2px;
            color : black;
            cursor:pointer;
            text-decoration: none;
            font-family : tahoma;
            font-size : 11x;
            font-weight : bold;
            
        }
    </style>
</head>
<body>
    <a class="submit" href="#" >button 1</a>
<input class="submit" type="submit" name="button" value="button 2" />

    
</body>
</html>
 Luckerking

--
zum Seitenanfang zum Seitenende Profil || Suche
001
03.10.2009, 18:02
Adrian_Broher
Admin

Quellcode:font-size : 11x; Es gibt keine Groesseneinheit "x".

Ansonsten fehlt so ca alles fuer ein valides Minimalbeispiel.

--

There is nothing wrong with high standards. It's your problem that you don't meet them.
If you think it's simple, then you have misunderstood the problem.
When a customer says "nothing has changed", assume they're lying.

Dieser Beitrag wurde am 03.10.2009 um 18:05 von Adrian_Broher bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
002
03.10.2009, 18:25
Bluthund

How about:
Quellcode:<!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>Button test</title>
        <style type="text/css">
            .submit{
                display : inline;
                border: solid 1px black;
                background-color:#D6D6D6;
                padding: 1px 3px;
                margin: 2px 2px;
                color : black;
                cursor:pointer;
                text-decoration: none;
                font-family : tahoma;
                font-size : 11pt;
                font-weight : bold;
            }

            input.submit {
                padding: 0;
            }
        </style>
    </head>
    <body>
        <p><a href="#" class="submit">button 1</a></p>
        <form action="#"><p><input type="submit" value="button 1" name="button" class="submit"/></p></form>
    </body>
</html> Damit sind beide Buttons zumindest in Quellcode:Mozilla/5.0 (Windows; U; Windows NT 6.0; de; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729) deckungsgleich.
Aber warum will man zwei Elemente, die unterschiedliche Zwecke erfüllen, gleich aussehen lassen?!

edit: Der IE8 mag das allerdings nicht so (v8.0.6001.18813)
edit2: Gerade erreicht mich die Nachricht, dass auch im Quellcode:Opera/9.80 (X11; Linux x86_64; U; de) Presto/2.2.15 Version/10.00 beide Elemente mit dem Stylesheet hier unterschiedlich aussehen.

--

The C language combines all the power of assembly language with all the ease-of-use of assembly language.
"humorig is n blödwort :>" by -CarniGGeLjumpR-

Dieser Beitrag wurde am 03.10.2009 um 18:32 von Bluthund bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
003
03.10.2009, 18:38
luckerking

Hier mal das valide Html:
Quellcode:<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <title>Button test</title>
    <style type="text/css">
         .submit{
            display : inline;
            border: solid 1px black;
            background-color:#D6D6D6;
            padding: 1px 3px;
            margin: 2px 2px;
            color : black;
            cursor:pointer;
            text-decoration: none;
            font-family : tahoma;
            font-size : 11px;
            font-weight : bold;
            
        }
    </style>
</head>
<body>
    <form method="post" action="test.html">
        <p>
        <a class="submit" href="#">button 1</a>
        <input class="submit" type="submit" name="button" value="button 2" />
        </p>
    </form>
</body>
</html>
 Dann werde ich wohl nicht drum rum kommen zwei verschiedene Klassen zu benutzten, damit es in allen Browsern richtig aussieht.
Wobei ich gerade festgestellt habe, dass es im IE 8 so aussieht, wie ich es mir wünsche.
Wenn ich zwei unterschiedliche Klassen benutzen würde mit unterschiedlichen Padding, dann würde es im IE 6, 7 und Firefox richtig aussehen, aber im IE 8 nicht (Wäre jetzt meine Vermutung).
Wobei im IE 6,7 der Button einfach nach unten verschoben sein zu scheint, im Firefox jedoch kleiner ist.
Ich hoffe ihr versteht was ich meine.
Gibt es nicht eine Eigenschaft die ich einfach übersehen habe?

Zitat:
Aber warum will man zwei Elemente, die unterschiedliche Zwecke erfüllen, gleich aussehen lassen?!
Es gibt für alles einen Grund ;)

Vielen Dank schonmal!

--
zum Seitenanfang zum Seitenende Profil || Suche
004
03.10.2009, 18:45
Bluthund

Zitat:
luckerking postete
Es gibt für alles einen Grund ;)
Ich bitte um Erleuchtung.

--

The C language combines all the power of assembly language with all the ease-of-use of assembly language.
"humorig is n blödwort :>" by -CarniGGeLjumpR-
zum Seitenanfang zum Seitenende Profil || Suche
005
03.10.2009, 18:52
luckerking

Lässt sich nicht so leicht erklären.
Für eine Art Toolbar mit der man etwas Speichern kann, in dem man auf dem Submit Button klickt, oder andere Aktionen ausführen kann, wie z.B. ein einfacher zurück Link.
Wie gesagt, schwer zu erklären.
Ich selbst finde, dass es gar nicht so schlecht aussieht, aber das ist wie immer Geschmackssache.

--
zum Seitenanfang zum Seitenende Profil || Suche
006
05.10.2009, 07:45
Krifitze

Formularelemente lassen sich nicht stylen (oder in Eric Meyers Worten: “It’s a mess!”). So wie sich das anhört, braucht man für dein Vorhaben am Ende als User ohnehin JavaScript, warum dann nicht einfach zwei Links/zwei Buttons?

--

Website

Dieser Beitrag wurde am 05.10.2009 um 07:45 von Krifitze bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
007
05.10.2009, 09:18
luckerking

Die Toolbar soll ja auch ohne Javascript funktionieren, sonst hätte ich schon längst zwei Links daraus gemacht ;).
Ich werde einfach mal schauen, ob mir ein anderes Design einfällt.

Trotzdem vielen Dank.

--
zum Seitenanfang zum Seitenende Profil || Suche
008
05.10.2009, 15:26
speziFanta

Vorschlag (ugly): Den "Submit Button" als Link bauen und allser per GET schicken.

Edit: oder besser, den non-submit Button einfach als normalen Butten setzen (type="button").

--

Heute schon gegoogelt?
spezi|Clan
TheWall.de - wo jeder alles sein kann.

Dieser Beitrag wurde am 05.10.2009 um 15:29 von speziFanta bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
009
05.10.2009, 16:04
luckerking

Zitat:
speziFanta postete
Vorschlag (ugly): Den "Submit Button" als Link bauen und allser per GET schicken.
Und wie schicke ich dann das Formular ohne wirklichen Submit Button ab und ohne Javascript?

Zitat:
speziFanta postete
Edit: oder besser, den non-submit Button einfach als normalen Butten setzen (type="button").
Und die Parameter, die ich mit diesem Link übergebe in hidden fields packen?
Oder wie meinst du das?

--
zum Seitenanfang zum Seitenende Profil || Suche
010
05.10.2009, 19:40
Adrian_Broher
Admin

Welche funktion soll der "non-submit" Button uebernehmen?

--

There is nothing wrong with high standards. It's your problem that you don't meet them.
If you think it's simple, then you have misunderstood the problem.
When a customer says "nothing has changed", assume they're lying.
zum Seitenanfang zum Seitenende Profil || Suche
011
05.10.2009, 20:59
luckerking

Das wäre eigentlich ein Link mit Parametern, darum frage ich mich auch wie ich das mit einem Button lösen sollte.

Ich versuche bisher das mit Bildern zu lösen, also einen type=image und einem Link mit Bild als Inhalt. Aber manchmal sind die Bilder nicht so aussagekräftig wie ein Text.

--
zum Seitenanfang zum Seitenende Profil || Suche
012
05.10.2009, 21:18
Adrian_Broher
Admin

Was heisst hier "Link mit Parametern".

Du schaffst es ausgezeichnet Fragen _nicht_ zu beantworten.

Worauf ich hinaus will, dieser Link, bezieht er die Parameter aus dem Form, oder sind die Parameter vom Form unabhaengig?

Konkretes Beispiel hier im Forum: Das Replyfeld
uebertragende Daten:
* Beitragstext
* Smilies Status
* ThWCode Status

"Antwort erstellen" speichert den Beitrag,
"Vorschau anzeigen" mach das was der Titel angibt.

Beide Buttons uebertragen die gleichen Formdaten, aber fuehren eine unterschiedliche Aktion aus.

--

There is nothing wrong with high standards. It's your problem that you don't meet them.
If you think it's simple, then you have misunderstood the problem.
When a customer says "nothing has changed", assume they're lying.
zum Seitenanfang zum Seitenende Profil || Suche
013
05.10.2009, 21:57
luckerking

Zitat:
Adrian_Broher postete
Du schaffst es ausgezeichnet Fragen _nicht_ zu beantworten.
Tut mir leid, ist ganz bestimmt nicht meine Absicht.

Zitat:
Adrian_Broher postete
Worauf ich hinaus will, dieser Link, bezieht er die Parameter aus dem Form, oder sind die Parameter vom Form unabhaengig?
Nein, der Link ist völlig unabhängig.
Also quasi, wenn man den Logout link von diesem Board unten neben den "Antwort erstellen" und "Vorschau anzeigen" Buttons packt.
Die uid, die bei dem Link übergeben wird, könnte man dann in ein Hiddenfield speichern.
Aber bisher habe ich das als unschön empfunden.

Ich hoffe ich konnte das jetzt richtig erklären ;)

--
zum Seitenanfang zum Seitenende Profil || Suche
014
13.10.2009, 23:12
Unsichtbar

Als noob wie ich einer bin, würde ich einfach Images verwenden, für den Link-Button, als auch für das den Form-Button. Sonst den Link als Form-Button gestalten, dann eben mit JS, wovon der eigentliche Form-Button ja nicht betroffen wäre.

Abgesehen davon unterstützt sogar der Playstation 3 Browser die JS basics, jedes halbwegs aktuelle Handy sowieso. Die Zeiten wo JS auf dem Scheiterhaufen brennen musste, sind vorbei. ;)

--

www.Fire-Bursts.com Gaming Network
zum Seitenanfang zum Seitenende Profil || Suche