• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fieldset Problem

Status
Für weitere Antworten geschlossen.
C

Chrisok

Neues Mitglied
Hey hey,
komme direkt mal zum Problem...
Habe ein kleines Formular und würde gern dahinter ein Hintergrundbild setzen... Habe schon viel gegooogelt und mal irgendwo gelesen, dass es dabei wohl des Öfteren zu Problemen kommt...Näheres konnte ich aber leider nicht in Erfahrung bringen und so bin ich zu diesem Forum gestoßen...

Kleiner Schnipsel meiner CSS:
Code: 
    fieldset {
    background-image:url(LoginFieldset.png);
    background:#555555;
    border-style:solid; 
    border-color:#444444;
    height:100px;
    width:220px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-left:-110px; 
    margin-top:-100px;
    }
und...

Code: 
    <form>
        <fieldset>
            <legend>Login</legend>
            <table>
                <tr>
                    <td>User:</td>
                    <td><input type="text" size="20" maxlength="20" name="User"></td>
                </tr>
                
                <tr>
                    <td>Password:</td>
                    <td><input type="password" size="20" maxlength="20" name="Password"></td>
                </tr>
                
                <tr>
                    <td><input id="buttons" type="button" value="Login"></td>
                </tr>
                </table>
        </fieldset>
    </form>

Mein Problem... Das bgimage wird nich dargestellt...

Bedanke mich schon mal für Lösungsansätze :)
 
Code: 
    background-image:url(LoginFieldset.png);
    background:#555555;
background ist die zusammenfassende Kurzschreibweise für verschiedene background-Eigenschaften.
Damit wird also auch background-image überschrieben.
background-color würde background-image nicht überschreiben:
Code: 
    background-image:url(LoginFieldset.png);
    background-color:#555555;
Oder zusammengefasst:
Code: 
    background: #555555 url(LoginFieldset.png);
 
Ah, oke das ist einleuchtend...

Wusste, dass man es so schreiben kann, aber ich dachte, dass diene vielmehr der Übersicht bzw. der Gruppierung statt der Funktionalität... :oops:
Danke für deine schnelle Hilfe... Denn werd ichs direkt mal in die Tat umsetzen!

EDIT:
Also obig beschriebenes Problem hätte sich geklärt, allerdings habe ich doch noch ein Anliegen zu dem Thema...

Wie oben im Code zu sehen ist, habe ich für das fieldset die Werte 100px/220px für die Höhe und Breite gewählt und demnach auch das image angepasst... Allerdings ist das fieldset größer als das image... woran liegt das?
 
Zuletzt bearbeitet von einem Moderator:
Jo, da fangen die Probleme mit Formular-Elementen an.
Manche Browser berechnen / setzen Das Hintergrundbild ab der Oberkannte von <legend> andere am Border von <fieldset>.

Die Innenabstabstände von <form> und <fieldset> können unterschiedlich sein und die Gesamtbreite beeinflussen.
Der IE6 verbreitert das Elternelement, unter bestimmten Bedingungen.

setze mal alle margin und padding auf null:
Code: 
* {
margin: 0;
padding: 0;
}
Das Ergebnis wird trotzdem erst mal, je nach Browser, unterschiedlich sein.

Lade mal eine Testseite mit deinem background-image hoch.
Wenn es nicht selbsterklärend ist, mit Bild / Beschreibung wie es aussehen soll.
 
Hey, so funktionierts...
Allerdings sind die Eingabefelder nun ziemlich nahe beieinander und das sieht natürlich nicht grad berauschend aus...
Wenn ich den Rahmen entferne ist das fieldset sogar auf einmal ein wenig zu klein o.O

Gibt es da keine andere Lösung?
 
Definiere einfach wieder margin und padding nach Wunsch. Oder macht das die erwünschte Korrektur rückgängig?
Ansonsten kann ich mich neuroleptika nur anschließen: Eine "Live-Demo" wäre nett. ;)
 
Die input-Elemente passen nicht in die Box.
Du müßtest sie begrenzen. Size="20" soll sicherstellen, daß 20 Zeichen ins Input passen. In einer Box mit beschränkter Breite ist das zu ungenau. Die Box wird auseinandergedrückt.
Code: 
<input type="text" name="User" maxlength="20" style="width: 100px;"/>
Das ist schon etwas genauer. Wobei es auch hier leichte Abweichungen in der Breite geben kann.
Du hast jede Menge Platz auf der Seite. Wieso zwängst du alles in so eine winzige Box?.

Das background-image sollte etwas größer sein als das Element. Was übersteht wird nicht angezeigt.
 
Zuletzt bearbeitet:
Sodele, habe die input-breite angepasst und das fieldset etwas größer gemacht...
Ich glaube ich weiß nu wo mein eigentliches Problem liegt...
Der Rahmen um das fieldset wird ja wenn ich mich nicht irre zusätzlich drum rum erzeugt also müssten sich die Werte des fiedsets und die Stärke des Rahmens addieren... Denn ich denke nicht dass die Stärke des Rahmens vom fieldset abgezogen wird um die Größe des fieldsets beizubehalten, oder?

Somit müsste ich doch "einfach" angeben, dass alle Tabellenspalten einen Abstand von z.B. 3px zu dem links liegenden Element haben, oder?
Wenn ja, wie?^^


Wenn ich zu undeutlich war, verzeiht... ^^
 
Es sind nicht nu die Border von <fieldset> auch die <input> haben Border.
Der Text verbraucht je nach eingestellter Schriftgröße und verwendeter Font ebenfalls unterschiedlich viel Platz.
Wenn du das Formular für alle Browser pixelgenau darstellen möchtest,
mußt du alles variable gegen Grafiken austauschen.
Wenn du floats verwenden würdest, könnten die Elemente bei mangelnden Platz notfalls untereinander dargestellt werden. Mit Tabellenzellen geht das nicht.

Browser und Systeme unterscheiden sich gerade bei der Formular-Gestaltung stark.

Der IE6 stellt das background-image für <fildset> z.B. ab der Oberkannte von <legend> da.

Auf deiner Seite ist massig Platz für ein Zugängliches Formular.
Ich sehe keinen Grund es in engen px-Grenzen zu zwängen.

Auch verstehe ich nicht, warum du die typischen <fildset>-Rahmen haben möchtest.

<fildset> soll Formular-Passagen zusammenfassen. In deinem kleinen Login-Formular ist das eher unwichtig.

Nun gut,
Ein Beispiel:
http://css-spalten.red-rod.net/test/beispiel/beispiel27.htm

Ich habe <legend> einfach mit position: absolute; etwas nach oben gerückt und darin das background-image entsprechend positioniert.
 
Hey danke, werde mich dem morgen annehmen...

Schon mal danke im Vorraus! Nebenbei: Ist das deine Seite? Denn auch die scheint interessant zu sein!^^
 
So habe deinen Code mal etwas an meine Bedürfnisse angepasst... Vielen Dank nochmal!
Hätte nur noch eine Frage: Wie passe ich nun am besten das bgimage an?
Denn feste Größenangaben habe ich ja nicht... Ausprobieren?

Hier nochmal der aktuelle Link:
Login
 
repeat geht nicht.
Du hast da einen Schrägen Verlauf der sich mit repeat nicht lösen lässt.
Du mußt das Bild zerschneiden und weitere Elemente einfügen.
Login
Den css-Code habe ich aus deiner Seite zusammengefrickelt.
Deshalb sieht er etwas wirr aus.

Ich habe ein anderes Beispielbild verwendet. Der Verlauf geht nicht über das ganze Bild.
Du müßtest sonst alles in px angeben und auch die Schrift gegen Grafiken austauschen.

Wenn du den Verlauf nur horizontal anlegen würdest, währe es wesentlich einfacher.
 
Natürlich gehts mit repeat nicht^^ Habe ja geschrieben, dass ich kein repeat haben möchte!^^
Aber vielen Dank für die Hilfe, ich denke nu weiß ich Bescheid!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben