php-resource




Archiv verlassen und diese Seite im Standarddesign anzeigen :
Tschüss table, hallo div?


 
cag-live
24-09-2006, 20:16 
 
Hi Leute,

seit mehr als 4 Jahren entwickle ich nun Webseiten. Nun hat der lübe Tobiaz (*verbeug* *verbeug*) behauptet, weg mit den Tabellen, hin mit den Div's.

Sinnvoll? Oder Schwachsinn?

Was ist sinnvoller für zukünftige Techniken und Entwicklungen? Warum?

Ich entfache hier, hoffentlich, mal ne Diskussion ;)

 
Meillo
24-09-2006, 20:52 
 
weil Tabellen für tabellarische Daten und nicht zum Layouten da sind!

aber such doch einfach mal per Google - du wirst haufenweise Abhandlungen darüber finden.


... jedoch sei dir schonmal gesagt, dass das Verwenden von DIVs noch lange keinen guten Code macht :teach:

 
cag-live
24-09-2006, 20:55 
 
Inwiefern?

 
TobiaZ
24-09-2006, 21:31 
 
http://seybold.jan-andresen.de/everything.php

aber das haben wir hier im forum auch schon 100 mal erwähnt...

 
Meillo
25-09-2006, 09:46 
 
Original geschrieben von cag-live
Inwiefern?

aus solchen Gründen zum Beispiel
<DIV id="eink" style="position:absolute; top:45px; left:10px;">
<DIV style="position: absolute; top: 5px; left: 0px; font-size:12px;">Einkäufer</DIV>
<DIV style="position: absolute; top: 5px; left: 170px; font-size:12px;">von</DIV>
<DIV style="position: absolute; top: 0px; left: 200px; width:150px; font-size:12px;">
<INPUT id="evon" onchange="xchange();" type="text" name="evon" maxlength="6" value="100">
</DIV>
<DIV style="position: absolute; top: 5px; left: 370px; font-size:12px;">bis</DIV>
<DIV style="position: absolute; top: 0px; width:150px; left: 400px; font-size:12px;">
<INPUT id="ebis" onchange="xchange();" type="text" name="ebis" maxlength="6" value="200" />
</DIV>
<DIV style="position: absolute; top: 5px; width:50px; left: 550px;">
<INPUT id="eSuche" type="submit" style="font-size:10px; width: 46px; height: 18px;
font-family: arial;" name="sucheEinkaeufer" value="Suche" />
</DIV>
</DIV>
... da kann ich auch gleich 'ne Tabelle nehmen :o


umbrüche

 
pekka
25-09-2006, 10:56 
 
@Meillo: ACK. Es gibt leider viele Fälle, in denen die CSS-Implementierung der aktuellen Browser (bzw. des üblicherweise schwächsten Gliedes in der Kette, des IE) vernünftiges tabellenloses Design sehr schwer oder gar unmöglich macht... Oder eben nur mithilfe von Hacks. Sehr unschön.

 
Meillo
25-09-2006, 11:42 
 
stimmt

... aber DIV-Design als "position: absolute;"-Design anzusehen ist IMHO einfach danaben
CSS bietet ja gerade die Möglichkeit schön fließend zu positionieren ... auch wenn es, wie du schon sagst, nicht immer einfach ist :(

 
cag-live
25-09-2006, 19:28 
 
So liebe Leute,

ich hab mal euren Befehlen gehorcht und komplett mit DIV's geschrieben...

www.mati.cx (http://www.mati.cx)

von ca. 21 KB auf 13 KB kleinbekommen. Und es läuft sowohl im IE als auch Opera, Firefox etc.

Fehler gefunden? Oder siehts guad aus?

 
TobiaZ
25-09-2006, 19:31 
 
Fehler gefunden? Massig! IDs müssen eindeutig sein. Das können sie nicht, wenn du jedes zweite div mit der gleichen ID definierst.

Was du brauchst, sind classes.

Mein FF zeig die zwei kreise, oder war es "unendlich" neben dem ausgewählten (hover) menue nicht mehr an. Sieht jetzt irgendwie leer aus. Wenn du es absichtlich rausgenommen hast, würd ich den Linktext was weiter nach links rutschen.

 
cag-live
25-09-2006, 19:36 
 
Hä? Hab keine doppelten ID's gefunden.

Was meinste z.B.?

Jeps, habsch rausgenommen. *hrmpf* sowas fällt wieder auf^^

IE hat mir da nen Strich durch die Rechnung gemacht.

 
wahsaga
25-09-2006, 19:41 
 
Original geschrieben von cag-live
ich hab mal euren Befehlen gehorcht und komplett mit DIV's geschrieben...
Du gehorchst den falschen Leuten - oder hörst ihnen nicht richtig zu.

http://de.wikipedia.org/wiki/Divitis

Alles in Divs zu klatschen, ist ebenfalls großer Blödsinn.

<div id="leer"></div>
<div class="itemleer">&nbsp;</div>
Schon mal gehört, dass man Abstände über CSS regeln kann - margin/padding, klingelt da was?

Dafür leere Elemente zu nehmen und mit entsprechenden Maßen zu formatieren, ist die sinnentleerte Übertragung des Blindgifs in CSS.


Und eine Navigation möchte auch keine wüste Div/A-Verschachtelung sein, sondern das, was sie auch in Wirklichkeit ist - eine Liste von Links.

Und Fliesstext klatscht man auch nicht ständig in Divs, sondern nutzt dafür Absätze, P.

Und wenn man dann schon für Überschriften korrekterweise ein Hx nutzt - dann aber bitte den Link in die Überschrift und nicht andersherum, was nämlich auch invalide ist.


Dass du "schon seit 4 Jahren" Webseiten entwickelst, merkt man am vorliegenden Beispiel jedenfalls kaum.

 
TobiaZ
25-09-2006, 19:44 
 
Hä? Hab keine doppelten ID's gefunden. Der Validator anscheinend schon. Hab mir deinen Quelltext aber nicht angesehen.

Aber jetzt wo ich wahsagas quelltext-zitat sehe, dürfte wohl klar sein, dass du z.B. unmengen an divs mit der id "leer" hast. Das ist ja fast so wie ein blind.gif :D

 
cag-live
25-09-2006, 19:49 
 
Hm naja ich beschäftige mich seit 4 Jahren mit HTML inkl. PHP eher in Richtung Technik.

Layouting bzw. die Frage ob div, und wieviel sei richtig oder falsch, hab ich selten gemacht.


Und eine Navigation möchte auch keine wüste Div/A-Verschachtelung sein, sondern das, was sie auch in Wirklichkeit ist - eine Liste von Links.

Sag das mal dem lieben IE, der wurschtelt nach / vor jedem li-Element nen Zeilenumbruch. Sonst hätt ich's ja auch damit gemacht.


Und Fliesstext klatscht man auch nicht ständig in Divs, sondern nutzt dafür Absätze, P.

Ich hab die DIV's mit dessen ID als eine Art Klasse gesehen und sie so auch genutzt. Deswegen hab ich sie auch doppelt und x-fach genutzt *grrrrr*. Werds fixen.


Und wenn man dann schon für Überschriften korrekterweise ein Hx nutzt - dann aber bitte den Link in die Überschrift und nicht andersherum, was nämlich auch invalide ist.

Mist, du merkst zuviel ;). Das ist mir auch klar, das warn die letztn 2 Stunden, wo ich irgendwann zuviel DIV's im Kopf hatte. Und ich wollte, dass man, egal wohin man klickt, die News öffnen kann.

 
cag-live
25-09-2006, 19:53 
 
Aber jetzt wo ich wahsagas quelltext-zitat sehe, dürfte wohl klar sein, dass du z.B. unmengen an divs mit der id "leer" hast. Das ist ja fast so wie ein blind.gif :D

*grml* nun verstehsch die ID's erstmal richtig... Dachte, wie grad geschrieben, dass sind eine Art Klassen, die man, so oft man möchte, schreiben kann und somit gewissen vordefinierte Eigenschaften, die in der CSS-Datei stehen, zuweisen kann.

 
wahsaga
25-09-2006, 19:53 
 
Original geschrieben von cag-live
Sag das mal dem lieben IE, der wurschtelt nach / vor jedem li-Element nen Zeilenumbruch. Sonst hätt ich's ja auch damit gemacht.
Ja, bekannter Bug.
Da hilft oftmals nur, die Elemente Tag-an-Tag zu notieren, also ohne jeglichen Whitespace dazwischen.

Zahlreiche Beispiele zur Formatierung von Navigationslisten liefert http://css.maxdesign.com.au/listamatic/

Und ich wollte, dass man, egal wohin man klickt, die News öffnen kann.
A mit display:block formatieren, macht die gesamte Linkfläche statt nur des Textes klickbar.
Der IE braucht allerdings noch zusätzlich eine width-Angabe dazu - da muss man dann ggf. aufpassen, wenn padding/borders verwendet werden, dass es nicht mit dem Box Model kollidiert.

 
cag-live
25-09-2006, 19:58 
 
A mit display:block formatieren, macht die gesamte Linkfläche statt nur des Textes klickbar.

Und da kommt das Problem hinzu, dass ich die einzelnen Elemente mit DIV's getrennt habe. Und wenn ich nun beim Link mit display:block formatiere, ist nur die Zeile anklickbar, wo der Links ist.

Und die Zwischenräume, die ich mit padding gemacht habe, sind keine Links mehr.

 
wahsaga
25-09-2006, 20:01 
 
Original geschrieben von cag-live
Und da kommt das Problem hinzu, dass ich die einzelnen Elemente mit DIV's getrennt habe.
Ja, warum denn eigentlich ...?

Warum verlinkst du ganze Textabschnitte?
Ein Link sollte einen kurzen, prägnanten Linktext haben - wenn mehr Erklärungen nötig sind, dann schreibt man die halt so in einem Fliesstextabsatz dazu.

Und wenn's unbedingt gewünscht ist, den ganzen Absatz klickbar zu haben - dann könnte man da auch mit Javascript nachhelfen, anstatt das Markup zu verwursteln.

 
cag-live
25-09-2006, 20:07 
 
ach pfui... net soviel JavaScript...

Werd mich bessern und morgen ne neue Version zeigen.

 
cag-live
26-09-2006, 20:01 
 
So, die Seite wurde überarbeitet.

Kurze Statistik-Übersicht:

ganz alte Version mit Tabellen: 21,61 (14,5 PHP + 7,11 CSS)
Version von gestern mit zuviel DIV: 13,73 (6,92 PHP + 6,81 CSS)
aktuelle Version von heute: 10,21 (6,45 PHP + 3,76 CSS)

Weiterhin hatte ich gestern 70 DIV's, heute nur 18 DIV's.

Zufrieden?

www.mati.cx (http://www.mati.cx)

 
3DMax
26-09-2006, 20:44 
 
Original geschrieben von cag-live
Zufrieden?
nur kurz angesehen, aber warum js für hover? dafür gibt es a:hover

 
cag-live
26-09-2006, 20:46 
 
das Problem kann man mit 2 Buchstaben beschreiben:

IE

Der hover-Effekt über den ganzen Block geht bei FF und Opera, nur IE spinnt mal wieder.

 
3DMax
26-09-2006, 20:49 
 
für den IE im a-style height:100%; angeben, dann macht er es auch

 
cag-live
26-09-2006, 20:59 
 
thx... werdsch morgen machen...

ich hoffe bis dahin sind alle Layout- und XHTML-Sachen geklärt.

Dann gehts an's System aufsetzen.

 
3DMax
26-09-2006, 23:38 
 
Original geschrieben von pekka
Es gibt leider viele Fälle, in denen die CSS-Implementierung der aktuellen Browser (bzw. des üblicherweise schwächsten Gliedes in der Kette, des IE) vernünftiges tabellenloses Design sehr schwer oder gar unmöglich macht...

ja, ja, hauptsache auf den ie einschlagen - machst du es, weil es "schick" ist oder hast du auch argumente?
ich bin auch gerade dabei, ein layout mit css umzusetzen und oft genug nervt mich auch dein geliebter ff (z.b. a:active wird ignoriert, er braucht schon a:focus).

 
wahsaga
27-09-2006, 00:11 
 
Original geschrieben von 3DMax
und oft genug nervt mich auch dein geliebter ff (z.b. a:active wird ignoriert, er braucht schon a:focus).
Bei dieser Aussage hast du aber schon berücksichtigt, dass :active nur für den kurzen Moment des Drückens der Maustaste bis zum wieder loslassen wirkt ...?

 
3DMax
27-09-2006, 00:50 
 
Original geschrieben von wahsaga
Bei dieser Aussage hast du aber schon berücksichtigt, dass :active nur für den kurzen Moment des Drückens der Maustaste bis zum wieder loslassen wirkt ...? ok, hatte ich nicht berücksichtigt (hatte "active" anders interpretiert).

aber warum rahmt der ff die angeklickten links mit einer dotted border ein, obwohl text-decoration: none; angegeben wurde - das fällt mir jetzt spontan ein?

css-layout kann extrem nervtötend sein.
abstände stimmen in den verschiedenen browsern meist nie überein.
das nervt :mad:

 
Meillo
27-09-2006, 08:04 
 
Original geschrieben von cag-live
Kurze Statistik-Übersicht:

ganz alte Version mit Tabellen: 21,61 (14,5 PHP + 7,11 CSS)
Version von gestern mit zuviel DIV: 13,73 (6,92 PHP + 6,81 CSS)
aktuelle Version von heute: 10,21 (6,45 PHP + 3,76 CSS)

Weiterhin hatte ich gestern 70 DIV's, heute nur 18 DIV's.schön solche (Kenntnis-)Entwickungen zu sehen :grin:

weiter so!

-archiv-

Alle Zeitangaben in WEZ +2. Es ist jetzt 21:07 Uhr.