Hallo Community,
ich arbeite gerade das Buch von Peter Müller durch.
Habe ein kleines Problem. Der eingegebene Text im Textfeld ist zu klein! Wo und wie kann ich das ändern?
Danke
Derby
Druckbare Version
Hallo Community,
ich arbeite gerade das Buch von Peter Müller durch.
Habe ein kleines Problem. Der eingegebene Text im Textfeld ist zu klein! Wo und wie kann ich das ändern?
Danke
Derby
Grundsätzlich werden alle Styles über selbst angelegte CSS-Regeln definiert. Vielleicht greift ein Selektor nicht aufgrund von Kaskadenproblemen. Versuch mal Rechtsklick - Element untersuchen.
Eine Antwort ist immer nur so spezifisch wie die Frage. Hier ein paar AnregungenZitat:
Zitat von Derby
Und ein Link wäre hilfreich. Read you soon ;)
- Welche Auflage?
- Welche Seite?
- Welches Textfeld? (Artikel/News/Frontend/Backend/welches Formular/welcher Browser...)
- Welcher Text? (selbst getippt/aus Word kopiert/von CD kopiert...)
Hi das ist ja cool! Der Autor meldet sich persönlich.
Dann muss ich jetzt erst mal ein Lob aussprechen. TOLLES BUCH!!!
Gut, dann werde ich meine Frage spezifizieren:
2. Auflage
Seite Seite 331
Das Textfeld für die Kontaktanfrage. Wenn man einen Text reinschreibt, dann ist die Schrift extrem klein!
Ich benutze den Firefox 6.0.2.
Ich gehe Kapitel für Kapitel durch, habe lasse weg was ich im moment noch nicht brauche.
Quellcode von bildschirm.css:
Code:html
{
overflow-y: scroll;
}
body
{
background-color:#d9d9d9;
font:81.25% Verdana, Arial, Helvetica, sans-serif;
}
#wrapper
{
background-color:#ffffff;
}
/* Rahmenlinien oben und unten */
#header
{
margin-top:1em;
padding:48px 0 0;
background:#89adcd url("tl_files/themes/blaues_theme/header_gradient.jpg") repeat-x left top;
}
#header h1
{
margin-top:0;
margin-left:18px;
}
#header p#slogan
{
margin-left:18px;
}
#container
{
margin-right:18px;
margin-left:18px;
}
/* Rahmenlinien links und rechts */
#main
{
min-height:300px;
padding-right:10px;
padding-left:10px;
line-height:1.7;
}
/* Rahmenlinien oben und unten */
#footer
{
margin-bottom:1em;
padding:18px 18px 9px;
background-color:#89adcd;
color:#000;
}
/* Inhaltstabellen */
.ce_table table
{
margin-bottom:1em;
background-color:#d9d9d9;
border-bottom:2px solid #bbb;
border-collapse:collapse;
}
.ce_table thead
{
background-color:#fff;
border-top:2px solid #bbb;
color:#000;
border-bottom: 1px solid #bbb;
}
.ce_table tr.odd
{
background-color:#fff;
}
.ce_table td,
.ce_table th
{
padding:0.5em 1em;
font-size:11px;
}
/* ====================================== Kontaktformular gestalten
====================================== */
form#kontaktformular
{
margin:0 0 2em;
padding:0 18px 18px;
background-color:#ADCBE6;
border-top:1px solid #89ADCD;
line-height:1;
border-bottom: 1px solid #89ADCD;
}
#kontaktformular label
{
display:block;
margin:18px 0 3px;
cursor: pointer;
}
#kontaktformular .checkbox_container label
{
bottom:2px;
position:relative;
display:inline;
}
#kontaktformular .checkbox_container
{
margin-top:1em;
}
#kontaktformular input,
#kontaktformular textarea
{
padding:3px;
}
#kontaktformular input:focus,
#kontaktformular textarea:focus
{
background-color:#ECECEC;
color:#000;
}
#kontaktformular p.error
{
max-width:400px;
padding:3px;
border:1px solid #f00;
background: #FFC0CB;
/* pink */ color: #000;
/* rot */ margin-bottom: 3px;
}
Ich habe die Seite gerade mal mit dem Internet explorer geöffnet, statt firefox...
Und es ist alles gut.
Wie könnte man das Problem dennoch lösen?
Danke
Derby
Sorry, aber ohne Link bleibt das Raten, da man aufgrund von Screenshots und Quelltextauszügen nicht wirklich vernünftige Aussagen treffen kann.
Sieht das in einem anderen Browser genauso aus?(EDIT)- Ist das im Formular auf der Buchsite in deinem Firefox genauso?
- Hast du dein lokales CSS mal validiert, ob irgendwo ein Tippfehler ist?
Und im Firefox gibt es im Menü "Hilfe - Über Firefox" die Möglichkeit zum Updaten. Aktuell ist Version 11.0 ;)
Das hat direkt mit deinem Problem nichts zu tun, aber im neuen Firefox gibt es tolle eingebaute Hilfen zum Analysieren von HTML und CSS, z. B. im Menü "Extras - Web-Entwickler - Untersuchen". Dort kannst du dann deine textarea auswählen und genau sehen, welche CSS-Anweisung dafür sorgt, dass der Text so klein ist.
Habe meinen Firefox erstmal auf die neuste Version gebracht. V 11!
Also das Kontaktformular auf der Seite http://websites-erstellen-mit-contao.de/kontakt.html ist in Ordnung! Schriftgröße OK!!!
Meine Schrift im Textfeld ist immer noch zu klein. Es muss also irgendwie an meinem Quelltext liegen.
Jetzt habe ich das Textfeld untersucht mit der Firefox-Funktion. Und habe was interessantes herausgefunden!
Da gibt es eine Zeilel, die heisst:
Contao.css:2
select, input, textarea.
Font-size: 99 %.
Wenn es angeklickt ist, dann ist der Text klein. Wenn ich den Haken wegnehme, dann ist die Schriftgröße OK.
Ich muss ganz ehrlich gestehen, ich habe größe Probleme gehabt, die CSS Geschichte zu verstehen. Wieso basic.css?Welches CSS ist das ausschlaggebende? Das Kapitel 8 im Buch habe ich zum Teil weggelassen, mit dem Import von den CSS-Dateien (basic,navitation,bildschirm) in die eine zentrale.css, da ich mit den internen CSS arbeiten möchte.
Ok! Ich habe die Zeile in contao.css auskommentiert.
Jetzt alles ok!
Vielen Dank für die Unterstützung!
Jetzt muss ich nur nochmal nachlesen, wieso und weshalb die Datei contao.css mir da einen Streich gespielt hat. Und woher die Datei kommt?!?
contao.css wird im Buch auf Seite 211 erklärt, als Teil von Kapitel 8.6 "Das CSS-Framework von Contao im Detail".
Du kommst um eine Beschäftigung mit CSS nicht drumrum, denn das lernt man nicht durch Trial and Error. Meine Literaturempfehlung dazu steht in der Signatur ;).
Wenn du einfach nur wissen willst, wie ein Browser die richtigen Styles findet, schaue dir auf little-boxes.de folgende Kapitel an:
Falls dir das Kapitel zur Kaskade zu lang ist, schaue dir wenigstens "Die Kaskade im Schnelldurchgang" einmal an.
Danach solltest du verstehen, warum die Deklaration aus contao.css greift.
Die Lösung ist übrigens nicht die Auskommentierung in contao.css. Das Stylesheet gehört zu Contao. Entweder du nimmst es ganz oder gar nicht (im Seitenlayout das CSS-Framework de-aktivieren).
Eine besser Lösung wäre es, einen eigenen Style für die textarea zu definieren und darin die Schriftgröße explizit anzugeben. Zum Beispiel bei dem Style im ToDo auf Seite 330, Schritt 6, in dem die textarea ein padding von 3px bekommt. Da schreibst du einfach eine font-size dazu.
So.
Habe es so gemacht, wie Sie beschrieben haben. Jetzt ist es OK! Vielen Dank für die Info. Ja ich habe das Kapitel 8 im Buch bestimmt 3x gelesen, aber irgendwie fehlt mir da der AHA-Effekt. Ich habe auf die Info´s zu contao.css gefunden, aber wie gesagt, der AHA-Effekt fehlt. Was macht dieses CSS? Mir fehlen da die Anfänger-Info´s....
Bitte nicht persönlich nehmen! Ich bin absoluter Laie (gut, ich habe bissi HTML in der Techniker-Schule gehabt) was Homepages erstellen angeht. Und leider bin ich sehr ungeduldigt, und stehe total auf Try and Error!
Im Seitenlayout, Standartlayout, Stylesheets sind folgende Stylesheets ausgewählt:
basic, Navigation, bildschirm.
Deswegen versteh ich auch nicht, wieso contao.css greift, laut dem Firefox (quellcode untersuchen)?!?
Ich werde mich mit den Themen, die sie mir nannten, auseinander setzen.
Und entschuldige mich jetzt schon im Vorraus, Ihre kostbare Zeit in Anspruch genommen zu haben.
Vielen, Vielen Dank!
Derby
"Trial and Error" ist für viele Dinge okay. Für IKEA-Möbel zum Beispiel. Aber nicht für CSS. Die Grundlagen muss man einfach lernen. Sonst gibt das nur Frust.Zitat:
Zitat von Derby
Weil contao.css IMMER geladen wird, sofern du nicht im Seitenlayout das CSS-Framework explizit ausstellst.Zitat:
Zitat von Derby
Viel Spaß dabei, und eine Entschuldigung ist wirklich nicht nötig. Ich antworte ja freiwillig ;)Zitat:
Zitat von Derby
Ich hab Peters Buch schon mehrere Male durch und jedes Mal ein neues Detail gefunden. Er hat wirklich Talent jemandem etwas beizubringen, von daher nimm dir zeit und starte von Anfang an.