CSS Template für CP Formular

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
User avatar
Uwe367
Posts: 1116
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

CSS Template für CP Formular

Post by Uwe367 »

Hallo zusammen...

Da mir in diesem Forum schon sehr viel und auch sehr kompetent geholfen wurde, möchte ich auch mal ein wenig zurückgeben :wink: .
Ich habe mich in der letzten Zeit sehr viel mit CSS beschäftigt, und so kam es, daß ich ein Template für den CP Formular geschrieben habe, welches ausschließlich aus CSS und DIV Containern besteht.
Ich habe hierbei auf die Auslagerung in eine externe Datei verzichtet, sondern die Formatierungen per Styleanweisungen gleich ins Template geschrieben.

Hier die definerten Eingabefelder:
Image

Und hier der Code fürs Template:

Code: Select all

<div style="margin: 0 auto; width:300px; height:auto;">
<div style="float:left; padding: 10px 0px 5px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">
{LABEL:Vorname}<br />
{Vorname}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Vorname}</div></div>
<div style="float:left; padding: 10px 0px 5px 1px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Nachname}<br />
{Nachname}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Nachname}</div></div>
<div style="clear:left;"></div>
<div style="float:left; padding: 0px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Strasse}<br />
{Strasse}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Strasse}</div></div>
<div style="float:left; padding: 0px 0px 0px 1px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Hausnummer}<br />
{Hausnummer}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Hausnummer}</div></div>
<div style="clear:left;"></div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Plz}<br />
{Plz}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Plz}</div></div>
<div style="float:left; padding: 5px 0px 0px 1px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Wohnort}<br />
{Wohnort}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Wohnort}</div></div>
<div style="clear:left;"></div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Mail}<br />
{Mail}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Mail}</div></div>
<div style="clear:left;"></div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Nachricht}<br />
{Nachricht}</div>
<div style="clear:left;"></div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Captcha}<br />
{Captcha}
</div>
<div style="float:left; padding: 13px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{LABEL:Code}<br />
{Code}<br />
<div style="float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; color: #FF0000;">{ERROR:Code}</div></div>
<div style="clear:left;"></div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{submitIt}</div>
<div style="float:left; padding: 5px 0px 0px 5px; font-family:Arial, Helvetica, sans-serif; font-size:13px;">{resetIt}</div>
<div style="clear:left;"></div></div>
Zu sehen ist das ganze unter:
http://www.photoshop-corner.de/index.php?kontakt

Bitte legt keinen Wert auf die Seite (photoshop-corner.de) da ich diese nur noch zu Testzwecken nutze.
So.. und nun hoffe ich, auch mal einen nützlichen Beitrag geleistet zu haben :wink:

Viele Grüße
Uwe
Last edited by Uwe367 on Sun 1. Feb 2009, 16:50, edited 1 time in total.
User avatar
update
Moderator
Posts: 6444
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CSS Template für CP Formular

Post by update »

Fein! Funktioniert in IE6, IE7, IE8, FF2, FF3, SafariWIN, Opera9.63, Chrome :lol:
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply