Ich habe meine Seite auf CSS umgestellt:
- Extension css_styled_content installiert
- Template > „Click here to edit whole template record“
- Im Abschnitt [Include static (from extensions)] das Objekt css_styled_content hinzugefügt
So weit so gut. CSS habe ich relativ gut im Griff und die Änderungen in der style.css wirken sich auch auf die Seitendarstellung aus. Eine Ausnahme: mein ganz einfaches Mailformular (drei Felder: Name, E-Mail, Text) sieht seit der Umstellung total hässlich aus. Weder die Feldbeschriftungen noch die Felder sind untereinander sondern horizontal verschoben. Die Felder sind dermassen nah zusammen, dass sie sich fast überlappen.
Nun habe ich keine Ahnung wo ich den Hebel ansetzen muss um diese Unschönheit zu beseitigen. Bin für Tipps sehr dankbar!
Hallo,
wie wärs mit CSS? schau mal in der kategorie formulare, da sollte es auch einiges zu finden geben
georg
Danke. Klar möchte ich was mit CSS machen, liegt ja auf der Hand. Bei diesem Formular ist allerdings die Ausrichtung der Felder hässlich. Am Formular selbst will ich nicht unbedingt etwas ändern.
Ich dachte zuerst, das Formular befindet sich in einer Tabelle. Was aber fast nicht sein kann, denn in einer Tabelle müssten die Spalten ja untereinander sein. Also müsste ich das Formular in eine Tabelle bringen, nicht wahr? Aber wie?
hast du was im ts dafür definiert?
gibts nen link?
Das hässliche Formular ist hier zu finden: http://www.anav.ch/cms/index.php?id=4&L=0
Im TS habe ich nichts geändert.
tabellen seh ich hier nirgends,
zB den css code
/* Formular */fieldset.csc-mailform{border:0}
fieldset.csc-mailform label{width:120px;float:left;text-align:right;margin-right:10px;display:block}
fieldset.csc-mailform input,fieldset.csc-mailform textarea{margin-bottom:10px;font-size:10px;font-family:Verdana, Helvetica, sans-serif;border:1px solid #ccc;padding:2px;xwidth:250px}
fieldset.csc-mailform fieldset input{float:none;display:inline;width:50px;text-align:left;border:0}
fieldset.csc-mailform fieldset label{display:inline;float:none;text-align:left;width:300px;margin:10px 0}
fieldset.csc-mailform fieldset{border:0}
fieldset.csc-mailform fieldset legend{display:none}
fieldset.csc-mailform select{width:220px;margin:2px 0}
fieldset.csc-mailform option{padding:0 5px;background:#fff}
#mailformformtype_mail{padding:2px;margin-left:40px;background:#eee;border:1px solid #ccc;width:80px;text-align:center}
Genial! Funktioniert und sieht erst noch gut aus!
Allerbesten Dank für die professionelle Hilfe!
nur so ne frage nebenbei... wieso ist das links ein grafikmenü? CSS Menü wäre doch viel sinnvoller...
Da muss ich Dir absolut recht geben. Der Grund: ich bin nicht so ganz sattelfest mit Typo3 und habe mir darum das Buch von Robert Meyer "Praxiswissen Typo3" gekauft. Das Grafikmenü basiert also auf dem Beispiel das in diesem Buch erklärt wird.
In einem ersten Schritt habe ich mal auf css_styled_content umgestellt. Wenn ich dereinst genug KnowHow habe (oder irgendwo ein praxistaugliches, gut erklärtes Beispiel finde) werde ich sehr gerne dieses Grafikmenü auch noch umstellen.
Nach langer Zeit hat sich ein Problem mit dem CSS-Code von just2be (siehe Beitrag vom 06. 06. 2008.) ergeben. Wenn eine Feldbeschriftung relativ lang ist, sieht das Formular nicht gut aus. Live hier zu sehen: http://www.svse.ch/index.php?id=1172.
Firefox:
Die Felder und Feldbeschriftungen werden nach rechts verschoben.
Internet Explorer:
Es erfolgt ein unschöner Zeilenumbruch.
Was ich gerne hätte:
Da genügend Platz vorhanden ist sollte die Spalte für die Feldbeschriftungen breiter sein, damit möglichst kein Zeilenumbruch entsteht. Leider habe ich nicht herausgefunden, wie ich das mit CSS realisieren kann.
Vielen Dank im Voraus!
crimle
hallo crimle,
um eine Stelle zum Ändern zu haben nimm in eine deiner CSS-Dateien den Abschnitt:
.csc-mailform .csc-mailform-field label {
min-width: ...px;
}
auf. Dann die Größeneinstellungen rausfinden. Wenn du nicht über eine CSS-Datei gehst, dann musst du jeden der "<label>"-Tags innerhalb des Tags "<fieldset class="csc-mailform">" folgendermaßen ändern "<label style="min-width: ...px;">".
Viel Spaß
PS: lieber gleich alle Style-Infos in eine zentrale CSS übertragen -> macht das Ändern und Wiederverwenden einfacher. 😉
Hallo terrierace
hat bestens funktioniert, vielen Dank! Übrigens hatte ich bereits eine CSS-Datei und die Codezeilen von just2b waren bereits drin. Dein Abschnitt
.csc-mailform .csc-mailform-field label {
min-width: ...px;
}
fehlte allerdings. Nun siehts gut's aus, wenigstens im FF, der IE8 zickt ein bisschen, aber das nehme ich in Kauf.
Gruss
crimle
np 😃
Der IE meckert wegen dem min-width, wenn du die feste breite kennst kannste auch nur "width" nehmen, dann klappts auch mit dem IE. War nur zur Vorsicht, falls du später noch längere Inhalte nehmen möchtest.
Es kann noch Probleme geben, wenn einer der Container rundherum eine höchstbreite vorgibt und die Container "label" und sein Nachbar sind zusammen breiter als dieser Wert, dann meckert wieder der Microsoftler #giggle#
MfG
terrierace
Hallo terrierace
erst seit kurzer Zeit dabei und erst 3 Beiträge... aber fundierte CSS-Kenntnisse! Ich habe
min-width: 170px;
ersetzt durch:
width: 170px;
Und siehe da: es funktioniert! Vielen Dank!
crimle