Textarea

[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 schön und wünsche euch ein schönes Wochenende

[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

[Butterblume]

Hallo Hape,

erst einmal 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 ??

[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

[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

[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

[moni]

Die Tabelle ist 1 A Happe 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

[Butterblume]

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...




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

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

Trink jetzt erst einmal ein Käffchen!

Ich denke vor Samstag komme ich da wohl nicht zu!

Aber ich sag schon mal schön!

[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

[Butterblume]

Sorry Hape,

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

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 schon mal und Nachti