Website größe Anpassen

05/18/2014 10:26 Döner-Chicken Grill#1
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
05/18/2014 10:50 adistoe#2
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
05/18/2014 10:52 ~ JWonderpig ~#3
da war wohl wer schneller^^
Tipp: schau dir mal Boostrap an.
05/19/2014 06:25 petergripihn#4
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 [Only registered and activated users can see links. Click Here To Register...] - 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.
05/19/2014 10:16 .Tanooki#5
Quote:
Originally Posted by vince1337 View Post
Durch die Programmiersprache
Der Beweis das du keine Ahnung hast
05/19/2014 14:15 petergripihn#6
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?
05/19/2014 16:30 ~ JWonderpig ~#7
Css ist genau genommen eine Stylesheetsprache.
HTML, CSS und Co werden nicht programmiert, sondern geschrieben.
05/20/2014 04:53 petergripihn#8
Ach mein gott ;D man kanns aber auch ernst nehmen x) naja jedem das seine!
05/29/2014 15:37 Philoy#9
Das geht meist mit den Befehlen:
Code:
width: 100%; height: 100%;
Das 100% sagt schon das er dann immer bei jeder Größe die Breite auf 100% macht.
05/29/2014 18:25 BlackSwirl#10
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
HTML Code:
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
05/30/2014 22:22 MrDami123#11
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 [Only registered and activated users can see links. Click Here To Register...] der jeweiligen Bildschirmgröße anzupassen. Das Script ließt die Größe vom vorhanden Platz im Browser aus, also die URL Leiste abgezogen.
Code:
<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.
06/01/2014 18:49 petergripihn#12
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.