Eure Webseiten #6

**Drakes** · 24.08.2008 21:51

Zitat von Xardas der Dunkle

Und das margin-auto funzt, wohlgemerkt auch nicht im IE6!

Also ich hab Multiple-IEs installiert und hab mir kurz eine Testdatei angelegt und da hat mir der IE 6 sehr wohl das div zentriert.

Ausser du lässt deine Seiten im Quirksmodus anzeigen, aber dann liegt das Problem jawohl da. (xml deklaration nicht vor den Doctype tun!)

**Xardas der Dunkle** · 24.08.2008 21:58

Zitat von Drakes

Also ich hab Multiple-IEs installiert und hab mir kurz eine Testdatei angelegt und da hat mir der IE 6 sehr wohl das div zentriert.

Blödsinn.
Der IE6 kennt margin:0 auto; nicht. Dafür kann man im IE divs zentrieren in dem das übergeordnete Element auf: text-align:center; gesetzt wird.
Und das ist fakt!
Der Multitiple-IE ist eh nie ganz korrekt, ich habe das teil selber ... und es zickt in manchen Dingen noch mehr rum, als das original ...

**Drakes** · 24.08.2008 22:00

Zitat von Xardas der Dunkle

Blödsinn.
Der IE6 kennt margin:0 auto; nicht. Dafür kann man im IE divs zentrieren in dem das übergeordnete Element auf: text-align:center; gesetzt wird.
Und das ist fakt!
Der Multitiple-IE ist eh nie ganz korrekt, ich habe das teil selber ... und es zickt in manchen Dingen noch mehr rum, als das original ...

Da würd ich jetzt drum wetten.

So nebenbei, zu nem margin: 0 auto; gehört auch immer noch ne Breitenangabe sonst macht das ganze ja keinen Sinn.

**Xardas der Dunkle** · 24.08.2008 22:15

, k ... Drecks IE xD. Soll er mal was falsch machen tut ers nicht^^.
Trotzdem bist du mit dem text-align:center; zusätzlich immer besser aufgehoben.

Sowohl im Multitiple als auch im nativen IE macht ers nämlich ohne <?xml richtig.

**Spark Amandil** · 25.08.2008 05:49

Zitat von Xardas der Dunkle

Trotzdem bist du mit dem text-align:center; zusätzlich immer besser aufgehoben.

ehm... nein. text-align:center neigt dazu sich nicht nur um divs und tabellen, sondern auch gleich noch um deren Inhalte zu kümmern. Zudem kein Weg sauberen Code zu schreiben.

**Xardas der Dunkle** · 25.08.2008 17:51

Logisch, Browser die nicht IE darstellen, interpretieren das text-align:center; auch richtig und vererben es nach unten weiter.
Deswegen muss man es auch in den unteren divs wieder entkräften.

**Kate** · 25.08.2008 20:22

Zitat von Drakes

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

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~

**Xardas der Dunkle** · 25.08.2008 20:31

Wer redet hier vom HTML-Attribut-Align?.

, ich rede von CSS ...
Zudem bin ich auch ein XHTML-Anhänger ...

**Kate** · 25.08.2008 20:33

Argh, total verlesen. >__< Sorry. Ja, dann hast du natürlich Recht. Ich editier's am besten mal wieder raus, um keine Verwirrung zu stiften.

**treeghost** · 26.08.2008 00:18

Zitat von Drakes

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.

Zitat von Animagladius

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** · 03.11.2008 15:39

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** · 03.11.2008 18:03

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** · 03.11.2008 19:35

Habe den Hintergrund rausgenommen

, aber mal eine Frage...wo ist das Schwarz

.
Nur die Schrift ist Schwarz, sonst nichts!

**Whiz-zarD** · 03.11.2008 20:00

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

**The Best Isaac** · 03.11.2008 20:07

Zitat von Whiz-zarD

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** · 03.11.2008 20:07

@ 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** · 04.11.2008 11:32

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 nicht richtig ausführt, sondern nur .
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** · 04.11.2008 11:44

Zitat von Fansoftware

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** · 04.11.2008 13:20

Zitat

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

Ist auch logisch. Es heißt und nicht

.
Firefox verhält sich in dem Fall eig. korrekter als IE und Opera.

**Ravana** · 05.11.2008 15:52

Zitat von Xardas der Dunkle

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

Jau, ist ein Tag, das kein End-Tag braucht, so wie auch <img>. Normalerweise machst ja dein Eröffnungstag dahin, wos losgeht (, <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 . 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.

Thema: Eure Webseiten #6

Themen-Optionen

Anzeige

Berechtigungen