Tabelle Spaltenbreite festlegen?

[ledl]

Wenn ihr euch mal die Unterseite von dieser Seite anseht, da sind die Tabellenspalten unterschiedlich.
Wie bringt man das auf gleiche Breiten für jede Seite?

[djr]

Zum einen empfiehlt es sich, den entsprechenden Tabellen eine eigene Klasse zu geben:

Code Auswählen Erweitern

[tabelle=einsaetze|
<<  |  >>
<  |  >
]ergibt in der HTML:

Code Auswählen Erweitern

<table class="einsaetze" ...Dann kannst Du alle "einsaetze"-Tabellen über die CSS-Datei des Templates unabhängig von den Standardtabellen ansprechen.
Beispiel:

Code Auswählen Erweitern

/* macht die erste Spalte der "einsaetze"-Tabelle 25% breit */
table.einsaetze td.contenttablecell1 {
width: 25%;
}

[ledl]

Zum einen empfiehlt es sich, den entsprechenden Tabellen eine eigene Klasse zu geben:

Code Auswählen Erweitern

[tabelle=einsaetze|
<<  |  >>
<  |  >
]

OK, danke, soweit klar

ergibt in der HTML:

Code Auswählen Erweitern

<table class="einsaetze" ...

wird das selbst in der template.html erzeugt?

Dann kannst Du alle "einsaetze"-Tabellen über die CSS-Datei des Templates unabhängig von den Standardtabellen ansprechen.
Beispiel:

Code Auswählen Erweitern

/* macht die erste Spalte der "einsaetze"-Tabelle 25% breit */
table.einsaetze td.contenttablecell1 {
width: 25%;
}

was muss ich denn noch alles in der css hinzufügen, damit auch die Rahmen und die Kopfzeilenfarbe wie bei den sonstigen Tabellen kommen oder noch besser farblich anders kommen?

[wasp]

Hi!
Orientiere Dich einfach an bereits -vorhandenen- Tabellenlayouts ...
der Rest ist ein ORDENTLICHER Editor, GEDULD etwas Zeit und LESEN.
In meiner Signatur steht nahezu ALLES.  

[djr]

was muss ich denn noch alles in der css hinzufügen, damit auch die Rahmen und die Kopfzeilenfarbe wie bei den sonstigen Tabellen kommen oder noch besser farblich anders kommen?

Würde ich es Dir jetzt verraten, würde ich Dich Deines "Entdecker-Triebes" berauben.
Also ich helfe Dir gerne auf die Sprünge, bzw. ermutige Dich, Dir Grundlagen in HTML und CSS anzueignen, doch ich würde einem ganzen Berufsstand das Fundament weg graben, wenn ich Dir Deine Arbeit mal eben abnehme.

Zumal wenn ich den Quellcode Deiner Seiten richtig interpretiere, dann gestaltest Du den Inhaltsbereich so weit wie möglich über das Eingabefeld im mozilo Backend.
Zum Beispiel zentrierst Du die Texte aller Seiten einzeln mit "[zentriert|]". Dies könntest Du Dir dadurch sparen, indem Du die CSS des Templates entsprechend anpasst.
In der style.css (Zeile 248) findest Du "#content" und darunter die Angebe "text-align: left;". Machst Du daraus ein "text-align: center;" sind alle Texte der Inhaltsseite grundsätzlich zentriert und Du musst nur noch die wenigen Texte, die nicht zentriert sein sollen, mit z.B. [links|] ausrichten.

Dies soll rein zur Ermutigung dienen, Dich mit den Grundlagen von HTML und CSS auseinander zu setzen.
Und sofern Du damit innerhalb des Layout-Ordners und den Benutzerdefinierten-Syntaxelementen bleibst, passiert auch Deinem mozilo nichts.
Die Werkzeuge findest Du wie gesehen, bei "wasp" und Dein Browser sollte auch einige "Entwicklertools" zur Verfügung stellen.
Und nie vergessen, vor dem ändern einer Datei eine "Ursprungskopie" anzulegen. -falls was schief geht.

viel spaß!

ergibt in der HTML:

Code Auswählen Erweitern

<table class="einsaetze" ...

wird das selbst in der template.html erzeugt?

JA! -genauer: in der index.php.
Mozilo verwendet gegenüber seiner Nutzer eine eigene einfache Syntax und setzt diese Angaben, die Du in den Editor eingibst, in HTML um und gibt sie dann als Webseite aus.

[ledl]

habe einige Zeit herumexperimentiert und für den einen Zweck der Tabelle folgenden Schnipsel teilweise mit Firebug ausgelesen und von "table.contenttable" kopiert:

Code Auswählen Erweitern

table.einsatz {
                margin:0px auto;
                border:1px solid #C0C0C0;
                border-collapse:collapse;
                width:100%;
                margin:5px;
}

table.einsatz td.einsatzcell1 {
                width: 25%;
}

th.einsatz {
                vertical-align:top;
                border:1px solid #C0C0C0;
                background-color:#E1E1E1;
                padding:2px 5px;
}

td.einsatz {
                vertical-align:top;
                border:1px solid;
                background-color:#C0C0C0;
                padding:2px 5px;
}

Nun fehlt noch der Abstand links in den Zellen. In den als Kopfzeilen deklarierten Zellen funktionierts ja. Wenn ich alt/neu klicke, dann haben die Zellen auch oben/unten Abstand.

Was bedeutet "margin:0px auto;" und "margin:5px;" für table.contenttable? 0px oben, der Rest nicht festgelegt und 5px alle Seiten? Ist das ein Fehler?

Die Seite ist mit meinem Schnipsel (siehe oben) "verknüpft", die anderen in dieser Rubrik noch mit dem Original (ich gehe mal davon aus, dass dies zutrifft): siehe unten

Code Auswählen Erweitern

table.contenttable {
                margin:0px auto;
                border:1px solid #C0C0C0;
                border-collapse:collapse;
                width:100%;
                margin:5px;
}
th.contenttable {
                vertical-align:top;
                border:1px solid #666666;
                background-color:#E1E1E1;
                padding:2px 5px;
}
td.contenttable1 {
                vertical-align:top;
                border:1px solid;
                background-color:#ffffff;
                padding:2px 5px;
}
td.contenttable2 {
                vertical-align:top;
                border:1px solid;
                background-color:#ffffff;
                padding:2px 5px;
}


[djr]

Das sieht doch schon mal ganz gut aus!

Die Seite ist mit meinem Schnipsel (siehe oben) "verknüpft", die anderen in dieser Rubrik noch mit dem Original (ich gehe mal davon aus, dass dies zutrifft)

Genauer gesagt ist diese Tabelle "verknüpft" und geschieht durch den anderen Klassen-Namen. Mozilo gibt den im Editor erstellten Tabellen automatisch die Klasse "contenttable", wenn diese nicht durch "[tabelle=klassenname|...]" umbenannt wird.
CSS orientiert sich dann an diesem Namen :

Code Auswählen Erweitern

/* spricht grundsätzlich jede Tabelle an*/
table {
}
/* spricht Tabellen innerhalb des Inhaltsbereiches an (sofern im mozilo-Editor erstellt) */
table.contenttable {
}
/* spricht Tabellen an, die den KlassenNamen "einsatz" tragen */
table.einsatz {
}

Was bedeutet "margin:0px auto;" und "margin:5px;"...

Du meinst den unterschied zwischen einer bzw. zwei Angaben?!:
"wasp" hat Dich schon auf css4you.de als Nachschlagewerk hingewiesen: Dort findest Du im Menü unter "Übersichten" die Seite "Eigenschaften von A-Z". Den Rest findest Du alleine.

Das Problem, das "td.einsatz" nicht funktioniert, ist aber ein anderes. Mozilo ergänzt eine 1 2 Nummerierung um "gerade" & "ungerade" Zeilen einzeln "stylen" zu können.
(Beispielhafter Verwendungszweck: andere Hintergrundfarbe, um beim lesen nicht in der Zeile zu verrutschen.)

Code Auswählen Erweitern

/* spricht alle "ungeraden" Zeilen der "einsatz"-Tabelle an */
td.einsatz1 {
}
/* spricht alle "geraden" Zeilen der "einsatz"-Tabelle an */
td.einsatz2 {
}für Dich reicht aber auch:

Code Auswählen Erweitern

/* spricht alle Zeilen der "einsatz"-Tabelle an*/
table.einsatz td {
}erkennst Du den unterschied?

PS: css4you.de bietet auch Workshops. Einfach mal lesen & ausprobieren.