• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Firefox 1.0.7 | Spaltenbreite in einer Tabelle per CSS

Kriegr

New member
Hallo!

Ich möchte für den Firefox eine dreispaltige Tabelle gestalten. Die linke Spalte soll eine Breite von 20% und die beiden anderen je 40% bekommen.
Ich habe dazu in CSS für die jeweilige Zellenklasse einen prozentualen width-Wert festgelegt, der jedoch nicht das gewünschte bewirkt. Bevor ich für die Tabelle in CSS "table-layout: fixed" hinzugefügt hatte, waren auf drei verschiedenen html-Seiten mit der jeweils gleichen Tabelle die Spalten alle unterschiedlich breit. Mit "table-layout: fixed" haben nun alle Spalten die selbe Breite, nicht aber 20 - 40 - 40.

Ich habe es auch ausprobiert mit "table-layout: auto" und keine Breitenangaben für die Zellen in CSS. Das Ergebnis ist nicht so toll.

Was kann ich da machen?
 
Hallo!

Danke für die Antwort.
In Zukunft kann vorausgesetzt werden, dass ich vor dem Stellen einer Frage hier bereits bei SelfHTML nachgesehen habe, so auch in diesem Fall.
Die Antwort bringt mich also nicht weiter.
 
Dann hast Du Dir die Beispiele auf der Seite offensichtlich nicht genau durchgelesen.
Mit div's wärst Du eh besser dran:
Code:
#links {
    width:20%;
    float:left;
}
#mitte {
    width:40%;
    float:left;
}
#rechts {
    width:40%;
    float:left;
}
 
Ok, danke!

Ich probiere es dann mal mit den divs, wäre mir auch lieber, da ich Tabellen, falls irgendmöglich, vermeiden möchte.
Allerdings habe ich bei dreispaltigen "Tabellen" da so meine Zweifel, ob das mit divs sauber zu machen ist. ;)
 
Im Prinzip kannst Du 10+x div's nebeneinanderstellen und es wird immer klappen...
...man sollte hat auf die Feinheiten wie border, padding, margin, etc achten.
 
Guten Morgen!

Soweit so gut, ich habe nun das Problem, dass manche Zellen in meiner mit divs gebauten Tabelle leer sind. Dann passiert es, dass ein div darunter nach oben in diesen Freiraum rutscht. Beispiel! (muss u. U. aktualisiert werden!). Das Beispiel ist nur mit firefox richtig zu erkennen.

Wie kann ich das verhindern?
 
Sieht doch schonmal gut aus...
Du hast das in etwa so aufgebaut:
Code:
<div class="jahr">1935 ...usw... </div>
<div class="jahr">1936 ...usw... </div>
Du musst nach jedem div-Block der Jahreszahlen folgendes einbauen:
Code:
<br style="clear:both;" />
Also so:
Code:
<div class="jahr">1935 ...usw... </div><br style="clear:both;" />
<div class="jahr">1936 ...usw... </div><br style="clear:both;" />

Und damit Du das nicht als Inline-Style hast, kannst Du das auch in Deine css schreiben.
Code:
.clear {
    clear:both
}
<br class="clear" />
 
Danke!

Ich hatte es auch schon mit <br clear="all"> versucht und dabei das selbe Ergebnis erreicht wie mit deinem Tipp. Das Beispiel habe ich entsprechend aktualisiert.
So ganz ist es das noch nicht.
 
Also bei mir geht's.
Oder ich verstehe grade das Problem nicht.
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, tr, td, form, label, input, img {
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:16px;
  margin:0px;
  padding:0px;
  border:0px;
}
body {
  text-align:center;
}
#container {
  width:760px;
  margin:0px auto;
  text-align:left;
}
.links {
  width:20%;
  float:left;
}
.mitte {
  width:40%;
  float:left;
}
.rechts {
  width:40%;
  float:left;
}
p {
  padding:3px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="links"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="mitte"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="rechts"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<br style="clear:both;" />
<div class="links"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="mitte"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="rechts"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
</div>
</body>
</html>
Du könntest auch eine Trennlinie (hr) einfügen und die mit css an die Hintergrundfarbe anpassen...
 
Hi!

In deinem Beispiel hast du in jedem <div></div> ausreichend Text.

Bei mir ist es so, dass in einer "Zeile" die "Spalte3" fehlt.
Code:
<div class="jahr">1935 <a href="#seitenanfang"><img class="up" title="up" src="grafiken/up.gif" alt="up"></a></div>
<div class="spalte1"><p><b>9.März</b>: Hitler verkündet der Welt die Formierung der bis dahin geheim gehaltenen Luftwaffe</p></div>
<div class="spalte2"><p>Anfang September Jungfernflug des Prototyps <img title="Grafik" class="jpg" src="grafiken/jpg.gif" alt="Grafik" /> <a title="Prototyp der Bf 109" href="javascript:OpenNewWindow('grafiken/historie/bf109/prototyp.gif',471,116)"><b>Bf 109V1</b></a> mit einem Rolls Royce Kestrel Motor (Startleistung 695 PS). Sie setzte sich gegen die Konkurrenz Heinkel He 112 aufgrund ihrer kleineren Flügel (mehr Wendigkeit!) durch.</p></div><br style="clear:both;" />

<div class="jahr">1936 <a href="#seitenanfang"><img class="up" title="up" src="grafiken/up.gif" alt="up"></a></div>
Deshalb rutscht <div class="jahr">1936...</div> nach oben, dort wo normalerweise <div class="spalte3"> stünde.

Ich habe es gerade mit der Trennlinie probiert, bringt aber ohne einem zuvor gesetzten <br> auch nichts, ändert also nichts an dem eigentlichen Problem.
 
Zuletzt bearbeitet:
jep, logo, habe ich als erstens probiert, selbes Problem.... :rolleyes:

Ich habe mal ein <div class="spalte4"> eingefügt und mit Text gefüllt. Den Text will ich später noch 'unsichtbar' machen. Beispiel !
Allerdings umfasst nun <div class="jahr">1936...</div> die darüberliegende komplette "Zeile" (also gesamt 3 <div>-Bereiche). Ich habe definitiv keine Ahnung warum. :mad:

Die dazugehörigen CSS-Definitionen:
Code:
div.spalte1 {
  width: 20%;
  float: left;
  background-color: #cba574;
  border-width: 1px;
  border-style: solid;
  border-color: #956939;
  padding: 0 3px 0 3px;
  margin-right: 3px;}

div.spalte2 {
  width: 37%;
  float: left;
  margin-right: 5px;
  padding: 3px;
  background-image: url(../grafiken/kokardedt.gif);
  background-repeat: no-repeat;
  background-position: center;}

div.spalte3 {
  width: 37%;
  float: left;
  padding: 3px;
  background-image: url(../grafiken/kokardebrit.gif);
  background-repeat: no-repeat;
  background-position: center;}

div.spalte4 {
  width: 37%;
  float: left;}

div.jahr {
  background-color: #af8554;
  color: #673b15;
  font-weight: bold;
  margin: 3px 0 3px 0;
  padding: 0 0 0 5px;
  border-width: 1px;
  border-style: solid;}
 
Zuletzt bearbeitet:
Also so ganz langsam dreh ich durch. Ich habe definitiv keinen Plan, woran es liegen soll.... :whacky:

Ich glaube mittlerweile, dass es ein bug von firefox ist. :brainless
 
Zuletzt bearbeitet:
so, die "Lösung" ist aus meiner Sicht nur über <br clear="all" /> möglich.
Allerdings habe ich dann einen zu großen Leerraum darunter. Beispiel 2!
 
Du kannst doch ein div erstellen, welches Deinen Dreispalter einfasst...
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, tr, td, form, label, input, img {
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:16px;
  margin:0px;
  padding:0px;
  border:0px;
}
body {
  text-align:center;
}
#container {
  width:760px;
  margin:0px auto;
  text-align:left;
}
.rahmen {
  width:100%;
  clear:both;
}
.spalte1 {
  width:20%;
  float:left;
}
.spalte2 {
  width:40%;
  float:left;
}
.spalte3 {
  width:40%;
  float:left;
}
p {
  padding:3px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="rahmen">
<div class="spalte1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="spalte2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="spalte3"></div>
</div>
<div class="rahmen">
<div class="spalte1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="spalte2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="spalte3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Guten Morgen!

@dkdenz:

Ich habe es mal mit deinem <div id="container"> versucht, klappt auch nicht.
Hast du dir schon mal den Quellcode der gesammten Seite angesehen?
Der Grundaufbau ist aus meiner Sicht folgendermaßen:
1. Menü (einige divs)
2. <div id="links">
3. <div id="center">
Hier kommt der ganze Rest rein.

Was ich nicht kapiere ist, dass ich m. E. keinen End-Tag vergessen habe und dennoch der <div class="jahr">1936...</div> sich nach oben ausbreitet.
Das passiert mir immer, sobald ich die <br clear="all">-Tags weglasse.

Siehe Beispiel 3 .
Vielleicht liegt es einfach an meinem CSS?
Danke für deine Geduld und Mühe.
 
Jetzt sollte es gehen:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, tr, td, form, label, input, img {
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:16px;
  margin:0px;
  padding:0px;
  border:0px;
}
body {
  text-align:center;
}
#container {
  width:760px;
  margin:0px auto;
  text-align:left;
}
.rahmen {
  width:100%;
  clear:both;
}
.jahreszahl {
  width:100%;
}
.spalte1 {
  width:20%;
  float:left;
}
.spalte2 {
  width:40%;
  float:left;
}
.spalte3 {
  width:40%;
  float:left;
}
p {
  padding:3px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="rahmen">
<div class=jahreszahl>1935</div>
<div class="spalte1">9.März: Hitler verkündet der Welt die Formierung der bis dahin geheim gehaltenen Luftwaffe</div>
<div class="spalte2">Anfang September Jungfernflug des Prototyps mit einem Rolls Royce Kestrel Motor (Startleistung 695 PS). Sie setzte sich gegen die Konkurrenz Heinkel He 112 aufgrund ihrer kleineren Flügel (mehr Wendigkeit!) durch.</div>
<div class="spalte3"></div>
</div>
<div class="rahmen">
<div class=jahreszahl>1936</div>
<div class="spalte1">3.3.: Brit. Regierung will die Flugzeugstärke zur nat. Verteidigung auf 1.750 Flugzeuge ausbauen.</div>
<div class="spalte2">Der zweite und dritte Prototyp (Bf 109 V2, Bf 109 V3) haben ein Junkers Jumo 210A-Triebwerk, die V3 zwei MG 17 (Kal. 7,9mm mit je 1000 Schuss) über dem Motor. Es gab noch die V4-V6. Am 6. März Jungfernflug der K5054 mit einem 900-PS-Rolls-Royce-Merlin-C-Triebwerk mit einem Zweiblatt-Propeller mit unverstellbarer Luftschraube.</div>
<div class="spalte3">Am 6. März Jungfernflug der K5054 mit einem 900-PS-Rolls-Royce-Merlin-C-Triebwerk mit einem Zweiblatt-Propeller mit nicht verstellbarer Luftschraube.</div>
</div>
</div>
</body>
</html>
 
Heureka!

Das CSS war das Problem!
Ich habe nun für div.jahr noch

float: left und
width: 100%

dazu genommen uns siehe da, alles perfekt!
 
Zurück
Oben