Tabelle mit geringen Spaltenabstand

cls · 4 August 2008

Hallo,
ich will eine Tabelle mit zwei Spalten erstellen. Die linke Spalte soll eine Breite von 30% und rechte Spalte eine Breite von 70% haben. Zum Gestalten des Tabellen kopfes nutze ich div-Container.

div#menueKopfLinks {
width: 30%;
height: auto;
background-color: #22FFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
font-family: Arial;
font-size: 12pt;
font-weight: bold;
text-align: center;
}

div#menueKopfRechts {
width: 70%;
height: auto;
background-color: #55FFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
font-family: Arial;
font-size: 12pt;
font-weight: bold;
text-align: center;
}

table {
width: 100%;
margin: 1px 1px 1px 1px;
padding: 2px;
border: 1px solid black;
font-family: Arial;
font-size: 10pt;
color: #000000;
}

Die Tabelle wird wie folgt definiert:
<table>
<tr>
<td>
<div id="menueKopfLinks">
Menü
</div>
</td>
<td>
<div id="menueKopfRechts">
Inhalt
</div>
</td>
</tr>
</table>

Mein Problem ist, dass zwischen beiden Spalten ein großer Abstand existiert. Wenn ich in div menueKopfLinks und menueKopfRechts
width: 30%; bzw. width: 100%; deaktiviere, dann haben beide Spalten
wie gewünscht fast keinen Abstand; aber gleich groß, was nicht gewollt ist.
Was muss ich ändern?

Hartmut

en

prm · 5 August 2008

Hallo,

du hast ja schon mal richtig angefangen, indem du sogenannte "Div's" definiert hast. Das ist durchaus fortschrittlich und richtig.
Allerdings solltest du dann auch konsequent auf alles verzichten, was mit Tabellen zu tun hat. Ausnahme: Du benötigst wirklich eine Tabelle, um einen Inhalt strukturiert darzustellen (z.B. eine Darstellung von Name, Straße, Ort).

Fangen wir mal ganz vorne an:
Schreibe diesen (oder ersatzweise auch den strict) Doctype in die allererste Zeile:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">

Der gibt an, "mit welcher Sprache" die HP gecodet ist und sorgt dafür, dass der Internet Explorer das CSS-boxmodell richtig darstellt.

Bei den Styleangaben schreibst du alles, was auf der ganzen Seite einheitlich ist in den body. Dann brauchst du es später bei den einzelnen Elementen nicht mehr gesondert anzugeben.
Das wäre bei dir momentan die Schriftart.
Für einen allumfassenden Container mit der Umrandung kannst du einen Div #all verwenden. Ich habe ihm eine feste Breite von 900px gegeben und zentriert.
Du kannst auch eine prozentuale Breite nehmen. Allerdings musst du dann darauf achten, dass Rahmen, Padding und Margin die Gesamtbreite immer zusätzlich erhöhen.

Bei den beiden anderen Elementen habe ich alles Unnötige entfernt.
Damit eine Box links und die andere rechts angeordnet ist, wurde ihnen die Eigenschaft "float" zugewiesen. Die Summe ihrer Breiten ist geringer als 100%. Damit erreicht man einen Abstand zwischen beiden Boxen und hat noch etwas Luft für den Innenabstand.
Als Schriftgrößeneinheit habe ich "em" verwendet. Das ist eine relative Schriftgröße. Der Benutzer kann sie im IE 6 selbst vergrößern oder verkleinern, was bei pt nicht der Fall ist.

Zum Schluss muss man noch "clearen". Das ist etweas kompliziert zu verstehen. Wnn du aber vorher Boxen gefloatet hast, dann "hängen" sie frei im Raum rum. Das clear sorgt dafür, dass sich dann darunter wieder weitere Boxen ganz normal anordnen können (z.B. Footer) und dass der #all sich mit dem Inhalt der gefloateten Boxen ebenfalls verlängert.

Daraus ergibt sich folgender CSS-Code:

Code:

body {
font-family: Arial;
font-size: 100%;
}
#all {
border: 1px solid black;
width: 900px;
margin: 0 auto;
}
div#menueKopfLinks {
width: 30%; 
background-color: #22FFFF;
font-size: 0.9em;
font-weight: bold;
padding: 5px;
text-align: center; 
float: left;
}
div#menueKopfRechts {
float: right;
width: 66%;
background-color: #55FFFF;
font-size: 0.9em;
padding: 5px;
font-weight: bold;
text-align: center;
}
.clear {
clear: both;
}

HTML:

Code:

<div id="all">
<div id="menueKopfLinks"> 
Menü
</div>
<div id="menueKopfRechts"> 
Inhalt
</div>
<div class="clear"></div>
</div><!--Ende #all-->

Du siehst: Es geht auch ohne Tabelle. Allerdings wirst du nicht umhin kommen, dich in diese materie etwas einzuarbeiten und vor allem das bisherige Tabellendenken zu eliminieren.

Vermutlich folgen jetzt Efchen noch ein paar weitere grundsätzliche Ausführungen, die ich mir deshalb ersparen kann.

Efchen · 5 August 2008

prm schrieb:
Vermutlich folgen jetzt Efchen noch ein paar weitere grundsätzliche Ausführungen, die ich mir deshalb ersparen kann.

Die Antwort wollte ich mir jetzt eigentlich sparen, weil ja eh meist nur rumgemeckert wird, dass das zu theoretisch ist, aber wenn Du darauf bestehst... :-)

Ich hätte noch ergänzt, dass es nicht gut und nicht fortschrittlich ist, "alles mit divs" zu machen, weil es bei HTML nicht ums Layouten geht, sondern nur um die logische Auszeichnung des Inhalts. Das heißt, Du zeichnest Überschriften als solche aus (mit den Tags <h1> bis <h6>), Textabsätze mit <p>, Adressen mit <address>, wichtige Textpassagen mit <em>, noch wichtigere mit <strong> usw. Tabellarische Daten, wie z.B. die Tabelle einer Fußballliga, werden natürlich als Tabelle ausgezeichnet. Aber niemals benutzt man irgendein HTML-Tag, weil es ein bestimmtes Aussehen erzeugt. Niemals benutzt man <strong>, weil es vielleicht fett dargestellt wird (das kann von Browser zu Browser abweichen, weil es dazu keine festgelegten Standards gibt), niemals nutzt man eine Tabelle, um damit ein Layout zu machen.

Das Tag <div> dient in erster Linie dazu, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. Ansonsten braucht man es kaum und für Inhalt gibt es eigentlich immer ein Tag, das besser geeignet ist, diesen auszuzeichnen, im Zweifelsfalle <p>, weil es Text ist. "Layout mit div", wie man oft hört, gibt es eigentlich nicht. Mit HTML macht man kein Layout, div ist HTML, also kann es Layout mit div nicht geben. Logische Schlussfolgerung.

Zu viele divs erzeugen sogenannte "div-Suppe" und sind im Sinne von HTML genauso schlecht, wie Layout mit Tabellen. divs sind nützliche Helferlein, aber für ein Layout mit CSS nicht zwingend notwendig und sollten sparsam eingesetzt werden. Klar, für einige Anwendungen muss man div-Suppe kochen, bei speziellen Rahmen, die aus vielen Bildern zusammengesetzt sind. Oder wenn man versucht, mit CSS Bilder zu malen, wie z.B. das berühmte CSS-Haus oder die Bleistifte :-), aber das sind dann Spielereien.

Gruß,
-Efchen

cls · 5 August 2008

Hallo prm,
vielen Dank für deine tolle Hilfe mit den ausführlichen Erklärungen. Ich habe jetzt tatsächlich die Idee mit der Tabelle fallen lassen.
Ziel ist es, dass wenn ich links einen Menüeintrag auswähle, dass sich rechts der Inhalt entsprechend ändert. Dazu habe ich nochmals zwei div-Container erzeugt.

Hartmut

prm · 5 August 2008

Ziel ist es, dass wenn ich links einen Menüeintrag auswähle, dass sich rechts der Inhalt entsprechend ändert. Dazu habe ich nochmals zwei div-Container erzeugt.

Das wirst du so wiederum nicht hinbekommen, denn dazu müsstest du mit Frames arbeiten. Das wäre dann wieder ein Rückschritt.
Wenn du mit CSS arbeitest, muss grundsätzlich der Gesamtinhalt auf jede Seite, also auch inklusive der fixbestandteile wie Navigation, Header usw.
Es gibt jedoch auch elegante Möglichkeiten, dies zu vereinfachen. Lies dir hierzu mal das durch:
Umstieg von Frames auf CSS

@ Efrchen:
Ich wusste doch, dass ich mich auf dich in solchen Dingen voll und ganz verlassen kann ;-)

Efchen · 5 August 2008

prm schrieb:
Ich wusste doch, dass ich mich auf dich in solchen Dingen voll und ganz verlassen kann ;-)

Jo, aber ist mal wieder völlig am Ziel vorbeigeschossen. "Was ich nicht versteh, ignorier ich einfach" - hab ich zumindest das Gefühl.

Du hast aber auch zu jedem Thema einen Artikel parat, was? :-)

prm · 5 August 2008

@ Efchen:
Also ich denk schon, dass ich das verstehe. Wenn ich z.B. ausschließlich was mit h formatieren kann, dann verzichte ich auch auf einen Div, der h nur unnötig umgeben würde.

Ich "frotzle" eigentlich nur deshalb:
Grundsätzlich ist das ja richtig, wenn du einen Anfänger aufklärst, damit er es gleich richtig macht.
Aber aus meiner Sicht verstehen da die meisten Anfänger eh' nur Bahnhof, weil sie bereits genug Probleme haben, ein kleines Layout auf die Reihe zu bringen und sind mit zu viel Informationen schnell überfordert oder verlieren gleich die Lust. Schließlich will man ja auch relativ schnell sichtbare Erfolge erzielen. Da nützen deine Hinweise m.E. relativ wenig.
Es ist aus meiner Sicht auch durchaus "hilfreich" Fehler zu machen, sofern man darüber aufgeklärt wird, daraus lernt und sie dann auch beseitigt.
Von einem Auszubildenden kannst du eben nicht gleich die Perfektion eines Gesellen oder Meisters verlangen.
In einem zweiten Stadium der Entwicklung kann man sich die Seite dann ansehen und abspecken, auf das Wesentliche reduzieren, auf unnötige elemente verzichten, CSS-Angaben bündeln, zusammenfassen, Kurzschreibweisen benutzen usw.

Das ist mal grob erklärt meine (praxisorientierte) Auffassung.
In der Schule lernt man auch erst 3+3+3=9
Auch das ist zunächst umständlich aber dennoch zielführend.
Erst später lernt man, dass 3 X 3 = 9
Das ist einfacher und später wird man wohl auch immer so rechnen (vorausgesetzt man ist bereit, im Anschluss an die Addition auch die Multiplikation zu lernen).

Zu jedem Thema hab ich sicher noch keinen Artikel, aber die "offenen Themen" nehmen in der Tat so langsam ab.
Ich hatte an anderer Stelle bereits erklärt, dass dies meiner eigenen Faulheit zu verdanken ist, weil ich nicht immer alles von vorn erklären möchte. Und auf diese Art ist dann seit Jahresbeginn 2008 eben diese kleine Sammlung entstanden mit aktuell 43 Beiträgen.

Efchen · 5 August 2008

prm schrieb:
Also ich denk schon, dass ich das verstehe.

Ich hab Dich auch gar nicht gemeint :-)

Aber aus meiner Sicht verstehen da die meisten Anfänger eh' nur Bahnhof, weil sie bereits genug Probleme haben, ein kleines Layout auf die Reihe zu bringen

Und da verlassen wir das selbe Gleis...ich bin der Meinung, man sollte erstmal HTML verstehen, bevor man sich an ein Layout wagt. HTML kommt eigentlich vor CSS. Wer zuerst ein Layout baut und sich dann überlegt, was er eigentlich schreiben soll, geht die Dinge IMHO falsch an. Das ist so, wie wenn man früher Spiele programmieren wollte: Zuerst mal ich mal das Titelbild...Stunden später hatte man dann keine Lust mehr, auch nur eine Zeile Code zu schreiben :-)

und sind mit zu viel Informationen schnell überfordert oder verlieren gleich die Lust.

Dann ist Webseiten erstellen aber vielleicht nichts für denjenigen.
Es ist eh maßlos übertrieben, dass Webseiten zu erstellen so einfach ist, dass das jeder könnte. Der Eindruck wird ja oft vermittelt. Aber dem ist eben nicht so. Ein bisschen Schweiß muss man schon rein stecken.

Schließlich will man ja auch relativ schnell sichtbare Erfolge erzielen.

Man darf die Erwartungen aber auch nicht zu hoch stecken.

Es ist aus meiner Sicht auch durchaus "hilfreich" Fehler zu machen, sofern man darüber aufgeklärt wird, daraus lernt und sie dann auch beseitigt.

Nichts hingegen bringt es, falsche Vorgehensweisen zu lernen, wenn die Umgewöhnung zu "richtigen" oder zumindest besseren oder einfacheren Vorgehensweisen dann umso schwerer ist.

Von einem Auszubildenden kannst du eben nicht gleich die Perfektion eines Gesellen oder Meisters verlangen.

Nö. Aber ich würd den Auszubildenden niemals auf CSS loslassen, bevor ich nicht wüsste, dass er verstanden hat, was HTML ist.

In einem zweiten Stadium der Entwicklung kann man sich die Seite dann ansehen und abspecken, auf das Wesentliche reduzieren, auf unnötige elemente verzichten, CSS-Angaben bündeln, zusammenfassen, Kurzschreibweisen benutzen usw.

Als Programmierer, der ich nun letztendlich bin, lernst Du, Dir vorher Gedanken zu machen und nichts zu programmieren, was hinterher eh wieder verschwindet. Man soll sich ein Konzept machen und nicht drauflos schreiben und dann hinterher wieder alles rausschmeißen, wo man sieht, dass es nichts nutzt. Das hat den Nachteil, dass es etwas länger dauert, bevor man etwas sieht. Das hat aber den entscheidenden Vorteil, dass das Endergebnis weitaus besser ist. Und das ist letztendlich auch für den Endanwender die bessere Variante.

Zu jedem Thema hab ich sicher noch keinen Artikel, aber die "offenen Themen" nehmen in der Tat so langsam ab. auf diese Art ist dann seit Jahresbeginn 2008 eben diese kleine Sammlung entstanden mit aktuell 43 Beiträgen.

Damit hast Du das erreicht, was ich schon immer gerne gehabt hätte, aber nie wirklich die Zeit dazu gefunden habe.[1]

Gruß,
-Efchen

P.S.: Also wie am Anfang gesagt, war der Kommentar gar nicht auf Dich bezogen, somit sind meine Antworten jetzt sehr allgemein ausgefallen. :-)

[1] Das ist ein verstecktes Efchen-Lob und eine gewisse Bewunderung meinerseits.

prm · 5 August 2008

Und wieder einmal stimmen wir im Grundsätzlichen überein. ;heart
OK, ich habe berufsmäßig hinsichtlich Websites über haupt nichts am Hut, geschweige denn eine derartige Ausbildung genossen. Vielleicht seh ich auch deshalb vieles etwas lockerer.

Damit hast Du das erreicht, was ich schon immer gerne gehabt hätte, aber nie wirklich die Zeit dazu gefunden habe.

Jeder hat die gleiche Zeit, nämlich 24 Stunde pro Tag/Nacht.
Allerdings wäre es sicher ziemlich sinnlos, wenn jeder seine Zeit mit den gleichen Dingen verbringen würde. Dann hätten wir Millionen von CSS-Anleitungen und andere wichtige Dinge würden nicht erledigt, nicht erforscht usw.

Das ist ein verstecktes Efchen-Lob und eine gewisse Bewunderung meinerseits

Ich werde es zu schätzen wissen!

Tabelle mit geringen Spaltenabstand

cls

Neues Mitglied

prm

Aktives Mitglied

Efchen

Guest

cls

Neues Mitglied

prm

Aktives Mitglied

Efchen

Guest

prm

Aktives Mitglied

Efchen

Guest

prm

Aktives Mitglied

Neueste Beiträge