Inhalt an Bildschirmgröße anpassen

[TheDirtyPanda]

Moin moin,

ich stehe momentan vor dem Problem, dass sich meine geschriebene Seite nicht an die verschiedenen Bildschirmauflösungen anpasst. Ich habe nämlich zu dem Thema einen Bekannten gefragt, der sich damit auskennt und er meinte, dass man die verschiedenen Elemente in <div>'s packt und denen dann eine Breite von 100 % geben soll. Gemacht getan, nichts hatte sich geändert. Vielleicht habe ich das auch nur falsch verstanden. Wer weiß. Auf jedenfall komme ich jetzt nicht mehr weiter!

Nun frage ich mal hier nach! Mir geht es eigentlich erstmal nur um die verschiedenen Desktopauflösungen und nicht um Reponsive Design, falls ihr das denkt.

Momentan sieht mein Code so aus:

HTML:

<div id="überschrift">
<h1>Willkommen auf meiner Seite!</h1>
</div>

Und hier der CSS:

#überschrift {
    width: 100%;
}

h1, h2 {
    text-align: center;
    text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;
    color: white;
    width: auto;
}

Vielleicht könnt ihr mir da weiter helfen. Ich danke schon einmal im Vorraus!

TheDirtyPanda

 

[scbawik]

Moin moin,

ich stehe momentan vor dem Problem, dass sich meine geschriebene Seite sich nicht an die verschiedenen Bildschirmauflösungen anpasst. Ich hatte nämlich zu dem Thema einen Bekannten gefragt und er meinte, dass man die verschiedenen Elemente in <div>'s packt und denen dann eine Breite von 100 % geben soll. Gemacht getan, nichts hatte sich geändert.

Nun frage ich mal hier nach! Mir geht es eigentlich erstmal nur um die verschiedenen Desktopauflösungen und nicht um Reponsive Design, falls ihr das denkt.

Momentan sieht mein Code so aus:

HTML:

<div id="überschrift">
<h1>Willkommen auf meiner Seite!</h1>
</div>

Und hier der CSS:

#überschrift {
    width: 100%;
}

h1, h2 {
    text-align: center;
    text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;
    color: white;
    width: auto;
}

Vielleicht könnt ihr mir da weiter helfen. Ich danke schon einmal im Vorraus!

TheDirtyPanda

Kein Plan was das werden soll.

 

[TheDirtyPanda]

Was meinst du damit? Verstehst du nicht, was mein Problem ist?

Ich möchte z.b. meine Seite an einem 24-Zoll Bildschirm richtig anzeigen lassen. Wenn ich nämlich jetzt meine Seite dort (lokal) aufrufe, verschieben sich alle Elemente. Ich arbeite mit einem 19-Zoll Bildschirm auf der Arbeit und programmiere dort eigentlich nur darauf. Zuhause aber wollte ich ausprobieren, ob die Seite dort auch genauso angezeigt wird! Leider verschiebt sich dort alles.

Vielleicht verstehst du jetzt was ich machen möchte - habe mich vielleicht etwas ungeschickt ausgedrückt! :)

 

[scbawik]

Was meinst du damit? Verstehst du nicht, was mein Problem ist?

Ich möchte z.b. meine Seite an einem 24-Zoll Bildschirm richtig anzeigen lassen. Wenn ich nämlich jetzt meine Seite dort (lokal) aufrufe, verschieben sich alle Elemente. Ich arbeite mit einem 19-Zoll Bildschirm auf der Arbeit und programmiere dort eigentlich nur darauf. Zuhause aber wollte ich ausprobieren, ob die Seite dort auch genauso angezeigt wird! Leider verschiebt sich dort alles.

Vielleicht verstehst du jetzt was ich machen möchte - habe mich vielleicht etwas ungeschickt ausgedrückt! :)

Ja, jetzt weiß ich schon eher was du meinst. Ein Link wäre dennoch vorteilhaft.
Die Größe deines Bildschirms ist eigentlich unwichtig, die Auflösung zählt. Aber diese wird bei 24-Zoll wahrscheinlich trotzdem höher sein.

100% ist daher meiner Meinung nach genau das Gegenteil von dem was du brauchst. So wie ich es jetzt verstanden habe, ist deine Seite nicht darauf ausgelegt "fluid" dargestellt zu werden (http://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/).

Ich denke daher, dass max-width eher deinen Ansprüchen gerecht wird.
zB:

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

 

[MrMurphy]

Hallo

Ich möchte z.b. meine Seite an einem 24-Zoll Bildschirm richtig anzeigen lassen. Wenn ich nämlich jetzt meine Seite dort (lokal) aufrufe, verschieben sich alle Elemente. Ich arbeite mit einem 19-Zoll Bildschirm auf der Arbeit und programmiere dort eigentlich nur darauf. Zuhause aber wollte ich ausprobieren, ob die Seite dort auch genauso angezeigt wird! Leider verschiebt sich dort alles.

Mit der Information kann kaum jemand dein Problem ergründen.

Was ist so schlimm daran wenn sich etwas verschiebt? Was heißt "richtig anzeigen"?

Das eine Seite bei unterschiedlichen Bildschirm- bzw. Fenstergrößen unterschiedlich angezeigt wird soll doch so sein. Wenn du keine Änderungen in der Darstellung wünscht musst du zur Textverarbeitung greifen oder eine pdf-Datei erstellen.

Wenn ich mir deine Fragen hier im Forum so durchlese wundere ich mich, das du offensichtlich kein Interesse daran hast, einfach mal die Grundzüge von HTML / CSS zu lernen. Viele Probleme ergäben sich dann gar nicht und du könntest auch viel zielgerichteter Fragen.

Gruss

MrMurphy

 

[TheDirtyPanda]

Ich lerne doch die Grundzüge von HTML und CSS! Ich stoße halt irgendwann auf ein Problem - google dann, wenn ich nichts finde frage ich Bekannte und Kollegen und wenn dann nichts hilft, frage ich hier im Forum nach! Ich kann auch nicht alles wissen - bin schließlich noch in der Ausbildung und dieses Forum ist auch dazu da, um Fragen zu stellen. Langsam kotzt dieses Forum leider nur noch an. Immer nur wird man hier von der Seite angemacht. Darf man jetzt nicht mehr seine Fragen stellen? Vielleicht weil ich mich unsicher fühle, frage ich lieber noch ein weiteres Mal nach, anstatt das Problem sofort von alleine zu lösen.

Mein Problem ist ja die Darstellung! Z.B. die Überschrift verschiebt sich zuhause einfach mal nach Links oder die Breite der einzelnen Elemente ist nicht die selbe, wie hier auf der Arbeit. Ich möchte einfach, dass die hier festgelegten Attribute auch so zuhause aussehen. Das macht man doch mit einem extra Div um das Element oder? Verstehe ich da etwas falsch?

 

[Tronjer]

Mein Problem ist ja die Darstellung! Z.B. die Überschrift verschiebt sich zuhause einfach mal nach Links oder die Breite der einzelnen Elemente ist nicht die selbe, wie hier auf der Arbeit. Ich möchte einfach, dass die hier festgelegten Attribute auch so zuhause aussehen. Das macht man doch mit einem extra Div um das Element oder? Verstehe ich da etwas falsch?

Nein, ein Div ist nur ein generisches Blockelement, das keinen Einfluss auf die Darstellung hat.

 

[scbawik]

Ich möchte einfach, dass die hier festgelegten Attribute auch so zuhause aussehen.

Dann verzichte auf Prozent und nimm absolute Maßeinheiten wie Pixel.

 

[TheDirtyPanda]

Die verschieben sich ja auch. Weiß denn keiner eine Antwort?

 

[TheDirtyPanda]

100% ist daher meiner Meinung nach genau das Gegenteil von dem was du brauchst. So wie ich es jetzt verstanden habe, ist deine Seite nicht darauf ausgelegt "fluid" dargestellt zu werden (http://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/).

Ich denke daher, dass max-width eher deinen Ansprüchen gerecht wird.
zB:

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

Danke! Ich werde das mal ausprobieren. Dein Post wurde mir bis eben nicht angezeigt.