CSS Verständnis

[BitC0re]

Hallo Leute,

ich wollte mich jetzt mal an einem einfach Design versuchen. Das Layout habe ich in PS gemacht und habe es als Hintergrund für die Webseite gemacht. Nun habe ich es mit position: absolute und Pixelangaben gemacht, sodass es nur bei FULL HD Bildschirmen richtig angezeigt wird!

Webseite:

Wie mache ich es nun, dass bei anderen Bildschirmauflösungen bzw. beim Reinzoomen in die Webseite sich die Elemente(Servername, Servermap, Ladebalken usw.) nicht verschieben?

Danke schonmal im vorraus!

Ist echt wichtig für mich, dass zu wissen!!!

MfG
BitC0re

[MrPuschel]

Die Struktur des Markups auf deiner Seite ist nicht sinnvoll. Es sieht so aus als gäbe es Probleme mit deinem Verständnis von html und wie eine Webseite aufgebaut sein sollte.

Schau dir mal an.

Insbesondere und .

[Cholik]

Originally Posted by MrPuschel

Die Struktur des Markups auf deiner Seite ist nicht sinnvoll. Es sieht so aus als gäbe es Probleme mit deinem Verständnis von html und wie eine Webseite aufgebaut sein sollte.

Schau dir mal an.

Insbesondere und .

Genau, SELFHTML: Version 8.1.2 vom 01.03.2007 - Merkste selbst oder?

Alle nötigen und aktuellen Referenzen findet man im MDN

[MrPuschel]

Originally Posted by Cholik

Genau, SELFHTML: Version 8.1.2 vom 01.03.2007 - Merkste selbst oder?

Alle nötigen und aktuellen Referenzen findet man im MDN

Ich freue mich auf deine PN in der du mir genau erklärst was an selfhtml veraltet ist, schließlich wirst du - mal abgesehen vom Datum auf der Seite - dafür gewichtige Gründe haben. Danke.

[BitC0re]

Ich schau mir mal das von Mozilla an, da Cholik mir mit seinem Level2 Rang vertrauensvoller aussieht ^^
Also mein Problem ist, wie ich einen Abstand von z.B. links oder rechts machen kann, ohne von Pixeln abhängig zu sein?

[Phillor]

Du bist nicht gezwungen Abstände in px anzugeben. Du kannst auch Prozentzahlen eingeben

[LekoArts]

Apropos Prozentzahlen:
Finde das hier immer wieder nützlich, wenn ich mal ohne etwas mache ...

[BitC0re]

Originally Posted by LeKoArts

Apropos Prozentzahlen:
Finde das hier immer wieder nützlich, wenn ich mal ohne etwas mache ...

Das stimmt, aber dann werden die Objekte bei mir beim reinzoomen vergrößert.
Das sollte nicht sein!
Muss ich position:fixed setzen?

[Popicker]

Hi,

um etwas beispielsweise mittig zu setzten kannst du auch die CSS Property margin verwenden.

Beispielsweise so: margin:0px auto

<div id="content" style="margin:0px auto">
<!-- dein inhalt hier -->
</div>

[BitC0re]

Okay, aber wie mache ich das nun, dass sich die Objekte bzw. Elemente nicht bei geringerer Auflösung vergrößern?

[-TaZzy-]

Frage, warum hast du noch gleich das Design der Website als Hintergrundbild drin?

[MrPuschel]

Originally Posted by BitC0re

Ich schau mir mal das von Mozilla an, da Cholik mir mit seinem Level2 Rang vertrauensvoller aussieht ^^
...

Wenn du im Bezug auf englisch sattelfest bist spricht nichts dagegen. Was da drin steht ist genauso richtig. Auf Foren-ränge und Auszeichnungen würde ich aber nicht zu viel setzen. Im Zweifelsfall sollte man sich mehrere Quellen anschauen und selbst entscheiden was am besten für einen geeignet ist.

Okay, aber wie mache ich das nun, dass sich die Objekte bzw. Elemente nicht bei geringerer Auflösung vergrößern?

Wie -TaZzy- schon angedeutet hat, wird man im Moment nicht so recht schlau aus deiner Seite. Wir könnten dir jetzt hier eine Lösung als Codebeispiel geben, aber ich bezweifle das du die anwenden kannst.

Schau dir den Quellcode auf an. Wie ist die Seite strukturiert? Wie richtet er seine Inhalte aus? Wie handelt er seinen Hintergrund?

Bau es ruhig einmal nach und versuch es zu verstehen. Wenn du Probleme damit hast, frag in kleinen Schritten "von unten hoch". So kann man dir besser helfen als wenn du gleich etwas vorweg greifst für das dir die Grundlagen fehlen. Du behandelst eine Webseite momentan so wie du ein Dokument in Photoshop behandelst - das ist eine von Grund auf falsche Herangehensweise.

Zu deiner eigentlichen Frage:
Um die Skalierung deines Hintergrundbildes zu verhinden kannst du das css attribut background-attachment mit dem wert fixed verwenden:

Da in diesem Fall, wie der Wert "fixed" schon impliziert, das Bild im original angezeigt wird musst du natürlich deine beiden doppelt gemoppelten background-size attribute entfernen.

[Cholik]

Originally Posted by MrPuschel

Da in diesem Fall, wie der Wert "fixed" schon impliziert, das Bild im original angezeigt wird

Bei "fixed" handelt es sich lediglich um die Positionierung, welches eine Auswirkung auf das Verhalten des Elements beim Scrollen bspw. hat. Das steht da auch genauso, was du erzählst scheint was ganz anderes zu sein, was nichts mit Skalierung zu tun hat.

[MrPuschel]

Originally Posted by Cholik

Bei "fixed" handelt es sich lediglich um die Positionierung, welches eine Auswirkung auf das Verhalten des Elements beim Scrollen bspw. hat. Das steht da auch genauso, was du erzählst scheint was ganz anderes zu sein, was nichts mit Skalierung zu tun hat.

Das ist richtig.

[BitC0re]

Könnte mir jemand das einfach machen?
Über die Entlohnung könnte man sich unterhalten!!!