XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Suche Hilfe bei Umbau auf CSS (http://xhtmlforum.de/showthread.php?t=69491)

matt007 03.06.2013 19:55

Suche Hilfe bei Umbau auf CSS
 
Ich habe eine größere Homepage. Bisher waren die langen Tabellen hart formatiert. Die font "size=2" Tags habe ich nun entfernt und auch die vielen width-Befehle die in jedem td waren. Es reicht ja ein einziger width-Befehl für jede Spalte.

Es gibt ein übergeordnetes CSS-file, dessen Inhalte auch vom Server
beachtet werden.

Nur leider zeigt der alte Dreamweaver 4 in den Tabellen die Schrift zu
groß an. Das Editieren fällt so schwer, daher suche ich Abhilfe.

Über den Tabellen steht heute noch:

<table style="border-collapse:collapse" border="1" bordercolor="#c0c0c0"
width="600">

Die Idee ist nun statt dieser dezentralen Festlegung bei table eine
Klasse zu vergeben und diese über CSS zu definieren in der Art:

<table class="liste">

wobei im CSS dann etwas steht in der Art:

.liste table {
style="border-collapse:collapse"
border="1"
bordercolor="#c0c0c0"
width="600"
}

Leider kommt es dabei zu Problemen, die ich nicht so einfach lösen kann.
Vielleicht hat jemand eine Idee woran das liegen kann.

Problem 1:
Dreamweaver interpretiert nicht mehr in seiner Layout-Ansicht wie die
Tabelle nun aussieht, was das Arbeiten sehr erschwert.

Problem 2:
Der Rahmen um die Tabelle verschwindet bei der CSS-Variante leider und ich weiß nicht warum das so ist.

Offensichtlich macht dieses CSS nicht genau dasselbe wie dieselben
Anweisungen im table Tag. Vielleicht weiß jemand weiter?

Manfred62 03.06.2013 20:07

hmm, die Basics lernen kann nicht schaden.
Code:

.liste { /* oder table .liste */
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 600px;
}

Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

matt007 03.06.2013 20:54

Vielen Dank für das hilfreiche Beispiel !

Ich habe nun Folgendes versucht:

In der Tabelle im Code steht nun:
<table class="symptome">

Im CSS steht nun:
table .symptome
{
border-collapse:collapse;
border: 1px solid #c0c0c0;
width: 600px;
}

Der table wird auch korrekt angezeigt - nur leider ohne den Rahmen !
Woran kann das liegen?

Das CSS-file ist als "UTF-8 ohne BOM" eingestellt.
Umschaltung auf "ANSI" bewirkt keinen Unterschied.
Das CSS-file habe ich als SSI eingebunden weil der übliche Weg nicht zu funktionieren schien.

explanator 03.06.2013 21:44

table .symptome

table.symptome

Dreamweaver4 stammt aus dem Jahre 2000 und ist total veraltet.
Benutze einen anständigen Editor, wie PSPad oder Notepad++ und schau dir die Ergebnisse im Firefox an.
Zum Sicherstellen, dass dein Code keine Fehler hat, kannst du das Html durch den The W3C Markup Validation Service schicken.
Für CSS verwende ⇒The W3C CSS Validation Service
Die Fehlerkonsole in Firefox ist auch eine gute Quelle um Fehler angezeigt zu bekommen.

Manfred62 03.06.2013 21:48

stell dein Beispiel mal online (z.b. Freehoster).
einfaches Beispiel:
HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="UTF-8">
        <title>Tabelle</title>
        <style type="text/css">
        body {
                font: 100%/1.5 sans-serif;
        }
        table {
                border-collapse: collapse;
                border: 3px solid #ccc;
        }
        td {
                padding: 10px;
            /*border: 1px solid #000;*/
        }
        </style>
</head>
<body>
        <table>
                <tr>
                        <td>Irgendein Inhalt<br>Irgendein Inhalt</td>
                        <td>Irgendein Inhalt<br>Irgendein Inhalt</td>
                </tr>
                <tr>
                        <td>Irgendein Inhalt<br>Irgendein Inhalt</td>
                        <td>Irgendein Inhalt<br>Irgendein Inhalt</td>
                </tr>
        </table>
</body>
</html>


matt007 03.06.2013 22:01

Vielen Dank ! Mit table.symptome geht es.

Nur leider ist im Gegensatz zur Definition in der Ursprungszeile <table border=1 ....> nun mit dem CSS nur noch der äußere Rahmen der Tabelle da. Die Rahmenlinien um die einzelnen Elemente fehlen.

Muss ich nun für jede td noch eine eigene Klasse vergeben um diese fehlenden Rahmenlinien noch zu bekommen? Da käme der Speck auf die Würscht.

Gibt es eine einfache Möglichkeit in CSS die Breite der Spalten direkt im table anzugeben?

Als Editor habe ich auch Notepad+. Allerdings schätze ich am Dreamweaver bis heute sehr:
+ dass man den Code und das Design gleichzeitig in 2 Fenstern sehen und
auch bearbeiten kann.
+ daß man über das ganze Projekt hinweg suchen und leicht ändern kann.
+ daß man Tabellen einfach in der Layoutansicht editieren kann mit cut &
paste.

Ich nehme den alten Dreamweaver seit Jahren und war bisher stets
zufrieden weil er meiner Arbeitsweise sehr entgegenkam. Flott konnte ich
damit Inhalte einpflegen.

matt007 03.06.2013 22:12

Hallo Manfred,

ich habe das hochgeladen auf Alternative Medizin: Albert Abrams.

Leider ist im Vergleich zur bisherigen Fassung Alternative Medizin: Albert Abrams das Layout nun ziemlich zerrissen. Keine Ahnung wie viel Aufwand nötig ist das zu flicken. Die Lösung ohne CSS hatte auch ihre Vorteile. Alles war da direkt in der obersten Tabellenzeile angegeben. Nur noch 2 Breiten-Befehle in die td - und das war es dann.

Vielleicht gibt es ja auch mit CSS einen platzsparenden Weg.

explanator 03.06.2013 22:52

Zitat:

Zitat von matt007 (Beitrag 530088)
Muss ich nun für jede td noch eine eigene Klasse vergeben um diese fehlenden Rahmenlinien noch zu bekommen? Da käme der Speck auf die Würscht.

Nein.

Beispiel: Rahmen um Tabelle und Zeilen
HTML-Code:

table.symptome, table.symptome tr {
    border: 1px solid #c0c0c0;
}

Rahmen nur um Tabellenzellen ohne Überschriften
HTML-Code:

table.symptome td {
    border: 1px solid #c0c0c0;
}

Rahmen um Tabellenüberschrift und Tabelle
HTML-Code:

table.symptome th, table.symptome {
    border: 1px solid #c0c0c0;
}

Rahmen um Tabelle, Tabellenüberschrift, -Zeilen und Zellen
HTML-Code:

table.symptome, table.symptome th, table.symptome tr, table.symptome td, {
    border: 1px solid #c0c0c0;
}


Zitat:

Gibt es eine einfache Möglichkeit in CSS die Breite der Spalten direkt im table anzugeben?
ja, so wie oben mit den Rahmenbeispielen.
Für Ausnahmen nimmt man eine Klasse.
Beispiel: alle Zellen 40 Pixel Breit und letzte Spalte 60 Pixel.
HTML-Code:

/* CSS */
table.symptome td {
    width: 40px;
}
table.symptome td.extrabreit {
    width: 60px;
}

HTML-Code:

<table class="symptome">
            <th>Uebers.1</th><th>Uebers.2</th><th>Uebers.3</th>
            <tr><td>Zelle1</td><td>Zelle2</td><td class="extrabreit">Zelle3</td></tr>
            <tr><td>Zelle4</td><td>Zelle5</td><td>Zelle6</td></tr>
</table>



Zitat:

Ich nehme den alten Dreamweaver seit Jahren und war bisher stets
zufrieden weil er meiner Arbeitsweise sehr entgegenkam. Flott konnte ich
damit Inhalte einpflegen.
Schau dir mal den Kompozer an, als Alternative sozusagen.

matt007 03.06.2013 23:52

Vielen Dank für die prima Beispiele. Das probiere ich aus !


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020