Input Feld Formatierung

matthros · #1 27.01.08, 11:27

Hallo!

Ich habe jetzt meine erste Extension Programmierung erfolgreich hinter mir,
nur die Formatierung dieser macht mir noch etwas Schwierigkeiten.
Während auf normalen php Seiten dieses Input Textfeld auf size="5"
begrenzt wird, wird diese Formatierung in typo3 nicht übernommen.

PHP-Code:

  $content = '
            <form method="post" action="'.htmlspecialchars($seite).'">
                <table width="535" border="1">
                      <tr>
                        <td height="60" colspan="2" style="color:#FFFFFF"><h2>Tragen sie hier anstehende Veranstaltungen ein</h2></td>
                      </tr>
                      <tr>
                        <td width="184">Veranstaltung</td>
                        <td width="335"><input name="veranstaltung" type="text" size="40" style="background-color:#0000FF; color:#FFFFFF"></td>
                      </tr>
                      <tr>
                        <td>Datum</td>
                        <td>
                        <input name="tag" type="text" size="5" style="background-color:#0000FF; color:#FFFFFF">.<input name="monat" type="text" size="5" style="background-color:#0000FF; color:#FFFFFF">.<input name="jahr" type="text" size="5" style="background-color:#0000FF; color:#FFFFFF"> Tag.Monat.Jahr                        </td>
                      </tr>
                      <tr>
                        <td>Ort</td>
                        <td><input name="ort" type="text" size="40" style="background-color:#0000FF; color:#FFFFFF"></td>
                  </tr>
                      <tr>
                        <td>Webadresse</td>
                      <td><input name="webadresse" type="text" size="40" style="background-color:#0000FF; color:#FFFFFF"></td>
                  </tr>
                      <tr>
                        <td colspan="2" align="center"><input type="submit" name="eintragen" value="Eintragen"></td>
                      </tr>
                </table>
            </form>';

tga · #2 27.01.08, 11:37

Hi!

Wird per CSS die Größe des Input-Feldes überschrieben?

Firebug bzw. das WebDeveloper-Plugin (je für Firefox) helfen dir, das zu erkennen.

Grüße,
Tina

matthros · #3 27.01.08, 12:46

also wenn ich das css von meinem Fertigtemplate diasable dann wird es korrekt dargestellt, nur kann ich den Eintrag in der CSS wo dies überschrieben werden soll nicht finden:

/*********************/

/* Tables, generally */

/*********************/

TABLE.contenttable P { font-size:11px; }

TABLE.contenttable TR TD { vertical-align:top; }

/* Tables, specifically */

TABLE.contenttable-0 P { color:#1B2943; }

TABLE.contenttable-1 P { color:#186900; }

TABLE.contenttable-1 TR.tr-0 TD P { font-weight:bold; }

TABLE.contenttable-1 TR.tr-0 TD { background-color:#d7e5ef;}

TABLE.contenttable-2 P { color:#10007B; }

TABLE.contenttable-2 TR TD.td-0 { background-color:#F5FFAA;}

TABLE.contenttable-2 TR TD.td-0 P { font-weight:bold; }

TABLE.contenttable-3 P { color:#8A0020; }

TABLE.contenttable-3 TR TD.td-0, TABLE.contenttable-3 TR.tr-0 TD { background-color:#D1D2E4;}

TABLE.contenttable-3 TR TD.td-0 P, TABLE.contenttable-3 TR.tr-0 TD P { font-weight:bold; }

/* RTE / Table styling */

TABLE.contenttable { border:1px #aec4de solid; margin:10px 0px 10px 0px; width:100%; }

TABLE.contenttable TR TD { padding:0px 3px 0px 3px; }

TABLE.contenttable TR TD P.bodytext { font-size:10px; }

TABLE.contenttable TR { background-color:#d7e5ef; }

/*****************/

/* Various Forms */

/*****************/

/* Email, Login and Search forms generally:*/

FORM TABLE TR TD { padding-left:5px; padding-right:20px; }

FORM TABLE TR TD.csc-form-labelcell, FORM TABLE TR TD.csc-form-commentcell { background-color:#d7e5ef; }

FORM TABLE TR TD.csc-form-fieldcell { background-color:#d7e5ef; }

FORM TABLE TR TD.csc-form-fieldcell INPUT, FORM TABLE TR TD.csc-form-fieldcell SELECT, FORM TABLE TR TD.csc-form-fieldcell TEXTAREA { border:1px solid #aec4de; }

FORM TABLE TR TD.csc-form-labelcell P.csc-form-label-req { font-weight:bold; }

/* Email form, specifically */

FORM TABLE.csc-mailform TR TD.csc-form-labelcell { }

/* Search form, specifically */

FORM TABLE.csc-searchform { width:100%; }

FORM TABLE.csc-searchform TR TD { padding:5px 5px 5px 5px; }

FORM TABLE.csc-searchform TR TD.csc-form-labelcell, FORM TABLE.csc-searchform TR TD.csc-form-commentcell { font-weight:bold; }

FORM TABLE.csc-searchform TR TD.csc-form-fieldcell INPUT, FORM TABLE.csc-searchform TR TD.csc-form-fieldcell SELECT { width:100%; }

/* Login form, specifically */

FORM TABLE.csc-loginform { width:70%; }

#tx-newloginbox-pi1-user,#tx-newloginbox-pi1-pass {

border:1px solid #aec4de;

}

.tx-newloginbox-pi1-submit {

border:1px solid #aec4de;

color: #000000;

background: #ffffff

}

/******************/

/* Headers, plain */

/******************/

H1 {

border-bottom: 1px solid #aec4de;

border-top: 1px solid #aec4de;

border-right: 20px solid #6183ad;

color: #6183ad;

font-size: 130%;

font-weight: normal;

margin: 5px 0;

background: #d7e5ef;

}

H2 {

border-bottom: 1px solid #aec4de;

border-top: 1px solid #aec4de;

border-right: 20px solid #6183ad;

color: #6183ad;

font-size: 120%;

font-weight: normal;

margin: 5px 0;

background: #d7e5ef;

}

H3 {

border-bottom: 1px solid #aec4de;

border-top: 1px solid #aec4de;

border-right: 20px solid #6183ad;

color: #6183ad;

font-size: 110%;

font-weight: normal;

margin: 5px 0;

background: #d7e5ef;

}

H4 {

border-bottom: 1px solid #aec4de;

border-top: 1px solid #aec4de;

border-right: 20px solid #6183ad;

color: #6183ad;

font-size: 100%;

font-weight: normal;

margin: 5px 0;

background: #d7e5ef;

}

H1, H2, H3, H4, H5, H6 { margin:0px 0px 0px 0px; margin-top:10px; margin-bottom:8px; }

H1.csc-firstHeader, H2.csc-firstHeader, H3.csc-firstHeader, H4.csc-firstHeader, H5.csc-firstHeader, H6.csc-firstHeader { margin-top:0px; }

/* CSS version 2.0, by Boris Cherny. */

/*Many thanks to Andreas, NickyD, ditchCrawler, TomW, whowrotewhat, hash bar, and Sanden Cottongame */

* {

border: 0;

margin: 0;

padding: 0;

}

body {

background: #6183ad url(./Images/background_big.gif) center repeat-y;

color: #616161;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 69%;

text-align: center;

}

a {

color: #6799b1;

text-decoration: underline;

}

a:hover {

color: #838f96;

text-decoration: none;

}

acronym {

border-bottom: 1px dashed #999999;

cursor: help;

}

h1:hover {

border-bottom: 1px solid #7f9fc6;

border-top: 1px solid #7f9fc6;

background: #c9dcea;

}

input {

background: #ffffff;

margin: 2px 20px;

width: 140px;

}

#column2 ul {

margin: 10px 0;

}

#column2 li {

color: #999999;

list-style: square inside;

text-indent: 10px;

}

.login {

border: 1px solid #c9dcea;

color: #999;

background: #385585;

}

.login_hover {

border: 1px solid #999;

color: #ccc;

}

#submit {

border: 1px solid #c9dcea;

color: #999;

cursor: pointer;

margin: 2px 20px;

text-decoration: none;

width: 140px;

text-align:center;

}

#submit_hover {

border: 1px solid #999;

color: #ccc;

cursor: pointer;

margin: 2px 20px;

text-decoration: none;

text-align:center;

}

/* The background-image's for the #wrap below are for preloading all the page's images, just add your own images to the pattern */

#wrap {

background-image: url(./Images/arrow.gif);

background-image: url(./Images/arrow_outline.gif);

background-image: url(./Images/background.gif);

background-image: url(./Images/camera1.gif);

background-image: url(./Images/camera2.gif);

background-image: url(./Images/camera3.gif);

background-image: url(./Images/header_big.gif);

background-image: url(./Images/selector.gif);

background-image: url(./Images/selector_sub.gif);

background-repeat: no-repeat;

background-position: -5000px -5000px;

margin: 0 auto;

text-align: left;

width: 800px;

}

#header {

background: url(./Images/header_big.gif) center no-repeat;

color: #e0e0e0;

font-size: 327%;

font-weight: bold;

height: 100px;

line-height: 120px;

text-indent: 140px;

letter-spacing: 3px;

}

#nav {

padding-bottom: 40px;

width: 180px;

}

/* Vertical Navigation Menu */

#all_nav1{

display: block;

line-height: 26px;

color: #ffffff;

display: block;

text-decoration: none;

text-align: center;

width: 180px;

}

#all_nav2 {

display: block;

line-height: 26px;

color: #ffffff;

text-decoration: none;

width: 180px;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

#all_nav3 {

display: block;

line-height: 26px;

color: #ffffff;

text-decoration: none;

width: 180px;

FILTER: alpha(opacity=90);

moz-opacity: 0.90;

}

.nav1 A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #ffffff;

text-decoration: none;

width: 180px;

background: #395686;

TEXT-DECORATION:none;

}

.nav1 A:hover {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector.gif) center right no-repeat;

}

.nav1_act A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector.gif) center right no-repeat;

}

.nav2 A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #ffffff;

text-decoration: none;

width: 180px;

background: #395686;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav2 A:visited {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #ffffff;

text-decoration: none;

width: 180px;

background: #395686;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav2 A:hover {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #ffffff;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

color: #000000;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav2_act A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav2-act A:hover {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav2_act A:visited {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3 A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #ffffff;

text-decoration: none;

width: 180px;

background: #395686;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3 A:visited {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #d7e5ef;

text-decoration: none;

width: 180px;

background: #395686;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3 A:hover {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3_act A {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3-act A:hover {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

.nav3_act A:visited {

display: block;

line-height: 26px;

border-bottom: 1px solid #c9dcea;

color: #000000;

text-decoration: none;

width: 180px;

background: #c9dcea url(./Images/selector_sub.gif) center right no-repeat;

FILTER: alpha(opacity=90);

moz-opacity: 0.90

}

#column1 {

float: left;

width: 180px;

}

#column1 img {

border: 1px solid #c9dcea;

margin: 5px 20px;

padding: 10px 20px;

}

/* in the tag below, #column2, I used the Underscore Hack to give the column2 div the correct margins in Firefox 1 */

#column2 {

width: 540px;

/*float: right !important;*/

/*float: right;*/

margin-left: 190px;

padding: 12px 30px 30px 9px;

}

#links div {

float: left;

width: 140px;

}

#links div li {

list-style: none;

}

#links div li a {

background: url(./Images/arrow_outline.gif) left no-repeat;

padding-left: 15px;

text-decoration: none;

}

#links div li a:hover {

background-image: url(./Images/arrow.gif);

color: #ac835c;

text-decoration: underline;

}

#footer {

clear: both;

color: #999999;

font-size: 9px;

padding: 30px 0 10px 0;

text-align: center;

}

#footer a {

text-decoration: underline;

}

<!--[if IE]>

ul.subnavigation li{

#column2 {

width: 500px;

/*float: right !important;*/

/*float: right;*/

margin-left: 190px;

padding: 12px 30px 30px 9px;

#all_nav1,#all_nav2,#all_nav3,#all_nav4,.nav1,.nav1 A,.nav1 A:active,.nav1 A:hover,.nav1_act,.nav1_act A,.nav1_act A,.nav1_act A:hover,.nav2_act A:visited,.nav2,.nav2 A,.nav2 A:active,.nav2 A:hover,.nav2_act,.nav2_act A,.nav2_act A,.nav2_act A:hover,.nav2_act A:visited,.nav3,.nav3 A,.nav3 A:active,.nav3 A:hover,.nav3_act,.nav3_act A,.nav3_act A,.nav3_act A:hover,.nav3_act A:visited,.nav4,.nav4 A,.nav4 A:active,.nav4 A:hover,.nav4_act,.nav4_act A,.nav4_act A,.nav4_act A:hover,.nav4_act A:visited {

width: 181px;

}

tga · #4 27.01.08, 13:20

Wie gesagt:

der Webdeveloper für Firefox
kann dir da helfen (Strg + Shift + Y)

oder noch besser der Firebug.

Die beiden Tools zeigen dir genau die CSS-Formatierungen, die für das Element gültig sind, über das sich gerade deine Maus bewegt.

Dann brauchst du nie wieder ellenlage CSS-Dateien durchwühlen...

Viele Grüße,
Tina

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
tt_content erweitern und Input positionieren	maxhb	Extension modifizieren oder neu erstellen	1	25.10.07 11:40
input formular und variablen übergabe	krstn	Extension modifizieren oder neu erstellen	0	28.06.07 15:42
scriptgesteuerter Input	capajechin	TYPO3 4.x Fragen und Probleme	1	07.06.07 10:47
Input Feld mit HTML-Ausgabe	philipp	TemplaVoila	0	04.06.06 02:10
size im <input>-Tag der login-box ändern, WIE?	lastpub	Extension modifizieren oder neu erstellen	2	29.01.06 17:03

Suche

Userpanel

Input Feld Formatierung