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

Content-Größen (Schrift, bilder, designs) auf verschiedenen bildschirmen

L

Lovemate

Neues Mitglied
Hallo, aufgrund eines Problems (Projekt-Abgabe ist demnächst) benötige ich sachkundige Hilfe!
Bestimmt gibt es genau die Lösung für mein Problem hier irgendwo, leider fehlt mir wirklich die Zeit hunderte Posts zu lesen...

Ich schildere also kurz mein Anliegen und hoffe hier den ein oder anderen Fuchs zu treffen, der mir verbindliche Aussagen dazu machen kann.

Wer Web-Siten kreiert und konzipiert hat immer das Problem mit unterschiedlichen Rechnern, Betriebssystemen, Monitoren, Bildschirm-Auflösungen, Viewports usw....
Seine Seite auf den verschiedensten Endgeräten und Betrachtungsgewohnheiten auch nur annähernd gleich aussehen zu lassen ist eine echte Kunst!

Daher folgende topics:

Wie kann ich Bilder, Grafiken, Buttons usw. nicht nur an deren Inhalt oder Umgebung anpassen, sondern an die samte Site!?

Bsp: Ein Logo im header hat feste Maße (250px x 250 px), genauso die Schrift in der Navigationsleiste auf den Buttons (1.4 em).
Auf 600 x 800 Bildschirm-Auflösung sieht das niedlich und gestaucht aus (von der miesen Schärfe und Qualität jetzt mal komplett abgesehen) schaut man das Layout auf einer 1920 x1080 Auflösung an sind die Buchstaben winzig und die Bilder ebenfalls. Zwar stimmen die äußeren Abstände des images an dem umgebenden container (padding/margin) aber der Platz dazwischen ist gigantisch leer und öd!
Wie kann man die prozentuale Aufteilung und Umsetzung des Layout samt Schrift und bilder beibehalten? Übrigens: Ich nutze Prozentwerte- damit kann man prima die Größe und Ausdehnung bestimmen....

Hier 2 screenshots als Beispiel!

Danke für eure Hilfe im Vorfeld

L'mate

PS: Leider funktioniert der upload-manager nicht...:-(
 
Werbung:
Also ehrlich gesagt verstehe ich nicht, warum ein 250x250px-Logo auf einer 600x800-Seite gestaucht aussehen sollte?! Wenn du dem eine min-width gibst wird da gar nichts gestaucht. Eine Mindestbreite für deine Seite solltest du sowieso haben. Wenn du dann deinen Buttons in der Navileiste links und rechts einen gleichen Margin gibst sieht da auch nichts mehr gestaucht aus.

Berichtige mich, wenn ich mich irre, aber ich sehe im Moment dein Problem nicht so wirklich...
 
Hey, toney! das Logo bleibt 250 x 250 px - egal bei welcher Auflösung!
die min-width der Site ist 1280px die max-width 3000px.
das bedeutet: die Site wird immer mit mindestens 1280px dargestellt - bei kleinerer Auflösung halt mit horizontalem Scrollbalken!

Soweit klar....

Der Container (header), in dem sich das Logo befindet, hat eine max-width von 60%, bedeutet auf jeder Seite (links und rechts daneben) sind 20% Hintergrundbild zu sehen.
Das Logo hat einen festen margin-links wert in % und die andere Grafik im header ist rechts gefloatet und hat einen margin-rechts wert in % der sie am rechten Rahmen des headers positioniert!
Beide Grafiken haben - wie erwähnt eine feste Größe in pixel, die sich nicht verändert - egal bei welcher Auflösung!
Nur, wenn du dir die Seite in 800 x 600 anschaust, dann ist natürlich max-width von 60% eine andere Hausnummer als 60% bei 1920 x 1280.
Somit berühren sich die beiden Grafiken in der kleinen Auflösung fast, während in der großen zwischen beiden einen riesige, gähnende Leere klafft und sie wirklich eher verloren aussehen - auch von der Größe her.
Die Proportionen und Abstände stimmen halt nicht mehr und somit auch das Design - denn die Grafiken haben fest Größen, die sie umgebenden Container aber nicht, die passen sich an.
Und macht man die Grafiken größer in der Pixel-Zahl, sodaß das Design bei großer Auflösung stimmig ist, zerschießen sie bei kleiner Auflösung das Layout komplett....

Solltest Du oder jemand anderes diese Problematik nun vestehen - ich hab mich irgendwie unglücklich ausgedrückt, so scheints - und eine Idee haben, sie zu lösen würde ich mich über Antworten freuen!

Danke

L'mate

PS nochmal: Würde der Dateimanager funzen, würde ich einen Screenshot beider Auflösungen posten....:-(
 
Werbung:
Hallo.

Ein Link zu deiner Seite wäre ganz nett, ich kann mir dein Desgin und das Problem damit beim besten Willen nicht vorstellen.

Falls der Webspace zum hochladen fehlt, bei z.B. bplaced gibst kostenlosen Webspace.

Gruss
Elroy
 
Hi, Elroy....
Die Seite ist noch im xampp auf meinem Rechner!
Testumgebung - bis sie barrierefrei funktioniert.
Vorher wird sie nicht hochgeladen.....Hat also nichts mit mangeldem webspace zu tun!
Die Site war fast fertig....dann habe ich nur mal aus Spaß die Auflösung gewechselt und festgestellt was einer sieht,der
die Seite mit einem 17' betrachtet (solls ja noch geben)
Darum baue ich sie komplett neu (layout - der contet samt text und bild und links ist ja bereits fertig und werden später ins neue Layout eingefügt).
Jeder bis runter auf 800 x 600 soll die Site später auch benutzen können ohne Augenkrebs zu bekommen!
Alle reden vom "Viewport" aber was genau das ist und wie man es für sich nutzen kann...würde ich gerne mal wissen!


Wie kann man hier Bilder hochladen ? (screenshots) dann könnte ich dir zeigen was ich meine!
 
An alle, nochwas, um die Problematik mal zu verdeutlichen:
Wer von euch Firefiox nutzt und dort möglicherweise sogar die Webentwickler tools, der kennt ja die
Funktion "Maßwerkzeug einblenden" oder? (Verschiedenes --> Maßwerkzeug einblenden)
Damit kann ich ja bspw. den header messen (im viewport, also wieviele pixel er (x/y)in der gewählten Auflösung hat.)

1920x1080 = 1106 x 245 (headergröße)
800 x 600 = 579 x 217 (headergröße)

Jedem müßte klar sein wie sich ein 250 x 250 px großes images im Verhältnis zu diesen beiden Viewports verhält - denn das image bleibt immer gleich groß
das Umfeld in welchem es erscheint aber nicht und somit auch nicht die Abstände und Proportionen...
Was ist daran so schwer zu verstehen??? :-)
 
Werbung:
Dass sich die Verhältnisse der Abstände zu den Bildmaßen verändern, wenn du den Bildern feste Größen in Pixel gibst, die Abstände aber prozentual angibst, ist auch nicht so schwierig zu verstehen, oder? ;)

Wie stellst du dir denn eine Lösung vor?

Der Viewport ist der für die Darstellung zur Verfügung stehende Bereich im – zum Beispiel – Browser. Der variiert je nach Fenstergröße und ist grundsätzlich vom Benutzer bestimmbar.
 
Wie mermshaus schon fragte, wäre es interessant zu wissen was du dir so als Lösung vorstellst. Ich glaube irgendwie, dass du das zu sehr verkomplifizierst ;)

Was aber klar sein sollte, dass du z.B. das Logo skalieren müsstest. Dabei muss dann auch ein eventueller Qualitätsverlust ab einer bestimmten Auflösung klar sein. Was dir eventuell helfen könnte wäre PHP, oder meine bevorzugte Variante: jQuery (z.B. das My Image Scale-Plugin)<br />

Gruß
 
Werbung:
Na ja, du könntest die Breiten der Bilder auch in Prozent angeben.

(nur im Firefox getestet)

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">
            div { width: 20%; float: left; background: red; }
            div img { width: 100%; }
        </style>
    </head>

    <body>
        <div><img src="http://imgs.xkcd.com/comics/hofstadter.png" alt="xkcd" /></div>
        <div>.</div>
        <div><img src="http://imgs.xkcd.com/comics/hofstadter.png" alt="xkcd" /></div>
        <div>.</div>
        <div><img src="http://imgs.xkcd.com/comics/hofstadter.png" alt="xkcd" /></div>
    </body>

</html>
 
Das sind sie....

.head {
margin-left: 23%;
margin-right: 23%;
max-width: 60%;
background:url(../Pics/weisser_bckgr.png);
padding-top: 1.5%;
padding-bottom: 1%;
.....}

Aber das ist ja nicht das Problem!
Das Problem ist statische, fest Inhalte so gut es geht in flexible,
"liquid" oder dynamische Layoutkomponeten einfließen zu lassen....

Gruß

L'mate
 
Werbung:
Hallo.

Also ehrlich gesagt, ich finde margin und padding Angaben in % nicht richtig überdacht. Das sich hier die Abstände je nach der Größe des Viewports ändern ist völlig klar.

Ich würde hier mit festen Abständen arbeiten.

Falls das hier eine Zentrierung darstellen soll:
Code: 
margin-left: 23%;
margin-right: 23%;
Das kannst du auch mit: margin: 0, auto; erreichen.

Aber von ein paar Codezeilen oder einigen Bildern etwas zu sagen ist schwer, wir kennen dein Design nicht und wissen auch nicht wie du es umgesetzt hast.

Deswegen meine Frage nach einem Link.

Gruss
Elroy
 
Okay, ich versuchs nochmal.....

Vereinfach wir das Ganze auf eine andere Frage: Festes, statisches (Pixel-)Layout oder flexibles, dynamisches (em / %)Layout!?

Mein Projekt ist vom content her fertig, bedeutet: Texte, Seitenstruktur, Inhalte, Links, landing pages, Bilder, gimmicks und scripts sind in trockenen Tüchern!

Es geht nur noch um eines: Darum das Layout (welches Träger des Contents sein soll und kein schönes aber inhaltsloses Schmuckstück udn zudem möglichst barrierefrei keine Bilder als links in der Navi usw.)
so anzupassen, dass es auf möglichst vielen Endgeräten, Konfigurationen, Bildschirmen, Betriebssystemen, Browser-Einstellungen usw. möglichst gleich oder zumindest ähnlich aussieht und wirkt.

Einziger (Design-)Grundsatz: thematisch passendes background-pic über den gesamten Hintergrund.
Davor (horizontal mittig) in gleicher Breite aber unterschiedlicher Höhe ein <div>wrapper, in dem alles steht.
In ihm ein header (mit Firmen-Logo und einer Firmengrafik) - darunter in gleicher Breite die Navigation (horizontal) - darunter 2 untereinander folgende
Content-Boxen mit Bildern, Text und Links, sowie back-to-top und back-to-index links (text & Bild) fest rechts oben bzw. rechts unten im container psotioniert.
Abschließend ein footer mit gleicher Breite für Werbebanner.
Grundsätzlich sind alle HTML-Docs identisch bis auf einige Features (Kontaktformular, image-map, Tabellen, Listen und Anker zu anderen Teilen der Site sowie externen Links) !
Für ca 1/4 der Docs ist noch eine weitere horizontale Navi (innerhalb der ersten Content-Box um lokal in einem gesonderten Bereich zu navigieren. ) geplant.

Ich kann -aus Datenschutzgründen - weder links noch screenshots fertiger Docs reinstellen!
Ich hätte auch keine Lust als Kunde über mein angedachtes Projekt im Netz Details lesen zu können....

Insofern:
Vielleicht ist diese Frage klarer!


http://www.pixel-papst.de/index.php/dynamisches-statisches-layout

gruß
L'mate
 
Werbung:
Elroy schrieb:
Hallo.
Also ehrlich gesagt, ich finde margin und padding Angaben in % nicht richtig überdacht. Das sich hier die Abstände je nach der Größe des Viewports ändern ist völlig klar.
Ich würde hier mit festen Abständen arbeiten.
Falls das hier eine Zentrierung darstellen soll:
Code: 
margin-left: 23%;
margin-right: 23%;
Das kannst du auch mit: margin: 0, auto; erreichen.
Gruss
Elroy
Zum Vergrößern anklicken....

Hey, Elroy...
Thanx for the input.
Kurz dazu:
wenn ich meiner horizontalen Navi {margin:0, auto} gebe
passiert nur, daß sie im Gegensatz zu den anderen (mit Prozentwerten mittig gehaltenen)
Elementen weit links raus lugt, statt mittig zu sein.

Die Prozentwerte kamen NACH all den Versuchen zentriert zu positionieren, nicht davor!
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben