Tabelle über Bild legen

  • Hallo,


    unzwar möchte ich mir hier gerade einen Login Bereich zu eine Statistikseite meines Teams programmieren. <!-- m --><a class="postlink" href="http://madarame.ma.ohost.de/Counter-Strike/index.php">http://madarame.ma.ohost.de/Counter-Strike/index.php</a><!-- m -->


    Habe ich bereits im Praktikum gemacht, darauf bezieht sich die Frage nicht.


    Mein Problem ist, dass die Tabelle, in der sich der Login befindet, leider immer UNTER dem Hintergrundbild befindet. Sie soll aber auf dem Bild sein.


    Wie bewerkstellige ich das?


    Mein Momentaner Code:


    index.php


    forms.css

    Code
    id1
    {
     z-index:1;
    }
    id2
    {
     z-index:2;
    }


    Könnt ihr mir helfen?


    mit freundlichen Grüßen
    the|SonGoku

  • Hallo,


    ich habe mal deinen Code genommen und ihn in die forms.css geschrieben und den restlichen Code der Datei gelöscht, da dieser mir unnötig schien.


    Nachdem ich dieses ausprobierte, wurde kein Hintergrundbild angezeigt. Daher schrieb ich es so in meine index.php.


    Code
    <div style="position: absolute; top:0; left:0" id="login">
    <img src="http://img.banjig.net/d/bb/user_uploads/374188/counter-strike-3_202b0d77.jpg"></div>


    Dummerweise habe ich nun das selbe Problem wie zu anfang. Woran kann das liegen? Liegt der Fehler bei mir?


    mit freundlichen Grüßen
    theSonGoku

  • Hm, so konnte das auch nicht ganz funktionieren.


    Yetizwerg meinte wohl, du sollst das bild als bg von div id 2 nehmen..


    Also so in der art:



    Also nur 1 div, der inhalt eben dein Login, und als hintergrund des divs, das bild.


    Allerdings solltest du das design nochmals überdenken, so viele leerzeichen sollten dort nicht stehen.


    Greetz TimTim

  • Zitat von &quot;the|SonGoku&quot;

    Ja, das habe ich mir auch schon gedacht und es nervt auch ziemlich diese immer zu machen.
    Kann ich das anders lösen? Z.B. über TAB´s?


    Code
    #login {
        [...]
        text-align: center;
    }


    Damit sollte die Schrift zentriert sein.

  • Ja das war mir klar^^
    Nur will ich ja die Eingabefelder untereinander stehen haben, und wenn ich das mit text-align: center mache, dann ist das ja alles zentriert...wenn ich das dann mit &nbsp;´s mache ist das ja komplett verrückt


    Gibt es eigentlich eine Möglichkeit, einen kleineren Abstand als bei einem <br> zu bekommen? Denn ich muss jetzt die größe des Bildes, also das was angezeigt wird, über <br>´s bestimmten.
    Siehe Code auf meiner Page.


    mfG
    theSonGoku

  • Den Abstand der Zeilen kannst du über padding ändern, du musst dann aber trotzdem noch <br/> nutzen.


    Code
    #login table {
      padding-bottom: [gewünschter Abstand];
    }


    Die Höhe des divs kannst du bestimmen, z.B. auf das Bild.

    Code
    #login {
      height: [gewünschter Wert];
    }


    Wenn du <br/> nutzt, kannst du auch text-align nutzen. Du wolltest doch alles zentriert haben, oder?

  • Ja also was ich vorhabe ist eben das es so ist



    Name: EINGABEFELD
    Password: EINGABEFELD


    Es soll eben direkt untereinanderstehen, auch die Eingabefelder und diese sollen direkt über dem Button mit der gleichen länge wie die Felder sein.


    €dit: Mist, hier sieht es nicht so aus wie es aussehen soll. Aber auf der Seite ist es schon fast so wie gewünscht.
    <!-- m --><a class="postlink" href="http://madarame.ma.ohost.de/Counter-Strike/">http://madarame.ma.ohost.de/Counter-Strike/</a><!-- m -->

  • Ist das Thema noch Up to Date? Naja ich schreib mal meine Lösung hierzu:


    Code
    <form id="formularstyle" action="" method="post">
    <p><input type="text" name="user" /></p>
    <p><input type="password" name="pass" /></p>
    <p><input type="submit" value="Login" /></p>
    </form>


    Durch die p tags sollte das annähernd so sein, über css musst du es noch anpassen. Hoffe das war die richtige antwort auf das thema(habs nur kurz überflogen) :D

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!