HpBk-TemplateWorld | Alles für dich.

CSS Code bereinigen

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:

<!-- HIER STEHT DER DESIGN CODE,ZUM BEISPIEL WIE BREIT DIE SEITE SEIN SOLL,
WELCHE ABSTÄNDE DAS DESIGN HAT USW. -->

#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:
Kommentar von:22.12.2011 um 17:17 (UTC)
kinggamer2012
kinggamer2012
Offline




Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 397886 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.