Probleme mit Tabellen Rahmen

Beitrag von **alex1234** » 23.02.2009, 21:11

hey ich würde gern nur einen Außenrahmen in den Tabellen haben

https://www.energie-foren.de/studium.html

aber wenn ich ein frame"border" oder was andres einbau dann macht er das net

Gruß

von **Anzeige von ABAKUS** »

Beitrag von **webpilot** » 23.02.2009, 21:35

CSS:

Code: Alles auswählen

table.name &#123;
border&#58; 1px solid #000;
&#125;

HTML:

Code: Alles auswählen

<table class="name" ...>

... = restlicher Code. "name" ersetzen.

Edit:

In deinem konkreten Fall:

Code: Alles auswählen

<h3>Berlin&#58;</h3>
<table style="border&#58;1px solid #B2B2B2;" border="0" cellpadding="1" cellspacing="0" width="100%">
 <colgroup>
...

Beitrag von **alex1234** » 23.02.2009, 22:30

mhm ok aber so richtig gefallen tuts mir net

....was müsst ich machen um waagerechte linien bei den farbübergängen zu haben?

oder sollt ich die Tabelle mir allen Linien lassen

?

Danke für die schnelle Hilfe!!!!

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **Mork vom Ork** » 23.02.2009, 22:41

Bei welchen Farbübergängen? Und welche Farbe sollen die Linien haben? Mal' das doch mal auf oder kopiere den Text hier rein, zum Beispiel so:

Code: Alles auswählen

Berlin&#58;
----- Hier soll eine Line hin. -----
Hochschule 	Studiengang 	Abschluss 	Infos
FHTW Berlin   * Umwelttechnik / Regenerative Energien
----- Oder hier. -----
TU Berlin  	* Energie- und Prozesstechnik, Studienrichtung Energie-, Verfahrens- oder Gebäudetechnik

Oder lade dir Firebug runter und spiel' ein wenig mit den CSS-Werten.

Beitrag von **alex1234** » 23.02.2009, 23:06

also 2 Varianten entweder nur die schwarzen und roten

oder schwarz rot und lila

Danke euch vielmals! Klasse Forum!

Beitrag von **Mork vom Ork** » 24.02.2009, 00:57

Die horizontalen Linien erhältst du folgendermaßen:

Code: Alles auswählen

tr.hochschule+tr.hochschule1 > *, tr.hochschule1+tr.hochschule > * &#123;
    border-top&#58;1px solid red;
&#125;
thead tr > * &#123;
    border-bottom&#58;1px solid red;
&#125;

tr.hochschule+tr.hochschule1 betrifft tr.hochschule1, falls sich direkt davor tr.hochschule befand; nach dem Komma kommt die gleiche Regel nochmals, nur gespiegelt. Diese zwei Regeln zusammen passen also auf jeden Farb- bzw. Uni-Wechsel.
x > * betrifft jedes Element, das ein direktes Kind von x ist, hier: alle td- und th-Elemente eines tr-Elements, jedoch nicht das, was in den td- und th-Zellen drinsteckt.

Die Klasse tr.hochschule1 müsstest du HTML-seitig noch bei allen weißen Zeilen einbauen, momentan hast du ja nur <tr class="hochschule"> für die blauen Zeilen.
Weiterhin muss die Titelzeile in einen <thead>-Block eingelagert werden, der Rest in einen <tbody>-Block. Der <thead>-Block bekommt dann seine rote Linie unten.

Diese Methode habe ich allerdings nur erwähnt, weil da mit dem +-Teil ein schöner, umfangreicher CSS-Selektor drinsteckt. Sie hat jedoch einen äußerst unschönen Nachteil: Du musst haufenweise class="hochschule" bzw. class="hochschule1" einfügen, bei jeder einzelnen Zeile. Diesen Aufstand kannst du dir sparen, der Block <tbody> lässt sich nämlich mehrmals in einer Tabelle verwenden:

Code: Alles auswählen

<table>
<thead><tr><th>Hochschule</th><th> .. </thead>
<tbody><tr><th>FHTW Berlin</th><td> .. </tbody>
<tbody><tr><th rowspan="3">TU Berlin</th><td> .. </tbody>
<tbody><tr><th rowspan="6">TFH Berlin</th><td> .. </tbody>
</table>

Du legst also einfach um jede Hochschule ein <tbody>-Element. Wir könnten jetzt mit der CSS-Regel tbody:nth-child(odd) jedem ungeraden Hochschul-<tbody> die blaue Hintergrundfarbe zuweisen, der Bedarf an class-Attributen wäre dann gleich 0.
Leider kennen derzeit weder der IE noch Firefox :nth-child, insofern muss doch noch jedem zweiten <tbody> eine Klasse zugewiesen werden. Aber immerhin sind das schon mal ein Haufen class="hochschule" weniger als derzeit, beispielsweise im Falle von Berlin nur noch zwei statt sieben - von obigem ersten Vorschlag ganz zu schweigen, da wären es satte zehn.

Code: Alles auswählen

tbody.blau tr > * &#123;
   color&#58;#003366;
   font-weight&#58;bold;
   background-color&#58;#BED0DF;
&#125;
tbody tr > * &#123;
    border-top&#58;1px solid red;
&#125;

Die rote Linie über jeder Hochschule erhältst du bei dieser Konstruktion ganz einfach, indem du jeden <tbody>-Block ansprichst.

Die blau zu hinterlegenden Hochschulen haben hier die Klasse blau, HTML-seitig also <tbody class="blau">. Sie entspricht deiner derzeitigen Klasse tr.hochschule.

Für die vertikalen Linien gehst du folgendermaßen vor:

Code: Alles auswählen

tbody td &#123;
    border-left&#58;1px solid green;
&#125;

Der Uni-Name bildet in deinen Tabellen immer die erste Spalte und braucht deshalb links keine Linie. Das <td>-Element, das den Uni-Namen enthält, änderst du in ein <th>-Element, dadurch wird die erste Spalte einfach und bequem von den Linien ausgenommen.

Ich vermute mal, jetzt sind sämtliche Klarheiten beseitigt ;)

Beitrag von **alex1234** » 01.03.2009, 15:50

Hey, so jetz hab ich Zeit deine Anweisungen umzusetzen

Erstmal vielen Dank für die Antwort und Hilfe!

Ich hab das versucht mit dem tbody und thead Elementen zu machen. Allerdings habe ich ein paar rote Linien zu viel:

https://energie-foren.de/studium.html

Ich hab bestimmt die tbody Elemente falsch gesetzt oder?

Danke

Beitrag von **Mork vom Ork** » 01.03.2009, 22:03

alex1234 hat geschrieben:Ich hab das versucht mit dem tbody und thead Elementen zu machen. Allerdings habe ich ein paar rote Linien zu viel:

https://energie-foren.de/studium.html

Sehe überhaupt keine roten Linien, und das, was ich sonst an Linien sehe, sieht in Ordnung aus.

Beitrag von **alex1234** » 02.03.2009, 08:56

Hey, ich hab das rot in schwarz geändert

...Naja jetz hab ich ja nach jedem Studiengang eine schwarze Linie und ich wollte ja nur nach jeder Uni eine waagerechte Linie....so wie im Bild.

Gruß Rainer

Beitrag von **Mork vom Ork** » 02.03.2009, 23:20

alex1234 hat geschrieben:Naja jetz hab ich ja nach jedem Studiengang eine schwarze Linie und ich wollte ja nur nach jeder Uni eine waagerechte Linie....so wie im Bild.

Sorry, das hatte ich übersehen, mir kam das so ganz schick vor :] Statt tbody tr > * muss es tr:first-child > * lauten („Alle (*) Kinder (>) von tr, falls tr selbst das erste Kind (first-child) ist“, tbody war und ist überflüssig.)

Du solltest den Tabellen vorsichtshalber noch eine eigene Klasse geben und diese in den Vorgaben immer voranstellen, etwa so:

table.uni tbody.blau tr > *
table.uni tr:first-child > *

Momentan sprichst du sämtliche Tabellen einer Seite an. Du hast zwar keine anderen, aber es könnte ja sein, dass da irgendwann noch mal was dazukommt.

Beitrag von **alex1234** » 08.03.2009, 15:42

Hey, dank dir habs umgesetzt wie des gesagt hast.

Allerdings hab ich jetzt auch die erste Linie über Hochschule dick.

Kann ich es machen das praktisch der Tabellen Kopf (Hochschule, Studiengang....) die gleiche Liniendicke hat?

hät an das gedacht:
table.uni thead {
font-weight:bold;
}

aber geht net?

Beitrag von **Mork vom Ork** » 08.03.2009, 17:28

alex1234 hat geschrieben:Allerdings hab ich jetzt auch die erste Linie über Hochschule dick.

Asche auf mein Haupt, statt table.uni tr:first-child > * muss es table.uni tbody tr:first-child > * lauten. Aber besorg' dir doch bitte mal Firefox und die Erweiterung Firebug, damit findest du zumindest die Ursache solcher Fehler auch schnell selbst.

Kann ich es machen das praktisch der Tabellenkopf (Hochschule, Studiengang....) die gleiche Liniendicke hat?

table.uni thead {
font-weight:bold;
}

font-weight ist, wie der Name schon sagt, die Schriftartdicke; für den Rahmen (border) bist du da völlig verkehrt, dessen Dicke wird mit border-width bestimmt.

Meinst du das in Bezug auf die oben angesprochene dicke Linie über der Hochschule? Für den Fall wäre auch border-width falsch, denn das ist nicht eine Linie, sondern zwei dicht beieinander liegende: einmal vom Rahmen um die gesamte Tabelle, dazu der Rahmen oberhalb der Tabellenzellen, den wir mit table.uni tr:first-child > * gesetzt haben.
Wenn du mal die Farbe des Tabellenrahmen änderst (hast du noch beim <table>-Element mit style gesetzt), siehst du, wer da welche Linie erzeugt.