Table-Design in DIV Umschreiben

[dmncstmpfl]

Hallo Zusammen

wie ihr aus dem Thread-Titel entnehmen könnt, möchte ich mein bestehendes Design, welches auf Tabellen aufgebaut ist, in divs umschreiben, da ich mir sagen lies, das div die zukunft sei.

nun habe ich nicht allzu viel ahnung über div, und die spärlichen informationen welche ich auf selfhtml/css4you/sonstige seiten gefunden habe, gehen mir doch zuwenig ins detail.

Kennt hier jemand eine Site, wo div recht tiefgründig beschrieben werden? am besten noch mit den vielen parametern.

Vielen Dank für eure Hilfe

 

[MarcDK]

Kurzer Einwurf zu dem Thema:

Das ist so wie so so eine Sache. Wa sist z.B. mit Daten wie Stundenpläne oder Auflistungen die wie Stundenpläne aussehen. Sollen die wirklich als DIV-Konstrukt umgebaut werden? Wenn ja, was hat dann der <table>-Tag überhaupt noich für einen Sinn. Ich meine es ist klar, dass tabless-design eine tolle Sache ist aber wie ichd as verstanden habe, heißt das doch nur, dass man sich nicht mit Tabellen behilft ein Design zu bauen sondern dafür DIV-Tags nimmt.

Oder hat mal jemand ein Beispiel für einen Stundenplan der nur mit DIV's gebaut ist?

Ich nehme den Stundenplan als beispiel weil da jeder weiß, wie der aufgebaut ist.

 

[Raechaer]

Kurzer Einwurf zu dem Thema:

Das ist so wie so so eine Sache. Wa sist z.B. mit Daten wie Stundenpläne oder Auflistungen die wie Stundenpläne aussehen. Sollen die wirklich als DIV-Konstrukt umgebaut werden? Wenn ja, was hat dann der <table>-Tag überhaupt noich für einen Sinn. Ich meine es ist klar, dass tabless-design eine tolle Sache ist aber wie ichd as verstanden habe, heißt das doch nur, dass man sich nicht mit Tabellen behilft ein Design zu bauen sondern dafür DIV-Tags nimmt.

Also ich sehe das Ganze so: <table> dient zur Darstellung von tabellarischen Daten, und sonst zu nichts. In diesem Sinne ist es also durchaus angebracht für einen Stundenplan <table> zu benutzen (denn ein Stundenplan ist ja im Normalfall eine Tabelle).


Ich weiß nicht was du mit "tiefgründige Beschreibung" meinst, denn so viel gibt's IMHO über divs ja nicht zu sagen, aber wie wär's mit ein paar Beispielen:
Standard 3 Spalten Layout, das ganze "etwas" komplizierter, Tutorial über "Liquid layouts" und natürlich auch noch der Klassiker css Zen Garden.
Und falls du dich beim Umschreiben fragen solltest, warum du dir eigentlich die Mühe machst kann ich dir nur why tables for layout is stupid empfehlen.

 

[sverebom]

Verdammt, CSS Zengarden wollte ich eigentlich gleich posten.

Mmmh, wäre es also besser, wenn ich die Webseite meiner Freundin mit div-Boxen realisieren würde? Noch könnte ich das ändern schließlich habe ich gerade erst mit der Webseite angefangen..

Ich hab mir kürzlich sagen lassen, das man für dynamische, php-basierte Webseiten besser auf Tabellen zurück greift. Ich nehme, das dem nicht so ist oder?

Und kann/darf man div-Boxen mit Tabellen mischen (in der oben genannten Webseite soll noch ein Forum intergiert werden, welches auf Tabellen beruht) oder sollte man dies unterlassen?

 

[HoRnominatoR]

Mmmh, wäre es also besser, wenn ich die Webseite meiner Freundin mit div-Boxen realisieren würde? Noch könnte ich das ändern schließlich habe ich gerade erst mit der Webseite angefangen..

es ist immer besser, ein (wie hier gesagt wurde) ein 'tableless design' (niemand redet von tableless content) zu fabrizieren - fuer alle beteiligten, sei es natuerlich vorwiegend den besucher, als auch fuer den webmaster (administrationstechnisch, sieht man ja an csszengarden)

Ich hab mir kürzlich sagen lassen, das man für dynamische, php-basierte Webseiten besser auf Tabellen zurück greift. Ich nehme, das dem nicht so ist oder?

das ist absoluter schwachsinn, den nur leute vorbringen, die weder PHP noch aktuelle webtechniken beherrschen. PHP kan ntext ausgeben. dieser text kann HTML sein - wie das HTML aussieht, entscheidet man selbst. das sind nur ausreden von leuten, die schlechte templates fuer vielleicht ebensoschlechte CMSs geschrieben haben. das hat miteinander rein GARNICHTS zu tun.

Und kann/darf man div-Boxen mit Tabellen mischen (in der oben genannten Webseite soll noch ein Forum intergiert werden, welches auf Tabellen beruht) oder sollte man dies unterlassen?

lerne zwischen design und inhalt zu unterscheiden. natuerlich kannst du es mischen - sobald du ein div brauchst, benutzt du ein div. sobald du tabellarische daten darzustellen hast, benutzt du eine tabelle. beachte einfach, dass du in deinem quelltext nie design anwendest.

 

[Raechaer]

Mmmh, wäre es also besser, wenn ich die Webseite meiner Freundin mit div-Boxen realisieren würde? Noch könnte ich das ändern schließlich habe ich gerade erst mit der Webseite angefangen..

Meine persönliche Meinung ist, dass man Layouts nie mit Tabellen machen sollte.
Wenn du aber bezüglich "Tabellen oder CSS" keine feste Meinung hast, du sicher bist, dass deiner "Zielgruppe" das auch egal ist, du nicht an möglichen Traffic-Einsparungen interessiert bist und dir Web-Standards soweiso egal sind kannst du aber natürlich auch weiterhin Tabellen verwenden...
Andererseits kann ein CSS Layout aber auch deutlich schwerer zu erstellen sein (insbesondere wenn man das zum ersten Mal macht) und somit musst du unter Umständen deutlich mehr Zeit investieren, und manche Sachen sind nur schwer bis unmöglich zu realisieren, und oft zeigt's dann IE nicht mehr richtig an.

Im Endeffekt musst du also wohl selbst entscheiden was besser ist.

Übrigens ist deine Seite kein valides HTML (ja, ich lasse auf jede Seite über die ich poste den Validator los, einfach ignorieren wenn's nervt, aber ich finde nunmal, dass man sich an den Standard halten sollte )

Ich hab mir kürzlich sagen lassen, das man für dynamische, php-basierte Webseiten besser auf Tabellen zurück greift. Ich nehme, das dem nicht so ist oder?

Wer sagt denn sowas? Der einzige Grund der mir einfällt warum das so sein könnte ist "Das wurde bisher so gemacht, also wird's auch weiterhin so gemacht...
Das Layout vieler dieser dynamischen Websiten basiert ja auf Blöcken, und somit ist es häufig mit divs und CSS sogar einfacher als mit Tabellen.

Und kann/darf man div-Boxen mit Tabellen mischen (in der oben genannten Webseite soll noch ein Forum intergiert werden, welches auf Tabellen beruht) oder sollte man dies unterlassen?

Klar kann man, letzten Endes ist <body> ja auch nicht mehr als ein <div> und so gesehen ist das Forum also immer in einer div-Box integriert. Natürlich kannst du Probleme bekommen wenn das Forum absolut positionierte Elemente benutzt oder auch einfach nur zu breit ist, aber das lässt sich ja leicht beheben.

 

[sverebom]

dir Web-Standards soweiso egal sind kannst du aber natürlich auch weiterhin Tabellen verwenden...

Autsch, das war fies.
Mir sind Webstandarts nichts egal. Vielmehr kenne ich mich damit noch nicht so gut aus, da ich noch mitten in der Ausbildung stecke (ich hoffe, das ist etwas, was du akzeptieren kannst ). Ich werde mich aber schon noch darum bemühen, valide Webseiten zu erstellen, keine Bange

Ich arbeite übrigens viel lieber mit DIVs statt mit Tabellen. Die genannte Webseite werde ich auch dahingehend umbauen. Aufgrund der genannten Fehlinformationen (ich mache keine reine Ausbildung zum Webdesigner. Vieles muß ich mir selber aneignen) schien mir dies hier vorteilhafter.

Anyway, danke für die Informationen.

 

[Raechaer]

Autsch, das war fies.
Mir sind Webstandarts nichts egal.

Das war keinesfalls böse gemeint (und auch nicht direkt auf dich bezogen, ich hätte wohl "man" statt "du" schreiben sollen), ich wollte damit nur sagen, dass es gute Gründe gibt auf Tabellen zu verzichten. Und den Link zum W3C-Validator habe ich hauptsächlich geposted weil er eine große Hilfe beim Erstellen von validen Seiten ist und ich dachte, dass du ihn vielleicht noch nicht kennst.

Ich hab's also eigentlich nur gut gemeint

 

[sverebom]

Ich kannte den Validator zwar bereits, habe ihn aber noch nicht nie benutzt, was sich aber eben geändert hat, da ich eben damit begonnen habe, die Webseite in DIVs umzuschreiben und dabei bin ich auch fleissigst am validieren. Ich merke dabei auch, das ich meine reinen Code-Kenntnisse zu sehr hab schleifen lassen und mir zuviel Arbeit von Dreamweaver hab abnehmen lassen. Warum schreibt Dreamweaver denn nicht anfang an einen validen Code? Das es bspw. teilweise keinen Doctype spezifiziert ist mir auch erst eben, durch dich halt, aufgefallen.

By the way, kannst du mir dies erklären?. Wenn ich bspw. den HEAD-Tag öffne ist es dem Validator nicht recht, lasse ich ihn weg, dann ist es im auch nicht recht

 

[dmncstmpfl]

[...] und oft zeigt's dann IE nicht mehr richtig an.

apropo ie: habe jetzt die site in etwa hingekriegt das sie im firefox fast richtig angezeigt wird. allerdings bezieht sich das fast wohl auf fehler in meinem code.

habe auch den validator dürber gelassen. Jetzt wollte ich die site mal im ie anschauen. Föllig falsch. Die divs sind föllig verschoben.

aber seht selbst: www.neon-mirkwood.net/index.php

im anhang sind alle relevanten daten. Wäre froh wenn sich das mal jemand angucken könnte.

 

[sverebom]

Ich glaube, du hast float falsch verwendet.
Wird dies nicht einzig bei äußerst linken Element angwandt?

 

[dmncstmpfl]

float heisst ja, wie das objekt an andere angrenzen soll. mache ich ein bild zB float=left, dann grenzt es genau an das linke objekt an. mache ich es float=right, geht es an das rechte.
float=none bewirkt, dass das objekt eine neue zeile einnimmt.
ist doch so oder?

 

[sverebom]

Ähm, neee, ich meine, das sich nach einem mit float definiertem Element alle weiteren Elemente hinter diesem Element aufreihen bis kein sonst wie definierter Platz mehr vorhanden ist oder bis die nächste float-definition in die entsprechende Richtung kommt. Dann geht das SPielchen nämlich quasi in der nächsten "Zeile" weiter. So war es jedenfalls bei einer Webseite, die ich kürzlich angefertigt habe. Allerdings läuft mir diese Anweisung tatsächlich recht selten über den Weg, nicht unwahrscheinlich also, das ich mich irre.

 

[dmncstmpfl]

hmm, jetzt bin ich ein bisschen verwirrt.

wenn du recht hättest, wäre es dann aber sehr komisch das im firefox alles korrekt dargestellt wird.

 

[sverebom]

Wie gesagt, float ist etwas, bei dem ich selber immer wieder ins Stolpern gerate.
Versuch es doch einfach mal so wie ich sagte

 

[Raechaer]

By the way, kannst du mir dies erklären?. Wenn ich bspw. den HEAD-Tag öffne ist es dem Validator nicht recht, lasse ich ihn weg, dann ist es im auch nicht recht

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Wenn du den "/" bei <link> entfernst wird's validiert. Das sind so die Eigenheiten von SGML (auf dem HTML bis 4.x basiert), ich würde dir empfehlen XHTML zu schreiben (das basiert auf XML und hat somit deutlich einfachere Regeln).
Falls du Firefox benutzt kann ich dir übrigens die Web Developer Extension empfehlen, damit kannst du dann z.B. mit einem Klick deine Seite validieren (funktioniert auch mit lokalen Dateien).

Was floats betrifft: IE macht da leider so Einiges falsch.

 

[HoRnominatoR]

float heisst ja, wie das objekt an andere angrenzen soll.
ist doch so oder?

nicht ganz, float steht ausserhalb des flusses (aehnlich z-index) und hat nur einfluss auf kind-inlinelemente des elterneelementes (brueder, schwestern und so)

http://hornominator.de/misc/box_float_over.html

 

[dmncstmpfl]

hmm, was muss ich den jetzt anders machen, damit es auch im ie richtig dargestellt wird?

 

[sverebom]

@Raechaer
Dies habe ich auch gemacht, bekam aber dennoch eine Fehlermeldung (welche weiß ich nicht mehr). Vielleicht ist beim Uploaden aus Dreamweaver was falsch gelaufen denn nun geht es

Besten Dank übrigens für die Firefox-Extension

 

[Raechaer]

hmm, was muss ich den jetzt anders machen, damit es auch im ie richtig dargestellt wird?

Das geht bestimmt auch einfacher/besser, aber ich habe versuch an deinem Code möglichst wenig zu ändern (und ich bin auch kein Experte was CSS betrifft):

<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
 <head>
  <title>fingol.net</title>
  <link rel="stylesheet" type="text/css" href="index.php_files/design.css" />
 </head>
 	
 <body>
  <div id="content">
   <div id="content_left_top"></div>
   <div id="content_top"></div>
   <div id="content_right_top"></div>
	 
	
   <div id="content_left"></div>
   <div id="main">Main</div>
   <div id="content_right"></div>

   <div id="content_left_bottom"></div>
   <div id="content_bottom"></div>
   <div id="content_right_bottom"></div>
   
   <div id='dummy'></div>
  </div>
 </body>
</html>

body {
	margin:0;
	padding:0;
	background-color: #EFEFEF;
  text-align:center;
}


	#content {
	  margin-left:auto;
	  margin-right:auto;
		width: 760px;
		}

		#content_left_top {
			width: 19px;
			height: 17px;
			background: url(content_left_top.jpg);
		  float:left;
		}

		#content_top {
			width: 722px;
			height: 17px;	
			background-image:  url(../images/content_top.jpg);
			float: left;
		}

		#content_right_top {
			width: 19px;
			height: 17px;
			float: right;			
			background: url(content_right_top.jpg);
		}
		
		#content_left {
		  margin-top:-2px;
			width: 19px;
			height: 600px;
			background-image:  url(../images/content_left.jpg);
			float: left;
		}
		
		#main {
			width: 722px;
			height: 600px;
			margin-top:-2px;
			float: left;
			background-color: #ffffff;
			text-align: left;
		}
		
		#content_right {
			width: 19px;
			margin-top:-2px;
			height: 600px;
			background-image:  url(../images/content_right.jpg);
			float: right;
		}
		
		#content_left_bottom {
			width: 19px;
			height: 17px;
			float:left;
			background: url(content_left_bottom.jpg);
		}

		#content_bottom {
			width: 722px;
			height: 17px;	
			background-image:  url(../images/content_bottom.jpg);
			float: left;
		}

		#content_right_bottom {
			width: 19px;
			height: 17px;
			float: right;			
			background: url(content_right_bottom.jpg);
		}
		
		#dummy {background-color: #EFEFEF; margin-top:-2px;}