Eingabefeld im Bild fixieren

  • Ja, da weiß ich gerade nicht was ich zu sagen soll.

    Hier

    https://basti1012.bplaced.net/…rdner=html-seminar&id=383


    Der untere ist der neue. Hoffe du kriegst die richtige CSS daraus, weil die auf beide Versionen passen.

    Denk dran das der Code, mit dem Code der Seite, nicht überein passt, nicht das du versuchst was zusammen zu kopieren.


    Am besten versuchst du aber auch zu verstehen, wieso welcher Code da ist und was er macht.

    Ohne lernen wird man das nie können.

    Das kostet zwar Zeit, aber, wenn man es einmal verstanden hat dann läuft das fast von alleine.


    Wie ich es verstehe, willst du da ja noch mehr bauen?

    Also komplette Webseite oder was soll das werden?

    Wenn ja, dann musst du aber auch noch bestimmt einiges dazu lernen.

    In den Foren musst du dann aber auch mehr eigene Initiative zeigen, weil nur fertige Lösungen wirst du nicht bekommen ohne eigene Arbeit.

    Es sind nicht alle so doof wie ich.


    Diesen Code helfe ich dir jetzt noch zu Ende, doch beim nächsten Thema muss ich passe, bzw. Codepen sperren.

    So genug jetzt.


    Hast du es jetzt hinbekommen das nach deinen Wünschen anzupassen?

  • Okay, danke Dir für deine Hilfe.

    Die Webseite werde ich weiter ausbauen, das geht recht easy mit dem Elementor Plugin, nur diese Sache war jetzt bisschen spezieller das kriegt das Programm nicht hin.


    Das mit dem Code mach ich morgen früh, ich gebe bescheid wenn es funktioniert.

  • Okay ich habe jetzt mein eigenes Bild eingefügt und den Butten entfernt, weil ich da ein eigenen habe. Wie bekomme ich denn den grauen Hintergrund weg?


    Also ich will den Hintergrund der grau ist komplett weiß haben ohne Schatten oder Rahmen.

    Wenn im CSS Feld die Background Befehle entferne oder dort was ändere passiert nichts.

  • Der ist nicht grau , sondern Schwarz. Aber das kann man nur an den Farbcode sehen.

    lösch mal dieses Zeile

    Code
    background:rgba(0,0,0,0.7);

    oder ändere sie in weiß

    Code
    background:rgba(255,255,255,1);

    bei id #suchbox,#suchbox1 .


    Falls sich da nix tut bei dir brauche ich mal deinen kompletten Code. Kann sein das du den Wert wo anders in Code überschreiben tust oder auch einfach nur nee Klammer vergessen hast

  • Ich habe soweit alles angepasst und geändert. Jetzt muss ich nur noch im Code die Höhe des Bildes ändern und das Eingabefeld an die richtige Stelle verschieben.

    Mit welchen Zeilen im Code kann man das machen? (Bild im Anhang)

  • HTML:



    <div id="suchbox1">

    <div id="helfer">

    <input id="suchetext1" maxlength="3" type="text">

    </div>

    <script>

    inhal=document.getElementById('suchetext1');

    inhal.addEventListener('keyup',function(){


    if(inhal.value.length>=1){


    inhal.style.background='white';

    } else{

    inhal.style.background='none';

    }

    })

    </script>

    </body>




    CSS:


    *{

    margin:0;

    padding:0;

    }

    body{

    display:flex;

    flex-direction:column;

    }

    #suchetext::placeholder{

    color:red;

    background:rgba(0,0,0,0.4);

    text-align:center;

    }

    /*

    #suchetext1:focus{

    background:white;

    }

    */

    #suchetext:focus::placeholder{

    color:green;

    background:rgba(0,0,255,0.0);

    text-align:left;

    font-size:12px;

    }

    #suchbox,#suchbox1{

    display:flex;

    min-width:150px;

    width:80vw;

    max-width:650px;

    background:rgba(255,255,255,1);

    border-radius:10px;

    padding:10px 30px;

    border:1px solid white;

    justify-content:center;

    margin:auto;

    margin-top:20px;

    }

    #suchetext,#helfer{

    background-image:url(https://finanz-check21.de/wp-c…ersicherungsvergleich.png);

    background-size:calc(100% + 22px) calc(100% + 14px);

    background-repeat:no-repeat;

    background-position:-11px -7px;

    height:35px;

    width:49%;

    max-width:300px;

    min-width:150px;

    border:4px solid black;

    border-radius:5px;

    outline:none;

    font-size:33px;

    color:red;

    font-weight:900;

    /*

    background-color:rgba(0,0,0,0.3);

    background-blend-mode: color;

    */

    }

    #suchetext:focus{


    background-image:url(https://finanz-check21.de/wp-c…ersicherungsvergleich.png), rgba(0,0,0,1);

    background-size:calc(50% + 22px) calc(50% + 14px);

    background-position:calc(50% - 11px) calc(200% - 7px);

    }

    #suchetext1{

    padding:0;

    width:20%;

    height:27px;

    background:none;

    font-size:27px;

    outline:none;

    font-weight:900;

    margin:2px 0 0 9%;

    }

    #helfer{

    display:flex;

    }

    #butt,#butt1{

    border:4px solid black;

    border-radius:5px;

    font-size:27px;

    height:43px;

    nin-width:150px;

    width:49%;

    max-width:300px;

    }


    @media only screen and (max-width:400px){

    #suchbox{

    display:flex;

    justify-content:center;

    flex-direction:column;


    }

    #suchbox > input{

    margin:5px auto;

    }

    }

  • Kuck mal bei der id vom input feld. #suchetext1 , da steht margin. Wenn du mit den Werten rumspielen tust kannst du das input feld an den richtigen Platz schieben.


    Dann tust du ja einiges an Css auskomentieren.

    Ich hatte da auch viel blödsinn eingebaut was man auch nicht brauch. Doch dann lösche es komplett weg weil das macht es dann übersichtlicher und du hättest dann dein Problem auch selber finden bzw Lösen können

  • Okay, jetzt habe ich alles. Jetzt brauch ich nur noch ein blinkenden Cursor, welchen Befehl muss man dafür einfügen ?

    Ich finde nur Befehle wie man einen blinkenden Cursor entfernen kann.

    Und es wäre gut wenn beim reinklicken in das Eingabefeld die Placeholder verschwinden.

  • Ist dir wirklich noch nicht aufgefallen, dass TonyMahony das nicht selber lösen will und sich lieber von dir alles vorkauen lässt?

    Dich hat doch keiner gefragt oder ?

    Der Sinn eines Forums ist es doch der das man Fragen stellt und dann Hilfe bekommt, ansonsten braucht man ja auch kein Forum, so einfach ist das.

  • Der Sinn eines Forums ist es doch der das man Fragen stellt und dann Hilfe bekommt, ansonsten braucht man ja auch kein Forum, so einfach ist das.

    Vom Prinzip her richtig, aber es wird auch immer Eigeninitative erwartet, und da sehe ich nicht gerade viel von dir.


    Und wenn du dir mal die Beispielseite genauer anguckst und mal die Größe veränderst, wird du sehen, dass sich das Kennzeichen auch verändert. Das wird dann der nächste Punkt sein, womit du hier aufläufst.


    Und wenn kein blinkender Cursor zu sehen ist und der Placeholder nicht verschwindet, dann könnte das doch damit zu tun haben, dass das Eingabefeld nicht den Focus bekommt, oder. Aber darauf wirst du ja schon bestimmt schon selber gekommen sein. :(

  • Wie gesagt bin ich Anfänger was das angeht und habe auch nicht die Zeit mich stundenlange damit zu befassen, das habe ich am Anfang aber auch schon geschrieben. Zudem verstehst du den Begriff "Eigeninitiative" nicht, denn ich mache es ja selber, wenn ich nicht weiterkomme frage ich halt nach. Wenn ich alles selber recherchieren soll dann brauche ich das Forum hier auch nicht, was für ein Bullshit.


    Danke an basti1012 für die Hilfe, aber den Rest mache ich jetzt alleine das wird mir echt zu blöd hier.


    Und wenn kein blinkender Cursor zu sehen ist und der Placeholder nicht verschwindet, dann könnte das doch damit zu tun haben, dass das Eingabefeld nicht den Focus bekommt, oder. Aber darauf wirst du ja schon bestimmt schon selber gekommen sein. :(

    Nein das wusste ich nicht, weil ich wie gesagt ANFÄNGER in dem Bereich bin. Außerdem wenn ich basti1012 eine Farge stelle erwarte ich nicht das du dein Senf dazu abgeben sollst. ;)

Jetzt mitmachen!

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