HpBk-TemplateWorld

CSS Code bereinigen

Navigation

Eigenen CSS-Code bereinigen

Einleitung
Wie oft hat man es schon erlebt. Es hat sich im Code irgendein Fehler eingeschlichen, den man aber selbst gar nicht findet. Oder der Code ist extrem unübersichtlich und sollte dringend einmal formatiert werden, damit er übersichtlich und aufgeräumt angezeigt werden kann. Dafür gibt es eine Lösung!

Schwierigkeitsstufe: Anfänger

Der Anbieter lautet:

www.CleanCSS.com

Auf dieser Homepage kann man seinen CSS Code einfügen und sowohl formatieren, als auch optimieren lassen. Ich demonstriere euch jetzt ein Vorher-Nachher-Beispiel.

Der Code sieht vor der Formatierung so aus:
#extraDiv1 { display:none; } #extraDiv2 { display:none; } #extraDiv3 { display:none; } #extraDiv4 { display:none; } #extraDiv5 { display:none; } #extraDiv6 { display:none; } #pre_header { display:none; } #post_header { display:none; } #pre_content { display:none; } #nav_heading { display:none; } #nav { display:none; } div.header { display:none; } h1#title { display:none; } h2#title span { display:none; } body { margin:0; padding:0; font-family:"Comic Sans MS", Arial; line-height:1.5em; color:#585858; font-size:12px; background-color:#fff; } a:link,a:visited { color:#34a908; text-decoration:none; } a:active,a:hover { color:#34a908; text-decoration:none; } h1 { font-size:22px; font-weight:bold; color:#77bc93; height:32px; padding:0; } h2 { margin-top:20px; font-size:16px; font-weight:bold; color:#56b81b; height:20px; padding:7px 0 0 35px; background: none no-repeat; } #templatemo_container { width:1000px; margin:auto; background-color:#fff; } #templatemo_topsection { float:left; width:1000px; height:245px; background:url(http://www.loaditup.de/files/517208.jpg) no-repeat; } #templatemo_title { width:985px; font-size:48px; font-family:"Agency FB", Arial; color:#FFFFFF; font-weight:bold; text-align:center; line-height:1.6em; padding:25px 0 0 15px; } .templatemo_topmenu { float:left; width:825px; margin-top:20px; padding:0 0 0 175px; } .templatemo_topmenu ul { list-style:none; padding:0; margin:0; } .templatemo_topmenu li { display:inline; } .templatemo_topmenu li a { float:left; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#963; width:90px; height:28px; padding:10px 2px 0 0; } .templatemo_topmenu li a:hover,.templatemo_topmenu li .current { color:#000; width:90px; background:url(http://www.loaditup.de/files/517209.jpg) no-repeat; } #templatemo_left_section { float:left; width:130px; height:794px; background:url(http://www.loaditup.de/files/517210.jpg) no-repeat; } #templatemo_right_section { float:left; width:130px; height:794px; background:url(http://www.loaditup.de/files/517211.jpg) no-repeat; } #templatemo_middle_section { float:left; width:680px; height:794px; overflow:auto; line-height:2em; padding:0 30px; text-align:justify; background:url(http://www.loaditup.de/files/517212.jpg) repeat-y; } #templatemo_middle_section img { float:right; padding-left:10px; } #templatemo_who_section { float:left; font-size:18px; color:#FFFFFF; background: none no-repeat; width:550px; height:30px; padding:33px 0 0 130px; font-weight:bold; } #templatemo_what_section { float:left; font-size:18px; color:#FFFFFF; background: none no-repeat; width:550px; height:30px; padding:27px 0 0 130px; font-weight:bold; } .templatemo_content_text { float:left; width:680px; padding:10px 0 20px; } #templatemo_footer_section { float:left; width:1000px; height:211px; background:url(http://www.loaditup.de/files/517207.jpg) no-repeat; } .templatemo_copyright { float:left; width:1000px; text-align:center; color:#1e693c; } .templatemo_contact_section { float:left; color:#FFFFFF; width:650px; padding:80px 0 0 200px; } .templatemo_contact_section img { float:right; } #content { position:absolute; left:50%; top:292px; margin-left:-330px; width:660px; padding:10px; color:#000000; font-size:13px; font-family:Arial; background-color:#transparent; background-image: none; border:0 solid #000000; height:800px; overflow:auto; } td[height="102"] { position:absolute; left:50%; margin-left:-384px; }

Man findet sich wahrlich nicht zurecht. Sowas kann häufig passieren, dass die Formatierung verloren geht. Jetzt füge ich diesen Wirr-Warr-Code auf der oben genannten Homepage ein und stelle die Komprimierung auf "Niedrig - höhere Lesbarkeit". Die Homepage ist wirklich empfehlenswert, probiert sie einfach mal aus!

Und der Code sieht nach der Formatierung so aus:

#extraDiv1
{
display:none;
}

#extraDiv2
{
display:none;
}

#extraDiv3
{
display:none;
}

#extraDiv4
{
display:none;
}

#extraDiv5
{
display:none;
}

#extraDiv6
{
display:none;
}

#pre_header
{
display:none;
}

#post_header
{
display:none;
}

#pre_content
{
display:none;
}

#nav_heading
{
display:none;
}

#nav
{
display:none;
}

div.header
{
display:none;
}

h1#title
{
display:none;
}

h2#title span
{
display:none;
}

body
{
margin:0;
padding:0;
font-family:"Comic Sans MS", Arial;
line-height:1.5em;
color:#585858;
font-size:12px;
background-color:#fff;
}

a:link,a:visited
{
color:#34a908;
text-decoration:none;
}

a:active,a:hover
{
color:#34a908;
text-decoration:none;
}

h1
{
font-size:22px;
font-weight:bold;
color:#77bc93;
height:32px;
padding:0;
}

h2
{
margin-top:20px;
font-size:16px;
font-weight:bold;
color:#56b81b;
height:20px;
padding:7px 0 0 35px;
background: none no-repeat;
}

#templatemo_container
{
width:1000px;
margin:auto;
background-color:#fff;
}

#templatemo_topsection
{
float:left;
width:1000px;
height:245px;
background:url(http://www.loaditup.de/files/517208.jpg) no-repeat;
}

#templatemo_title
{
width:985px;
font-size:48px;
font-family:"Agency FB", Arial;
color:#FFFFFF;
font-weight:bold;
text-align:center;
line-height:1.6em;
padding:25px 0 0 15px;
}

.templatemo_topmenu
{
float:left;
width:825px;
margin-top:20px;
padding:0 0 0 175px;
}

.templatemo_topmenu ul
{
list-style:none;
padding:0;
margin:0;
}

.templatemo_topmenu li
{
display:inline;
}

.templatemo_topmenu li a
{
float:left;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#963;
width:90px;
height:28px;
padding:10px 2px 0 0;
}

.templatemo_topmenu li a:hover,.templatemo_topmenu li .current
{
color:#000;
width:90px;
background:url(http://www.loaditup.de/files/517209.jpg) no-repeat;
}

#templatemo_left_section
{
float:left;
width:130px;
height:794px;
background:url(http://www.loaditup.de/files/517210.jpg) no-repeat;
}

#templatemo_right_section
{
float:left;
width:130px;
height:794px;
background:url(http://www.loaditup.de/files/517211.jpg) no-repeat;
}

#templatemo_middle_section
{
float:left;
width:680px;
height:794px;
overflow:auto;
line-height:2em;
padding:0 30px;
text-align:justify;
background:url(http://www.loaditup.de/files/517212.jpg) repeat-y;
}

#templatemo_middle_section img
{
float:right;
padding-left:10px;
}

#templatemo_who_section
{
float:left;
font-size:18px;
color:#FFFFFF;
background: none no-repeat;
width:550px;
height:30px;
padding:33px 0 0 130px;
font-weight:bold;
}

#templatemo_what_section
{
float:left;
font-size:18px;
color:#FFFFFF;
background: none no-repeat;
width:550px;
height:30px;
padding:27px 0 0 130px;
font-weight:bold;
}

.templatemo_content_text
{
float:left;
width:680px;
padding:10px 0 20px;
}

#templatemo_footer_section
{
float:left;
width:1000px;
height:211px;
background:url(http://www.loaditup.de/files/517207.jpg) no-repeat;
}

.templatemo_copyright
{
float:left;
width:1000px;
text-align:center;
color:#1e693c;
}

.templatemo_contact_section
{
float:left;
color:#FFFFFF;
width:650px;
padding:80px 0 0 200px;
}

.templatemo_contact_section img
{
float:right;
}

#content
{
position:absolute;
left:50%;
top:292px;
margin-left:-330px;
width:660px;
padding:10px;
color:#000000;
font-size:13px;
font-family:Arial;
background-color:#transparent;
background-image: none;
border:0 solid #000000;
height:800px;
overflow:auto;
}

td[height="102"]
{
position:absolute;
left:50%;
margin-left:-384px;
}

Fazit:
So schnell kann es also tatsächlich gehen. Code einfügen, die richtige Einstellung wählen und schon ist euer Code wieder schön übersichtlich gestaltet und perfekt lesbar.

Hat dir dieses Tutorial geholfen?
Um HpBk-TemplateWorld noch weiter zu optimieren, würde ich mich über ein Feedback von dir freuen. Hat bei diesem Tutorial alles geklappt? Gab es an irgendeiner Stelle Probleme oder lief alles perfekt? Über einen ernstgemeinten Kommentar freue ich mich sehr. Vielen Dank!

Kommentare zu dieser Seite: