Tutorial HTML, CSS u. PHP - Forum

[NeoAramis]

Hallo

Möchte mein wiedereinmal neues Design vorstellen. Die Technik hat sich aber auch verändert. Gefällts euch?

Und ja, ich weiss, dass der Code nicht valide ist. Habe neue CSS3 Eigenschaften reingenommen und der Syntax-Highlighter hat so seine Tücken. Habe leider bis jetzt keinen anderen gefunden, der visuell so gut aussieht.

Danke für Euer Feedback!


--> http://web-technik.org/

[Sarkkan]

Als ich das erste mal auf deine Seite kam, dachte ich der Browser hätte nicht das komplette Design geladen.. nach mehrmaligen Nachladen musste ich also festellen, dass das das gesamte Design also war.
Die Seite ist wirklich sehr einfach gehalten^^

Dein benutztes CSS3, was du hier anpreist wird zudem nur bei den wenigstens Browsern funktionieren, die CSS3 können (:
Da hast du nicht besonders gut nach geforscht
Viele Browser können nämlich nicht mit Prozentualen Angaben umgehen ;) Naja, aber so schlimm ist das nicht^^ Das was du mit CSS3 gemacht hast ist eigentlich nix.. .__.

Außerdem verwendest du Mehrcode.. z.B einen wrapper, was das schwachsinnigste überhaupt ist, da er voll kommen überflüssig ist

[NeoAramis]

Ja das Design wurde sehr schlicht gehalten. Bin halt ein Fan von einfachen Design, so à la weniger ist mehr. Das ist momentan auch sehr gefragt. Aber bin trotzdem am herumtüfteln, da der Kopfbereich sowieso noch verändert wird.

Ich habe nicht gesagt, dass ich voll auf CSS3 gesetzt habe, nur dass der Code nicht valide ist weil er CSS3 Elemente hat ;)

Alte Browser ignoriere ich sowieso, da der Trend zu den neueren Browser in letzter Zeit extrem gestiegen ist, nicht nur dank HTML5.

Verstehe nicht was du am wrapper bemängelst, aber dieser ist in diesem Layout sehr wohl nötig.

[Sarkkan]

Man kann es mit dieser Philosophie aber auch irgendwo übertreiben =/

Naja.. er enthält ein CSS3 Element.. und das können viele neue Browser daher nicht erkennen, weil dessen Wert in Prozent angegeben wurde.
Der Firefox ist der einzige Browser, der border-radius: X% versteht (:
(Gerade noch mal ausprobiert Habe alle gängigen neuen Browser auf meinem Pc xP)

Und wie gesagt.. ich behaupte immer noch, dass der wrapper überflüssiger Mehrcode ist xD
Aber naja.. Mehrcode scheint dir im Allgemeinen ja jetzt nicht so wichtig zu sein, wenn ich den Rest deiner Seite begutachte^^

[Sören]

Mir gefällt das Design gut, auch wenn es schlicht ist.

Hast aber noch viel Text zu schreiben, an Inhalt ist ja erst ein kleiner Teil drauf.

[NeoAramis]

Man kann es mit dieser Philosophie aber auch irgendwo übertreiben =/

Naja.. er enthält ein CSS3 Element.. und das können viele neue Browser daher nicht erkennen, weil dessen Wert in Prozent angegeben wurde.
Der Firefox ist der einzige Browser, der border-radius: X% versteht (:
(Gerade noch mal ausprobiert Habe alle gängigen neuen Browser auf meinem Pc xP)

Und wie gesagt.. ich behaupte immer noch, dass der wrapper überflüssiger Mehrcode ist xD
Aber naja.. Mehrcode scheint dir im Allgemeinen ja jetzt nicht so wichtig zu sein, wenn ich den Rest deiner Seite begutachte^^

Das ist Ansichtssache, mir gefällt deine Website beispielsweise auch nicht und das sollte jetzt kein "von-der-Seite-Hieb" sein.

Dann werde ich den Wert in px angeben.

Bitte belehre mich kurz, warum der wrapper Mehrcode sein sollte? Was sollte der letzte Satz bedeuten?

Mir gefällt das Design gut, auch wenn es schlicht ist.

Hast aber noch viel Text zu schreiben, an Inhalt ist ja erst ein kleiner Teil drauf.

Danke schön, ja es ist halt einfach eine Zeitfrage, ich habe einfach immer zu viel vor, da entwickelt sich der Inhalt sehr langsam.

[Sarkkan]

Verwendet doch einfach das, was vorhanden ist.. =/
So beginnt jede meiner Seiten (oder so ähnlich):

Code: Alles auswählen

* { margin:0; padding:0; }
html {
    text-align: center;
    background-color: #FFFFCC;
    height: 101%;
}
body {
    margin: 0 auto;
    width: 80%;
    text-align: left;
    background-color: #9A5D26;
}

Dann ist der Body dein "Wrapper" womit du schon mal eine Div-Box weniger hast.
Zudem.. warum hast du um deine Navigation 2 Div-Boxen? O_o
Genau wie um deinen "Main-Content" und "branding"?

Code: Alles auswählen

#branding {
            height: auto;
            margin: 10px 0 10px 0;
            padding: 0 0 45px 0;
        }
       
        .branding {
            padding: 0 0 0 0;   
        }


Ich fasse zusammen.. wir erstellen eine automatisch hohe Box, die zu anderen Objekt außerhalb oben und unten 10px Abstand hat.
Zudem sind innerhalb der Box vom letzten Objekt, bis zum unteren Ende der Box 45px frei.
Nun setzten wir in diese Box eine weitere Box, dessen Innenabstand 0 oben, 0 Rechts, 0 Unten und 0 Links ist, in der unser Inhalt rein kommt.
(Bild zur Veranschaulichung liegt auch bei)
Warum machst du das .branding nicht weg genau wie das padding bei #branding und schreibst stattdessen

Code: Alles auswählen

margin: 10px 0 55px 0;

?
Nur als Beispiel..^^

PS: Ich als Deutscher störe mich ein wenig an 'Benützen/Benützung' .
Aber das ist dir überlassen (: Dazu sage ich nichts direkt

[NeoAramis]

Dann ist der Body dein "Wrapper" womit du schon mal eine Div-Box weniger hast.

Ich nehme immer ein wrapper, falls ich zum Beispiel ein Hintergrundbild für die ganze Seite verwenden will.

Zudem.. warum hast du um deine Navigation 2 Div-Boxen? O_o
Genau wie um deinen "Main-Content" und "branding"?

Ich verwende einen zweiten Container um Probleme mit dem Boxmodell zu vermeiden. Ich bin dadurch flexibler was das Anpassen des Inhaltes einer Box angeht.

Ich fasse zusammen.. wir erstellen eine automatisch hohe Box, die zu anderen Objekt außerhalb oben und unten 10px Abstand hat.
Zudem sind innerhalb der Box vom letzten Objekt, bis zum unteren Ende der Box 45px frei.
Nun setzten wir in diese Box eine weitere Box, dessen Innenabstand 0 oben, 0 Rechts, 0 Unten und 0 Links ist, in der unser Inhalt rein kommt.
(Bild zur Veranschaulichung liegt auch bei)
Warum machst du das .branding nicht weg genau wie das padding bei #branding und schreibst stattdessen

Code: Alles auswählen

margin: 10px 0 55px 0;

?
Nur als Beispiel..^^

Das weiss ich selber, da musst du mir kein halbes Tutorial schreiben.

PS: Ich als Deutscher störe mich ein wenig an 'Benützen/Benützung' .
Aber das ist dir überlassen (: Dazu sage ich nichts direkt

Ja das ist ein Ortographiefehler beim Übersetzen vom "Schwiizerdütsche"

[Sarkkan]

Bin gerade mal wieder über deine Seite gestolpert^^
Das sieht jetzt richtig gut aus

[Peter1978]

find das gewand(css) class
mag diese Farben - fresh
und die header springen dich schön klar an *like it*

go on , freshmaster ;)

[NeoAramis]

Danke für die Komplimente!

Ich bin noch erstaunt von den Serifen-Schriften, die kann man heutzutage eigentlich gut einsetzten, wo sich doch früher verpöhnt wurden.

Wie ist es mit der Technik? Also ich meine neben dem Design. Habe noch sehr wenige weitere Seiten gemacht, weil ich sicher sein wollte, dass alles stimmt.

[Sarkkan]

Öhm.. welche Technik meinst du?
Die Seiten auf die du (intern)verlinkt hast gehen

[NeoAramis]

Also der Quellcode etc., ja die Seiten sind bloss zu Testzwecken, gibt erst etwas drei.

[Sarkkan]

Öhm.. den habe ich mir nicht angeschaut.. beziehungsweise gerade mal rein geschielt ^^
Dazu sage ich nichts (: Das Thema hatten wir schon mal

[Peter1978]

Technik?
Was meinst du?