Hallo zusammen!
Für eine Freundin versuche ich gerade ihre Website in TYPO3 umzubauen, damit sie bestimmte Bereiche selbst editieren kann.
Da sie ein Restaurant betreibt ist die Speisekarte zentraler Bestandteil. Die lässt sich wohl als Tabelle am Besten darstellen.
Folgendes habe ich getestet.
Inhaltselement Tabelle (Speisen) und Tabelle im RTE (Getränke). Beides ist im Moment problematisch.
Die Darstellung im IE und im FF ist komplett unterschiedlich, und ich habe keine Ahnung, wo die entsprechenden Parameter übergeben werden.
Hier der Link http://p103129.typo3server.info/6.html
Was meint ihr welche Variante besser / praktikabler ist, bzw. wo die Parameter die verantwortlich für den unterschiedlichen Look verantwortlich sind angegeben werden müssen?
Das Ganze basiert nicht auf tt_content sondern auf css_styled_content.
Ich habe mir schon diese Datei angesehen, bin aber nicht schlauer geworden. http://p103129.typo3server.info/typo3/sysext/css_styled_content/static/setup.txt
Und hier die css-Datei
http://p103129.typo3server.info/fileadmin/style.css
Also ich stehe im Moment wie der Ochs vorm Berg, will mir das morgen und übermorgen noch genauer ansehen von daher, freue ich mich auf Input.
Beste Grüße und ein klasse Wochenende 😃
jens
Hallo Jens,
Tabelle innerhalb RTE zu pflegen finde ich auch sehr mühsam ...
Bei so einer rinfachen Tabelle könnte man einfach den html Source ändern. Auf den ganzen CSS-Kram würde ich persönlich verzichten und einfach auf ein cellpadding setzen. Hier mein Vorschlag:
<table border="0" id="speisekarte" cellspacing="0" cellpadding="5" border="0">
<tr>
<td width="200">Kleines Wasser</td>
<td width="100">0,2 l</td>
<td width="100">2,00 EUR</td>
</tr>
<tr>
<td width="200">Großes Wasser</td>
<td width="100">0,75 l</td>
<td width="100">5,00 EUR</td>
</tr>
<tr>
<td width="200">Kleines Wasser</td>
<td width="100">0,2 l</td>
<td width="100">2,00 EUR</td>
</tr>
</table>
Den Code kann man mittels des Symbols <p> im RTE-Editor abändern.
Du kannst die Tabelle doch ganz einfach per CSS-Stylen so wie es möchtest und hast doch zusätzlich auch noch die Möglichkeit eigene Classen anzugeben. Wo ist das Problem?
gestyled ist doch die Tabelle an sich schon, nur jeder Browser macht daraus was er will (als Bsp. style="padding: 0cm 5.4pt; width: 81pt;"). Und CSS aus dem css_styled_content zu ändern ist IMHO ziemlich fummelig ...
Wenn du meinst...
Wenn du du die 5 Zeilen fummelig nennst, mit denen man eine ganz ansehnliche Tabelle bekommt, dann weiß ichs auch nich...
table.contenttable { width:100%; background-color:#fff; border:1px solid #aaa; border-collapse:collapse; }
table.contenttable tr.tr-even { padding:5px; background-color:#E2E1E1; }
table.contenttable td { padding:5px; border:1px solid #aaa; border-collapse:collapse; }
table.contenttable th { text-align:left; font-weight:bold; background-color:#fff; padding:5px; border:1px solid #aaa; font-size:11px; color:#545353; }
table.contenttable caption { text-align:left; font-weight:bold; color:#bf2236; background:#fff url(../../fileadmin/index/pic/verlauf_weiss.gif) repeat-x bottom; padding:10px 0 10px 5px; border:1px solid #aaa; margin:20px 0 0 -1px; }
mit fummelig meinte ich eigentlich, wie man von der ganzen inline CSS los wird, wenn die ohnehin durch Anlegen outline CSS überflüssig werden.
Hallo & Danke für eure Hinweise!
Ich bin beiden Lösungsansätzen nachgegangen, und war ziemlich zuversichtlich das Problem in den Griff zu bekommen. Dies ist leider nicht so.
Mir ist schleierhaft warum da trotz diesem Code im RTE (<>)
<table border="0" id="speisekarte" cellspacing="0" cellpadding="0" border="0">
und diesem Code in der CSS Datei:
table.contenttable { width:100%;
background-color:#c05519;
border:1px solid #fff;
border-collapse:collapse; }
table.contenttable tr.tr-even { padding:0px;
background-color:#E2E1E1; }
table.contenttable td { padding:0px;
border:1px solid #aaa;
border-collapse:collapse; }
table.contenttable th { text-align:left;
font-weight:bold;
background-color:#fff;
padding:0px;
border:1px solid #aaa;
font-size:11px; color:#545353; }
table.contenttable caption { text-align:left;
font-weight:bold;
color:#bf2236;
background:#fff url(../../fileadmin/index/pic/verlauf_weiss.gif) repeat-x bottom;
padding:2px 0 2px 5px;
border:1px solid #aaa;
margin:0px 0 0 -1px; }
Scheinbar ein padding von 10px übergeben werden (im IE allerdings nicht).
Hier noch mal der http://p103129.typo3server.info/index.php?id=15
Ich weiß gerade überhaupt nicht mehr wo ich da noch ansetzen kann.
Könnt Ihr Euch das erklären?
BEST
jens
Ist das dein Ernst?
Du schreibst im RTE eine id speisekarte und in dein CSS schreibst du die Class contenttable... was soll denn da auch passieren?
Entweder du tauscht die ID gegen die Class contenttable aus, also class="contenttable" oder du tauscht im CSS die class contenttable überall gegen speisekarte aus.
Was ich beschrieben habe bezieht sich einfach auf das Inhaltsobjekt Tabelle. Wofür benötigst du da noch den RTE?
Verstehe nicht warum du in deinem RTE anfängst HTML-Code zu schreiben.
Nimm doch einfach das Inhaltselement tabelle. Setz es an die entsprechende Stelle und dann is gut.
Danke nochmal für deine Nachricht.
Es läuft jetzt so, wie du es beschrieben hattest!
Merci!
😃
Hallo zusammen!
Mir ist das, wie ich feststellen muss, doch noch nicht ganz klar, und brauche Hilfe :o
Wie kann ich per css den einzelnen Spalten der Tabelle eine bestimmte Breite zuweisen?
Hier noch mal der css Code:
table.contenttable { width:100%;
background-color:#c05519;
border:0px solid #fff;
border-collapse:collapse; }
table.contenttable tr.tr-even { padding:0px; background-color:#c05519; }
table.contenttable td { width:75%; padding:0px;
border:0px solid #fff;
border-collapse:collapse; }
table.contenttable th { text-align:left;
font-weight:bold;
background-color:#c05519;
padding:0px;
border:0px solid #fff;
font-size:11px; color:white; }
table.contenttable caption { text-align:left;
font-weight:bold;
color:#bf2236;
background:#fff url(../../fileadmin/index/pic/verlauf_weiss.gif) repeat-x bottom;
padding:2px 0 2px 5px;
border:0px solid #aaa;
margin:0px 0 0 -1px; }
Mein Problem ist, dass ich auf der Seite Speisen http://p103129.typo3server.info/7.html ein anderes Format benötige als auf der Seite Getränke http://p103129.typo3server.info/6.html
Muss man hier ggf. mit zwei css-Dokumenten arbeiten?
---------------
(andere Baustelle)
Des Weiteren Frage ich mich warum sich der IE beim Inhaltselement einen größeren Abstand noch oben gönnt als im css-Dokument angegeben.
Screenshot FF http://p103129.typo3server.info/fileadmin/ff.gif
Screenshot IE http://p103129.typo3server.info/fileadmin/IE.gif
und hier der CSS-Code:
#links3 { float: left;
clear: left;
margin-right: 3px;
margin-bottom: 3px;
background: #efba48;
height: 210px;
width: 210px;
}
.txt-l {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
color: #813000;
}
.txt-l a{
outline: none;
text-decoration: underline;
color: #813000;
}
.txt-l a:hover{
text-decoration: underline overline;
color: #813000;
}
.txt-l a:focus {
border-bottom: 1px solid #f69240;
}
.txt-l a:active{
color: white;
background-color: #813000;
}
.txt-l ul {
margin-left: 30px;
}
Ich habe keine Ahnung wo die offenbar 10 zusätzlichen px herkommen, und keinen Plan wo ich da noch nachschauen könnte.
Könnt ihr mir auf die Sprünge helfen?
Der Vollständigkeit halber hier der Link zur Seite http://p103129.typo3server.info
Nur das BESTE
jens
Du kannst im Tabellenmodul eine andere Class angeben wenn du das benötigst... Standard ist ja contenttable, wenn du nichts angibst.
Setz in das Feld deine gewünschte Class und formatiere dann statt mit contenttable mit eingesetzten Class. So kannst du viele verschiedene Tabellen Styles anlegen.
Wie man die breite für eine bestimmte Spalte ändert... mh... Da könntest du wahrscheinlich mit optionSplit arbeiten und die geänderte Variante mit einer Condition nur auf einer Seite zulassen. mal so ins blaue orakelt. Ansonsten werden Splaten glaube immer nach Menge des Inhalts oder gleichmäßig verteilt, da es ja keine Angaben dazu gibt.
Zum zweiten.
Browserunterschiede gibt es nunmal... Wenn du die Lösung nicht findest, dann arbeite beim IE mit einem Conditional Comment.
danke für deine Nachricht!
zum Browserproblem:
Nach etlichen zeitaufwendigen Tests konnte ich das Problem leider immer noch nicht lösen, aber immerhin doch eingrenzen...
Ich habe jetzt für beide Inhaltsbereiche Text (unten links, rechts)
padding-top: 0px;
eingegeben.
Dies interpretiert der IE nun richtig. Der FF hat allerdings einen padding-top drin.
http://p103129.typo3server.info
Jetzt habe ich in meiner Verzweiflung testweise css_styled_content gegen tt_content ausgetauscht (was ich final aber nicht will) und das padding-top verschwand auch im FF.
Meine Schlussfolgerung:
Über css_styled_content werden Parameter für das Inhaltselement Text übermittelt (padding top)Jetzt frage ich mich wo, und wie ich das ändern kann.
Beim Inhaltselement Bild (mitte) scheint dies ja offensichtlich nicht der Fall zu sein.
Hätte nicht gedacht, dass ich da so lange dran rum doktoren muss :-(
Könnt ihr mir bitte noch einen Tipp geben, komme im mom nicht weiter, aber das kann doch nicht so kompliziert sein, oder?
Auf jeden Fall ein schönes Wochenende
jens
Es sind alle wraps in dem static File von css_styled_content zu finden.
Ansonsten und falls es aus dem CSS kommt, dann kannst du die Class ganz einfach in deinem eigenen CSS überschreiben.
danke für den Tipp, ich habe mir die statics unter /typo3_src-4.2.1/typo3/sysext/css_styled_content/static/ angesehen, konnte den wrap allerdings nicht ausfindig machen/überschreiben, und bin mit dem trial and error Vorgehen, leider nicht weiter gekommen.
Da der Abstand über dem Inhaltselement Text bei der Ansicht des Templates (html Datei außerhalb von TYPO3) nicht drin ist, glaube ich immernoch, dass die Parameter irgendwo in der TYPO3 Umgebung übergeben werden.
Bedauerlicherweise bekomme ich das Problem mit meinem derzeitigen Kenntnisstand nicht gelöst 🙁
Hier noch einmal der Link http://p103129.typo3server.info/8.html, falls jemand die Muße hat dort mitzudenken...
BEST
nach viel hin und her, habe ich das Ganze jetzt doch per conditional comments gelöst.
zur Info hier der Code für das Setup Feld:
###Einbinden der css Dateien
page.headerData.5 = TEXT
page.headerData.5.value (
<style type="text/css" media="screen, projection">
/*<![CDATA[*/
@import "fileadmin/style.css";
/*]]>*/
</style>
<!--[if lte IE 7]>
<style type="text/css" media="screen, projection">
@import "fileadmin/style-ie.css";
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css" media="screen, projection">
@import "fileadmin/style-ie.css";
</style>
<![endif]-->
)
BEST
jens