CSS Verständnis

03/05/2014 10:13 BitC0re#1
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:[Only registered and activated users can see links. Click Here To Register...]

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
03/05/2014 12:56 MrPuschel#2
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 [Only registered and activated users can see links. Click Here To Register...] mal an.

Insbesondere [Only registered and activated users can see links. Click Here To Register...] und [Only registered and activated users can see links. Click Here To Register...].
03/05/2014 13:49 Cholik#3
Quote:
Originally Posted by MrPuschel View Post
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 [Only registered and activated users can see links. Click Here To Register...] mal an.

Insbesondere [Only registered and activated users can see links. Click Here To Register...] und [Only registered and activated users can see links. Click Here To Register...].
Genau, SELFHTML: Version 8.1.2 vom 01.03.2007 - Merkste selbst oder?

Alle nötigen und aktuellen Referenzen findet man im MDN [Only registered and activated users can see links. Click Here To Register...]
03/05/2014 14:26 MrPuschel#4
Quote:
Originally Posted by Cholik View Post
Genau, SELFHTML: Version 8.1.2 vom 01.03.2007 - Merkste selbst oder?

Alle nötigen und aktuellen Referenzen findet man im MDN [Only registered and activated users can see links. Click Here To Register...]
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.
03/05/2014 14:36 BitC0re#5
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?
03/05/2014 15:15 Phillor#6
Du bist nicht gezwungen Abstände in px anzugeben. Du kannst auch Prozentzahlen eingeben ;)
03/05/2014 15:18 LekoArts#7
Apropos Prozentzahlen:
Finde das hier immer wieder nützlich, wenn ich mal ohne [Only registered and activated users can see links. Click Here To Register...] etwas mache ...

[Only registered and activated users can see links. Click Here To Register...]
03/05/2014 15:30 BitC0re#8
Quote:
Originally Posted by LeKoArts View Post
Apropos Prozentzahlen:
Finde das hier immer wieder nützlich, wenn ich mal ohne [Only registered and activated users can see links. Click Here To Register...] etwas mache ...

[Only registered and activated users can see links. Click Here To Register...]
Das stimmt, aber dann werden die Objekte bei mir beim reinzoomen vergrößert.
Das sollte nicht sein!
Muss ich position:fixed setzen?
03/05/2014 15:50 Popicker#9
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>
03/05/2014 15:55 BitC0re#10
Okay, aber wie mache ich das nun, dass sich die Objekte bzw. Elemente nicht bei geringerer Auflösung vergrößern?
03/05/2014 16:05 -TaZzy-#11
Frage, warum hast du noch gleich das Design der Website als Hintergrundbild drin?
03/05/2014 16:22 MrPuschel#12
Quote:
Originally Posted by BitC0re View Post
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.


Quote:
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 [Only registered and activated users can see links. Click Here To Register...] 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: [Only registered and activated users can see links. Click Here To Register...]

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.
03/05/2014 17:12 Cholik#13
Quote:
Originally Posted by MrPuschel View Post
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.
03/05/2014 17:36 MrPuschel#14
Quote:
Originally Posted by Cholik View Post
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.
03/05/2014 22:07 BitC0re#15
Könnte mir jemand das einfach machen? :D
Über die Entlohnung könnte man sich unterhalten!!!