Schlechter Code

schlechter-code.css

.page {width:700px; height:auto; background-color: #fff; margin:auto; margin-top:0px;}

.body {
	margin:0;
	padding:0;
	background-color:#fff;
	background-image:url(../img_all/header/header1.jpg);
	background-repeat:no-repeat;
}
.body2 {
	margin:0;
	padding:0;
	background-color:#fff;
	background-image:url(../img_all/header/header2.jpg);
	background-repeat:no-repeat;
}
.body3 {
	margin:0;
	padding:0;
	background-color:#fff;
	background-image:url(../img_all/header/header3.jpg);
	background-repeat:no-repeat;
}
.body4 {
	margin:0;
	padding:0;
	background-color:#fff;
	background-image:url(../img_all/header/header4.jpg);
	background-repeat:no-repeat;
}

.body5 {
	margin:0;
	padding:0;
	background-color:#fff;
	background-image:url(../img_all/header/header5.jpg);
	background-repeat:no-repeat;
}

.main {
	width:740px;
	height:auto;
	margin:255px 20px 20px 160px;
	}

/* +++++++++++Besser ++++++++++++ */

body {
	margin:0;
	padding:0;
	background-color:#fff;
	background-repeat:no-repeat;
}

.body {
	background-image:url(../img_all/header/header1.jpg);
}
.body2 {
	background-image:url(../img_all/header/header2.jpg);
}
.body3 {
	background-image:url(../img_all/header/header3.jpg);
}
.body4 {
	background-image:url(../img_all/header/header4.jpg);
}


/* +++++++++++++++++++++++++++++ */

.welcome {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14pt;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #333;
}

.headline {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11pt;
	line-height: 145%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #333;
}

.headwhite {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11pt;
	line-height: 135%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #fff;
}

.subwhite {font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
line-height: 135%;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #fff;}

.sub {font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
line-height: 115%;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #333;}

.fliess {font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: 135%;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #666666;}

.fliess2 {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: 155%;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666666;
}

.fliessbig {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11pt;
	font-style: normal;
	line-height: 135%;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #666666;
}

.mini {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: 115%;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666666;
}
/* +++++++++++++++++++++++++++++ */
.nav1 a {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
text-decoration: none;
font-weight: bold;
height:12px;
color:#fff;
background-color: #979799;
padding-left: 20px;
padding-right: auto;
}

.nav1 a:hover {
	color:#73c9e6;
	background-color:#979799;
}
/* +++++++++++++++++++++++++++++ */

ul#navigation{
list-style-type:none;
margin-left:0;
padding-left:0;
}
ul#navigation li{
margin-bottom:0.1em;
}
ul#navigation li a{
background-color:#979799;
display:block;
padding:0.4em;
width:140px;
}
ul#navigation li a:hover{
background:#979799;
}
/* +++++++++++++++++++++++++++++ */


a {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11pt; text-decoration: underline;
font-weight: normal;}

a.link:link { color: #666666; }
a.link:visited { color: #666666; }
a.link:hover { color: #73c9e6; }
a.link:active { color: #73c9e6; }


a.linkin:link { color: #333333; font-size: 11pt; font-weight: bold; text-decoration: none}
a.linkin:visited { color: #73c9e6; font-size: 11pt; font-weight: bold; text-decoration: none}
a.linkin:hover { color: #73c9e6; font-size: 11pt; font-weight: bold; text-decoration: none}
a.linkin:active { color: #333333; font-size: 11pt; font-weight: bold; text-decoration: none}

/* +++++++++++++++++++++++++++++ */

.footer {
	width:800px;
	height:20px;
	background-image:url(../img_all/over_all/footer.gif);
	background-repeat:no-repeat;
	margin:0 auto 0 auto;
	padding-top: 4;
	clear:both;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
}

/* von Bootstrap */

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  vertical-align: top;
}


/*  besser */

.table th, .table td {vertical-align: top;}

/*  -------------------------------------- */

/* Original */

nav.navigation > ul > li > .submenu > ul > li.archive:hover {
	border: 2px solid transparent !important;
}

nav.navigation > ul > li.has-submenu > .submenu > ul > li.special {
	background: #ededed;
}

nav.navigation > ul > li.has-submenu > .submenu > ul > li.special a {
	color: #AD1921;
}

/* kürzer */

.navigation .archive:hover {
	border: 2px solid transparent !important;
}

.navigation .special {
	background: #ededed;
}

.navigation .special a {
	color: #AD1921;
}

/*  ------------------ */
/*  Da fehlt was! */
.mass_order_link:hover,
.e_mail_link:hover,
.wishlist_link:hover {
	text-decoration:none
}

/*  Viel besser! */
.mass_order_link:hover, .mass_order_link:focus,
.e_mail_link:hover, .e_mail_link:focus,
.wishlist_link:hover, .wishlist_link:focus {
	text-decoration:none
}

/*  -------------------- */
/*  Ein anderer Name wäre angebracht */
.product-view .product-shop>.table-bordered {
	border:0
}

/*  -------------------- */

.paragraphToList p {
	display: list-item;
	color: #000;
	margin-left: 10px;
}

/*  -------------------- */

ul.dynatree-container > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li .dynatree-node {
        padding-left: 110px;
}


/*  -------------------- */
html.ng-scope body.ui-layout-container div#dialog.dialog-frame section.dialog-frame-body section.content section#dialogBody form#balanceOptionsForm.stform fieldset#morebalanceoptions ul li label
{
vertical-align: top;
display: inline-block;
margin-left: 25px;
width: 250px;
}


/*  -------------------- */

#middleStatisticChart {
    margin-top: 36px;
    height: 90%;
    /*Bei Änderung der Datei bitte darauf achten, dass die width nicht mit 50% überschrieben wird.
    Ich korrigiere diesen Wert mittlerweile zum 4. Mal auf 48% */
    width: 100%;
}

/*  -------------------- */

html body div.project-body section.project-main #project-content .project-article,
html body div.project-body section.project-main #project-content .project-service_bar {

}

/*  ------ Unbekannte Selektoren führen zum Ignorieren der Regel ------- */

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;
}

/*  Unbekannte Eigenschaften werden einfach ignioriert

Der IE 8 liest diese Regel und ignoriert die zweite Eigenschaft, ein moderner Browser hingegen überschreibt mit der zweiten die erste Eigenschaft. */
.test {
	background: red;
	background-image: linear-gradient(to top, #a20000, #c60);
}

/*  -------------------- */
/*  -------------------- */

schlechter-code.html

<!--
	Sliderbox alt: Eine Liste mit EINEM Listenelement
	Darin wurde ein wahres SPAN-Feuerwerk gezündet, inkl. Flash-Integration
-->
<a href="#" class="teaserbox">
    <img src="img/content/teaserbild.jpg" alt="" width="345" height="195" />
    <span class="ts_txt">
		<span class="ts_col_l">
			<span class="broadcast"><!-- Kategorie --></span>
    <span class="topic"><strong><!-- Überschrift --></strong></span>
    <span class="desc"><!-- Kurztext --></span>
    </span>
    <span class="ts_col_r"><!-- Datum --><strong><!-- Uhrzeit --></strong> </span>
    </span>
</a>


<!--
	Sliderbox neu: Ein Vorschlag
	Semantische Auszeichnungen und pro Slideritem ein Listenelement
-->
<li class="teaserbox">
    <a href="#" class="teaserbox">
        <img src="img/content/teaserbild.jpg" alt="" width="345" height="195" />
    </a>
    <h3>
        <!-- Kategorie -->
    </h3>
    <!-- .broadcast kann wegfallen -->
    <h4>
        <!-- Überschrift -->
    </h4>
    <!-- .topic kann wegfallen -->
    <p>
        <!-- Kurztext -->
    </p>
    <!-- .desc kann wegfallen -->
    <div class="ts_col_r">
        <!-- Datum --><strong><!-- Uhrzeit --></strong> </div>
</li>

<!-- ========================================  -->

<!-- It is not unrealistic, that an enterprise CMS or ASP.NET would produce such a link -->

<div role="link" tabindex="0" data-class="link" onclick="window.location.href='http://google.com'" aria-label="link to Google">Google</div>

<!-- and fancy with bootstrap-bullshit -->

<div role="link" tabindex="0" data-class="link" onclick="window.location.href='http://google.com'" aria-label="link to Google"><i class="icon-link"></i>Google</div>


<div role="link" tabindex="0" data-class="link" onclick="window.location.href='http://google.com'">
    Google
</div>

<a href="http://google.com">Google</a>

<!-- ========================================  -->

<section id="amateur-tv" class="chapter left">
    <div class="content">
        <div class="inner">
            <div class="headline-container">
                <h3 class="headline">Zwischen Traumtor</h3>
            </div>
            <div class="headline-container">
                <h3 class="headline">und Chancentod:</h3>
            </div>
            <div class="headline-container">
                <h3 class="headline">Die Mediathek!</h3>
            </div>
        </div>
    </div>
</section>

<!--  http://dasneue.fussball.de/ -->

<!-- ========================================  -->
<!--  Button from hell -->

<div tabindex="0" class="button-silver" role="button" aria-pressed="false"></div>

<!-- ========================================  -->

<div style="padding: 10px 30px 30px 30px">
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Tipps von unseren Experten gibt’s gratis!</h5>
    Das richtige Werbemittel für Ihren Zweck zu finden ist mit unseren Experten kein Problem. Wir beraten Sie vom ersten Entwurf bis zum fertigen Druckprodukt. Und einen Kaffee dazu gibt’s selbstverständlich auch.

    <hr>
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Welches Produkt passt zu Ihnen?</h5>
    Flyer, Image-Broschüre, Poster oder doch lieber ein paar auffällige Werbegeschenke? Wir helfen Ihnen, genau das Werbemittel zu finden, das zu Ihnen passt und den bestmöglichen Erfolg für Ihr Unternehmen erzielt.

    <hr>
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Persönliche Beratung und dann: Einfach günstig drucken</h5>
    Was uns ganz wichtig ist: Wir beraten Sie ganz persönlich live vor Ort, bis Ihr Produkt genau Ihren Vorstellungen entspricht – und dann drucken Sie einfach online: Extrem schnell und unglaublich günstig.

    <hr>
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Layout-Service &amp; Expertentipps: Drucksachen gestalten lassen</h5>
    Auf Wunsch entwerfen unsere Grafiker Ihr Wunschdesign komplett nach Ihren Vorstellungen und sprechen jeden Entwicklungsschritt mit Ihnen ab. Entweder zum Festpreis oder als individuelles Angebot. <a href="/de/content/index/open/id/4703/">Mehr erfahren</a>

    <hr>
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Hilfe bei der Druckdatenerstellung</h5>
    Sie möchten etwas drucken lassen, sind sich aber unsicher, ob das Format passt oder ob die Druckdaten stimmen? Kommen Sie vorbei, wir helfen gerne – und machen wirklich jede Datei druckfähig.

</div>


<!-- ========================================  -->
<div style="padding: 10px 30px 30px 30px">
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Tipps von unseren Experten gibt’s gratis!</h5>
    Das richtige Werbemittel für Ihren Zweck zu finden ist mit unseren Experten kein Problem. Wir beraten Sie vom ersten Entwurf bis zum fertigen Druckprodukt. Und einen Kaffee dazu gibt’s selbstverständlich auch.

    <hr>
    <h5 style="font-size:16px; line-height: 20px; font-weight:700; margin: 0px; padding-bottom: 4px; color: #666666;">Welches Produkt passt zu Ihnen?</h5>
    Flyer, Image-Broschüre, Poster oder doch lieber ein paar auffällige Werbegeschenke? Wir helfen Ihnen, genau das Werbemittel zu finden, das zu Ihnen passt und den bestmöglichen Erfolg für Ihr Unternehmen erzielt.

</div>

<!-- ========================================  -->

<div class="paragraphToList">
    <p>Das ist ein Absatz.</p>
    <p>Aber er wird - wie die anderen - als Listenelement visualisiert.</p>
    <p>Schon wieder ein Absatz.</p>
    <p>Sieht aus wie ein Listenelement, ist es aber nicht.</p>
</div>

<!-- ========================================  -->
<!--  Warum nicht einfach einen Button nehmen? -->

<p class="lauter-tolle-klassen" tabindex="1" role="button" aria-pressed="false">
    <span class="super-spezialklasse">Unterseiten:</span>
</p>

<a tabindex="1" title="Bereich schließen" aria-pressed="false" role="button" class="tausend-tolle-klassen">
    <span class="accessibility-klasse">Bereich schließen</span>
</a>


<!-- ========================================  -->

<dl>
    <dd>
        <ul>
            <li>
                Suchergebnis
            </li>
        </ul>
    </dd>
</dl>

<!-- ========================================  -->

<div class="button" role="button" tabindex="0" id="clickListener" aria-hidden="true">Wut?</div>