Webseite an Bildschirmgröße anpassen

miklos · 03.11.2009

Hallo ich bin eher noch am Anfang was Webseitenerstellung betrifft.

Ich arbeit am Notbook und wenn ich aber die fertige Seiten an einem größeren Monitor ansehe, dann sehen die Seiten kleiner aus, also wie ich es am Notbook erstellt habe. Somit sind die Seiten eher links und oben platziert...
Wenn ich es verändere dann sieht es natürlich am Notbook größer aus und muß nach rechts oder nach unten scrollen.

Wie schaffe ich eine einheitliche größe?
Gibt es dafür bestimmte CSS angaben?
Vielen Dank im voraus.
Mfg Miklos :rolleyes:

edit by LS:// bitte ordentlichen Titel nehmen, was soll uns "Bildschirmgrösse" sagen?

cebito · 03.11.2009

AW: Bildschirmgröße

Du hast die Möglichkeit dein Layout auf die meist gebrauchten Bildschirmauflösungen abzustimmen und für größere Auflösungen zu zentrieren oder aber das ganze Layout dynamisch zu gestalten - heißt es passt sich der Auflösung an (wobei da auch Grenzen sind). Schau mal hier und/oder hier rein, sollte dir erstmal weiterhelfen.

miklos · 03.11.2009

AW: Bildschirmgröße

Hallo vielen Dank ich werde die Seiten mal anschauen.

macher · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Wenn Du Bilder in Deiner Seite hast, musst Du halt grundsätzlich bedenken, dass Bilder auf dem Monitor aus eine Zahl x an Pixeln bestehen. Hat das Bild eine Auflösung von z.B. 600x400 Pixeln, und der Monitor eine Auflösung von 640x480 so ist das Bild fast monitorfüllend. Verfügt der Monitor aber über eine Auflösung von 1920x1050 ist das Bild nur ein kleiner Teil der Monitorfläche.

Pauline · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Du solltest Deine Tabellen/Objekte nicht mit einer absoluten Größe definieren sondern mit relativen Werten arbeiten (z.B. Menüleiste links 20%...), dann es es völlig egal mit welcher Monitorauflösung Du Dir die Seite anschaust.
Siehe hier Beispiel 3:
SELFHTML: Navigationshilfen / Suche

Viele Grüße
Pauline

cebito · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Pauline schrieb:
Du solltest Deine Tabellen/Objekte nicht mit einer absoluten Größe definieren sondern mit relativen Werten arbeiten (z.B. Menüleiste links 20%...), dann es es völlig egal mit welcher Monitorauflösung Du Dir die Seite anschaust.
Siehe hier Beispiel 3:
SELFHTML: Navigationshilfen / Suche

Viele Grüße
Pauline

Mit Tabellen sollter er gar nicht erst anfangen, und wie ich oben bereits schrieb, auch dynamischen Layouts sind Grenzen gesetzt. Bei einer Auflösung von 1920 kann kein Mensch mehr Text ordentlich lesen bei dem die Zeile über den ganzen Bildschirm geht.

miklos · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Danke für Euere Anregungen!
Ob ich relativ oder absolute die Elemente positioniere ist nach meiner Erfahrung in dem Fall nicht wirklich entscheidend un macht eigentlich keinen erheblichen Unterschied zur Bildschirmgröße, aber ich werde es nochmals genauer versuchen.
Prinzipiell verwende ich keine Tabellen zum positionieren..
Ich lasse die Finger davon so weit es möglich ist...

Mfg mik

FredFuchs94 · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Also ich positioniere immer alles mit Divs. Die sind schnell&einfach anzupassen und folgen sozusagen eigentlich immer aufs Wort

.
Wobei es da auch wieder differenzen gibt. Siehe InternetExplorer 6&7!

Denn schau dir mal ne normale Website von einem "Hobby-Webdesigner" an der das einfach nur so für sich gemacht hat im IE6 an.
Microsoft ist da aber auf einem guten Weg, denn der IE8 ist schon echt gut was Kompabilität angeht.

miklos · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Ja ich mag auch Divs und verwende sie gern, aber manche mögen den Div "salat" nicht wenn sie zu viel werden..
Tabellen sind mir nicht so sympatisch.

Herr_D · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

miklos schrieb:
Ja ich mag auch Divs und verwende sie gern, aber manche mögen den Div "salat" nicht wenn sie zu viel werden..
Tabellen sind mir nicht so sympatisch.

Nix für ungut, aber Webdesign hat nichts mit mögen und Sympathie zu tun... Frag dich mal, wie ernst wir dich nehmen sollen, wenn du sagst: Ich mag einen div... ja! Ich würde dir da echt 'nen guten Therapeuten empfehlen

Lern anständiges html, dann entsteht auch kein Div-Salat, denn dann setzt du div auch nur ein, wo ein div hingehört... Quellen wurden schon genug genannt... ansonsten such mal fluid bzw, liquid Design...

miklos · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

ich denke wohl das Wbdesign auch was mit mögen und sympathie zu tun hat.
Manche können es villeicht nicht spüren oder sind einfach ein bisserl versteift - aber wir sind alle nicht gleich..gott sei dank!
ich bin recht gut HTML versorgt eine therapie brauche ich nicht wirklich
gruss mik

Diakon · 04.11.2009

AW: Webseite an Bildschirmgröße anpassen

Design, ja / Technik, nein ; sei's drumm

Aber egal, ein Design "sinnvoll" entweder dynamisch via CSS - Definitionen oder z.b. JS-Script an zu passen. Ist nicht einfach und ich glaube so wie ich es bei den meisten hier lesen kann auch, das es wohl für dein Projekt sinnvoller wäre, das du dir eine feste Größe aussuchst und diese sauber Mittig ( margin: auto, etc...) positionierst.

Denn wie bei jedem dynamischen Design (sieht man auch an whaa.de) springen und verschieben sich bestimmte Elemente bei kleineren Auflösungen. D.h. man muss sich sowieso wieder eine "mindest-" Auflösung aussuchen oder viel Zeit und Wissen darein investieren, das die Elemente, die dann auch verschoben werden nicht kritisch sind.

grüsse
christian

feelx75 · 05.11.2009

AW: Webseite an Bildschirmgröße anpassen

Ja gut.. also ich gebe Herr_D uneingeschränkt recht.

Ein Div ist ein DIV ist ein div. Für manche Dinge sind sie gut, aber sie werden viel zu häufig eingesetzt. Man kann ja auch andere Elemente positionieren. Immer mal dran denken, ob dafür wirklich ein DIV nötig ist, oder ob es auch anders geht - einfacher - besser - geht

Und immer dran denken - mehr als zwei DIVs ineinander verschachteln, ist meistens schlechter stil, weils einfacher geht...

Eric Meyer sagt:

One thing to watch out for is "div soup," which is not too much better than table soup
If you find yourself nesting divs more than two or three deep, you're probably overdoing it and need to look for a simpler solution

Quelle (Punkt 47)

PS: Spätenstens wenn man nach Monaten in vier, fünf verschachtelten DIVs rumwühlen musst, wirst man feststellen, dass es wie Tabellen-TDs sind - nur ohne TR

miklos · 05.11.2009

AW: Webseite an Bildschirmgröße anpassen

Danke Diakon(Christian) auf die idee bin ich nicht gekommen eine feste größe mittig positionieren...das klingt gut.

Und Feelx 75 muss ich auch recht geben mehrere inenander verschachtelte divs können wirklich verwirrend sein..und eigentlich wirken die dann wirklich so vie TDs.

Danke Euch!!!!
gruss miklos

macher · 06.11.2009

AW: Webseite an Bildschirmgröße anpassen

Das mittige positionieren mache ich bei meinen Webseiten auch immer. Generell habe ich bei kleinen Seiten festgestellt, dass es sinnvoll sein kann, nicht genau mittig zu positionieren, sondern nur links / rechts genau mittig und oben / unten etwas nach oben versetzt oder je nach Größe (Länge) der Seite das ganze oben aufgehangen.

highjanni · 13.11.2009

ich persönlich mag es überhaupt nicht wenn die seiten so flexibel sind, dass sie sich dem monitor anpassen. je größer der monitor wird um so unkomfortabler und bedienungsunfreundlicher werden die seiten..........finde ich. es gibt beispielsweise einige onlineshop bei denen das so ist. da hast du ganz links die navi und wenn du pech hast ganz recht dein login. und dann stell dir mal vor du hast einen 24"er widescreen. da wanderst du ja hin und her. also mich nervt sowas total. ein ganz gutes beispiel ist auch wikipedia. bei nem großen monitor magst du da gar nichts mehr lesen, weil durch die dynamik die zeilen so extrem lang werden. ich mach mir dann mein browser kleiner das einen für angenehmen lesefluß habe.....aber das ist ja nicht sinn der sache.
DESWEGEN BEVORZUGE ICH ZENTRIERTE SEITEN MIT FESTER BREITE.

Hier Ist Das Mit Den Ellenlangen Zeilen übrigens Auch So.
Finde Ich Super ätzend! Sorry!

FredFuchs94 · 13.11.2009

AW: Webseite an Bildschirmgröße anpassen

Also ich mache meine Websites meist in 950px breite und dann einfach in die mitte. man kann ja wenn man mag per STRG*Scrollrad noch rein&rauszoomen.
Finde ich die beste Lösung. Ich mit meinem 15" Bildschirm

.

miklos · 13.11.2009

AW: Webseite an Bildschirmgröße anpassen

ok.
versteh ich es richtig, man soll die seitenbreite mit einem div festlegen und dann mittig platzieren
zb.
#container {width:950px; margin-right:auto; margin-left: auto; usw..}
oder packt ihr die seite eher in einer td tabelle statt div..?

cebito · 13.11.2009

AW: Webseite an Bildschirmgröße anpassen

Wo ist das Prob mit Ellenlangen Zeilen? Das lässt sich umgehen, css hat schließlich nicht nur prozentuale Angaben oder nur ein min-width zu liefern. Ich kann meine container auch variabel gestalten und dabei trotzdem die lesbarkeit erhalten. Ich hatte bereits in meinen letzten Posts geschrieben, das auch dynamischen Layouts Grenzen gesetzt sind, die sind genau dort, wo du sie beschreibst. Deswegen wäre es aber trotzdem schön, wenn man auf größeren Monitoren den Platz bis zum letzten (lesbaren) nutzen kann, sonst sieht da so manch Seite ziemlich verloren aus.
Hier mal ein Beispiel..., unter 960px gibts nen Scrollbalken, über 1300px bleibt das Design mittig mit 1300px Breite stehen.

Code:

#container {
    margin: 0 auto;
    min-width: 960px;
    max-width: 1300px;
}
/* und noch dem IE erklären */
* html #container {
    width: expression(document.body.clientWidth < 965 ? "960px"
    : document.body.clientWidth > 1305 ? "1300px" : "auto");
}

highjanni · 14.11.2009

AW: Webseite an Bildschirmgröße anpassen

cebito schrieb:
Wo ist das Prob mit Ellenlangen Zeilen? Das lässt sich umgehen, css hat schließlich nicht nur prozentuale Angaben oder nur ein min-width zu liefern. Ich kann meine container auch variabel gestalten und dabei trotzdem die lesbarkeit erhalten.

natürlich kann ich es beeinflussen wenn ich selber eine seite baue. aber ich kann es doch z.b. hier oder bei wikipedia nicht ändern.