Tutorial HTML, CSS u. PHP - Forum

von **neuling11** » Freitag 31. Dezember 2010, 16:38

Hallo,
nachdem nun doch endlich die letzte Komplikation beseitigt wurde, ist meine erste Seite fertig geworden.

Nunja, die erste ist es in dem Sinne nicht, ich habe seit letzter Zeit (so 1-1/2 Wochen) immer wieder nebenbei am
Aussehen rumprobiert, bis ich nun doch jetzt das Ergebnis akzeptabel finde.
hier gehts zu der Seite.

Ich würde mich über Kritik freuen,
ich kann mich ja nur verbessern :mrgreen:

.

von **Sarkkan** » Freitag 31. Dezember 2010, 17:22

Hey Neuling (:

Schöne Seite, gefällt mir ganz gut (=
Nur einige Kritikpunkte hab ich doch :wink:

Verwende bitte <ul> und kein <ol>, da es sich bei <ol> um numerische Aufzählungen handelt (also 1. 2. ...)
Die Linke Navigation finde ich nicht wirklich gelungen.. Versuch vielleicht eher die Hintergrundfarbe Transparent zu halten (in CSS is transparent eine eigene "Farbe". Also einfach: background: transparent;)
Dein <p>-geschützes Leerzeichen Gebilde ist nicht besonders Hübsch.. :/ Verwende Lieber den Footer-hack (: *1
Achte darauf, dass du auf allen deine Seiten zu den Richtigen Datein verlinkst ;) [Das Impressum hat z.B. keinerlei Stylekram]
Gib "Toten Links" am besten das Ziel # (Also href="#", dann kommt man nicht immer zu 404'ern)

*1

Code: Alles auswählen: /* Footer-Hack */ html { height: 100%; } body { height:100%; } div#Content { min-height: 100% !important; }

Du musst also dem html, und body eine Höhe von 100% geben und dort, wo dein Hauptcontent drin ist ein min-height: 100% !important;.
Kannst dann ggf. ein wenig mit margin-bottom: [negativerWert];(in den #Content) den Footer ein weniger höher ziehen

von **neuling11** » Dienstag 4. Januar 2011, 12:14

Hallo,
es hat sich nun etwas getan...

Ich habe jetzt ein Reset Stylesheet eingebaut,
den Footer Hack hatte ich lange Zeit drinnen,
bis ich unten dieses Abgerundete Teil hingemacht habe,
mit dem Footer Hack geht das jetzt nicht.

Ansonsten wird man nur noch bei "Aquaristik" auf eine Fehlerseite geleitet.

Die Steuerung links erschein nur noch, wenn man sie auch braucht.

von **Sarkkan** » Dienstag 4. Januar 2011, 13:02

Uihh, schick schick :wink:

*hust* Aber das Reset gehört an den Anfang des (1.)Stylesheets..^^
Sonst überschreibt es dir deine bisherigen Angaben^^

Was du dir vielleicht auch angewöhnen kannst ist, dass du gleiches in ein und dem selben Stylesheet zusammen fasst.
Also z.B. ein default.css, ein navi.css o.Ä. so bleibt die Übersicht gewährt (:

von **neuling11** » Dienstag 4. Januar 2011, 17:08

Hallo,
und wenn ich alles in verschiedene Stylesheets mache,
greift der Browser dann auf alle zu?

Also nicht, dass er nur eines nimmt.

Und das Reset Stylesheet brauche ich dann auch nur in eines der vielen css Dateien machen?

Vielleicht hast du ja noch eine Idee, was ich besser machen kann...
Vielleicht ne Idee mit der Steuerung links

?

von **Sarkkan** » Dienstag 4. Januar 2011, 17:56

Der Browser verwendet alle Stylesheets "des selben Namens". Hierbei geht er aber nicht vom Dateinamen, sondern vom title aus. Und kein Titel ist schließlich auch immer der selbe Name :wink:

Du kannst ja mal schauen (meist) unter 'Ansicht' -> 'Webseiten-Stil' findest du eine Auflistung aller Stylesets. Meist sind das 'Kein Stil' (mit dem man CSS abschalten kann), da die wenigsten mehrere Einbinden.

Das Reset.css kommt dann am Besten in die erste CSS-Datei oder bekommt eine eigene Datei spendiert, die als erstes eingebunden wird (:

Naja.. was könntest du besser machen? :/
Die Steuerung links finde ich eigentlich ganz in Ordnung

Du könntest Allgemein versuch ein paar weniger Div's zu verwenden..

Code: Alles auswählen: <body> <div id="seite"> <div id="kopfbereich"> <div id="oberesteuerung"> <ul>

Hier könntest du meine ich mindestens 2 Div's sparen

Dazu einfach alles was in body steht in html, den Kram aus div#seite in body und div#obersteuerung in die ul setzen, welchem du eine Id gibst (ich würde das z.B. 'navi' oder 'mainnavi' nennen

Die an der Seite dann ganz einfach 'subnavi').
Allgemein kannst du meistens eigentlich ein div um ein ul weglassen

Das durchgestrichene bei der linken Navi finde ich cool (: Könnte aber den Besucher verunsichern =/
Und auch das überstrichene finde ich eher suboptimal..^^ Mach lieber so etwas wie Fett, andere Farbe oder eine kleine Gut aussehende Mischung (:

Was mich noch an deiner Seite stört ist, dass der Text so zusammenhangslos aussieht.. nimm etwas von dem line-height weg, die Angabe ist meist unnötig (:

Was ich aber richtig cool finde, ist deine padding-border-Bilderrahmen Lösung

Hatte mir mal sowas ähnliches, mit border und outline überlegt^^

Lg
Sarkkan

von **neuling11** » Dienstag 4. Januar 2011, 19:12

Sarkkan hat geschrieben:Der Browser verwendet alle Stylesheets "des selben Namens". Hierbei geht er aber nicht vom Dateinamen, sondern vom title aus. Und kein Titel ist schließlich auch immer der selbe Name Du kannst ja mal schauen (meist) unter 'Ansicht' -> 'Webseiten-Stil' findest du eine Auflistung aller Stylesets. Meist sind das 'Kein Stil' (mit dem man CSS abschalten kann), da die wenigsten mehrere Einbinden.

Das Reset.css kommt dann am Besten in die erste CSS-Datei oder bekommt eine eigene Datei spendiert, die als erstes eingebunden wird (:

Achso...
Und der beim Browser ist dann die Erste Stylesheet Datei, die ganz oben ist, also das ist dann die, die als erstes eingebunden ist?

Ok, ich mache alle unnötigen divs weg, bis auf "seite".
Ganz einfach aus dem Grund, weil der IE dazu neigt, wenn dem body eine Breite mitgegeben wird,
bei der Lightbox den verdunkelten Hintergrund "abzuschneiden" :!:

(siehe kreative küchenplaner galerie im IE).

Die Steuerung oben ( bald navi, oder mainnavi) könnte ich ja so wie hier: [url]http://kreative-küchenplaner.de/[/url] machen....
(muss ja nicht unbedingt so "langsam eingeblendet " weren...
Habe bloß keinen blassen Schimmer wie das geht

Wäre aber bestimmt ein guter Effekt...

Die line height habe ich ehrlich gesagt nur so groß gemacht,
damit es ein wenig voller aussieht, und nicht so lehr

.

Gruß neuling

von **Sarkkan** » Dienstag 4. Januar 2011, 20:20

Ja, im Allgemeinem läuft in der Informatik fast alles von oben nach unten ab^^

Uihh, dass mit dem Hintergrund bei dem IE wusste ich gar nicht O.o
Muss ich also nen kleinen Wert im js-Code ändern :/

Ich könnte ja jetzt gemein sein und auf meinen Quellcode verweisen :mrgreen:

Aber ich helfe dir gerne bei deinem Vorhaben^^ (Übrigens ist das langsame einblenden und die runden ecken nur eine Kleinigkeit

klappt leider nur in den eher neueren Browsern.. aber is ja eig. nur eine Spielerei [: )
Wie bin ich vorgegangen?
-> Rahmen um die einzelnen <li> Elemente (damit man sieht, wo man arbeitet)
-> ggf. per margin-bottom die Elemente herunter ziehen, dass sie mit der unteren Linie gleich sind
-> den Rahmen nun wieder entfernen und stattdessen dem :hover geben
-> eine li.Klasse erstellen (hab die z.B. span genannt) und ihr die selben Werte wie :hover geben, jedoch mit der Besonderheit, dass border-bottom-color weiß ist [diese Klasse bekommen die Links, auf dessen Seite man sich gerade befindet [also deine jetztigen <strong>s ])

Feinheiten müsstest du ggf. mal austüfteln aber das ist so die Grobe Vorgehensweise (:

von **neuling11** » Dienstag 4. Januar 2011, 21:01

Hallo,
danke, jetzt klappt es schonmal... jedenfalls im Firefox.... darfst ja mal raten, wos wieder mal nicht klappt :roll:

Liegts beim IE möglicherweise, dass ich den schwarzen Rand unten als Bild gemacht habe, und somit
der IE mit background-color: white diesen nicht überdeckt?
Gibts da noch ne andere Lösung, sodass ich den Rand "im bild" behalten kann,
oder muss Ich das ganze jetzt wieder umstylen, dass der Rand übers css angezeigt wird?

Code: Alles auswählen: Ich könnte ja jetzt gemein sein und auf meinen Quellcode verweisen :mrgreen: :wink:

Hab ich ja gemacht,
allerdings wird in den css dateien irgendwas mit Frames angezeigt, was mich dann wieder zur index.php datei bringt :/ .

von **Sarkkan** » Dienstag 4. Januar 2011, 21:17

neuling11 hat geschrieben:Hallo,
danke, jetzt klappt es schonmal... jedenfalls im Firefox.... darfst ja mal raten, wos wieder mal nicht klappt

Liegts beim IE möglicherweise, dass ich den schwarzen Rand unten als Bild gemacht habe, und somit
der IE mit background-color: white diesen nicht überdeckt?
Gibts da noch ne andere Lösung, sodass ich den Rand "im bild" behalten kann,
oder muss Ich das ganze jetzt wieder umstylen, dass der Rand übers css angezeigt wird?

Öhm.. spontan würde ich sagen dass du den Kopfteil relativ positionierst. Dann kannst du die Navigation absolute in dem Kopfteil positionieren und sie per z-index in den Vordergrund schieben^^

neuling11 hat geschrieben:
Sarkkan hat geschrieben:Ich könnte ja jetzt gemein sein und auf meinen Quellcode verweisen [/code]
Hab ich ja gemacht,
allerdings wird in den css dateien irgendwas mit Frames angezeigt, was mich dann wieder zur index.php datei bringt :/ .

Achja.. xD Ich weiß nicht wie ich das gemacht hatte.. aber es ist für jeden Browser irgendwie unmöglich den Code per 'Seitenquelltext Anzeigen' anzuzeigen..^^
Kommt glaube ich durch die Umlaute in der Domain^^ Aber man kann sich den Pfad auch in die Adresszeile kopieren und dann ansehen (:

von **neuling11** » Dienstag 4. Januar 2011, 22:11

Hallo,
ich komme einfach nicht weiter -.- .

Stängig kommt irgend ein Anzeigefehler in einem der Browser....
Entweder das Element liegt zu weit unten, der Rahmen überschneidet den einen Ramen im Firefox,
Im IE nicht....

Im Kompatibilitätsmodus vom IE udn im Scriptly lieght das Element ganz rechts.....

.

Dann wenn ich über Strong background-color white den unteren Rahmen ausblenden möchte, gibts auch immer wieder fehler,
sobald ich padding und/oder margin für das li element anwende....

Kann es sein, Sarkkan, dass das ganze nur bei Html 5 funktioniert?

Ich habe das ganze jetzt mal hochgeladen, du kannst es dir ja mal anschauen.

von **Sarkkan** » Dienstag 4. Januar 2011, 23:05

Doch, das funktioniert

Aber da ich nicht weiß, wie ich das alles erklären soll hab ich dir hier mal was gemacht..
Ich hab leider nur den Firefox und Chromium zur Verfügung.. aber in beiden sieht es schon mal gut aus

Schau dir das mal bitte an, sarkkan.de/Neuling11/. War mal so dreißt und hab des n bisschen Modifiziert

Es ist übrigens auch ein 2.Stylesheet angegeben schau dir das auch mal an

von **neuling11** » Mittwoch 5. Januar 2011, 10:27

Hallo,,

Was so einfach geht das :oops:

.

Danke,
jetzt muss ich nur noch den Hintergrund vom Logo ein wenig abdunkeln, dann kommt der Effekt noch besser rüber.

Aber noch eine Frage zu den 3 Stylesheets: In einem von den beiden muss ich ja wohl nicht mein Logo angeben oder?

Habe jetzt schonmal die 1-stylesheet-version auf den server übertragen...
die 2-stylesheet version kommt bald

von **Sarkkan** » Mittwoch 5. Januar 2011, 13:39

Ja... wirklich schwierig war das nicht

Aber wie ich dir die ganzen schritte erklärt hätte ist mir unbegreiflich^^ Daher hab ich es dir einfach mal gemacht gehabt

Verändere das einfach ein bisschen, spiele mit den Werten rum, so lernst du am besten (=

Ich habe in den Stylesheets nur einmal dein Logo angegeben und zwar dort, wo es gebraucht wurde ( #header in navi.css's wobei ich den Header im Normalfalle in den Grundstyle (style.css) legen würde

).
Wieso sollte ich es auch mehrfach einbinden, wenn wir es auf der Seite nur einmal haben wollen? :/

Auch hatte ich mich einiger Div's entledigt :wink:

Und versucht in deinem CSS-Code überflüssiges zu entfernen.. :/ (Entferne bitte nach Möglichkeiten überflüssige Styleangaben, oke?

)

von **neuling11** » Mittwoch 5. Januar 2011, 14:12

Wahrscheinlich werde ich es einfach so lassen...

Ich habe jetzt offline ein bisschen mit grau, diesem "lilaton" und anderen Farben für den Hintergrund im Logo rumprobiert, damit das Her-
vorgehobene in der Steuerung noch besser aussieht, aber weiß sieht einfach am besten aus...

Jede andere Farbe würde irgendwie zu kitschig wirken.

Ja, den div steuerung wird auch durch eine ul id ersetzt,
und vielleicht auch "seite" in den body,
wenn du mir vielleicht den veränderten javascript von der lightbox zukommen lässt

Tutorial HTML, CSS u. PHP - Forum

Meine erste Seite

Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Re: Meine erste Seite

Wer ist online?