CSS-Datei verbessern

Status
Nicht offen für weitere Antworten.
Noch zwei kleine Tipps: Zwischen Eigenschaft und Wert sollte kein Abstand sein, damit haben einige ältere Browser Probleme. (Ausserdem sparst du so auch noch ein paar Byte. ;)) Ausserdem kannst du bei Angaben wie 0px die Einheit weglassen – 0 Pixel sind genausoviel wie 0 Zentimeter oder 0 Inch.
 
Super, danke! Die CSS-Datei is jetzt nur mehr halb so groß :)

Code:
 /* BODY */
 
 body { background-color:#506173; font-family:Arial, Sans-Serif; font-size:12px; color: #000000; text-align:center; vertical-align:top; }
 
 /* UEBERSCHRIFTEN */
 
 h2 { font-weight:bold; }
 
 /* PSEUDOFORMATE */
 
 a:link, a:visited { color:#669a0a; text-decoration:none; }
 
 
 .menue, .copyright_left, .copyright_right a:link { color:#000000; text-decoration:none; }
 
 .menue, .copyright_left, .copyright_right a:visited { color:#000000;text-decoration:none; }
 
 /* HAUPTTABELLE */
 
 .haupttabelle { width:798px; padding:0; vertical-align:top; border-width:0; margin:0; background-color:#617381; position:relative; margin-left:auto; margin-right:auto; }
 
 .logo { width:798px; height:120px; padding:0; position:relative; margin-left:auto; margin-right:auto; }
 
 /* MENUE */
 
 .menue { width:798px; height:15px; padding:0; position:relative; margin-left:auto; margin-right:auto; margin-bottom:0; z-index:10; cursor:pointer; display:block; }
 
 .menueit1, .menueitem2, .menueitem3, .menueitem4, .menueitem5, .menueitem6 { width:133px; background-repeat:no-repeat; float:left; text-align:center; padding:0; cursor:pointer; }
 
 .submenue1, .submenue2, .submenue3, .submenue4, .submenue5, .submenue6 { width:128px; background-repeat:no-repeat; text-align:left; padding-left:5px; }
 
 .menueitem1, .submenue1 { background-color:#275380; }
 
 .menueitem2, .submenue2 { background-color:#3571ad; }
 
 .menueitem3, .submenue3 { background-color:#669a0a; }
 
 .menueitem4, .submenue4 { background-color:#90b728; }
 
 .menueitem5, .submenue5 { background-color:#fe9b02; }
 
 .menueitem6, .submenue6 {	background-color:#ffc422; }
 
 ul { padding:0; margin:0; list-style:none; }
 	
 li { float:left; position:relative; width:133px; }
 	
 li ul { display:none; position:absolute; top:10px; left:0; }
 
 * html li ul { display:none; position:absolute; top:16px; left:0; }
    
 li > ul { top:auto; left:auto; }
 	
 li:hover ul, li.over ul { display:block; }
 
 /* BOXEN */
 
 .box { width:205px; font-size:11px; vertical-align:top; }
 
 .box_big { font-weight:bold; text-align:center; padding:0; vertical-align:top; width:590px; }
 
 .box_oben { font-size:12px; font-weight:bold; text-align:center; width:202px; height:25px; padding-top:4px; padding:0; background-image:url("../images/box_oben.gif"); background-repeat:no-repeat; position:relative; margin-left:auto; margin-right:auto; }
 
 .box_main { text-align:left; width:202px; min-height:80px; padding:0; background-image:url("../images/box_main.gif"); background-repeat:repeat-y; position:relative; margin-left:auto; margin-right:auto; }
 
 .box_main p { margin:0 -1px 0 20px; padding:-3px 1px 0 0; }
 
 
 .box_unten { text-align:center; font-weight:bold; color:#617381; padding:0; width:202px; height:23px; background-image:url("../images/box_unten.gif"); background-repeat:no-repeat; position:relative; margin-left:auto; margin-right:auto; margin-bottom:20px; }
 
 .box_big_oben { font-size:13px; font-weight:bold; text-align:center; padding:0; padding-top:4px; width:585px; height:25px; background-image:url("../images/box_big_above.gif"); background-repeat:no-repeat; position:relative; margin-left:auto; margin-right:auto; color:#669a0a; }
 
 .box_big_main { font-weight:normal; text-align:left; color:#000000; width:585px; height:752px; padding:0; vertical-align:top; background-image:url("../images/box_big_main.gif"); background-repeat:repeat-y; position:relative; margin-left:auto; margin-right:auto; }
 
 .box_big_main p { padding-top:10px; padding-left:45px; padding-right:40px; margin:0; }
 
 .box_big_unten { text-align:center; color:#617381; padding:0; width:585px; height:35px; padding:0; background-image:url("../images/box_big_bottom.gif"); background-repeat:no-repeat; position:relative; margin-left:auto; margin-right:auto; }
 
 .space { width:798px; height:10px; background-color:#617381; position:relative; margin-left:auto; margin-right:auto; padding:0; margin-top:0; }
 
 .copyright_left, .copyright_right { width:397px; height:15px; background-color:#617381; text-align:left; color:#000000; }
 
 .copyright_left p { padding-left:15px; }
 
 .copyright_right p { padding-right:15px; }
 
 .poll { padding-left:0; margin:0; }
 
 .poll form { margin:0; padding:0; padding-top:5px; }
 
 .gal_table { padding:5px; }
 
 .miniatur_left { padding:5px; float:left; }
 
 .kalender { padding-left:65px; }
 
 .kalender_text1, .kalender_text2 { padding:5px; float:left; }
 
 .sprechstunden { padding-left:65px; }
 
 .sprechstunden_text { padding:1px; float:left; }
 
 .box_main form { padding-left:20px; }
 
 .voting { margin-left:50px; }
 
 .minikalender { margin:0; padding:0; border-width:1px; border-style:dotted; border-color:#506173; text-align:center; position:relative; margin-left:auto; margin-right:auto; }
 
 .minikalender_head { background-color:#506173; text-align:left; font-weight:bold; margin:0; padding:0; border-width:0; }
 
 .minikalender_heute { width:15px; background-color:#90b728; color:#669a0a; margin:0; padding:0; border-width:0; font-weight:bold; text-align:center; }
 
 .minikalender_special { width:15px; color:#669a0a; margin:0; padding:0; border-width:0; font-weight:bold; text-align:center; }
 
 .profil { border-width:1px; border-style:dotted; border-color:#506173; margin:0; padding:0; text-align:left; }
 
 .profil_head { background-color:#506173; text-align:center; font-weight:bold; margin:0; padding:0; border-width:0; }
 
Noch nen ganz anderer Tipp:
Ich würde für die Subnavigation eine andere Textfarbe nehmen. Dieses Grün ist an vielen Stellen kaum bis gar nicht lesbar (Vielleicht weil bei .stuff zufällig die gleiche Hintergrundfarbe gewählt wurde ;) ).

Grüße
Heiko
 
Da hat sich (bei der Datei-Komprimierung) ein Fehler eingeschlichen ;-]

Code:
.menueitem1, .menueitem2, .menueitem3, .menueitem4, .menueitem5, .menueitem6 { width:133px; background-repeat:no-repeat; float:left; text-align:center; padding:0; cursor:pointer; }
 
Ich hab im XHTML-Forum mal einen tollen, selbstgebastelten CSS-Komprimierer gesehen. Leider finde ich ihn nicht mehr. :( Da konnte man sogar das Verhältnis von Lesbarkeit zu Dateigrösse selbst einstellen.
 
Status
Nicht offen für weitere Antworten.
Zurück