neues Design gesucht - CSS-basierend

Hi,
für meine Internetseite (s. WWW-Link) möchte ich ein komplett neues Design entwerfen.
Es soll später die Möglichkeit gegeben sein per "Ansicht/Webseiten-Stil" mehrere Farbversionen auszuprobieren, bzw. dass der Besucher sich so einen anderen Stil aussuchen kann.
Das ist ja mit Mozilla Firefox und CSS möglich AFAIK.
Ich möchte nicht wieder so ein "normales" Design haben, wie z.B. http://rpg-atelier.com oder http://rpg2000.de
Damit meine ich halt diese tabellarische Form.
Das Design sollte jedoch ansprechend und eine gute Übersicht gegeben sein.
Habt ihr vll. ein paar Links, wo es Designs zur Anregung für neue Ideen gibt o.ä.?

mfg

EDIT:

ok, mir fiel vorhin was ein:
http://www.directupload.net/images/0...p/CWNdkvTq.gif

wie kann man das umsetzen?

Das ist am besten zu lösen in dem du eine Grafik erstellst wie es später aussehen soll und die verschiedenen Bereich per Image Map verlinkst auf die anderen Seiten

dann kann ich mir momentan nur noch nicht vorstellen, wie ich das mit den unterlinks mache, dafür ist nämlich diese leere runde "Zeile" zuständig.
dort soll dann z.B. wenn man über den Schriftzug "Info" fährt im Halbkreis "RPG Maker 2k", "RPG Maker2k3" und "RPG Maker XP" erscheinen müsste ich quasie dann wieder ein weiteres Bild drüber legen... aber wie soll das dann funktionieren :confused:

Zitat:

---

Zitat von Niji-chan

dann kann ich mir momentan nur noch nicht vorstellen, wie ich das mit den unterlinks mache, dafür ist nämlich diese leere runde "Zeile" zuständig.
dort soll dann z.B. wenn man über den Schriftzug "Info" fährt im Halbkreis "RPG Maker 2k", "RPG Maker2k3" und "RPG Maker XP" erscheinen müsste ich quasie dann wieder ein weiteres Bild drüber legen... aber wie soll das dann funktionieren :confused:

---

evt. per PHP und if Abfrage in dem du dann die verschiedenen bilder machst und das mit ne if Abfrage abfragst

Zitat:

---

Zitat von fanrpg

evt. per PHP und if Abfrage in dem du dann die verschiedenen bilder machst und das mit ne if Abfrage abfragst

---

Man könnte es mit CSS .hover lösen doch ob der IE das unterstütz -.-' dann blieber nurnoch Javascript :(

Zitat:

---

Zitat von dadie

Man könnte es mit CSS .hover lösen doch ob der IE das unterstütz -.-' dann blieber nurnoch Javascript :(

---

Der IE unterstützt doch kein CSS (das bisschen ist kein CSS(2 und 3 :D ) )

Aber ist das nicht per PHP machbar und <form> ?

Zitat:

---

Zitat von fanrpg

Der IE unterstützt doch kein CSS (das bisschen ist kein CSS(2 und 3 :D ) )

Aber ist das nicht per PHP machbar und <form> ?

---

Es ist machbar über CSS ob nun über form , get oder post , oder über link get nur
meine ich warum schwere script sprachen ausgraben wenn es mit viel glück auch anderrs geht ^^'

edit:

@dead_orc

Naja ob es nun bei Mouseover oder bei Onclick gemacht wird ist gehoppst wie gesprungen darum ist PHP in gewisser weisse "richtig"

Das ist sicherlich nicht mit PHP machbar, da die Idee lautete, die Links sollen erscheinen wenn man mit der Maus über den Link "Infos" fährt. Sollte jemand wissen, wie man so etwas mit einer serverseitigen Skriptsprache anstellt, ohne jedes Mal die Seite neu zu laden, der möge mich gerne berichtigen.

@Topic: Hm, du müsstest wohl die ganze Grafik per JS oder CSS neu laden (dann halt mit der entsprechenden Leiste), da ich keine Idee habe, wie man ein zusätzliches Bild so einfügen könnte, dass die "normalen" Links nicht behindert werden. Ich muss aber sagen, dass ich diese Idee mit der Navigation sehr interessant finde. Ist/Wäre/Wird auf jeden Fall keine 0-8-15 Seite ;)

oder noch einfacher FLASH, ist wohl die einfachste und praktikabelste Lösung, leider speerst du dann user ohne flash oder mit deaktivierten ActiveX aus, aber für die paar kannst du ja ein alternatives textmnü machen.
Das Menü find ich im übrigen sehr stylisch

Das ganze sollte mit sowas möglich sein:
CSS:

HTML-Code:

---

div#spiele {
  position: absolute; // oder fixed
  top: ; // die Position
  ...
}

div#spiele a span.info {
  display: none;
  position: absolute; // oder fixed
  top: ; // die Position
  ... 
}

div#spiele a:hover span.info {
  display: block;
}

---

HTML:

HTML-Code:

---

<div id="spiele">
 <a href="Ziel">
  <img src="spiele.gif" />
  <div class="info">Der tolle Infotext</div>
 </a>
</div>

---

Das ganze entspricht whrscheinlich nicht ganz den HTML-Konventionen, aber der IE machts notwendig - weil er :hover nur bei Links unterstützt...

So ganz versteh ich das jetzt nicht.
Soll das also jetzt, wenn man ueber den Menuepunkt "Spiele" faehrt einen Infotext anzeigen lassen?
Ich meine, das Untermenue muss ja noch da sein, wenn man vom Hauptmenuepunkt weggeht, damit man einen Untermenuepunkt waehlen kann.
Und vor allem welche Position muss ich da noch gleich angeben und wonach geht das dann?

Ich habe mal ein wenig rumprobiert und es klappt nicht so ganz, wie ich mir das vorgestellt hatte... Du musst es also entweder mit JS machen oder meinen missglückten Versuch verbessern (obwohl ich ja nicht glaube, dass das geht :D)

so, ich habe mich nun dafuer entschieden es doch etwas anders zu machen.
Also,
ich habe jetzt einen Halbkreis gemacht, der 8 Links hat. Jetzt soll, wenn man auf einen dieser Links klick unter dem Bild ein Untermenue in Textform erscheinen, wo man sich dann einen Menuepunkt aussucht.
http://img269.imageshack.us/img269/2332/menue5gm.gif
Die Map habe ich ohne Probleme hinbekommen. Jetzt gehts an CSS.
Momentan habe ich pro Hauptpunkt 5 Unterpunkte (durchschnittlich). Diese sollen nun als Links unter dem Menue erscheinen, nachdem man auf den jeweiligen Hauptlink/punkt geklickt hat. Danach kann man dann auf einen Unterlink klicken und die passende Seite soll erscheinen.

Wie mache ich das jetzt?

Ich hab so das dumpfe Gefühl, dass du mit Javascript besser bedient wärst, als mit purem CSS, das mal nur als Anmerkung. Wie das von der Umsetzung her aussieht, kann ich dir allerdings nicht sagen, weil ich mich noch nie großartig mit JS beschäftigt hab.

Hm, eigentlich moechte ich kein JavaScript einsetzen, da manche das ja eh ausschalten...
Ich habe zwar keine nervtoetende Werbung auf meinen Seiten, fuer die man das ausschalten muesste, aber na ja...
Zudem kann ich nicht wirklich JS..
Hoechstens mit Selfhtml ein wenig gucken, wenn jemandem ne andere Loesung einfaellt: Immer her damit!

Frage zu overflow:
Folgendermassen eingesetzt:

HTML-Code:

---

div.ausgabe {
  overflow:scroll;
}

---

ergibt sich ein senkrechter und waagrechter Scrollbalken. Kann man den waagrechten noch irgendwie ausschalten?

EDIT: Mit JS komme ich irgendwie nicht klar.
Mein Versuch:

HTML-Code:

---

<form name="Test" action="">
    <div class="menue">
   
      <map name="Navigation">
        <area shape="rect" coords="25,82,48,110" href="#" onClick="this.form.Ausgabe.visibility = visible" alt="Info" title="Info" />
        [...]
      </map>
   
        <img src="menue.gif" usemap="#Navigation" width="456px" height="125px" />       
    </div>
    <div class="untermenue">
      <a class="untermenue" href="#" name="Ausgabe" style="visibility:hidden;">Link1</a>
    </div></form>

---

Wenn ich also oben auf die Maparea klicke, soll der Link sichtbar werden... Es passiert: nix.
oder kann es daran liegen, dass es 2 nicht ineinander verschachtelte "div"s sind? (irgendwelchen dummen sachen gibts ja immer)

Versuch mal

Code:

---

div.ausgabe {
  overflow:auto;
}

---

Allerdings bin ich mir nicht sicher, ob sich das so einfach mit CSS realisieren lässt. Bei normalen Textlinks ist das das eine, aber bei ner Image Map o_O

nee, das overflow habe ich beim Haupttextfenster..
mit auto ist jetzt das waagrechte weg :)
danke...

hab kurz vor diesem post nen edit gemacht, ... bitte ansehen ;)

EDIT:
jetzt funktioniert alles... man muss halt nur den Vater fragen :D
ok, ich muss weiterbasteln, Texte formulieren und und und... einige von euch kennen das wahrscheinlich ;)
bis denn

EDIT2:
Frage der Farben:
http://img264.imageshack.us/img264/8292/screen12xv.jpg
Ich weis im Moment nicht, welche Farben die Hintergruende der Text - kurz gesagt, alles bis auf das Menue - bekommen sollen. Es sollte moeglichst dunkel sein und zum Menu passen.

Also inzwischen ist ja etwas Zeit vergangen (ohne Antwort), deswegen dachte ich mir, dass es in Ordnung ist, wenn ich pushe unter der Vorraussetzung noch etwas dabei zu schreiben ;)

Mit dem IE ist natuerlich das Design wieder total im Arsch. Sollte ich dann vll. ein "Notdesign fuer IE Nutzer" basteln oder eher diese, wie ich es bisher vorhatte auf Firefox aufmerksam machen und sie sonst in die Roehre gucken lassen?

Ich würde ein notdesign machen da die meisten user den IE nehmen (I love Firefox).

Zitat:

---

Zitat von Milchbox

Ich würde ein notdesign machen da die meisten user den IE nehmen (I love Firefox).

---

Warum Notdesign? rofl

Browserweiche IE werden auf einen Text umgeleitet

Zitat:

---

Leider benutzt du den Internet Explorer(oder einen IE Ausatz), unsere Seite ist damit nicht kompatibel, hole dir einen anderen Browser wie Mozilla, Firefox oder Opera!

---

Zitat:

---

Zitat von fanrpg

Warum Notdesign? rofl

Browserweiche IE werden auf einen Text umgeleitet

---

[...] hole Dir FireFox oder Opera. Oder auch, schaue Dir die Print Version unserer Webseite an, diese wird sogar 100% richtig mit einem Textbrowser dargestellt. :D

Mach lieber noch ne zwote Seite, die nicht unbedingt genausogut sein muss, aber wenn möglich Ähnlch wie die für FF/O usw..
Viel Spaß beim basteln. ;)

Dennis