Layout an Auflösung anspassen

Zitat von PaiMei

Wenn ich meine Website auf verschiedenen PCs mit unterschiedlichen Auflösungen ansehe, hat die Website ein unterschiedliches Design (z.B. Menübar verschiebt sich, Website füllt den Bildschirm mehr oder weniger aus,...).

Das dürfte nichts mit den px-Angaben zu tun haben. Eher mit verschiedenen Browsern, die die Angaben unterschiedlich interpretieren,

Zitat

Ich möchte aber nun, dass die Website auf einem 19" Bildschirm mit einer Auflösung x genau dasselbe Layout hat, wie auf einem 15,4" Bildschirm mit einer Auflösung y.

Definiere "genau dasselbe Layout". ;-)

Daher meine Fragen:

Zitat

1.) Muss ich dafür inder css Datei die Höhen und Breiten Angaben in % schreiben?

Für "genau dasselbe Layout" nicht. Für ein fluides Layout, was sich an den Bildschirm anpasst - ja.

Zitat

2.) Wieso verwenden die Templates alle px Angaben und keine % Angaben? Mit Prozent wird ja meine Seite an den Bildschirm angepasst und mit px nicht. Oder hab ich hier ein verständnisproblem?

Passt schon. Meistens wir wegen der Headergrafik o.ä. eine Breite in px angegeben, da sich diese ja schlecht an % anpassen kann. Es gibt natürlich Wege das zu umgehen. Ist letztendlich die Entscheidung des Designers. (Viele kennen halt nur Photoshop und wissen nicht, dass das Web keine Zeitung mit fester Breite ist... ;-))

PS: Ich bau mal so mal so... je nachdem... ;-)

Zitat von PaiMei

Das komische ist das IE6 die Website (nicht abhängig von der Bildschirm Auflösung) vollkommen anders darstellt als der IE7. Verwendet z.B. Auzählungszeichen obwohl ich keine angegeben habe.

Das findest du komisch? Willkommen in der Welt der Webdesigner... :-D

Zitat

Kann wordpress mit dem IE6 nichts anfagen?

Nein. WP ist eine Software die auf dem Server läuft und letztlich HTML-Seiten generiert. Die Frage ist eher: "Kann der IE6 nichts mit (X)HTML / CSS anfangen?" Die Antwort lautet leider: "Ja!" :twisted: (Wobei man aber zugestehen muss, mit sauberen HTML-Markup und einer "richtigen" DOCTYPE-Angabe kann man es dem IE6 etwas leichter machen...)

Zitat

Verwende keine Header Grafik. Mir ist ein fluides Layout lieber als eine überladene Website mit Grafiken.
Werde daher auf % Angaben umstellen.

Mach das. Schau dir auch in dem Zusammenhang min-width/max-width an (übrigens auch was, was der IE6 nicht kann). Achja, und Schriftgrößen etc. gibst du am besten im em an. ;-)

Zitat

1.) was bedeutet # Zeichen

Damit greifst du auf das HTML-Element mit der ID "content" zu. Wenn du da schon Problem haste, dann schau dir mal folgenden CSS-Workshop an:
CSS 4 You - The Finest in Stylesheets: Workshop CSS: Allgemeines

Ich finde da ist alles sehr schön erklärt. ;-)

Zitat

und wieso wird bei #content zweimal eine width gesetzt.

Das ist ein CSS-Hack, eine Art bestimmte Browser auszuschließen. Viele Browser bekommen Probleme, die voice-family-Regel zu verarbeiten und brechen die Verarbeitung dort ab. Sie bekommen nur die 1. width-Angabe zu sehen. Moderne Browser ignorieren den "Fehler" (und setzen 1 Zeile später "voice-family" wieder auf einen gültigen Wert zurück) und sehen danach die 2. width-Angabe. Das ist aber schon hohe CSS-Schule. ;-)

Die nächste Regel:

html>body #content

interpretieren wiederum nur Browser, die diese Art Nachfahren-Selektor (>) unterstützen, also z.B. der IE6 nicht.

hi Du findest hier 40 *nackte+ templates

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

manche fix breit andere fluid

ich empfehle jedoch meist flexible breit, weil ich zb bei 1900px Monitoren die elends langen Textzeilen der fluiden Layouts nicht lesen kann, da verlier ich die Zeile,

oder aber Du guggst Dir bei meinen Domains die Layouts - nicht die Farben und Bilder, sondern das CSS und xhtml ab- ist ja alles öffentlich ;)

ich habe zu 90% fluide Layouts -


lg