• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Code Review vom CSS meiner Seite

X

Xeno

Mitglied
Liebe Community

Vor schon längerer Zeit (paar MOnate) habe ich, bestens unterstützt durch Euch, meine HomepageMichael Ritter erstellt. Da ich dann aus beruflichen Gründen nicht mehr viel Zeit hatte, musste ich die Weiterentwicklung unterbrechen. Jetzt möchte ich weiterfahren. Ich möchte deshalb fragen, ob Ihr fachliche Bemerkungen insbesondere zum CSS meiner Seite habt. Der Code lautet:

Code: 
*                         { 
                        margin:0; 
                        padding:0;
                                        }

html                    {
                        background-color:#B4DC00;
                        height:100%; 
                        }
                                
body                     { 
                        background-color:#FFFFFF; 
                        font-family:Verdana, sans-serif;
                        margin:20px auto; 
                        width:960px;  
                        min-height:95%; 
                                        }                            
                                    
p                       { 
                        margin:0 20px 20px 20px;
                        padding-bottom:10px;  
                        }

table                    { 
                        margin:0 20px 20px 20px;
                        border:none;
                        border-collapse:collapse;   
                        }
            
td                        {
                        padding:4px;
                        padding-right:10px; 
                        text-align:left;  
                        }
                        
th                        {
                        text-align:left;
                        padding:4px; 
                        }

h1, h2, h3             { 
                        margin:0 20px 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:120%; 
                                        }
                                
h2                     { 
                        font-size: 115%; 
                                        }
                                
h3                     { 
                        font-size: 110%; 
                                        }
                                        
ul                        {    
                        padding-bottom:20px;                         
                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                        
img                    {
                        text-align:center;
                        border:0;        
                                        }
                                        
a:link                 { 
                        color:#0000FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FF0000; 
                                        }
                                
span                     { 
                        color:#0000FF; 
                                        }
                                
.linkliste li         { 
                        margin:0 0 0 37.5px; 
                                        }
                                        
.linkliste             {
                        margin:0 0 20px 0;
                        }
                                        
                                
#navi                 { 
                        list-style-type:none;
                        padding-bottom:0;   
                        float:left; 
                        width:100%;  
                        background-color:#EAF7A8;
                        margin:0 0 20px 0;
                        border-radius:10px;
                        box-shadow:3px 3px 8px #777777;
                                        }
                                
#navi li             {
                        float:left;                        
                        position:relative;  
                        display:block;
                        line-height:1.5;  
                        width:110px;
                        text-align:center;
                        font-size:15px;
                                        }

#navi span             { 
                        background-color:#FFFF00;
                                        }
                                                                                            
#navi li a, span     { 
                        padding:10px;
                        display:block; 
                        background-color:#EAF7A8;
                        border-radius:10px;    
                                        }

#navi li a:hover     { 
                        color:#FF0000;
                        background-color:#FFD700;
                        border-radius:0;   
                                        }
                                        
#navi li:first-child a:hover {
                        border-radius:10px 0 0 10px;
                        }
                                        
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto;
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi li ul li     { 
                        display:block;
                        text-align:left; 
                        width:100%;
                        width:110px;  
                        font-size:11.5px;
                        text-align:left;
                        border-radius:0;
                                        }                                        
                                        
#navi li ul li a    {
                        border-radius:0;     
                        }
                        
#navi li ul li:last-child a {
                        border-radius:0 0 10px 10px;
                        }
                        
#navi li ul li:first-child a:hover {
                        border-radius:0;
                        }                                
                                        
#hauptbild            {
                        float:left;
                        margin-bottom:5px;  
                        }                                        
                                
#anfang                {
                        margin-bottom:20px;
                        font-size:200%;    
                        }
                        
#header                {
                        padding:20px 0 60px 0;
                        margin-bottom:10px;                         
                        background-color:#B4DC00;
                        }

#content                {
                        margin-bottom: 10px;
                        min-height:960px; 
                        }

#footer                {
                        padding:10px 0 0 0;
                        background-color:#B4DC00;
                        }

#footer-content    {
                        background-color:#EAF7A8;
                        height: 35px;
                        margin:0 0 20px 0;
                        padding-left: 20px;
                        line-height:280%; 
                        font-size:15px;
                        border-radius:10px;
                        box-shadow:3px 3px 8px #777777;
                        }


Da ich Laie bin, ist der Code sicher noch nicht das Gelbe vom Ei. In rein formaler Hinsicht (Validierung) sollte er zwar fehlerlos sein. Der Sinn des Reviews ist die Überprüfung des Codes hinsichtlich Ausbaubarkeit, Vermeidung von Redundanzen, Übersichtlichkeit und Vermeidung offenkundiger gestalterischer Mängel. Geprüft habe ich meine Seite in den Browsern IE 7, IE 8, IE 9, FF und Chrome. Im IE 7 können nicht ganz alle Effekte gezeigt werden (abgerundete Ecken in der Navigation und im Footer), was ich aber in Kauf nehme.

Wenn offenkundige Probleme im HTML entdeckt werden, bin ich natürlich auch froh um Meldung.

Ich bin für Anregungen aller Art dankbar!

Lg Xeno
 
Werbung:
1. bei einer navi li ul li hast du zweimal width drin:

#navi li ul li {
display:block;
text-align:left;
width:100%;
width:110px;
font-size:11.5px;
text-align:left;
border-radius:0;
}
Zum Vergrößern anklicken....

2. bei der Seite Vereine hast du bei content das "t" vergessen, deswegen verschiebt sich unten der footer auch.

HTML: 
<div id="conten"> <h1> Zu dieser Seite </h1> <p> Diese Seite dient dazu meine Tätigkeiten im Vereinswesen zu dokumentieren.

3. Du hast auf allen Seiten einen unbenutzten Style-block drin. Da du ja die CSS-Datei ausgelagert hast, ist der unnötig.

HTML: 
<style type="text/css"> </style>

4. Unten im Footer ist der p-Tag ja noch mal mit einer ID versehen. Das könntest du dir aber sparen und das p innerhalb des Footer Div Containers ansprechen.

Code: 
#footer p {
      inhalt
}

anstatt

#footer-content    {
          inhalt             
               }

5. Du verwendest <h1> mehrmals auf der Startseite. Ich überlass anderen mal die Beurteilung, ob das gut ist oder nicht. In Büchern und im Internet findet man oft die vorherrschende These,
dass man den <h1> Tag nur einmal pro Seite nehmen soll.

So, das fiel mir mal als erstes auf, andere Punkte dürfen die anderen noch schreiben.

Über Design lasse ich mich mal nicht aus, denn Geschmäcker sind ja bekanntlich verschieden.:wink:
 
Zuletzt bearbeitet:
Lieber Zejo

Schon jetzt ganz herzlichen Dank für das adäquate Feedback! Ich werde Deine Punkte Schritt für Schritt abarbeiten. Könnte aber übermorgen werden. Morgen muss ich noch meine SuS quälen gehen (SuS = Schülerinnen und Schüler).

Lg Xeno
 
Werbung:
Zejo schrieb:
5. Du verwendest <h1> mehrmals auf der Startseite. Ich überlass anderen mal die Beurteilung, ob das gut ist oder nicht. In Büchern und im Internet findet man oft die vorherrschende These,
dass man den <h1> Tag nur einmal pro Seite nehmen soll.
Zum Vergrößern anklicken....

Das war einmal.

Google und das W3C sind inzwischen anderer Meinung und schreiben ausdrücklich das man das <h1> auch mehrfach verwenden kann sofern es semantisch korrkt ist.

Gruss
Elroy
 
Werbung:
Zejo schrieb:
3. Du hast auf allen Seiten einen unbenutzten Style-block drin. Da du ja die CSS-Datei ausgelagert hast, ist der unnötig.

HTML: 
<style type="text/css"> </style>
Zum Vergrößern anklicken....

Ja, richtig. Ich hab' mir dabei gedacht, wenn ich in ferner Zukunft mal doch noch (auch) CSS innerhalb des HTML-Dokuments schreibe (ist ja nicht per se verboten und wäre bei einer erheblichen Erweiterung des Projekts denkbar), mache ich das mal hin. Braucht ja nahezu null Speicherplatz. Würdest Du es aus Prinzip wegmachen?

Lg Xeno
 
Zejo schrieb:
4. Unten im Footer ist der p-Tag ja noch mal mit einer ID versehen. Das könntest du dir aber sparen und das p innerhalb des Footer Div Containers ansprechen.

Code: 
#footer p {
      inhalt
}

anstatt

#footer-content    {
          inhalt             
               }
Zum Vergrößern anklicken....

Richtig, das ist einfacher. Ich hab's geändert.

Lg Xeno
 
Xeno schrieb:
Ja, richtig. Ich hab' mir dabei gedacht, wenn ich in ferner Zukunft mal doch noch (auch) CSS innerhalb des HTML-Dokuments schreibe (ist ja nicht per se verboten und wäre bei einer erheblichen Erweiterung des Projekts denkbar), mache ich das mal hin. Braucht ja nahezu null Speicherplatz. Würdest Du es aus Prinzip wegmachen?

Lg Xeno
Zum Vergrößern anklicken....

Puh, da bin ich echt überfragt, bisher kannte ich noch keinen, der das mal "vorsorglich" eingefügt hat, im Falle, dass er es noch braucht.

Also ich persönlich würde es nur da einfügen, wo es auch gebraucht wird. Aber vielleicht haben noch andere Meinungen dazu.
 
Werbung:
Zejo schrieb:
5. Du verwendest <h1> mehrmals auf der Startseite. Ich überlass anderen mal die Beurteilung, ob das gut ist oder nicht. In Büchern und im Internet findet man oft die vorherrschende These,
dass man den <h1> Tag nur einmal pro Seite nehmen soll.
Zum Vergrößern anklicken....

Ich habe jetzt bezüglich der Überschriften-Tags folgenden Kompromiss gewählt: Das mehrmalige Verwenden derselben Hierarchiestufe auf derselben Seite habe ich weiterhin zugelassen, nicht aber das Überspringen von Hierarchiestufen (also etwa <h1> und dann gleich <h3>). Das Gesamtkunstwerk gibt's weiterhin hier zu sehen: Michael Ritter

Lg Xeno
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben