Tutorial HTML, CSS u. PHP - Forum

[drPHIP132]

hallo leute.
habe endlich meine homepage fertig gekriegt. (design)

nun würde ich euch gerne fragen was ihr davon haltet.
PS: farbverlauf im google chrome browser kann/könnte nicht gehen :/


Meine HP

[lauras]

Ui.

Sorry wenn ich das jetzt so direkt sage, aber das tut weh - weiße Schrift auf blauem Grund ist nicht so nett zu den Augen ;) Der Schatten hinter der Schrift macht es nicht besser (den ich übrigens nie für normale Schrift verwenden würde).

LG

[drPHIP132]

du meinst den lorem ipsum text in section?
jo ich schaue mal was man da machen kann.

PS: glaube sarkkan sagte mir das mal, ich soll text-shadow aus optischen gründen überall verwenden, aber das sieht sicherlich jeder anders

aber ist sonst ok? weil ich bin erhlich gesagt voll stolz darauf und wüsste gerne ob zurecht.

MfG Phip

[drPHIP132]

habe nochmal überarbeitet, wie findest du/ihr es nun?

Klicke nicht hier xD

[lauras]

Hm, naja, ist Ansichtssache. Ich persönlich finde es nicht schön ;) (Auch nich nach Überarbeitung, wenn auch besser lesbar).
Ich für mich persönlich mache das fertige Design immer erst, wenn ich schon Inhalt hab - besser vorstellbar.

[drPHIP132]

:/

[revils]

also ich persönlich finds nicht schlecht..hab da schon viel schlimmere gesehen.
Ich finde man sieht seine Verbesserungen

[drPHIP132]

dankeschön

[Flow Snow]

Gefällt mri absolut gar nicht, sieht aus wie eine Seite von 1995.

Warum du jetzt auf Schatten der eine Zeile im QUellcode ausmacht stolz bist kann ich nicht nachvollziehen

Was bitte ist "eine Header"?!?

Deine <h1>-Überschrift gehört in den (bzw. die ) Header und nicht über den Inhalt, da gehört für gewöhnlich (und in deinem Beispiel auf jeden Fall) eine <h2>-Überschrift hin.

Am Schlimmsten sind in meinen Agen die Kontraste, du kannst nicht ganz dunkle Boxen machen und dann oben und unten weiße Strichlein.

Interessant wird es jetzt herauszufinden warum in meinem Browser (Google Chrome) in der Navi am ersten Listenpunkt das Aufzählungszeichen fehlt

Ich finde ja auch das für gewöhnlich Text immer noch in ein Inline Element gehört aber ich glaube das ist Ansichtssache (siehe Footer)

[Sören]

Das Design ist meiner Meinung nach gar nicht schlecht, also meinen Augen tuts nicht weh und die Kontraste find ich auch nicht schlimm.

Die Schrift im Footer sieht mittig oder nach rechts gepackt wahrscheinlich besser aus. Wenn es links bleiben soll, würd ich die Schriftgröße verkleinern, damit der Text nicht breiter ist, als die linke Spalte.

Die Schriftart wirkt nicht sonderlich seriös. Solltest eine andere nehmen.

Die Navigationspunkte sollten etwas anderes zur Abtrennung bekommen oder die Kästchen jeweils gleiche Abstände zum linken und rechten Menüpunkt haben. (@Flow Snow: das beim ersten Listenpunkt das Aufzählungszeichen fehlt ist beabsichtigt)

Zur Technik:
Der Quellcode ist etwas gewöhnungsbedürftig eingerückt, zumindest den CSS-Code solltest du gleichmäßig einrücken, dann kann mans sehr viel leichter lesen.

Den Div am Ende fürs Clearen kannst du dir sparen und im Footer clearen.
Den top-Div kannst dir auch sparen, weise doch einfach dem body den Hintergrund zu.

Der Validator spuckt auch nen Fehler aus:http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.p-schuster.sarkkan.de%2F
Solltest du beheben.

[Flow Snow]

Also ich würde ja beabsichtigter Weise auch alle anderen Listenpunkte weg lassen, die passen da absolut nicht hin.

Ich habe hier mal 3 Varianten deines CSS Codes zusammengesetzt:

Speicheraufwendigste Methode (268 Zeilen; 4,11 KB):

Code: Alles auswählen

/*--------------ELEMENTE------------------------------*/




body    {
            background-color: #447BD4;
            margin: 0;
            padding: 0;
            text-align: center;
        }
       
       



header, nav, section, footer {
                                 display: block;
                             }       




header {
           margin: 40px 0;
           font-size: 22px;
           padding: 1px 10px;  /*borderline klebt nicht am hacken vom 'G'*/
           border-bottom: 1px solid #fff;
       }






nav {
        line-height: 30px;
        background-color: #282828;
        padding: 2px 70px;
        font-size: 18px;
    }


         
         


         
        nav ul {
                   margin: 0 auto;
                   padding: 0;                   
               }
       


       
       
        nav li {
                   margin: 0 30px;
                   padding: 0;
                   list-style: square;
                   float: left;                 
               }
               
                     



        nav a {
                  display: block;
              }







        nav li:first-child {
                               list-style: none;
                                margin-left: 40px;
                           }






section {
            background-color: #282828;
            float: right;
            padding: 5px 5px;
            width: 72%;
            min-height: 600px;
            margin: 50px 0;
        }








footer {
           font-size: 18px;
           padding: 0 30px;
           border-top: 1px solid #fff;
       }







               
a:link, a:visited, a:active {
                                color: #ffffff;
                                text-decoration: none;
                            }



                           
a:hover, a:focus {
                     color: #447BD4;
                     text-decoration: underline;
                 }
 
 
       
       
/*-----------------------ID's--------------------------*/







#top     {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background: -moz-linear-gradient(#104E8B, #447BD4);
            background: -o-linear-gradient(#104E8B, #447BD4);
            background: linear-gradient(#104E8B, #447BD4);
            background: -webkit-gradient(linear, top, bottom, from(#104E8B), to(#447BD4));
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#104E8B, endColorstr=#447BD4);
            height: 600px;
            width: 100%;
            background-repeat: no-repeat;
        }

   
   



#seitenbereich {
                   text-align: left;
                   margin: 0 auto;
                   width: 900px;
                   font-family: Comic Sans MS;
                   font-size: 15px;
                   color: #fff;
                   text-shadow: 2px 2px 2px #282828;
               }


   
   



#sidebar {
             float: left;
             margin: 50px 0;
             width: 24%;
             padding: 5px 5px;
             background-color: #282828;
             min-height: 300px;
             color: #fff;
         }
         
   
   



#sidebar ul {
                margin: 15px 0;
                padding: 0;
                list-style: square;
            }






#sidebar li {
                margin: 5px 20px;
                padding: 0;
                word-wrap: break-word;
            }         






/*--------------------KLASSEN---------------------------*/







.schatten {
              box-shadow:0 0 10px #000;
          }







.rEcken {
            border-radius: 50%;
        }








.rEcken2 {
             border-radius: 8px
         }







.lClear {
            clear: left;
        }







.bothClear {
              clear: both;
           }


Mittelweg, gut lesbar, (129 Zeilen; 2,24 KB; am Besten geeignet):

Code: Alles auswählen

/* ELEMENTE */

body {
background-color: #447BD4;
margin: 0;
padding: 0;
text-align: center;
}

header, nav, section, footer {
  display: block;
}

header {
  margin: 40px 0;
  font-size: 22px;
  padding: 1px 10px;  /*borderline klebt nicht am hacken vom 'G'*/
  border-bottom: 1px solid #fff;
}

nav {
  line-height: 30px;
  background-color: #282828;
  padding: 2px 70px;
  font-size: 18px;
}

nav ul {
  margin: 0 auto;
  padding: 0;
}

nav li {
  margin: 0 30px;
  padding: 0;
  list-style: square;
  float: left;
}

nav li:first-child {
  list-style: none;
  margin-left: 40px;
}

nav a { display: block; }

section {
  background-color: #282828;
  float: right;
  padding: 5px 5px;
  width: 72%;
  min-height: 600px;
  margin: 50px 0;
}

footer {
  font-size: 18px;
  padding: 0 30px;
  border-top: 1px solid #fff;
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  color: #447BD4;
  text-decoration: underline;
}

/* IDs */

#top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: -moz-linear-gradient(#104E8B, #447BD4);
  background: -o-linear-gradient(#104E8B, #447BD4);
  background: linear-gradient(#104E8B, #447BD4);
  background: -webkit-gradient(linear, top, bottom, from(#104E8B), to(#447BD4));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#104E8B, endColorstr=#447BD4);
  height: 600px;
  width: 100%;
  background-repeat: no-repeat;
}

#seitenbereich {
  text-align: left;
  margin: 0 auto;
  width: 900px;
  font-family: Comic Sans MS;
  font-size: 15px;
  color: #fff;
  text-shadow: 2px 2px 2px #282828;
}

#sidebar {
  float: left;
  margin: 50px 0;
  width: 24%;
  padding: 5px 5px;
  background-color: #282828;
  min-height: 300px;
  color: #fff;
}

#sidebar ul {
  margin: 15px 0;
  padding: 0;
  list-style: square;
}

#sidebar li {
  margin: 5px 20px;
  padding: 0;
  word-wrap: break-word;
}

/* KLASSEN */

.schatten { box-shadow:0 0 10px #000; }
.rEcken { border-radius: 50%; }
.rEcken2   { border-radius: 8px }
.lClear    { clear: left; }
.bothClear { clear: both; }


Sauhaufen (1 Zeile; 2,04 KB; Schlechtester Weg, nützlich bei riesigen Projekten mit mehreren 100 Abfragen pro Sekunde):

Code: Alles auswählen

/*--------------ELEMENTE------------------------------*/ body { background-color: #447BD4; margin: 0; padding: 0; text-align: center; } header, nav, section, footer { display: block; } header { margin: 40px 0; font-size: 22px; padding: 1px 10px; /*borderline klebt nicht am hacken vom 'G'*/ border-bottom: 1px solid #fff; } nav { line-height: 30px; background-color: #282828; padding: 2px 70px; font-size: 18px; } nav ul { margin: 0 auto; padding: 0; } nav li { margin: 0 30px; padding: 0; list-style: square; float: left; } nav a { display: block; } nav li:first-child { list-style: none; margin-left: 40px; } section { background-color: #282828; float: right; padding: 5px 5px; width: 72%; min-height: 600px; margin: 50px 0; } footer { font-size: 18px; padding: 0 30px; border-top: 1px solid #fff; } a:link, a:visited, a:active { color: #ffffff; text-decoration: none; } a:hover, a:focus { color: #447BD4; text-decoration: underline; } /*-----------------------ID's--------------------------*/ #top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: -moz-linear-gradient(#104E8B, #447BD4); background: -o-linear-gradient(#104E8B, #447BD4); background: linear-gradient(#104E8B, #447BD4); background: -webkit-gradient(linear, top, bottom, from(#104E8B), to(#447BD4)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#104E8B, endColorstr=#447BD4); height: 600px; width: 100%; background-repeat: no-repeat; } #seitenbereich { text-align: left; margin: 0 auto; width: 900px; font-family: Comic Sans MS; font-size: 15px; color: #fff; text-shadow: 2px 2px 2px #282828; } #sidebar { float: left; margin: 50px 0; width: 24%; padding: 5px 5px; background-color: #282828; min-height: 300px; color: #fff; } #sidebar ul { margin: 15px 0; padding: 0; list-style: square; } #sidebar li { margin: 5px 20px; padding: 0; word-wrap: break-word; } /*--------------------KLASSEN---------------------------*/ .schatten { box-shadow:0 0 10px #000; } .rEcken { border-radius: 50%; } .rEcken2 { border-radius: 8px } .lClear { clear: left; } .bothClear { clear: both; }


Nur um mal aufzuzeigen was für Möglichkeiten es gibt, natürlich kriegt man die Datei auch 2 Gigabyte groß ;)

[Sören]

Ein Sauhaufen mit Kommentaren? xD

[Flow Snow]

Cool wa?

Google baut auch diese Sauhaufen und da sind teils auch Kommentare versateckt

[drPHIP132]

@ flow snow:

ha keine ahnung haste. sag mir mal wie man im jahre 1995 farbverläufe, runde ecken und schatten mit css3 gemacht haben soll. -.-

was eine header ist? kann ich dir sagen.! nähmlich eine header. dumme frage -.-

is s****ß egal. man kann auch h6 nehmen kommt auf die definierte größe an.!!!

doch das kann ich sehr wohl, hast ja gesehen ich kanns.! (siehe meine seite)

weil das mit absicht so sein soll.!!!

junge ey.!!!! -.-



@ sören:

dankeschön (endlich mal wieder einer der ahnung hat)

ich mache schriftgröße kleiner

ich möchte junge/jugendliche leute ansprechen und keine alten säcke. also bleibt diese peppige coole schrift auch :')))))


@ flow snow:

nein die bleiben da das sieht so i.o aus.

[Sarkkan]

Meine Anmerkung/Frage/Antwort/...

@ flow snow:

ha keine ahnung haste. sag mir mal wie man im jahre 1995 farbverläufe, runde ecken und schatten mit css3 gemacht haben soll. -.-
Wenn man an sowas schon Gedacht hat, wurde das mit Bildern erledigt :/ Übrigens achte ich Flow Snow und finde das sie nicht gerade wenig Ahnung hat.

was eine header ist? kann ich dir sagen.! nähmlich eine header. dumme frage -.-
Header ist (genau wie die Deutsche Übersetzung Kopfbereich) Maskulin.. daher also DER/EIN Header.

is s****ß egal. man kann auch h6 nehmen kommt auf die definierte größe an.!!!
wowowowowow! Schon mal was von Suchmaschinenoptimierung gehört?? Oder dir überlegt was die Zahlen bedeuten? Je wichtiger eine ÜBerschrift ist, desto kleiner ist quasi die Ziffer. Und die wichtigste Überschrift einer Seite ist die erste Überschrif (<h1>). Sollte am besten auf allen Seiten gleich sein.

doch das kann ich sehr wohl, hast ja gesehen ich kanns.! (siehe meine seite)

weil das mit absicht so sein soll.!!!

junge ey.!!!! -.-
Falls du eben aufgepasst hast, erwähnt es schon mal: Sie ist ein Mädel


@ sören:
[...]
ich möchte junge/jugendliche leute ansprechen und keine alten säcke. also bleibt diese peppige coole schrift auch :')))))
Es gibt nichts billigeres als Comic Sans MS xD Mein Designer in der Agnetur hätte dir jetzt den nächstbesten Gegenstand in die Brust gerammt xDD
[...]