Textarea

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Textarea

Beitrag von Butterblume »

Hallo ihr lieben,
ich habe mal wieder eine Frage!

Und zwar hat mir goggle mitgeteilt, dass es auf mobilen Geräten fehler gab. Das Elemente zu dicht liegen und anderes. Die Fehler sind zwar behoben, indem ich die Bilder auf folgender Seite

https://www.weihnachtszauber.karins-pos ... _danke.php

kleiner und die Tabelle dementsprechend angepasst habe.

Aber nun ist das textera wo der Code drin steht größer bzw breiter als das Bild. Wo kann ich das wohl ändern, ich habe schon die Seite abgesucht und auch in der style.css geschaut. Scheinbar bin ich mal wieder zu blind und finde den Wald vor lauter Bäumen nicht...

Wäre schön, wenn mir da jemand weiterhelfen könnte! Ich sag schon einemal :DA schön und wünsche euch ein schönes Wochenende
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Textarea

Beitrag von HTML-Laie »

Aber nun ist das textera wo der Code drin steht größer bzw breiter als das Bild.
Mal folgendes unverbindlich ausprobieren: Für die Textarea einen Abschnitt in die Style.Css einfügen.

Hier mal ein paar Beispiele wie man die Größe der Textarea verändern kann:

Code: Alles auswählen

textarea {
  width: 300px;
  height: 150px;
}
oder

Code: Alles auswählen

textarea {
  width: 70%;
 
}
Die Größenangaben in den Beispielen müssen natürlich auf deine Gegebenheiten angepasst werden.

Hier mal eine Seite zum Anschauen und experimentieren: Breite und Höhe Textarea

Der Abschnitt Textarea ist schon in deiner Style.Css enthalten. Brauchst du also nicht extra einfügen, sondern nur den vorhanden Wert

Code: Alles auswählen

width: 100%
aud

Code: Alles auswählen

width:95% ändern
LG Hape :)
Zuletzt geändert von HTML-Laie am So 9. Okt 2022, 18:42, insgesamt 1-mal geändert.
Grund: Ergänzung
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Textarea

Beitrag von Butterblume »

Hallo Hape,

erst einmal :DA für deine Antwort!

Ich habe schon folgendes schon lange in der Css

Code: Alles auswählen

textarea {
	max-width: 300px !important;
    width: 100%;
   color: #FF6A00;
   font-size: 0.6em;
   padding: 3px;
   background-color: #000000;
   border: 1px solid #FF6A00;
   margin-bottom: 2%;
   margin-top: 2%;
}
Gildet das für alle textaera `s ??
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Textarea

Beitrag von HTML-Laie »

Ja, dies wirkt sich auf alle Textareas auf. Es sei denn man verpasst den Textareas eigene Klassen mit Formatierungsanweisungen.

Hier ein Beispiel:

Code: Alles auswählen

<textarea class="MeinFormat1" rows="6" cols="50" name="a1a">
Deine Anweisungen für Größe ,Schriftart etc. musst du dann in einem eigenen Abschnitt in die Style.CSS einfügen. Im angegebenem Beispiel wäre dies:

Code: Alles auswählen

.MeinFormat1 {
width:71%;
color: #FFFFFF;
usw.
usw.
}
LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Textarea

Beitrag von moni »

Hallo Karin ..

Denke das man komplett, sich was anderes ausdenken soll.
Mit der Tabelle auf Mobil ist alles nur abgeschnitten und im besten fall sollen die Bilder mit textatera sich schön untereinander einordnen.

https://abload.de/img/2022_10_11_21.30.34mcfe7.jpg

Ein flex Container kann man hier gut anwenden. Wen ich bisschen Zeit habe, da kann dir einen Vorschlag dazu machen.

Nachtarg : So meine ich das ..schau dir das am Handy und wen es OK ist da morgen erkläre dir wie das geht .

http://demo.homepagehelfer.net/beispiel ... belle.html
Viele Grüße ...Monika
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Textarea

Beitrag von HTML-Laie »

Es würde auch mit einer Tabelle funktionieren, allerdings müßte diese neu aufgebaut bzw. die Inhalte neu angeordnet werden.

Beispielseite obere Tabelle ist die alte Tabelle, die mit blauer Farbe unterlegte Tabelle die neu erstellte. In der neuen Tabelle wurden das Bild, die Textarea und der Button zum kopieren in einer einzigen Zeile untergebracht. Somit ist gewährleistet das die Elemente die zusammen gehören auch auf dem Smartphone untereinander dargestellt werden. Dazu noch ein wenig CSS-Code.

Hier eine Beispielseite: Testseite

LG Hape :)
Zuletzt geändert von HTML-Laie am Mi 12. Okt 2022, 20:02, insgesamt 1-mal geändert.
Grund: Ergänzung Beispielseite
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Textarea

Beitrag von moni »

Die Tabelle ist 1 A Happe :u23 Werd mir das in meine Sammlung abspeichern.

Habe mir das vor dir erstellte Beispiel geholt und als Ergänzung ganz unten mein Flex Beispiel eingefügt. Da hat man beide Sachen zusammen.

Finde, beide Beispiele sind eine gute Lösung.

http://demo.homepagehelfer.net/beispiel ... karin.html
Viele Grüße ...Monika
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Textarea

Beitrag von Butterblume »

moni hat geschrieben: Di 11. Okt 2022, 21:48 Hallo Karin ..

Denke das man komplett, sich was anderes ausdenken soll.
Mit der Tabelle auf Mobil ist alles nur abgeschnitten und im besten fall sollen die Bilder mit textatera sich schön untereinander einordnen.

https://abload.de/img/2022_10_11_21.30.34mcfe7.jpg

Ein flex Container kann man hier gut anwenden. Wen ich bisschen Zeit habe, da kann dir einen Vorschlag dazu machen.

Nachtarg : So meine ich das ..schau dir das am Handy und wen es OK ist da morgen erkläre dir wie das geht .

http://demo.homepagehelfer.net/beispiel ... belle.html

Moni,
deswegen wollte ich das ja ändern Moni! Weil google auch gemeckert hat!

Ich habe hier gerade gefühlte 2000 Seite geöffnet in meinem Note Pad... Bild




hape,
das heißt, ich müsste das ganze ohne Tabelle machen? Bild Oder versteh ich das jetzt falsch...

Muss jetzt erst einmal Pause machen, vor lauter code sehe ich schon nicht mehr! Bild

Trink jetzt erst einmal ein Bild Käffchen!

Ich denke vor Samstag komme ich da wohl nicht zu!

Aber ich sag schon mal :DA schön!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Textarea

Beitrag von HTML-Laie »

hape,
das heißt, ich müsste das ganze ohne Tabelle machen? Oder versteh ich das jetzt falsch...
Man muss schon sorgfältig lesen was ich geschrieben habe. Dann hätte man gelesen das ich eine neue Tabelle erstellt habe. Entferne deine Tabelle und füge diese dafür ein:

Code: Alles auswählen

<table id="tabelle" border="0" align="center" cellPadding="5" cellSpacing="5" width="70%">
 <tr>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke1-2019.png" >
         <br>
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke1-2019.png" title="GB Bilder" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke1-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"><br/>
  </td>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke2-2019.png" >
         <br>
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke2-2019.png" title="GB Bilder" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke2-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"> <br/>
  </td>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke3-2019.png" >
         <br>
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke3-2019.png" title="GB Bilder" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke3-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"> <br/>
  </td>
 <tr>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke4-2019.png" >
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke4-2019.png" title="Danke Besuch" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke4-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"> <br/>
  </td>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke5-2019.png" >
  <br>
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke5-2019.png" title="Danke Besuch" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke5-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"> <br/>
  </td>
  <td align="center" valign="center"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke6-2019.png" >
         <form name="a1a"><textarea rows="6" cols="50" name="a1a"><a href="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke6-2019.png" title="Danke Besuch" target="_blank"><img src="https://www.weihnachtszauber.karins-poserbilder.de/images/danke_besuch/danke6-2019.png" border=0 alt="Danke Besuch"></a><br>
         <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank"></a> - <a href="https://www.weihnachtszauber.karins-poserbilder.de/info/besuch_danke.php" target="_blank">Danke schön</a><br> </textarea></form>

         <input type="button" class="button" value="Markieren & Kopieren" onClick="this.form.a1a.select();this.form.a1a.focus(); document.execCommand('Copy')"> <br/>
  </td>
 </tr>
</table>
Füge dann noch diesen Abschnitt in deine style.css ein:

Code: Alles auswählen

#tabelle
* {
        box-sizing:border-box;
}

table {
        width:100%;
}

table, td, tr, th {
        border:2px solid black;
        border-collapse: collapse;
        text-align: center;
}

td, tr, th {
        padding:1em;
}

th {
        background:#eee;
        font-weight: bold;
}

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

        table, tr, td {
                padding:0;
                border:1px solid black;
        }

        table {
                border:none;
        }

        thead {
                display:none;
        }

        tr {
                float: left;
                width: 100%;
                margin-bottom: 2em;
        }

        td {
                float: left;
                width: 100%;
                padding:1em;
        }

        td::before {
                content:attr(data-label);
                word-wrap: break-word;
                background: #660000;
                border-right:0px solid black;

                font-weight: bold;
                margin:-1em 1em -1em -1em;
        }
}
Sollte so eigentlich funktionieren. Eventuell erstellst du eine Testseite und probierst es aus. Ich habe der Tabelle eine ID verpasst:

Code: Alles auswählen

id="tabelle"
Sieht dann vollständig so aus:

Code: Alles auswählen

<table id="tabelle" border="0" align="center" cellPadding="5" cellSpacing="5" width="70%">
So wirkt sich diese Einstellung nur auf diese eine Tabelle aus und verändert keine anderen Tabellen auf anderen Seiten.

LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Textarea

Beitrag von Butterblume »

Sorry Hape,

Ich überfliege oft nur und dann entgeht mir das wichtigste! :oops: War keine Absicht!
Die ersten Code Schnipsel habe ich wohl registriert, konnte damit aber nicht wirklich was anfangen... :oops:

Aber wie schon gesagt, ich denke das ich das vor Samstag nicht schaffe!

Jetzt wo wir Heizung sparen müssen, ist mir das im Arbeitszimmer zu kalt. Am Tage gehts noch...

Würde mich dann Samstag nochmal hier melden!

Vielen :DA schon mal und Nachti
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 14 Gäste