Eure Webseiten #6

[treeghost]

Also, soweit ich das sehe, ist dein Backgroundimage in horizontaler Richtung immer gleich, das heisst, du kannst es auch nur 1px Breit machen. http://img152.imageshack.us/img152/6030/bgrz3.png
Daher würd dein CSS-Code dann so aussehen:

HTML-Code:

body {
   background: #353535 url('bg.png') repeat-x;
}

Und hör auf mit den Tabellen und mit dem absoluten Positionieren. Der ganze Code für den Header könnte so aussehen:

HTML-Code:

CSS:
#header {
   display: block;
   width: 650px;
   margin: 0 auto;
   margin-top: 10px;
}

HTML:
<img id="header" src="Header.png" width="650" height="250" alt="DwGeH - Die offizielle Homepage zum Spiel" />

Dann das Menu:

HTML-Code:

CSS:
#menu {
   width: 372px; /* weiss nicht genau, hab ich mit measure-it abgemessen */
   margin: 0 auto;
   list-style: none;
}
#menu li {
   display: inline;
}
HTML:
<ul id="menu">
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
</ul>

Zudem ist mir noch aufgefallen, dass du mehreren Elementen die gleiche id gegeben hast, dass ist in XHTML nicht erlaubt.

Und dann noch ein div für den eigentlichen content und dieses auch zentrieren, dann sollte so manches Problem behoben sein.

BTW. nette (ein bischen verstaubte) Referenz für CSS: http://www.css4you.de/

...

Danke...bis zum Header hab ich alles kapiert was du geschrieben hast.
Dannach kommt ein black out. xD
Das mit dem Menü verstehe ich nicht.Wie soll ich da den nun die Hover Button da rein schreiben? So ganz einfach sieht es ja nicht grade aus.
Evt. sollte ich auch mal erwähnen das ich ein anfänger in Sachen CSS bin. ._.

@ zu lange Disskusion für eine positsionierung eines Elementes
höchst interessant aber als Anfänger versteht man da :
Da dur noargh. Noargh intsch! aweli choal kan loxal
jaaa orkisch ist ne tolle Sache.

Nimm stattdessen class="", das ist valide und funktioniert. Quasi das Selbe, nur für mehrere Objekte zu verwenden, anstelle von nur einem, wie id="" es tut.


Leon: Ich persönlich mag diese extreme Spiegelung in den "Buttons" (Wie ich dieses Wort hasse. Das erinnert mich immer an irgendwelche Mädchenspielzeuge...) überhaupt nicht. Zudem setzt sich der Schriftzug im Header durch den harten, schwarzen Rand viel zu sehr vom Rest ab und dieser "3D-Schrift"-Effekt passt überhaupt nicht ins restliche Bild. Die Pilze haben auch noch einen recht pixeligen Rand, wenn man genau hinschaut. Ich würde auch noch in den Highlight-Grafiken in der Navigation das "Leuchten" beim Hovern weicher machen. Ein Farbverlauf im tristen grauen Hintergrund täte sich sicherlich auch gut. Für den Content würde ich keine Hintergrundgrafik benutzen, da das nur unnötiges Laden bedeutet; die Grafik hat doch sowieso an jedem Pixel die selbe Farbe.
Die Farbgebung an sich ist aber nicht all zu schlecht.

Joah, hoffentlich hab ich dir damit ein bisschen helfen können.


LG,

Anima~

...

PUSH DA BUTTONS!!1
Njo den Header kann man wirklich bearbeiten. Müsste nur mal gucken was
sich da alles mit dem Font machen lässt. -__-
Aber bei den Pilzen kann ich da wirklich keinen einzigen
unterschied sehen.o_o

Geholfen hat das alles.Bisschen mehr dazu gelernt würd ich mal sagen. *

Naja viel Zeit hab ich ja jetzt wieder.Mal sehen ob das was wird...

[Inius]

Habe etwas neues, diesmal eine Seite ganz ohne Tabellen , naja ist eigentlich mehr das Grundgerüst.

Wollte mal fragen was iher vom Design und dem Code hält!
Möchte meine neue Seite komplett auf PHP und MySQL aufbauen!



http://fansoftware.fa.funpic.de/Homepage/index.php

[Whiz-zarD]

Hässliches grün auf hässlichem Weiss.

Das Weiss strahl um so heller, wegen dem Giftgrün.
Dann besitzt das Grün einen Verlauf ins Schwarze, was ich persönlich ebenfalls hässlich finde.

[Inius]

Habe den Hintergrund rausgenommen , aber mal eine Frage...wo ist das Schwarz .
Nur die Schrift ist Schwarz, sonst nichts!

[Whiz-zarD]

Naja, Schwarz ist vielleicht nicht ganz richtig.
Aber das dunkle Grün geht schon mehr in Richtung schwarz.

[The Best Isaac]

Naja, Schwarz ist vielleicht nicht ganz richtig.
Aber das dunkle Grün geht schon mehr in Richtung schwarz.

...

Also, auf meinem Monitor ist das von dir markierte Grün sehr weit von Schwarz entfernt. oO

@Fansoftware: Mir mag das Design nicht so hundertprozentig zusagen. Ist mir zu viel Grün, das mich irgendwie an die XBox erinnernt, und auch vom Design selbst.
Vielleicht solltest du auch nicht so viel mit Spiegeleffekten arbeiten. Im Header mag das noch ganz nett sein, aber in der Navigation find ich's schon übertrieben.
Achja, "Ohne_Titel_1" ist natürlich auch kein besonders toller Name für eine Seite.

(Und irgendwie sieht mir der Seitenquelltext stark nach Div-Suppe aus. Aber da ich mich im Grunde nicht auskenn, halt ich besser meine Klappe.)

[NPC Fighter]

@ Whiz: Ich weiß nicht, was du hast, aber so schlecht ist's doch gar nicht. Schwarz kann ich da ebenfalls nicht entdecken. Ist halt dunkelgrün. *shrug*

Pluspunkt: Die Formen sehen irgendwie angenehm klar aus.
Was ich aber auf jeden Fall ändern würde, wäre der Hintergrund der kleineren Boxen, weil die dunkle Farbe da irgendwie ziemlich erdrückend wirkt. Ich würde sie genauso halten, wie die große Box, dann sieht das Konzept auch gleich viel konsistenter aus. Zusätzlich solltest du vielleicht noch den vertikalen Abstand zwischen den kleinen Boxen erhöhen, weil so Box B direkt unter der Spiegelung von Box A liegt, was meiner Meinung nach irgendwie ein bisschen merkwürdig aussieht.

Auf jeden Fall solltest du aber am Text in der Navigation arbeiten. Ich muss zwar demnächst eh zum Optiker, aber ich finde es nichtsdestotrotz verdammt schwierig zu lesen. Das mag einerseits am Antialiasing, andererseits an der Spiegelung liegen. Genau beschreiben kann ich's irgendwie nicht, vielleicht kannst du ja mal ein bisschen an den Settings drehen .

Recht unspektakulär ist wie bei deinen vorherigen Seiten allerdings der Header. Irgendwie fehlt da das gewisse Etwas.
Im direkten Vergleich mit den Vorversionen ist das Design aber auch jeden Fall ein riesen Fortschritt. Wenn du hier und da noch ein paar Dinge überarbeitest, kann da sicherlich ne coole Seite bei raus kommen. (=

[Inius]

Ich habe jetzt mal die Abstände größer gemacht!
Ausserdem einen Fehler bei den Texten korrigiert, da Fire Fox im Gegensatz zu IE und Opera das </br> nicht richtig ausführt, sondern nur <br>.
Desweiteren habe ich den Gelbstich raus gemacht, die Buttons leserlicher gemacht und den Titel noch mal überarbeitet!
Aber das mit den Boxen will ich eigentlich so lassen, da der untere Teil sonst zu monoton wirkt!

The Best Isaac:
Das der Style ein wenig nach 360 kommt, war bzw ist absicht!


Aber habe keine Ahnung wie ich den Header besser gestalten kann...
Mir fällt das persönlich nichts anständiges ein!

[treeghost]

Aber habe keine Ahnung wie ich den Header besser gestalten kann...
Mir fällt das persönlich nichts anständiges ein!

...

Schlichter hallten? Also der untere Text kann wohl weg.

So schlimm mMn sieht die Seite doch gar nicht aus.
Vorallem der grüne Ton gefällt mir.

[Xardas der Dunkle]

Ausserdem einen Fehler bei den Texten korrigiert, da Fire Fox im Gegensatz zu IE und Opera das </br> nicht richtig ausführt, sondern nur <br>.

...

Ist auch logisch. Es heißt <br /> und nicht </br> .
Firefox verhält sich in dem Fall eig. korrekter als IE und Opera.

[Ravana]

Ist auch logisch. Es heißt <br /> und nicht </br> :rolleyes:.
Firefox verhält sich in dem Fall eig. korrekter als IE und Opera.

...

Jau, <br> ist ein Tag, das kein End-Tag braucht, so wie auch <img>. Normalerweise machst ja dein Eröffnungstag dahin, wos losgeht (<p>, <h1> usw usf), dann den Inhalt und den Endtag ans Ende.

Da img und br nun aber kein Ende haben, sondern nur an genau einer Stelle positioniert sind, macht man korrekterweise Anfang und Ende in nur einen Tag :D <img src="xxx.xxx" width="xxx" height="xxx" /> und <br />. Nur damits korrekt ist. Meiner Erfahrung nach haben die meisten Browser aber auch kein Prob damit, wenn man das Slash am Ende weglässt... Aber korrekter Code ist doch fein.

Btw, finde das grün mit hellem grau sehr schön eigentlich. Nur wie jemand schon sagte sind die Spiegeleffekte fast schon übertrieben, zumindest in der oberen Navigation sieht das irgendwie unaufgeräumt oder übertrieben aus.

[dead_orc]

Jau, <br> ist ein Tag, das kein End-Tag braucht, so wie auch <img>. Normalerweise machst ja dein Eröffnungstag dahin, wos losgeht (<p>, <h1> usw usf), dann den Inhalt und den Endtag ans Ende.

Da img und br nun aber kein Ende haben, sondern nur an genau einer Stelle positioniert sind, macht man korrekterweise Anfang und Ende in nur einen Tag <img src="xxx.xxx" width="xxx" height="xxx" /> und <br />. Nur damits korrekt ist. Meiner Erfahrung nach haben die meisten Browser aber auch kein Prob damit, wenn man das Slash am Ende weglässt... Aber korrekter Code ist doch fein.

...

Wenn du schönen Code schreiben willst, solltest du wenigstens noch drauf hinweisen, dass das nur für XHTML gilt. Der W3C Validator wirft zwar für ein <br /> in HTML 4.01 Strict keinen Fehler aber eine Warnung:

NET-enabling start-tag requires SHORTTAG YES.

<p>foo<br />bar</p>

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.

...

Warum sie da also ne Warnung statt nem Fehler schmeißen ist mir rätselhaft, da nach Standard das in HTML 4.01 Strict eigentlich implizit zu <br> /> werden müsste, was zumindest wegen des > statt &gt; einen Error werfen sollte.

[Inius]

Habe noch mal das Design ein wenig ab geändert, wollte noch mal fragen ob das besser aussieht?
Allerdings erst mal nur Test weise als Grafik!



Weil das jetztige Grün langweilig aussieht, da fehlt der Pepp.
Vieleicht hat ja noch jemand einen Tipp, gegen was ich graue tauschen kann!

[OhWeh!]

Ich finde die Farbgebung generell irgendwie unpassend. Kann dir aber leider auch nicht wirklich sagen was man da besser machen kann, an deiner stelle würde ich noch ein wenig rumprobieren, vllt etwas mit blau oder orange.