Html/Css Placeholder positionierung ändern

RashAGhul

Mitglied
Hallo,



ich programmiere momentan eine Webseite und bin auf ein Problem gestoßen. Der Placeholder befindet sich mittig links, ich möchte jedoch, dass dieser sich in top left corner befindet.
Wie mache ich das?. Zwar kann ich mit text-align: den placeholder mittig und rechts verschieben, das ist jedoch nicht die Stelle, wo ich den Placeholder gerne hätte. Für jeden Beitrag wäre ich dankbar!.

Ich habe hier sowohl den Html als auch den Css Code geschrieben. Falls von beiden Sprachen der komplette Code benötigt wird, kann ich das hochladen.
HTML:
<input type class="tx3"=<text" placeholder="Ihre Nachricht"/>

CSS:
input.tx3 {
  margin-top: 30px;
  margin-left: 1550px;
  padding: 5px;
  border-radius: 6px;
  width: 465px;  
  height: 200px;
  }
 
Dann lade ich mal den ganzen Code hoch.

HTML:
<!DOCTYPE HTML>
<html>

    <head>
       
        <meta charset="UTF-8">
       
        <link rel="Stylesheet"
        href="side3.css"
         
     
    </head>
   
    <body>
   
   
       
    <header>
   
    <h1>CrackTec GmbH </h1>
    <h2>Elektrotechnik<h2>
    <nav>
    <ul>
    <li><a href="#">Home</a></li>        
    <li><a href="Unternehmen.html">Unternehmen</a></li>
    <li><a href="#">Kontakt</a></li>
    </ul>
    </nav>
     
   
     
    </header>
 
   
    <main>
   
    <p class="poi1"><strong>Kontakt</strong></p>
       
    <p class="poi2"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d159.93476558094218!2d8.752189849219404!3d50.10582587047079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd0e0bf9cc1e8d%3A0xa58ed4ebf7bfcb10!2sCinemaxX%20Offenbach!5e0!3m2!1sde!2sde!4v1618048295404!5m2!1sde!2sde" width="1500" height="550" style="border:0;" allowfullscreen="" loading="quick"></iframe></p>
   
   
    <input type class="tx1"="text" placeholder="Name"/>
       
   
   
    <input type class="tx2"="text" placeholder="E-Mail-Adresse (Pflichtfeld)"/>
   
   
    <input type class="tx3"=<text" placeholder="Ihre Nachricht"/>
   
   
     <p class="poi3"><strong>CrackTec GmbH</strong><br>Haustechnik<br>dodostraße 401<br><strong>60369 entenhausen</strong><br><strong>Telefon</strong>: 069 8285285251-0<br><strong>Telefax</strong>: 069 5925925-0</p>
   
   
   
   
    </main>
   
   
   
   
    <footer class="second">
   
      <li><a href="Impressum.html"> Impressum</a></li>
   
    </footer>

CSS:
 body a:hover {
               
             background: #DEB887;
             color: yellow;
           
            }  
           
            a:link {
             text-decoration: none;
           
            }  
           
            header {
   
             width:     100%;
             height: 50px;
             background-color: #B8860B;
           
              }
           
            h1 {
             font-size: 50px;
             margin-top: 15px;
             color: white;
             padding-left: 100px;
             font-family: Arimo;
           
            }  
           
            h2 {
             color: white;
             background-color: #556B2F;
             padding-left: 100px;
             margin-top: -39px;
             font-family: Arimo;
           
            }  
           
           
           
            ul {
             text-align: right;
             line-height: 0px;
             padding-right: 50px;
           
            }


             ul li {
             list-style: none;
             display: inline-block ;
             padding-left: 20px;
           
       
            }

            ul li a {
             font-family: Arimo;
             font-size: 20px;
           
             color: white;
            }      
   
            p.poi1 {
             margin-top: 120px;
             margin-left: 520px;          
             font-size: 40px;
             font-family: Arimo;
           
            }

            p.poi2 {
            margin-left: 520px;      
               
            }  

           
            p.poi3 {
               
             margin-top: -342px;
             margin-left: 520px;
             line-height: 25px;
             font-family: Arimo;
             font-size:19px;

            }          
               
           
            input.tx1 {
               
             margin-top: 30px;
             margin-left: 1550px;
             padding: 2px;
             border-radius: 6px;
             width: 465px;            
             height: 25px;
             border:none;
           
            }
           
            input.tx2 {
             margin-top: 30px;
             margin-left: 1550px;
             padding: 2px;
             border-radius: 6px;
             width: 465px;            
             height: 25px;
             border:none;  
               
               
            }
           
               input.tx3 {
             margin-top: 30px;
             margin-left: 1550px;
             padding: 5px;
             border-radius: 6px;
             width: 465px;            
             height: 200px;
           
           
            }

          



           
            footer.second {
             margin-top: 1200px;  
             background-color:green;
             height: 30px;
             text-align:center;
             list-style-type: none;
             line-height: 25px;
             font-weight: bold;
             font-size: 30px;
           
             
            }          

            footer.second a {
               
             color: white;
             font-family: Arimo;
            }            
           
            body {
             background-color: #55B4B0;
           
            }
 
Ja, dein Code ist kein valider Html Code. Benutze einen HTML Validator und behebe das erstmal. Vorher macht es nicht viel Sinn sich das anzuschauen.
 
Also nur einmal um klar zu sagen:

type class="tx1"="text"
Du hast in de html tags Attribute, die in der Regel in der Form key=value aufgebaut sind. Vermutlich hast Du einfach das class="..." falsch eingefügt und es sollte etwas sein wie:
type="text" class="tx1"

Aber davon unabhängig hast Du bei dem tx3 Element aus einem " ein < gemacht...

Daher wirklich der Aufruf: Nutz einen brauchbaren Editor! Der würde dir so Dinge direkt um die Ohren hauen...
 

Zurück
Oben