Textarea
Moderator: HTML-Laie
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Textarea
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
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
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Textarea
Mal folgendes unverbindlich ausprobieren: Für die Textarea einen Abschnitt in die Style.Css einfügen.Aber nun ist das textera wo der Code drin steht größer bzw breiter als das Bild.
Hier mal ein paar Beispiele wie man die Größe der Textarea verändern kann:
Code: Alles auswählen
textarea {
width: 300px;
height: 150px;
}
Code: Alles auswählen
textarea {
width: 70%;
}
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%
Code: Alles auswählen
width:95% ändern
Zuletzt geändert von HTML-Laie am So 9. Okt 2022, 18:42, insgesamt 1-mal geändert.
Grund: Ergänzung
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Textarea
Hallo Hape,
erst einmal für deine Antwort!
Ich habe schon folgendes schon lange in der Css
Gildet das für alle textaera `s ??
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%;
}
- HTML-Laie
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Textarea
Ja, dies wirkt sich auf alle Textareas auf. Es sei denn man verpasst den Textareas eigene Klassen mit Formatierungsanweisungen.
Hier ein Beispiel:
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:
LG Hape
Hier ein Beispiel:
Code: Alles auswählen
<textarea class="MeinFormat1" rows="6" cols="50" name="a1a">
Code: Alles auswählen
.MeinFormat1 {
width:71%;
color: #FFFFFF;
usw.
usw.
}
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Textarea
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
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
- HTML-Laie
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Textarea
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
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
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Textarea
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
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
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Textarea
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...
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
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Textarea
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:hape,
das heißt, ich müsste das ganze ohne Tabelle machen? Oder versteh ich das jetzt falsch...
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>
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;
}
}
Code: Alles auswählen
id="tabelle"
Code: Alles auswählen
<table id="tabelle" border="0" align="center" cellPadding="5" cellSpacing="5" width="70%">
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Butterblume
- Held des Forums
- Beiträge: 7531
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Textarea
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
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
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 10 Gäste