Stefan Einspender: Layout mit CSS - die Vorteile

Beitrag lesen

Hallo Wolfgang,

update :) http://www.tuning-obd.at/sw/

sieht nicht so sehr gut aus, vielleicht schaust Du Dir mal meine Variante an ;-)

alt: http://einspender.de/temp/audi.htm (17350 bytes) neu: http://einspender.de/temp/audi.html (6914 bytes)

ACHTUNG, die neue Variante setzt einen Browser voraus, der wirklich was von CSS versteht, im Mozilla 1.2.1 (oder Netscape 7.01) sieht es optimal aus, im Opera 7.0 B2 gibt es ganz kleine Unterschiede und im MSIE 6.0 SP1 wird deutlich, warum dieses Programm in Sachen CSS nicht auf der Höhe der Zeit ist ;-) Die notwendigen Anpassungen sind imho vertretbar und werde ich mal gleich Dir, Wolfgang, überlassen. Nur bitte haue nicht wieder so mit Klassen um Dich, die Übersichtlichkeit des jetztigen Quell- textes sollte ja deutlich geworden sein. Wenn Du Fragen hast, dann stelle sie ruhig, Du hast jetzt eine sehr gute Arbeitsgrundlage :-)

Selbstverständlichkeit: http://validator.w3.org/check?uri=http%3A%2F%2Feinspender.de%2Ftemp%2Faudi.html http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Feinspender.de%2Ftemp%2Faudi.html

Ausnahmsweise poste ich hier mal den CSS- und den HTML-Teil, wer da noch Verbesserungsvorschläge hat, nur her damit. Lediglich die ab- solut referenzierten Grafiken habe ich rausgenommen, damit Wolfgang die Sachen gleich so übernehmen kann.

CSS-Teil:

#####################################################################

@media screen {

.l { float: left; }   .r { float: right; }

a {     background: inherit;     color: inherit;     text-decoration: none;    }

body {     background: #FFFFFF;     color: #000044;     font-family: Arial,Helvetica,Verdana,sans-serif;     margin: 0;     padding: 0;    }

div#logo {     background: url(img/LogoM.jpg);     border-bottom: 1px solid #000000;     border-top: 1px solid #000000;     height: 56px;     text-align: right;     white-space: nowrap;    }

div#navi {     background: inherit;     color: #666666;     margin: 5px 7px 15px 40px;    }

div#navi a {     background: url(img/ndot.gif) no-repeat left bottom;     border-bottom: 1px solid #000000;     font-size: 12px;     padding-left: 8px;    }

div#navi a:hover,div#navi a:active {     background: url(img/hdot.gif) no-repeat left bottom;     color: #AAAA00;    }

div#navilinks {     background: url(img/mbbh.gif) repeat-x bottom;     padding-bottom: 9px;     padding-top: 9px;    }

div#navilinks a {     font-size: 14px;     padding-left: 8px;    }

div#inhalt {     background: url(img/carbgtl_audi.jpg) no-repeat 36px 0;     color: inherit;     margin: 0 20px 40px 0;    }

div#tabdiv {     background: url(img/carbgbr_audi.jpg) no-repeat bottom right;     color: inherit;     padding: 0 20px 20px 56px;    }

h1 {     background: none;     color: #004444;     line-height: 64px;     margin-left: 56px;     margin-bottom: 0;     padding-top: 20px;     padding-bottom: 15px;    }

img { border: none; }

p {     background: inherit;     color: #DDDDDD;     clear: both;     font-size: 12px;     margin: 0 40px;    }

table {     border-collapse: collapse;     margin: auto;     width: 100%;    }

td,th  {     font-size: 14px;     padding: 0;     text-align: right;    }

td:first-child,th:first-child {     text-align: left;    }

td { border-bottom: 1px solid #000077; }

th {     border-bottom: 4px double #660000;     font-weight: normal;    }

}

#####################################################################

HTML-Teil:

#####################################################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>Audi</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css">

<meta name="generator" content="with my left egg :-)"> <meta name="autor" content="Wolfgang Morawetz">

<style type="text/css"> <!--

/* hier CSS-Teil einsetzen oder eine externe CSS-Datei mittels link-Element einbinden */

--> </style>

</head>

<body>

<div id="logo"><img class="l" src="img/LogoL.jpg" alt="" height="56" width="498"><img src="img/LogoR.jpg" alt="" height="56" width="254"></div>

<div id="navi">     <div class="l" id="navilinks">         <a href="/sw/index.htm">home</a>         <a href="/sw/information.htm">information</a>         <a href="/sw/contact.htm">kontakt</a>         <a href="/sw/tuning.htm">tuning</a>

</div>     <div class="r">         <a href="/sw/search.htm">suche</a>         <a href="/sw/sitemap.htm">sitemap</a>         <a href="/sw/impres.htm">impressum</a>         <a href="/sw/disclaimer.htm">disclaimer</a>       </div>

</div>

<p>S&W Softwaretuning, Tel.: +43 (01) 203 83 84, Fax.: +43 (01) 203 82 13, e-mail: <a href="mailto:swtuning-obd@aon.at">swtuning-obd@aon.at</a></p>

<div id="inhalt">     <img class="l" alt="" src="img/infobarlt_tuning.jpg" height="400" width="36">     <h1><img class="r" src="img/logo_audi.gif" alt="" height="64" width="136">Audi</h1>

<div id="tabdiv"> <table>

<tr><th>Audi</th>         <th>Standart Kw, Ps, Nm</th>         <th>Optimiert Kw, Ps, Nm</th></tr>     <tr><td>Audi 80 1.9 TDI 94 182</td>         <td>66, 90, 182</td>         <td>85, 116, 248</td></tr>

<tr><td>Audi 80 1.9 TDI 94 202</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi Cabrio 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>

<tr><td>Audi A2 1.4 TDI</td>         <td>55, 75, 195</td>         <td>73, 100, 245</td></tr>     <tr><td>Audi A3 1.9 TDI</td>         <td>74, 100, 240</td>         <td>96, 130, 290</td></tr>

<tr><td>Audi A3 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A3 1.9 TDI</td>         <td>96, 130, 310</td>         <td>117, 160, 380</td></tr>

<tr><td>Audi A3 1.9 TDI</td>         <td>66, 90, 210</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>74, 100, 240</td>         <td>96, 130, 290</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>85, 116, 285</td>         <td>105, 143, 320</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>96, 130, 285</td>         <td>117, 160, 380</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>96, 130, 310</td>         <td>117, 160, 380</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A4 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A4 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>     <tr><td>Audi A4 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>

<tr><td>Audi A4 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi 100 2.5 TDI</td>         <td>103, 140, 290</td>         <td>128, 174, 330</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>103, 140, 290</td>         <td>128, 174, 330</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A6 1.9 TDI</td>         <td>85, 116, 310</td>         <td>105, 143, 360</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>96, 130, 285</td>         <td>117, 160, 380</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A6 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 350</td></tr>

<tr><td>Audi A6 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi A8 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A8 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi A8 3.3 TDI</td>         <td>165, 225, 480</td>         <td>184, 250, 570</td></tr>

</table>   </div>   </div>

</body> </html>

#####################################################################

Viele Grüße, Stefan

--
http://www.favicon.de/ - (fast) alle Infos zum Thema favicon.ico http://www.sidebar.de/ - Sidebars von A-Z für Mozilla & Netscape