Moin moin Community, moin moin yodatortenboxer,
das Modul läuft bei mir sehr gut, was die Funktionalität angeht. Leider habe ich ein Problem mit dem Layout, was ich trotz intensiven Ausprobierens nicht gelöst bekomme. Ich dachte bisher, dass ich mich mit CSS eigentlich halbwegs passabel auskenne, aber dieser Fehler verweist mich eindeutig in meine Schranken.
Das Formular binde ich ganz normal über ein Template in meinen Inhaltsbereich ein, lege einen Artikel an, konfiguriere das Modul entsprechend meiner Anforderungen an das Formular und speichere den ganzen Kram ab. Dann wird das Formular auch eingebunden, allerdings habe ich zwischen dem Beginn des div-Containers
#SpryContactForm und dem ersten Formularfeld einen großen Abstand ohne Inhalt.
Das ganze könnt ihr euch hier anschauen:
http://www.mosaik-is.de/testserver/kontakt/kontakt.html. Der Fehler tritt mit den Browsern FireFox 3, Opera 9 und Konqueror 4 auf. Im (unter Linux Ubuntu simulierten) Internet Explorer 6 ist der Abstand übrigens nicht da.
Wenn ich in der example.css im Eintrag
#SpryContactForm ul li den Wert
clear:both weglasse, dann verschwindet der Abstand, allerdings wird dann die Radiobutton-Gruppe nicht mehr korrekt dargestellt. Genauer gesagt: Die nächste Texteingabefelder werden nicht darunter sondern daneben angezeigt. Lasse ich den Wert
clear:both drin, werden die folgenden Felder richtig positioniert, aber der große Abstand ist wieder da. (Das lässt sich prima über das Firefox-Addon FireBug simulieren. Zwischen der Simulation und der tatsächlichen Veränderung in der Datei habe ich keinen Unterschied feststellen können.)
Wie gesagt: Ich bin inzwischen echt verzweifelt, weil ich dem Problem nicht auf die Spur komme. Ich habe alle vererbten Werte über FireBug analysiert und nichts gefunden, was den Abstand verursachen könnte.
Die example.css befindet sich inzwischen fast wieder im Originalzustand, nachdem ich durch diverse Wertveränderungen keine Lösung gefunden habe:
Code: Alles auswählen
#SpryContactForm {
padding:5px;
margin:10px 0 0;
border:1px solid #e85d10;
}
span.contactFormSubmit input.resetbutton,span.contactFormSubmit input.submitbutton{
background:#ffffff;
color:#000000;
border: 1px solid #e85d10;
}
span.contactFormSubmit input.submitbutton{
margin-left:60px;
}
#SpryContactForm ul {
list-style:none;
margin:0;
padding:0;
}
#SpryContactForm select, #SpryContactForm input[type="text"]{
width:180px;
}
#SpryContactForm textarea{
height:150px;
width:250px;
}
#SpryContactForm ul li{
height:30px;
clear:both;
}
#SpryContactForm ul li.textarea{
height:180px;
}
#SpryContactForm label{
display:block;
float:left;
width:130px;
}
.validMsg, .novalidMsg{
position:relative;
top:2px;
padding: 0px 3px;
width:16px;
height:16px;
display:none;
}
.validMsg{
display:none;
}
.radioValidState .validMsg,
.checkboxValidState .validMsg,
.textfieldValidState .validMsg,
.textareaValidState .validMsg,
.selectValidState .validMsg{
display:inline;
}
.checkboxMaxSelectionsState .novalidMsg,
.checkboxMinSelectionsState .novalidMsg,
.radioRequiredState .novalidMsg,
.checkboxRequiredState .novalidMsg,
.textfieldRequiredState .novalidMsg,
.textareaRequiredState .novalidMsg,
.textfieldInvalidFormatState .novalidMsg ,
.textfieldMinCharsState .novalidMsg,
.textfieldMaxCharsState .novalidMsg ,
.textareaMinCharsState .novalidMsg ,
.textareaMaxCharsState .novalidMsg,
.selectRequiredState .novalidMsg{
display:inline;
}
span.textareaRequiredMsg,span.textareaMinCharsMsg,span.textareaMaxCharsMsg{
position:relative;
left:131px;
}
#Counterror_mess{
padding:0px 5px;
}
#SpryContactForm ul li.grpradio{
height:auto;
}
#SpryContactForm ul li span span.grpradio{
display:block;
width:70px;
height:25px;
float:left;
}
#SpryContactForm ul li.grpcheckbox{
height:auto;
}
#SpryContactForm ul li span span.grpcheckbox{
display:block;
width:100px;
height:25px;
float:left;
}
#SpryContactForm ul li.text , #SpryContactForm ul li.headline{
height:auto;
padding-bottom:10px;
width:500px;
}
br.clear{
clear:both;
}
Meine format.php, in der sämtliche css-Formate für das contenido Frontend hinterlegt sind, schaut so aus:
Code: Alles auswählen
/***********************************************
* Cascading Style Sheet Definitions
*
* Contenido 4.8.8
* Mandant Höhne Wärmesysteme
*
* Author : Lennart Brand
* Copyright : mosaik | individual service
* Mail : info@mosaik-is.de
* Created : 06-11-2008
*
************************************************/
* {
font-family:Arial, Tahoma, Verdana, sans-serif;
color:#000000;
margin:0;
padding:0;
}
html, body {
height:95%;
}
html {
font-size:<?php print($fontsize); ?>%;
}
/*****************************************************************************/
/********************************* STRUCTURE *********************************/
/*****************************************************************************/
/********************************* CONTAINER *********************************/
#outerwrap { /* centers whole content in browser */
margin:0 auto;
width:930px;
}
#innerwrap { /* creates frame around content */
width:928px;
border:1px solid #e85d10;
background-image:url('../images/navigation.png');
background-position:left bottom;
background-repeat:no-repeat;
position:relative;
top:10px;
}
#title {
width:928px;
height:135px;
background-image:url('../images/title.png');
background-position:left top;
background-repeat:no-repeat;
}
.maintitle {
float:left;
color:#df001a;
font-size:18pt;
letter-spacing:3.7pt;
line-height:18pt;
font-weight:bold;
position:absolute;
left:310px;
top:30px;
}
.subtitle {
float:left;
color:#00519e;
font-style:italic;
font-weight:normal;
font-size:12pt;
font-weight:bold;
letter-spacing:0.1pt;
position:absolute;
left:310px;
top:80px;
}
#breadcrumbs {
float:left;
font-size:9pt;
position:absolute;
top:115px;
left:75px;
}
#navigation {
float:left;
width:195px;
padding:10px 10px 180px;
}
#search {
width:195px;
margin-top:10px;
}
#content {
margin-left:215px;
width:670px;
padding:10px 15px 20px;
border-left:1px solid #e85d10;
}
#footer {
clear: both;
text-align:center;
padding-top:4px;
font-size:9pt;
width:928px;
height:20px;
border-top:1px solid #e85d10;
border-bottom:1px solid #e85d10;
background-image:url('../images/footer.png');
background-position:right center;
background-repeat:no-repeat;
background-color:#ffffff;
}
#addnavi { /* adds barrierfree and print navigation below title */
float:right;
position:absolute;
top:115px;
right:0px;
}
#bfnavi, #pdf {
float:left;
font-size:9pt;
margin:0 15px 0 0;
}
#copyright {
width:928px;
text-align:center;
}
#copyright strong {
color:#bbbbbb;
font-size:7pt;
font-weight:normal;
}
/********************************* MAIN NAVIGATION *********************************/
#navigation ul, #footer ul, #breadcrumbs ul {
list-style-type:none;
color:#e85d10;
}
#navigation li {
font-size:11pt;
border-top:1px solid #e85d10;
}
ul.mainNavigation {
border-bottom:1px solid #e85d10;
}
#navigation h3 {
color:#fdc400;
letter-spacing:2.5pt;
font-size:11pt;
height:22px;
margin:5px 0 0;
padding:0 0 0 5px;
}
#navigation a {
font-size:10pt;
display:block;
padding-top:8px;
height:22px;
text-decoration:none;
color:#e85d10;
font-weight:bold;
}
a.mainNavigation:hover {
background-color:#FFDDAA;
color:#ff0000;
}
a.subNavigation:hover {
background-color:#FCE9CC;
color:#ff0000;
}
a.subSubNavigation:hover {
background-color:#FDECDD;
color:#ff0000;
}
a.mainNavigation {
width:190px;
padding-left:5px;
}
a.subNavigation {
padding-left:15px;
width:180px;
background-image:url('../images/sitemaplist.png');
background-repeat:no-repeat;
background-position:4px 12px;
}
a.subSubNavigation {
padding-left:25px;
width:170px;
background-image:url('../images/sitemaplist.png');
background-repeat:no-repeat;
background-position:14px 12px;
}
/********************************* SEARCH INPUT *********************************/
#searchterm {
font-size:100%;
font-style:italic;
width:170px;
border:1px solid #e85d10;
color:#e85d10;
}
#search_send {
width:16px;
height:16px;
}
/********************************* SEARCH OUTPUT *********************************/
ul.searchResultItem {
list-style-type:none;
margin-bottom:20px;
}
li.searchResultHeader {
font-weight:bold;
}
li.searchResultLink {
font-size:80%;
}
li.searchResultEntry {
margin:5px 0 5px 15pt;
}
p.result {
text-align:center;
margin-bottom:10px;
}
.searchResultItem strong {
font-style:italic;
font-weight:bold;
color:#e85d10;
}
.result strong {
font-weight:bold;
}
/********************************* FOOTER NAVIGATION *********************************/
#footer li {
display:inline;
color:#e85d10;
padding:0;
margin:0;
}
#footer a {
padding:0 3px;
text-decoration:none;
color:#e85d10;
}
#footer a:hover {
color:#ff0000;
text-decoration:underline;
}
/********************************* BREADCRUMBS *********************************/
#breadcrumbs h3 {
font-size:9pt;
display:inline;
color:#fdc400;
}
#breadcrumbs ul {
display:inline;
}
#breadcrumbs li {
display:inline;
padding:0;
margin:0;
}
#breadcrumbs a, #breadcrumbs a:active, #breadcrumbs a:visited {
font-size:9pt;
padding:0 3px;
text-decoration:none;
color:#e85d10;
}
#breadcrumbs a:hover {
color:#ff0000;
text-decoration:underline;
}
/********************************* BARRIERFREE & PRINT *********************************/
#bfnavi h3, #pdf h3 {
font-size:9pt;
display:inline;
color:#e85d10;
}
#bfnavi ul, #pdf ul {
display:inline;
}
#bfnavi li, #pdf li {
display:inline;
padding:0;
margin:0 5px;
}
#bfnavi img, #pdf img {
border:none;
vertical-align:bottom;
height:16px;
width:16px;
}
/********************************* SITEMAP *********************************/
#sitemap, #sitemap ul {
list-style-type:none;
list-style-image:url('../images/none.png');
margin-bottom:1.0em;
color:#e85d10;
}
#sitemap li {
margin:2px 0;
}
#sitemap a{
font-size:100%;
display:block;
padding-top:0.4em;
height:1.5em;
text-decoration:none;
color:#e85d10;
}
#sitemap a:hover {
color:#ff0000;
text-decoration:underline;
}
.level1 a {
padding-left:50px;
width:545px;
background-color:#FFDDAA;
}
.level2 a {
margin-left:20px;
padding-left:90px;
width:465px;
background-image:url('../images/sitemaplist.png');
background-repeat:no-repeat;
background-position:55px 12px;
background-color:#FCE9CC;
}
.level3 a {
margin-left:40px;
padding-left:130px;
width:385px;
background-image:url('../images/sitemaplist.png');
background-repeat:no-repeat;
background-position:75px 12px;
background-color:#FDECDD;
}
/********************************* CONTENT STYLE *********************************/
/**************** HEADLINES, PARAGRAPHS & LINKS ****************/
h1 {
color:#e85d10;
letter-spacing:0.1em;
font-size:120%;
margin:0 0 1.0em;
padding:0;
}
h2 {
color:#e85d10;
font-size:100%;
font-weight:bold;
margin:0 0 0.75em;
padding:0;
}
h3 {
color:#e85d10;
font-size:100%;
font-weight:normal;
margin:0 0 0.75em;
padding:0;
}
p, strong, address {
line-height:1.3em;
font-weight:normal;
text-align:justify;
margin:0;
padding:0;
}
a {
color:#e85d10;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
a.externerlink:before {
content:url(../images/linkextern.png)" ";
}
/**************** TABLES ****************/
table {
border:1px solid #e85d10;
border-collapse:collapse;
border-spacing:0;
}
td, th {
padding:5px;
border:1px solid #e85d10;
}
/**************** LISTS (OL & UL) ****************/
.textItem ul {
list-style-position:outside;
list-style-type:none;
padding:0;
margin:0;
}
.textItem ul li {
background-image:url('../images/contentlist1.png');
background-position:left 0.7em;
background-repeat:no-repeat;
padding-left:20px;
margin:0;
}
.textItem ul ul li {
background-image:url('../images/contentlist2.png');
}
.textItem ul ul ul li {
background-image:url('../images/contentlist3.png');
}
.textItem li {
line-height:1.75em;
text-align:justify;
}
.textItem ol {
list-style-position:inside;
margin:0;
padding:0;
}
.textItem ol ol, .textItem ol ol ol {
margin-left:1.2em;
}
/**************** CONTACT FORM ****************/
/* see files: xtcDynForm/css/....css */
/**************** SPECIAL FORMATS ****************/
.bildlinks {
float:left;
margin-right:1.0em;
}
.bildrechts {
float:right;
margin-left:1.0em;
}
.fetteschrift {
font-weight:bold;
}
blockquote {
padding:5px 10px 5px 35px;
margin:0 0 1.0em;
border:1px dashed #e85d10;
background-image:url('../images/quotes.png');
background-position:left top;
background-repeat:no-repeat;
}
cite, acronym, abbr {
border-bottom:1px dashed #e85d10;
cursor:help;
}
cite {
font-size:0.8em;
font-style:italic;
}
hr {
margin:0 auto;
color:#e85d10;
}
pre {
padding-left:30px;
font-family:'Courier New', Courier, serif;
}
(Die PHP-Bereiche kommen daher, dass ich auf der Webseite ein Modul eingebunden habe, mit dem der Benutzer die Schriftgröße verändern kann.)
Ich würd mich wirklich sehr freuen, wenn jemand mich mit der Nase auf des Übels Wurzel stoßen könnte
Beste Grüße
Thanatos
Sie sind lustig. Sie gefallen mir. Und jetzt RAUS! (Horst Evers)