nicht angemeldet
Layout mit DIVs statt Tabellen
0 
Gunnar Bittersmann
-5 0 0 0 0 Gunnar Bittersmann
0
-2 0 
Struppi
0 0 1 Struppi
Layout mit DIVs statt Tabellen
Der MartinGuten Tag,
ich habe nun schon dest öfteren versucht meine bisherigen Tabellen- Layouts durch zeitkonforme DIV-Layouts zu ersetzen. Doch jedesmal verzweifle ich am Ende an irgendeinem Darstellungsproblem, welches ich mir nicht so ganz erklären kann. Nun habe ich aber mitterweile die "Schnauze voll" und will das endlich mal gelöst bekommen ;-) Daher meine Bitte an euch, mich dabei ein wenig zu unterstützen bzw. mir vielleicht ein paar Tips zu geben worauf ich besonders zu achten habe.
Also, ich versuche diese Layout hinzubekommen, wobei die Zahlen folgenden Inhalten zuzuschreiben sind:
- Panel: Kategorien
- Panel: Navigation
- Panel: Information
- Panel: 1. Content
- Panel: 2. Content
- Panel: 3. Content
- Panel: Footer
.----. .-------------. .----. . (1). . (2) . . (3). . . ............... . . . . .-------------. . . . . . (4) . . . . . ............... . . . . .-------------. . . . . . (5) . ...... . . ............... . . .-------------. ...... . (6) . ............... .---------------------------. . [7] . .............................
- Panel#1 hat eine feste Breite
- Panel#2 soll sich der verfügbaren Breite anpassen
- Panel#3 hat eine feste Breite, ist aber optional.
- Panel#4 soll sich der verfügbaren Breite anpassen, doch stets einen einheitlichen Abstand nach links haben, auch wenn der Kategorie-Panel bereits aufgehört hat.
- Panel#7 soll ganz unten die Seite abschließen
Mein aktueller, bisheriger Code ist hier: (Bitte nicht von der Anzahl der Zeilen abschrecken lassen, das sind zum größten Teil nur Dummy-Daten die in die jeweiligen DIVs gepackt wurden. Das CSS steht ganz oben)
<!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">
<head>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background-color:#EFEFEF;
margin:0 5%;
}
.rounded_edges {
padding:0px;
}
.corner_bottom_left {
/*background:url(corner_bottom_left.gif) no-repeat left bottom;*/
}
.corner_bottom_right {
/*background:url(corner_bottom_right.gif) no-repeat right bottom;*/
}
.corner_top_left {
/*background:url(corner_top_left.gif) no-repeat left top;*/
}
.corner_top_right {
/*background:url(corner_top_right.gif) no-repeat right top;*/
}
.border_left {
background:url(pixel.gif) repeat-y left;
}
.border_right {
background:url(pixel.gif) repeat-y right;
}
.headline {
background:url(border_top.gif) repeat-x top;
color:white;
font-weight:bold;
padding:0px 0px 6px 10px;
margin:0px;
}
.footer {
background:url(border_bottom.gif) repeat-x bottom;
color:white;
padding:6px 0px 0px 10px;
margin:0px;
}
.content {
padding:3px;
}
.div_left_panel {
width:220px;
min-width:220px;
max-width:220px;
display:inline;
float:left;
}
.div_top_panel {
float:left;
min-width:250px;
width:250px;
display:inline;
}
.div_right_panel {
width:220px;
min-width:220px;
max-width:220px;
display:inline;
float:right;
}
.div_content_panel {
display:inline;
float:right;
}
</style>
</head>
<body>
<p> </p>
<!-- #### LEFT-PANEL #### -->
<DIV class="div_left_panel">
<TABLE class=rounded_edges cellpadding=0 cellspacing=0>
<TR>
<TD class=corner_top_left><img src="corner_top_left.gif"></TD>
<TD class=headline>.: Categories :.</TD>
<TD class=corner_top_right><img src="corner_top_right.gif"></TD>
</TR>
<TR>
<TD class=border_left> </TD>
<TD class=content>
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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</TD>
<TD class=border_right> </TD>
</TR>
<TR>
<TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
<TD class=footer></TD>
<TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
</TR>
</TABLE>
</DIV>
<!-- #### TOP-PANEL #### -->
<DIV class="div_top_panel">
<TABLE class=rounded_edges cellpadding=0 cellspacing=0>
<TR>
<TD class=corner_top_left><img src="corner_top_left.gif"></TD>
<TD class=headline>.: Navigation :.</TD>
<TD class=corner_top_right><img src="corner_top_right.gif"></TD>
</TR>
<TR>
<TD class=border_left> </TD>
<TD class=content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
</TD>
<TD class=border_right> </TD>
</TR>
<TR>
<TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
<TD class=footer></TD>
<TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
</TR>
</TABLE>
</DIV>
<!-- #### RIGHT-PANEL #### -->
<DIV class="div_right_panel">
<TABLE class=rounded_edges cellpadding=0 cellspacing=0>
<TR>
<TD class=corner_top_left><img src="corner_top_left.gif"></TD>
<TD class=headline>.: Information :.</TD>
<TD class=corner_top_right><img src="corner_top_right.gif"></TD>
</TR>
<TR>
<TD class=border_left> </TD>
<TD class=content>
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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p>Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</TD>
<TD class=border_right> </TD>
</TR>
<TR>
<TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
<TD class=footer></TD>
<TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
</TR>
</TABLE>
</DIV>
<!-- #### CONTENT-PANEL #1 #### -->
<DIV class="div_content_panel">
<TABLE class=rounded_edges cellpadding=0 cellspacing=0>
<TR>
<TD class=corner_top_left><img src="corner_top_left.gif"></TD>
<TD class=headline>.: Content_Panel #1 :.</TD>
<TD class=corner_top_right><img src="corner_top_right.gif"></TD>
</TR>
<TR>
<TD class=border_left> </TD>
<TD class=content>
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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</TD>
<TD class=border_right> </TD>
</TR>
<TR>
<TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
<TD class=footer></TD>
<TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
</TR>
</TABLE>
</DIV>
<!-- #### CONTENT-PANEL #2 #### -->
<DIV class="div_content_panel">
<TABLE class=rounded_edges cellpadding=0 cellspacing=0>
<TR>
<TD class=corner_top_left><img src="corner_top_left.gif"></TD>
<TD class=headline>.: Content_Panel #1 :.</TD>
<TD class=corner_top_right><img src="corner_top_right.gif"></TD>
</TR>
<TR>
<TD class=border_left> </TD>
<TD class=content>
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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</TD>
<TD class=border_right> </TD>
</TR>
<TR>
<TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
<TD class=footer></TD>
<TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
</TR>
</TABLE>
</DIV>
</body>
</html>
Ich wäre dankbar wenn sich das evtl. mal einer anschauen könnte.
Besten Dank auf jeden Fall.
MfG Christopher
-
Hello out there!
ich habe nun schon dest öfteren versucht meine bisherigen Tabellen-
Layouts durch zeitkonforme DIV-Layouts zu ersetzen.Divitis ist nicht zeitkonform.
.----. .-------------. .----.
. (1). . (2) . . (3).
. . ............... . .
. . .-------------. . .
. . . (4) . . .
. . ............... . .
. . .-------------. . .
. . . (5) . ......
. . ...............
. . .-------------.
...... . (6) .
...............
.---------------------------.
. [7] .
.............................(2), (4), (5), (6) gehören zusammen? Dann gruppiere sie doch. Wird zu dann zu einem Block (*). <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Mehrspaltiges Layout>:
• (1) hat feste Breite, float: left
• (3) hat (wenn vorhanden) feste Breite, float: right
• (*) steht dann dazwischen (wenn es beim Nutzer passt, sonst darunter)
• (7) bekommt clear: allWenn (2) im Quelltext vor (3) stehen sollte: Box (*) nur für (4), (5), (6)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo.
Bevor jemand auf komische Ideen kommt:
• (7) bekommt clear: all
Die Fußzeile bekommt ein "clear: both".
-
-
nimm lieber Tabellen - ist besser so.
-
Hallo table-o-mat.
nimm lieber Tabellen - ist besser so.
Richtig. Und zwar immer dann, wenn sie angebracht sind.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo
nimm lieber Tabellen - ist besser so.
Richtig. Und zwar immer dann, wenn sie angebracht sind.Ist das jetzt ironisch gemeint oder soll ich tatsächlich
auf DIVs verzichten?Einen schönen Samstag noch.
Dir auch.
Gruß, Christopher
-
Hallo
nimm lieber Tabellen - ist besser so.
Ist das jetzt ironisch gemeint?
Die Aussage von table-o-mat ist ideologisch geprägt, das erkennts Du doch schon am Nickname.
Ich denke, das hilft Dir weiter.Gruß
Kilobravo -
Hello out there!
nimm lieber Tabellen - ist besser so.
Richtig. Und zwar immer dann, wenn sie angebracht sind.
Ist das jetzt ironisch gemeintNein. Du sollst Tabellen nehmen, wenn sie angebracht sind – zur Auszeichnung tabellarischer Daten. Und zu nichts anderem.
soll ich tatsächlich auf DIVs verzichten?
Richtig. Und zwar immer dann, wenn sie nicht angebracht sind.
Du hast doch den Wikipedia-Artikel zu Divitis gelesen? Wenn nicht, gehe zurück zur Badstraße.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo,
nimm lieber Tabellen - ist besser so.
Richtig. Und zwar immer dann, wenn sie angebracht sind.
Ist das jetzt ironisch gemeintNein. Du sollst Tabellen nehmen, wenn sie angebracht sind – zur Auszeichnung tabellarischer Daten. Und zu nichts anderem.
Das habe ich bereits verstanden. Doch durch deine Aussage
"Divitis ist nicht zeitkonform." in Bezug auf meine Frage,
ob ich in diesem Fall DIVs benutzen sollte oder nicht, stand
erneut eine unbeantwortete Frage im Raum. Ashuras Antwort
unterstützte diese Situation zusätzlich.soll ich tatsächlich auf DIVs verzichten?
Richtig. Und zwar immer dann, wenn sie nicht angebracht sind.s.o.
Du hast doch den Wikipedia-Artikel zu Divitis gelesen? Wenn nicht, gehe zurück zur Badstraße.
Richtig, habe ich. Doch s.o.
MfG
Christopher-
Hallo Christopher,
Nein. Du sollst Tabellen nehmen, wenn sie angebracht sind – zur Auszeichnung tabellarischer Daten. Und zu nichts anderem.
Das habe ich bereits verstanden.
"Divitis ist nicht zeitkonform."soll ich tatsächlich auf DIVs verzichten?
Richtig. Und zwar immer dann, wenn sie nicht angebracht sind.was heißt das nun im Endeffekt?
Dass Tabellen zum Layouten eher nicht verwendet werden sollten, haben wir festgestellt. Und divs darfst du gern verwenden, um andere Elemente zu gruppieren (denn dazu sind sie gedacht). Aber ein Layout sollte bitte nicht primär auf divs aufbauen, sondern alle anderen HTML-Elemente da, wo sie angebracht sind, direkt mit einbeziehen. Ein großer Anteil der div-Elemente in sogenannten CSS-Layouts ist überflüssig.Schönen Abend noch,
Martin--
Wer schläft, sündigt nicht.
Wer vorher sündigt, schläft besser.-
Hallo Martin,
Dass Tabellen zum Layouten eher nicht verwendet werden sollten, haben wir festgestellt. Und divs darfst du gern verwenden, um andere Elemente zu gruppieren (denn dazu sind sie gedacht). Aber ein Layout sollte bitte nicht primär auf divs aufbauen, sondern alle anderen HTML-Elemente da, wo sie angebracht sind, direkt mit einbeziehen. Ein großer Anteil der div-Elemente in sogenannten CSS-Layouts ist überflüssig.
OK, Danke.
Grüße
Christopher
-
-
-
-
nimm lieber Tabellen - ist besser so.
Richtig. Und zwar immer dann, wenn sie angebracht sind.
Ist das jetzt ironisch gemeintnein, gar nicht. Du bist hier in einem Glaubensforum bezüglich Tabellen geraten.
-
nimm lieber Tabellen - ist besser so.
...
.... Du bist hier in einem Glaubensforum bezüglich Tabellen geraten.
Amen.
Die meisten hier kennen die vielen Nachteile die ein Tabellenlayout hat, das dadurch das Glaubensgrundgerüst der Leute, die sich nicht wirklich mit den Möglichkeiten, die der Verzicht darauf bietet, beschäftigen wollen, ins Wanken gerät ist verständlich. Dir bleibt also mangels Wissen nichts anderes als bei deinem Glauben zu bleiben.
Struppi.
-
-
-
-
-
Guten Tag,
ich glaube, dass die Browser-Welt noch nicht reif dafür ist. Es sind einige Seiten im Netz, teils sogar von Werbeagenturen, die mit DIVs arbeiten, jedoch in mindestens einem gängigen Browser nicht korrekt dargestellt werden.
Hilfreich ist folgende Seite:http://css.maxdesign.com.au/floatutorial/index.htm
Beste Grüße!
-
Hi,
ich glaube, dass die Browser-Welt noch nicht reif dafür ist. Es sind einige Seiten im Netz, teils sogar von Werbeagenturen, die mit DIVs arbeiten, jedoch in mindestens einem gängigen Browser nicht korrekt dargestellt werden.
was nichts anderes bedeutet, als daß die Ersteller dieser Seiten - bzw. die genutzten Programme - noch nicht reif dafür sind. In der Tat gibt es noch keinen grafischen Editor, der vernünftige CSS-basierte Layouts erstellen kann.
freundliche Grüße
Ingo -
...Es sind einige Seiten im Netz, teils sogar von Werbeagenturen, die mit DIVs arbeiten....
Mal abgesehen vom Lapsus "mit DIVs arbeiten", hat in mich die Aussage "sogar von Werbeagenturen" dazu geführt, mal wieder die nette Streitschrift: Warum können Werbeagenturen keine guten WWW-Seiten schreiben? herauszukramen.
Struppi.
-