Website größe Anpassen

[Döner-Chicken Grill]

Ich bin gerade dabei mit Photoshop & Microsoft expression web dabei eine homepage zu basteln, nur stellt sich mir ein Problem.
Wie kann ich die seite dynamisch halten dass sie sich dem bildschirm anpasst? wenn ich in 1024x768 eine vorlage mache, ist sie für die meisten Bildschirme (mich eingeschlossen mit 1680x1050)zu klein. Was kann man also da machen?

Wenn man es größer macht. z.B. 2000x1500 wird die seite automatisch verkleinert? oder gibt es da ein extra command?

​MfG

[adistoe]

Ich lege dir mal den folgenden Begriff stark ans Herz: Responsive Webdesign
Viel Erfahrung damit habe ich nicht, aber Google wird dir sehr gerne bei der Umsetzung helfen

mfg
adistoe

[~ JWonderpig ~]

da war wohl wer schneller^^
Tipp: schau dir mal Boostrap an.

[petergripihn]

Also ich baue mir in Photoshop meine Seite auf in der Größe wo ich Arbeiten kann , designe so wie ich lustig bin und schaue das ich übersichtlich meine Ebenen usw. habe dann erstelle ich wenn nötig aus den Bildern kleine gif. dateien wenn ich Sie als Farbe nicht übernehmen kann , dann wird das ganze mit CSS gemacht. Ich hab früher auch immer mit Html und Php gearbeitet aber an CSS kommt man nicht drum rum , damit baust du dir die Grundlage deiner Seite die du dann mit DIV Containern einfügst.

Durch die Programmiersprache selbst durch wrapper usw. wird die Seite dann automatisch angepasst.
Beispiel - ist ne kleine unban mmoga seite von mir!
Wenn du willst kannst du mir ja mal ein Design schicken und ich pass dir das mal an damit du ungefährt ein Grundgerüst siehst.

Edit:// Wichtig ist auch das du soviel Text als Design benutztst wenn du die Seite gut vermakrent willst denn umso mehr Content umso besser fürs SEO Ranking. Also Logos eher Extrahieren und wieder mit CSS und divs einfügen , so wie auch die Navigation , aber das macht jeder für sich.

[.Tanooki]

Originally Posted by vince1337

Durch die Programmiersprache

Der Beweis das du keine Ahnung hast

[petergripihn]

Wie bitte? Was ist CSS dann? Nen stück Brot? Is doch klar das du über StyleSheets ein Responsive Design aufbaust oder? Mit wasmachst du das denn nen stück holz?

[~ JWonderpig ~]

Css ist genau genommen eine Stylesheetsprache.
HTML, CSS und Co werden nicht programmiert, sondern geschrieben.

[petergripihn]

Ach mein gott ;D man kanns aber auch ernst nehmen x) naja jedem das seine!

[Philoy]

Das geht meist mit den Befehlen:

width: 100%; height: 100%;

Das 100% sagt schon das er dann immer bei jeder Größe die Breite auf 100% macht.

[BlackSwirl]

also ich gebe dir auch ein Tipp da hier ja wohl nicht auf die Bilder eingegangen wird ^^

Erst machst du dein Bild auf beliebiger Größe um so größer um so besser dann machst du dir ein Hintergrund bild, der die volle Größe hat und das, was dein Content sein Soll machst, du nicht weiter als 1000px so hast du für extrem große Bildschirme ein Hintergrund, was nicht irgendwann in Weiß übergeht und einen Content, der nicht zu groß ist, wenn jemand mal keinen guten Bildschirm hat und dann würde ich dir noch einige css befehle sagen aber ich denke das reicht wenn nicht pn

Ach ja

body{
        background: url(deinBild.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
Das cover sagt ihm das das Bild immer den ganzen Hintergrund ein Nehmen soll

[MrDami123]

Verwende einfach ein Muster statt ein Bild, welches sich ständig wiederholt.

Wenn du ein guter Webdesigner werden möchtest, könntest du dich mit Javascript etwas auseinander setzen. jQuery bietet einige nette Möglichkeiten, die es dir auch vereinfachen dein Webdesign auf die jeweilige Bildschirmgröße anzupassen.

z.B. verwende ich dies hier um der jeweiligen Bildschirmgröße anzupassen. Das Script ließt die Größe vom vorhanden Platz im Browser aus, also die URL Leiste abgezogen.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'>
var vpWidth = $(window).width();
var vpHeight = $(window).height();</script>

Praktisch könntest du diese nun verwenden um dein CSS perfekt darauf auszurichten. Natürlich bietet jQuery noch viele weitere tolle Sachen an. Dafür muss man aber halt etwas Javascript lernen.

[petergripihn]

Responsive ist nicht gleich Browseranpassung, wenn du dein Design an die Browsergröße anpasst ist das schon richtig mit widtht/height "100%" zu arbeiten bzw bilder oder backgrounds an die browsergröße anzupassen aber wenn du wirklich ein responsive Design bauen willst muss man das ganze schon etwas anders anpassen und media queries benutzen.