CSS-Code verbessern?

[Tutorial-King]

Hallo.

Ich erstelle Video-Tutorials auf You Tube und möchte dazu eine kleine Website. Ich habe die nötigen Kentnisse daüfr, auch wenn ich in PHP besser bin als in CSS.

Meine Seite(Testphase): Tutorial-King

1. Was könnte man am Design noch "kundenfreundlicher" gestalten. Ich habe insgesamt auf vilee Grautöne zurück gegriffen, da ich keine kunter Bunte Seite möchte. Kritik ohne Ende erlaubt

2. Kann man meinen CSS Code kürzen? Verbessern? Bin für jeden Vorschlag dankbar.

*{
margin: 0;
padding: 0;
}

html{
font-family: sans-serif;
background: #585858;
}

div#wrapper{
width: 950px;
margin: 0 auto;
margin-top: 20px;
}

div#header{
background: #D8D8D8;
height: 70px;
width: 950px;
padding-top: 20px;
border-top-right-radius: 100px;
border-top-left-radius: 100px; 
-moz-border-radius-topright: 100px;  
-moz-border-radius-topleft: 100px; 
-webkit-border-top-right-radius: 100px;  
-webkit-border-top-left-radius: 100px;
}

div#header a{
text-decoration: none;
}

div#logo{
margin-left: 280px;
}

.small{
color: #555555;
font-size: 30px;
}

.big{
color: #000000;
font-size: 45px;
}

div#navi ul{
list-style: none;
}

#navi > ul > li{
float: left;
position: relative;
}

#navi ul li a{
color: #ffffff;
display: inline-block;
font-size: 15px;
font-weight: bold;
min-width: 165px;
text-align: center;
text-decoration: none;
background: #585858;
line-height: 36px;
padding: 0 35px;
}

#navi ul li a:hover{
background: #000000;
color: #ffffff;
}

#navi .has-sub:hover ul{
display: block;
}

#navi .has-sub ul{
display: none;
position: absolute;
top: 36px;
min-width: 100%;
text-align: center;
}

#navi .has-sub ul li{
text-align: center;
}

#navi .has-sub ul li a{
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}

.links{
border-left: 5px solid #D8D8D8;
}

.rechts{
border-right: 5px solid #D8D8D8;
}

div#ort{
height: 20px;
background: #D8D8D8;
width: 950px;
}

div#ort span{
 color: #000000;
 font-size: 11px;
 font-weight: bold;
 margin-right: 5px;
 float: right;
}

div#ort span a{
 color: #000000;
 margin-left: 2px;
}

div#content{
 height: 500px;
 background: #D8D8D8;
}

div#footer{
height: 90px;
margin-top: 1px;
background: #D8D8D8;
border-bottom-right-radius: 100px; 
border-bottom-left-radius: 100px; 
-moz-border-radius-bottomright: 100px; 
-moz-border-radius-bottomleft: 100px; 
-webkit-border-bottom-right-radius: 100px; 
-webkit-border-bottom-left-radius: 100px; 
}

div#footer span{
color: #555555;
font-size: 12px;
margin-left: 330px;
}

div#footer a{
color: #555555;
text-decoration: none;
font-size: 12px;
margin-left: 20px;
}

div#footer a:hover{
 text-decoration: underline;
 color: #000000;
}

 

[ge_fabian]

hallo :)

Also:
sicher kann man immer etwas verbessern, aber solange es geht, und in keinem Browser Probleme bereitet, ist doch alles in Ordnung ;)

Wenn du eine Beurteilung von deiner Website haben willst, kannst du auch einen entsprechenden Thread im Bereich Websitecheck machen!

Aber was ich grob sagen kann:
1. mir gefällt das Design garnicht (nicht angegriffen fühlen)
2. Du solltest es 'bunter' gestalten, wir sind ja nicht auf einer Beerdigung
3. Hintergründe/Thumbnails zum Thema (Tutorials) kommen bei sowas immer thematisch gut (Code-Hintergrund)(nicht übertreiben)

Wenn du genaueres haben willst, erstelle doch einen entsprechenden Thread, denn im Thema CSS ist er falsch.

 

[T4k3C4r3]

Css kannst du am besten Verbessern indem du es strukturierst. Ich habe schon oft den Ausdruck "dreckiger Code" im Zusammenhang mit CSS gehört. Daher ist es annehmbar, dass dieser Code nicht leicht zu strukturien ist. Es gibt aber doch einige Tricks dafür. Dazu Googlest du aber am besten mal.

Was deine Website angeht, würde ich dir raten eine besser Farbauswahl zu treffen.

Grüße

 

[Tronjer]

Die Seite sieht nicht unbedingt schön aus, aber ebenso wie Programmierung will auch Design gelernt sein. ;)

Was die Kürzung des Codes betrifft: Redundanzen auflösen, und statt div#id kannst du auch einfach #id schreiben.

 

[Cheffchen]

Hallo,

ja stimmt, schön ist anders, als erstes grundgerüst/skize geht das ja.

#content dürf keine feste höhe haben, wirst ja beiträge haben die mehr platz brauchen.
Wenn css3 dann vielleicht auch an die denken die das nicht sehen, also PIE.htc, vielleicht.

mehr kann man ja bei dem stand noch nicht sagen.

Cheffchen