Eure Webseiten #6

**Drakes** · 20.08.2008 19:00

Du solltest noch ein <div style="clear: both;"></div> einfügen, denn bei mir überschreitet das Menu das Ende der Seite (unter Katze).
In den Links solltest du noch das HTML-Entitie für das Ampersand-Zeichen verwenden ( & ) und einen Doctype einfügen!

**treeghost** · 24.08.2008 19:29

@mitaki Sehr Angenehm für die Augen.

@kris Nett. Schlicht zu gleich auch.

--

Hier mal etwas von mir:

http://www.dwgeh.bplaced.net/index.html

Das Bild Mitte.png wird wegen einem unempfindlichen Grund nicht gezeigt.
Das ganze besteht aus 3 Div Containern noch ein paar Divs und CSS Stylesheets.

Bitte nicht ausernander nehmen das ist erst meine 4 Seite.
[Die anderen 2 sind purer mist xD]

**Maisaffe** · 24.08.2008 19:32

Zitat von LS~

Das Bild Mitte.png wird wegen einem unempfindlichen Grund nicht gezeigt.

Mitte.PNG

Ansonsten ist die Site doch sehr ansprechend für eine der ersten Websites. Allerdings solltest Du Dir folgendes anschauen: http://upload.npcfighter.de/files/37/1814/screen.png

**treeghost** · 24.08.2008 20:15

Oh man!An so riesige Bildschirme habe ich nicht gedacht...>_<

Jetzt ist das Problem mit der Mitte behoben aber
wie die Divcontainer an einer stelle bleiben sollen habe ich keine Ahnung...

**Spark Amandil** · 24.08.2008 20:32

Riesig ist relativ. Das Layout schaut in 1024 schon nicht korrekt aus, in allem was darunter liegt verrutschen die Elemente, und in allem was darüber liegt verrutschen sie ebenfalls. So gesehen sieht es in keiner Auflösung so aus wie du es gern hättest

Es ist zwar gut davon ausgehen dass die Seite für maximal 1024er Bildschirme ausgelegt sein sollte, aber heutzutage hat eigentlich praktisch jeder Monitor 1280 und mehr Bildpunkte in der Breite.
Wenn du divs zentrieren willst hilft dir die kleine aber feine css anweisung margin: 0 auto;
Damit kann es dir richtig gemacht egal sein welche Auflösung die Nutzer haben.

Allgemein kann man noch sagen dass es der Seite an Kontrasten fehlt. Dunkle Schrift und dunkler Grund, sehr schlecht zu lesen. (auf die Navigation und den Header bezogen)

**treeghost** · 24.08.2008 21:10

PHP-Code:


<div id="bild" style="position:absolute; width:645px; height:123px; left: 183px; top: 325px; background-image: url(Top.png); layer-background-image: url(Top.png); border: 1px none #000000; margin: 0 auto;">

  <p align="center"><p style="text-align:center;"><a href="http://www.npshare.de/files/37/1933/Head.png"></a></p>

  </p>

</div>

Funktionier ihrgendwie nicht...
Ich hab auch momentan keine Zeit mehr...
Könnte jemand mal gucken was da falsch ist?

**Drakes** · 24.08.2008 21:29

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/

**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

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

In Verbindung mit absoluter-Positionierung sowieso nicht (welche btw. eh Rotz ist, die sollte man nur in Verbindung mit JavaScript verwenden ...).
Und das margin-auto funzt, wohlgemerkt auch nicht im IE6!

Beim 2. Layout sieht man, wie man es auch im IE schaft: http://de.selfhtml.org/css/layouts/m....htm#kopf_fuss

**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.

**Cloudi** · 24.02.2010 21:00

Ich mach es kurz,es handelt sich um eine Chat Community Seite.

http://www.pooqo.de

Thema: Eure Webseiten #6

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen