CSS Website - Format

[pineapplefreak]

Hallo alle zusammen. Ich bin gerade dabei eine "seriöse" Website zu machen. Sie ist jetzt nicht für eine Firma oder sonstwas, sondern eher für eine Jugendgruppe, zum Austausch, zur Terminplanung und und und...

Jetzt sieht es doch meistens ziemlich bescheuert aus, wenn eine Website über die gesamte Seite geht. Hier auf Computerbase ist das so gelöst, dass z.B. bei FullHD Auflösung immer dieser blaue Rand links und rechts ist. Wenn ich die Auflösung jetzt herunterschraube, ist der Rand immer noch da, aber deutlich schmaler. So soll halt erreicht werden, dass jeder Nutzer ungefähr eine gleiche "Hauptbild"größe hat.

Das gleiche Prinzip wollte ich bei meiner Website auch anwenden. Jetzt meine Frage: Bisher habe ich das einfach mit z.B.

margin: 50px 250px 50px 250px;

gelöst. Jetzt wird aber ja auf jeder Auflösung so viel abgezogen und Leute mit einer niedrigen Auflösung gucken in die Röhre.
Kann ich das irgendwie dynamisch machen, oder muss ich zu jeder Auflösung ein anderes margin definieren? Wenn ja, wie mache ich sowas, d.h., wie frage ich die Auflösung ab usw.?


Danke fürs Lesen

 

[cartridge_case]

mindestwerte sind wohl hier das zauberwort

 

[DJND]

250px links, 250px rechts... wäre es da nicht besser, eine prozentuale Angabe für die Breite des Layouts anzugeben und ansonsten zu zentrieren?

Alternativ kann man nach Breite sowie Medium unterscheiden im CSS. Das ist allerdings recht neu und ich bin ohne nachzuforschen nicht sicher, ob es Teil von CSS3 ist oder erst im Nachfolger definitiv definiert wird.

 

[QXARE]

mindestwerte sind wohl hier das zauberwort

Aja?

Du kannst die Breite wie mein Vorposter schon gesagt hat mit %-Werten, aber auch mit fixen Werten (px) festlegen. Die Seite kannst du dann mittels

margin: 50px auto;

zentrieren.

Mit Media Queries können dann die Styles in Abhängigkeit zur Auflösung verändert werden.

 

[Znrl]

Wenn du nur ein Content(div) haben willst und den Hintergrund in ner andern Farbe kannst du dem Content div auch einfach ne min-width und max-width (oder halt ganz fix) mit

margin: 0 auto;

oder einfach nur auto
bzw. left: 50%;

kannst du mal etwas rumspielen.

Genauer kann ichs nur sagen, wenn du genauer beschreibst wie das Aussehen soll.

 

[palace4d]

Du möchstes eine Responsive oder Adaptive Webseite.

Schau mal nach Media Queries per Standardsuchmaschine.

 

[Znrl]

Ich glaube es ging nur darum, dass ein Rand von 250px recht und links bei kleinen Bildschirmen halt direkt 500px "klaut".
Mit min-width, max-width und margin: x auto; hat man keinen Rand solange man die max-width nicht erreicht hat und dann einen dynamische größer werdenden Rand. Media Querries oder Erkennen der Auflösung wäre ja eher was für speziell angepasste Desings (Smartphone, Pivot, Touch,..), sonst eher etwas viel Aufwand um nur die Randbreite anzupassen?

edit: vtl eher Rahmen wie Rand.

 

[pineapplefreak]

Also ich zeig ich euch nochmal kurz, was ich mein, quasi zur verdeutlichung

(ja ich weiß, da sind noch alte Solardaten drin, was die Kuh da oben zu suchen hat bleibt geheim und und und. )
Ich will also, dass dieser bronzene Kasten immer in der gleichen Größe bleibt, nur der braune rand wird verändert.

Ich habs gerade mit Prozent gemacht. Jetzt ist es zwar etwas besser, aber trotzdem ist z.B. bei einer Auflösung von 1280*720 jetzt der innere Kasten noch viel zu klein

Was genau sind diese Mindestwerte?

 

[QXARE]

Wenn du sagst, dass dir die Seite auf 1280x zu klein ist, kannst du mit min-width: 1000px; eine Mindestbreite vorgeben, die nie unterschritten wird.

 

[pineapplefreak]

Also ich glaube, dieses Auto ist am besten passend.
Wie müsste ich das am besten schreiben?

Ich setze jetzt quasi die Breite des inneren Feldes manuell auf 1200px.
was müsste ich jetzt als margin left und margin right angeben, damit von beiden seiten immer gleichviel abgezogen wird? Unter zuhilfenahme, dieses ominösen auto?

				width: 1200px;
				margin: 10px auto 10px auto;

ist das soweit richtig?

Sieht eigentlich gut aus bisher

 

[BliccZ]

Du möchtest, dass die Seite eine fixe Breite hat und gleichzeitig zentriert wird. Das ist ganz einfach möglich, in dem du der Klasse, die die gesamte Seite beinhaltet, folgendes zuweist:

width: 600px;
margin: 0 auto;

Die 600px sind hier die Breite, die deine Seite annimmt, der Rand entsteht dann automatisch. margin: 0 auto zentiert deine Seite dann. Wenn du die 0 durch eine andere Zahl ersetzt, erhöht sich der Rand oben und unten.

Edit: Jo, auto ist hier das Richtige.