|
|
Pheidippides
: 29.08.2007
: 652
|
| : 10.02.2010, 20:49 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Laß man, der hat einen schlechten Tag....
Keep on Running
Pheidippides |
|
| Nach oben |
|
 |
rg1
: 16.05.2007
: 156
|
| : 10.02.2010, 20:56 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Hihi, wenn SEOs über HTML philosophieren... Wer auf Netscape-Designs festgelegt ist, dem fehlt offenbar die Phantasie, dass es andere Formen der Darstellung gibt, als ein Raster. Das Element DIV ist kein Tabellenzellenersatz und sollte auch nicht so angewendet werden. In einem flexiblen Design ist alles im Fluss. Aber wer sich das nicht vorstellen kann, bleibt halt bei Tabellen, schadet ja dem Ranking nicht. Bleibt dabei. Ja, bleibt dabei.  |
|
| Nach oben |
|
|
fairsand
: 07.02.2005
: 1133
: Niederhofen
|
| : 10.02.2010, 21:42 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Irgendwie ist es ja auch eine Herrausforderung. Tabellen kann doch jeder.
Gruß
Peter |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 11.02.2010, 20:15 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| 800XE hat Folgendes geschrieben: |
was ist display:table?
view-source:http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm
aha
| Code: |
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div> |
Damit wird der HTML-TAG4Table in eine CSSclass bzw ins style "Ausgelagert"
Toll ... find ich voll toll
Die CSSler (bzw DIVler, da es ja keine CSS Designs gibt, es gibt nur DIV und TableDesign und beide können ihre Elemente via CSS umvormen) Prädiger sagen doch immer CSSdesign (bzw NichtTableDesign) macht den Quelltext schlanker |
Nochmal: Es geht nicht darum, jedes Tabellenelement durch DIVs zu ersetzen sondern um Semantik im Code.
Im Fall von Mgutts Navi würde die Tabelle also durch eine Liste ersetzt:
| Code: |
.table {
display:table;
}
#navi {
display:table-row;
}
#navi li {
display:table-cell;
}
<div class="table">
<ul id="navi">
<li><a href="">Menüpunkt 1</a></li>
<li><a href="">Menüpunkt 2</a></li>
</ul>
</div>
|
Dabei ist das Div lediglich eine Rückversicherung für zufällig auftretende Darstellungsfehler im Mozilla und macht die ganze Sache damit 'bulletproof'.
Mit ein paar Handgriffen ist das auch für IE6 und 7 gefixt. Die 'display:table' eigenschaft ist dabei ja nur dazu da, um die Box auf den Inhaltsbreite schrumpfen zu lassen und sie so dynamisch zentrieren zu können.
Ein weiterer Vorteil der in meinen Augen ganz klar gegen Tabellen spricht ist die Darstellung auf kleinen Bildschirmen wie Smartphones etc. Es gibt nix schlimmeres als beim Lesen horizontal hin und her zu scrollen.
Ohne Tabellen setzt man einfach ein Mobile-stylesheet ein und gut.
Mein Blog |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 11.02.2010, 20:24 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| 800XE hat Folgendes geschrieben: |
Erkläre mir mal warum Serverseitiges das Scrolling langsamer macht?
DivSeiten haben bei mir manchmal arge Probleme beim Scrolling |
Mgutt sprach von subjektiv langsameren Seiten. Also nehme ich mir heraus ebenfalls meine subjektiven Erfahrungen zu posten und wage es, vorläufige Behauptungen aufzustellen. Ich lasse mich aber immer gern eines Besseren belehren!
Aus dem 'langsamer' schloss ich, dass es um die Zeit vom Request bis zur fertig gerenderten Seite ging. Und man brauch wohl nicht zu diskutieren, dass das Rendering im Browser den geringsten Teil dieser Zeit ausmacht, oder?
Egal, ich hab noch nie erlebt, dass eine Seite beim Scrollen Ruckeln würde, außer wenn Flashviedeos drin laufen. Vieleicht kannst du mir mal ein Beispiel geben?
Mein Blog
Zuletzt bearbeitet von ishmael am 11.02.2010, 20:26, insgesamt einmal bearbeitet |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 11.02.2010, 20:25 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Schon wieder ein Doppelpost. Entschuldigt bitte, die Buttons Quote und Edit liegen hier anders herum als in anderen Foren. Scheiß Automatismen 
Mein Blog |
|
| Nach oben |
|
|
Mork vom Ork
: 08.07.2008
: 2568
: Aufm Friedhof.
|
| : 11.02.2010, 22:11 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| ishmael hat Folgendes geschrieben: |
| 800XE hat Folgendes geschrieben: |
| DivSeiten haben bei mir manchmal arge Probleme beim Scrolling |
[…]
ich hab noch nie erlebt, dass eine Seite beim Scrollen Ruckeln würde, außer wenn Flashvideos drin laufen. |
Dass ein CSS-Layout im Gegensatz zum Tabellenlayout beim Verschieben ruckelt, liegt meiner Beobachtung nach in der Regel schlicht daran, dass Leute, die CSS-Layout nutzen, auch andere schöne Dinge kennen und einsetzen: Grafiken nämlich, die fest auf den Bildschirm geklebt werden, so dass der Rest des Inhalts beim Verschieben unter ihnen hindurch wandert bzw. über sie weg zieht. Sind dabei halbtransparente Grafiken involviert, ruckelt's, je nach Browser und Systemleistung.
Das hat dann aber nichts mit CSS allgemein und schon gar nichts mit <div>s zu tun.
Davon (und den Flash-Spielereien, vielleicht auch übermäßiger Javascript-Einsatz) abgesehen sind mir auch keine Seiten in Erinnerung, die beim Schieben geruckelt hätten.
| : |
| mal ein Beispiel geben? |
So ist es. |
|
| Nach oben |
|
|
mgutt
: 08.03.2005
: 3135
|
| : 12.02.2010, 11:42 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| ishmael hat Folgendes geschrieben: |
| Schon wieder ein Doppelpost. Entschuldigt bitte, die Buttons Quote und Edit liegen hier anders herum als in anderen Foren. Scheiß Automatismen |
Wenn Du als letzter in einem Thema gepostet hast, kannst Du Deinen Beitrag wieder löschen
Das kleine x erscheint dann 
» Adsense & Vibrant Alternative
» Ankauf von Communities und Forendomains |
|
| Nach oben |
|
|
Pfauli
: 12.05.2009
: 217
|
| : 23.02.2010, 22:41 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
[quote="Mork vom Ork"]
| Pfauli hat Folgendes geschrieben: |
Nur mal grob zusammengeschustert, nicht in allen Details identisch:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://deine.domain/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
body {
background:url("index_daten/hg_sm_7-09_1.gif") #FFFFFF;
color:#494949;
font-family:Verdana,sans-serif;
}
body > * {
max-width:900px;
margin-left:auto;
margin-right:auto;
}
a[href] {
color:#666;
text-decoration:none;
}
a[href]:visited {
color:#000;
}
a img {
border:none;
}
div#inhalt {
box-shadow: 0 0 15px #888;
-moz-box-shadow:0 0 15px #888;
}
div#inhalt > * {
margin:0;
}
h1 {
clear:both;
background-image:url("index_daten/hg3_70ob.png");
padding:0;
color:#CCC;
font-family:Calibri,sans-serif;
font-weight:bold;
font-size:x-small;
line-height:20px;
text-transform:uppercase;
text-shadow:0 0 0.5em #333;
}
#galerie {
background-image:url("index_daten/hg4_tapete.jpg");
text-align:center;
}
#galerie img {
padding:15px;
}
div#inhaltende {
background:url("index_daten/hg3_70un.png");
height:20px;
}
#fusszeile p {
text-align:right;
font-size:small;
margin:0;
}
#fusszeile p:first-child{
float:left;
}
</style>
</head>
<body>
<div id="kopf">
<!-- Logo und Menü wären hier -->
</div>
<div id="inhalt">
<h1>» Fotografie » Post-Produktion » Visagistik</h1>
<p id="galerie">
<img width="100" height="150" src="pics/digital_pics/IMG_8908_bk3a.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC3399_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC1441_bk1a.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC4432_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC6524_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC7424_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC9219_b1ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC9720_b1ka.jpg">
<img width="100" height="150" src="pics/digital_pics/DSC05778_bk1a.gif">
<img width="100" height="150" src="pics/digital_pics/DSC05997_bk3a.gif">
<img width="100" height="150" src="pics/digital_pics/DSC08565_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC4094_b1ka.gif">
<br>
<img width="100" height="67" src="pics/digital_pics/_DSC1545_b1_ka.gif">
<img width="100" height="67" src="pics/digital_pics/_DSC1788_b1ka.gif">
<img width="100" height="67" src="pics/digital_pics/_DSC2075_b3ka.gif">
<img width="100" height="67" src="pics/digital_pics/_DSC5740_b1ka.gif">
<img width="100" height="67" src="pics/digital_pics/_DSC8591_b1ka.gif">
<img width="100" height="67" src="pics/digital_pics/_DSC5549_b1ka.gif">
</p>
<div id="inhaltende"> </div>
</div>
<div id="fusszeile">
<p><a href="">Presse</a> | <a href="">Referenzen</a> | <a href="">Impressum</a></p>
<p>© 2010</p>
</div>
</body>
</html> |
|
Bevor ich es vergesse zu sagen: Das finde ich mega klasse, Mork. Da sind so viele Details drin, die ich noch nicht kannte und konnte und auch, wenn ich hierzu bislang nichts gesagt habe, daran arbeite ich seitdem Du es gepostet hast.
Total klasse und richtig, richtig nett, dass Du Dir die Mühe gemacht hast.
Vielen, lieben Dank dafür, das ist für mich Gold wert!
Ich liebe meinen Job |
|
| Nach oben |
|
|
