CSS: Webseitenoptik bei versch. Bildschirmauflösungen

[RollyRocket]

Hi Community. Ich bin etwas überfragt, was die Umsetzung bzw. Optimierung einer Homepage für verschiedene Bildschirmauflösungen betrifft.


Die Startseite der website.

Jap, das ganze sieht verwirrend aus und das soll es auch (btw, nich meine Idee.^^) Das Template der website ist momentan für eine bildschirmauflösung von 1280x1024px (viewport: 1224x832px) gebaut. Natürlich soll die Seite auch für andere Nutzer vernünftig aussehen. Die grünen links führen wie zu erwarten zu den jeweiligen Seiten. der Name der website sollte halt egal bei welcher Auflösung unten in der Ecke bleiben, und die anderen Links sollten ja auch weiterhin passen.

Wenn ich jetz aus allen weißen Wörtern ein background baue, der dann meinetwegen ca. 1900x1200px hat, und ich die grünen Links als einzelne Grafiken mache, würden diese ja bei den verschiedenen bildschirmgrößen nicht mehr korrekt in den Lücken sitzen richtig.!? Es müsste also bei egal welcher Bildschirmauflösung genauso aussehen wie im Beispielbild, ohne das man irgendwie scrollen muss. Hat jemand ne idee wie ich es in html / css aufbauen könnte? Bin grad total verwirrt vom vielen ausprobieren.^^

Bin für jede Hilfe dankbar.

Mal ein kleines Update:

Habe mal den aktuellen Stand anhand von 3 Screenshots beigefügt. Ich habe nun die grünen Links raus gelöscht und alle weißen Wörter als ein großes Hintergrundbild gespeichert. Dann habe ich die grünen Links als einzelne PNG´s(24) gespeichert und per css dem Lücken angepasst:


bei 1024x768px


bei 1280x1024px


bei 1600x1200px

Wie ihr seht passt es wie gehabt nur für die Größe 1280x1024px. Logischerweise muss man bei dieser Methode bei 1024... scrollen und bei einer größeren Auflösung als 1280... sitzen alle Links höher. Ich suche halt nach einer Möglichkeit das es möglichst bei jeder Auflösung gleich aussieht. Vielleicht mit einem Java Script !? oder geht es auch ausschl. mit css ? Wer mir helfen kann, bitte melden

 

[jackykfm]

AW: CSS: Webseitenoptik bei versch. Bildschirmauflösungen

Laß das Bild mit den grünen Links als ein Bild und mach ein ImageMap. D.h. an der Stelle im Bild werden an verschiedenen Stellen die URLs eingefügt..
Beispiel:

 

[Sasha]

AW: CSS: Webseitenoptik bei versch. Bildschirmauflösungen

Andererseits könntest Du auch für die verschiedenen Fenstergrößen, bzw. Geräte die Hintergrundgrafik und die Position der Links in einem extra css Abschnitt festlegen. Z. B. hier beschrieben

Bitte kostenlos registrieren, damit du die Links siehst.

 

[RollyRocket]

AW: CSS: Webseitenoptik bei versch. Bildschirmauflösungen

Vielen Dank für eure Antworten. Das mit der ImageMap ist ne sehr gute idee, damit schon mal nix verutscht , ändert vermutlich aber nix daran das man bei ner Auflösung von z.B. 1024x768px scrollen muss oder ?

Zu der Sache mit der Optimierung für versch. Größen in extra css Abschnitten muss ich sagen, hört sich gut an, nur leider Blick ich da nich so ganz durch, da ich was CSS betrifft vermutlich noch zu wenig Übung und Wissen habe. Ich weiß nich inwiefern sich das mit CSS realisieren lässt, aber Sasha, wär es denn bei deinem Beispiel möglich in der CSS-Datei zu sagen..bei 1024x768 is das Hintergrundbild so und so groß, bei 1280xbla ist es so und so groß !? So das man bei keiner Auflösung scrollen muss oder das ganze zu klein wirkt !?