Bezüglich der Bilder ist da eigentlich nichts, was selbst im Tabellenlayout eine Tabelle erfordern würde - und im Grunde auch keine Liste. Du hast drei Zeilen à sechs Bilder. Setzt du bei einem dreizeiligen Text aus 18 Wörtern auch jedes Wort in eine Tabellenzelle?Pfauli hat geschrieben:Würdet ihr dann bei solch eine Seite (bitte nicht code ansehen) - ist (noch) nicht optimiert, die Bilder als Liste setzen?
Nein. Wenn überhaupt, dann landest du als DIVterie-Geschädigter in einer <div>-Wüste :> Sowas produzieren Leute, die glauben, wenn sie <table><tr><td><table><tr><td>bla</td><td>fasel</td></tr></table></td></tr></table> durch <div><div><div>bla</div><div>fasel</div></div></div> ersetzen, wäre das „modernes Webdesign“, und die dann auch noch ganz stolz darauf verweisen, der Code wäre „valide“, am Besten noch mit einer W3C-Plakette druff. Das ist Bockmist. Diese Leute haben nicht verstanden, wie HTML funktioniert und wie HTML gedacht ist, deren Arbeit ist von standardkonformer, sinngemäßer HTML-Nutzung so weit entfernt wie das 1er-Diktat eines Drittklässlers vom Literatur-Nobelpreis.bei so etwas lande ich ganz schnell wie Alda schreibt in einer DIVterie, oder nicht?
Das Problem fängt meines Erachtens auch schon im Vorfeld an, noch vor der technischen Umsetzung in HTML, nämlich damit, dass eine Webseite eben nicht wie ein Blatt Papier mit seinen festen Abmessungen funktioniert. Es hat schließlich nicht die ganze Welt den gleichen Monitor auf dem Tisch stehen, benutzt ihn mit der exakt gleichen Auflösung, einem exakt gleich großen Browserfenster und der exakt gleich großen Browseranzeigefläche. HTML kann mit diesen vielfältigen Ausgabeformaten leicht umgehen, dafür wurde es erdacht - wenn man es denn lässt.
Nur mal grob zusammengeschustert, nicht in allen Details identisch:
Code: Alles auswählen
<!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>PS: Das Hintergrundbild enthält anscheinend eine Gamma-Korrektur. Im Firefox hat es einen ungesunden Stich ins Grün-Gelbe, bei Opera ist es farblos:
Mit <meta http-equiv="expires" content="0"> und <meta http-equiv="cache-control" content="no-cache"> tust du, mal abgesehen davon, dass die redundant sind, deinen Besuchern keinen Gefallen. Falls du die Seiten nicht jede Sekunde änderst, warum zwingst du den Besucher, sie bei jedem Aufruf komplett neu übertragen?
