• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite verkleinern

J

jumbo125

Mitglied
Hallo, alle mit einander

Ich habe 3 Templates für meine Homepage gestaltet und habe diese jedoch zu groß gestaltet. Der Content beträgt 1200px. Normalerweise gehe ich nie über 950px.

Nun sieht die Seite bei meiner Auflösung sehr gut aus.

Bei 1024 x 768 sieht die Sache schon ganz anders aus. Kann ich nun die seite irgendwie verkleinern?

Eine Abfrage nach der Bildschirmgröße kann ich mittels javascript durchführen, aber wie das Bild verkleinern?

Hilft hier ev. viewport(oder so ähnlich)?
 
Die Zauberworte für die ordentliche Darstellung einer Webseite in unterschiedlichen Auflösungen heißen Responsive Design und Media Queries.
 
hab nur mal kurz darüber gesehen. Um mir eine Menge Zeit zu ersparren, stelle ich noch die Fragen, wie UMSTÄNDLICH bzw. ZEITAUFWÄNDIG eine solche umstellung ist....

Danke jedenfalls für den Tipp
 
irre ich mich oder müsste ich die komplett css datei überarbeiten... bzw. eine neue css datei für das passende endgerät erstellen?

dachte eher an 4-5 Befehle und die Sache ist erledigt
 
Hallo,

stelle ich noch die Fragen, wie UMSTÄNDLICH bzw. ZEITAUFWÄNDIG eine solche umstellung ist....
Zum Vergrößern anklicken....

Das wird dir ohne Kenntnis deiner bisherigen Seite und deiner Kenntnisse kaum jemand realistisch beantworten können.

Deine bisherigen Angaben lassen dich und damit auch deine aktuelle Seite eher der Old-School zuordnen. Also starres Layout aus dem letzten Jahrtausend. Von daher ist eher ein hoher Aufwand zu befürchten.

Gruss

MrMurphy
 
Starr.....???

alle meine drei Seiten bestehen aus keinen Tabellen-Layout.

Im Gegenteil, der aufbau ist mit wenigen worten schnell erklärt:

ich habe einen "außencontainer" der die gesamte Seite umschließt(position relative).

In diesem sind 4 weitere Divs. 3 Davon sind nebeneinander(Spaltenähnlich). Dies werden mit float:left nebeneinader gestellt.
darunter ist der vierte container. Dieser ist bereits der "bottom" container.

Fertig! ;-)

Natürlich befinden sich in den drei "Spalten-Containern", jeweils noch 1-2 weitere divs. So siehts aus.

Das Problematische:
keine der Höhen- oder Breitenangabe ist mittels "%"-Wert gesetzt, sondern alle Werte wurden mittels "px" definiert.(habe wo gelesen, das dies besser wäre, wobei ich mir nun nicht mehr so sicher bin).

Handelt es sich bei meinem Konzept um steinzeit?

Falls ja, bitte ein paar Verbesserungsvorschläge.

Mein Problem:
würde ich den "außenContainer" verkleinern, müsste ich die 4 "innencontainer" verkleinern. Danach wiederum die "ulNavigationsbar". Anschließend die "li". Alle weiteren(in den 4 Spalten"divs") liegenden DivContainer. Dazu noch padding und margin, damit die Proportionen passen. Und als ob das nicht schon genug wäre, handelt es sich um drei Templates.

Sehe ich das richtig?

Danke
 
Zuletzt bearbeitet:
Hallo,

Handelt es sich bei meinem Konzept um steinzeit?
Zum Vergrößern anklicken....

Webseitenmäßig? Ja.

Du hast (jedenfalls soweit nach deinen bisherigen Angaben für mich beurteilbar) einfach ein Tabellenlayout durch ein div-Layout nachgebaut. Das ist aber nicht der Sinn von Divs und genau so falsch, wie Taballen zum Layouten zu verwenden. Und das bereits seit Einführung von HTML4 / CSS2 im Jahr 2000.

Falls ja, bitte ein paar Verbesserungsvorschläge.
Zum Vergrößern anklicken....

Wenn du deine Seiten nach aktuellem Standard zukunftsorientiert und benutzerfreundlich aufbauen willst, hat Tronjer dich schon auf den richtigen Weg gewiesen:

Responsive Design und Media Queries
Zum Vergrößern anklicken....

Verbesserungsvorschläge ohne Kenntnis deiner Seite sind nicht möglich.

Wären deine Seiten wenigstens halbwegs nach den Ideen von HTML4 / CSS2 erstellt worden, wäre der Aufwand gar nicht so gravierend. So wirst du einen größeren Aufwand betreiben und zusätzlich lernen müssen.

Gruss

MrMurphy
 
Danke für deine rasche Antwort.

ich habe mir mal im youtube ein responsive Design Media.... tutroial angesehen. Jetzt weiß ich nicht, ob das auch ein Steinzeit video ist, denn der Aufbau der Seite ist (fast)exakt der gleiche wie meiner(nur eben ein kleiner ausschnitt).

Der User im Video hat eine "normale css" Datei erstellt wie ich. Anschließend legt er einen Codeabschnitt mit @media ... fest, schreibt die gleichen id's und class's und ändert jeweils die "body, wrapper(sein äußererDiv), width, margin, padding, height". Das wars????

habe ich ein "falsches" video gewählt?

Das kann aber nicht das sein von dem Ihr gesprochen habt, oder???
dann müsste man doch erst recht die ganzen divs, padding, margin, usw. abändern....

hier noch das video:
CSS Tutorial (German)[HD] Part 5 - Responsive Webdesign - YouTube

zur verdeutlichung genügt: 4:37min im Vergleich zu 11:30min - 11:40;
hier sagt er auch: "eine größe von.... im Vergleich zur vorher gewählten...."
oder ist das auch Steinzeit?
 
Hallo

ist das auch Steinzeit?
Zum Vergrößern anklicken....

Schlimmer. Das Video ist einfach grausam. Nicht mal HTML wird sinnvoll eingesetzt. Oder siehst du dort h- oder p-Elemente, obwohl Überschriften und Text vorhanden sind? Und mit Responsive Webdesign hat das auch nur am Rande zu tun. Oder gefällt dir das Ergebnis?

Gruss

MrMurphy
 
Das ganze Video sah ich mir nicht an, weil ich zuvor schon dachte, das etwas nicht stimmt. Den html Code sah beachtete ich nicht so genau, da es mir um die css Datei ging.

kennst du zufällig eine gute DEUTSCHE Anleitung/ Tutorial wo Grundgerüst angesprochen wird bzw. Was nicht einem Steinzeit Layout gleicht und wo respon.. Webdesign erläutert wird?

ich kann zwar englisch, aber gerade bei solchen Sachen möchte ich alles verstehen
 
nun habe ich schon mehrere Templates durch und muss gestehen, das alle am gleichen prinzip aufbauen.
Nacheinander die einzelnen Divs anordnen....

bezüglich. responsive Webdesign ist das Prinzip auch mehrmals ident gewesen:
bspw. mittels @media screen and(max-width:1024px) die browser-fenster differenzieren und die BEREITS vorhandenen divs dementsprechend abändern.

Sehe ich das so richtig?


Dies bedeutet für mich die äußeren divs mittels px statisch zu machen. Die inneren Divs mittels prozentangaben dynamisch gestalten.

Kommt es zu kleineren Bildschirmen, einfach die äußeren divs abändern(die inneren Divs sind dynamisch, aufgrund der prozentangaben). Divs anders floaten. Ev. font-size abändern. fertig

Desweiteren sollte ich doch meinen wrapper/content auf 950px verkleinern, anstatt 1200px
 
Zuletzt bearbeitet:
Hallo

Sehe ich das so richtig?
Zum Vergrößern anklicken....

Keine Ahnung. Wie schon geschrieben kann dir darauf niemand eine seriöse Antwort geben, der deine Seite und deinen Quelltext nicht kennt. Wenn du deine Seite nicht zeigen willst wirst du einfach mal loslegen müssen.

Wenn du allerdings immer noch mit festen Werten (px) um dich schmeisst hast du meiner Ansicht nach den Zusammenhang von HTML5 / CSS / Responsive Design noch nicht verstanden. Es hindert dich aber niemand daran, trotzdem was zusammenzubasteln. Das ist ganz und gar deine Entscheidung.

Gruss

MrMurphy
 
ich werde sie demnächst zeigen können. Aufgrund von Wünschen meines Freundes(für ihn ist die Homepage) muss ich sie ins Joomla einbinden.

Was nehmt ihr statt px?
 
Hallo,

Was nehmt ihr statt px?
Zum Vergrößern anklicken....

Was andere nehmen weiss ich nicht. Ich nehme keine Größen "statt" px. Sondern immer die, die für den jeweiligen Einsatz am sinnvollsten erscheint. Wo px sinnvoll ist nutze ich es also auch.

Da ich fast nur noch Seiten erstelle, die auf allen Geräten den Inhalt sinnvoll und benutzerfreundlich darstellen, bin ich komplett auf semantisches HMTL5 / CSS3 mit Responsive Design umgestiegen. Da für die unterschiedlichen View-Points von sichtbarer Ausgabe vom Smartphone über den Tablett-PC bis zum Riesenmonitor hohe Flexibilität erforderlich und mit HTML5 / CSS3 auch möglich ist, kommen für die Bildschirmausgabe bei neuen Seiten bei mir fast nur flexible Größenangaben wie % und em zum Einsatz. Bei der Druckausgabe finde ich aber fixe Größenangaben sinnvoller, da ich dort von einer "festen" Größe der Ausgabe auf DIN A4 ausgehe.

Benutzerfreundlich heißt für mich bei der Bildschirmausgabe, das der User nicht seitwärts scrollen muss und nicht zoomen muss, aber zoomen kann, ohne das ihm das Layout um die Ohren fliegt.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben