# Automatische Größenanpassung



## I am hungry (5. Juli 2010)

Hallo erstmal,

ich habe in Photoshop es soweit entwurfen wie ich die Seite am Ende haben will. Für alles auch einzelne Ebenen gemacht.

Nur jetzt mein Problem, wie platziere ich das ganze dann so, dass man es auf jedem Monitor auch genau so sieht und nicht dann Ende ist oder die Proportionen anders sind.

Den Hintergrund habe ich im repeat laufen und macht somit keine Probleme bei anderen Auflösungen nur ebend alles andere.




Ich hoffe ihr habt verstanden was ich meinte.


----------



## Maik (5. Juli 2010)

Hi,

Photoshop-Design mit automatischer Größenanpassung?

Die Frage hatten wir heute doch schon mal auf der Agenda, und wäre dir bei Nutzung der Suchfunktion  nach möglichen Lösungsansätzen über den Weg gelaufen: PS-Website und Browseranpassung.

Und von welchen Proportionen sprichst du konkret, die in den diversen Monitorauflösungen nicht deckungsgleich erscheinen würden?

Falls du mit absoluten Positionsangaben dein Layout umgesetzt hast, und erreichen möchtest, dass dies in der Fenstermitte ausgerichtet wird, empfehle ich ein weiteres DIV, das den best. HTML-Code umschließt, und im CSS u.a. mit position:relative formatiert wird, damit sich die absoluten Positionierungen darin relativ verhalten, sprich auf die Ränder dieses Elements beziehen, und nicht auf den Dokumentkörper (Fensterrand).

Zusätzlich erhält es die Breitendefinition des Layouts, sowie margin:auto, um es im Viewport horizontal zu zentrieren.

mfg Maik


----------



## I am hungry (5. Juli 2010)

Entschuldigung, aber ich habe noch keine wirkliche Ahnung von CSS.

Ich meine nur, wie ich diesen schrägen Balken in ein HTML Dokument so machen kann das er immer Komplett angezeigt wird.

Wenn ich ihn als Bild normal einfüge ist ja dann irgendwo Ende und man sieht dann den Hintergrund.


----------



## Maik (5. Juli 2010)

Bei dem geneigten Linienverlauf solltest du ein absolutes Breitenmaß in Betracht ziehen.

Falls der Anzeigebereich im Browser hierfür nicht ausreichen, um es in seiner Breite vollständig darzustellen, weil der Seitenbesucher nicht mit einem maximierten Browserfenster im Netz unterwegs ist, stellt er dem Nutzer die horizontale Scrolllaufleiste zur Verfügung.

mfg Maik


----------



## I am hungry (5. Juli 2010)

Und wie genau geh ich jetzt vor?

Also das Bild(der Verlauf) ist 1280 px breit, jetzt muss ich im CSS Code die maximale Breite der Website anpassen und dann wird der Verlauf immer voll angezeigt?!


----------



## Maik (5. Juli 2010)

Jo 

"Voll" (einsehbar) mit besagter Einschränkung bzgl. der Fensterbreite im Browser, wenn sie die 1280px unterschreitet.

mfg Maik


----------



## I am hungry (5. Juli 2010)

Und wie stell ich diese maximale Breite ein?

Und muss ich dann einfach nur die sachen reinladen und dann hat sichs?


----------



## Maik (5. Juli 2010)

Solche Grundlagen-Fragen beantwortet dir eigentlich jede gut sortierte CSS-Referenz:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width

Und welche Sachen willst du wo genau reinladen?

mfg Maik


----------



## I am hungry (5. Juli 2010)

ja nur die einzelnen Bilder eben, oder alles zusammen als nen Flash-Dokument


----------



## Maik (5. Juli 2010)

Kannst du deine Antwort auf meine Frage bitte etwas aussagekräftiger formulieren, damit ich auch Gelegenheit bekomme, deinen Ausführungen zu folgen, denn ich habe im Moment keinen blassen Schimmer, was die Bilder mit einer Flash-Anwendung zu tun haben, und worauf du damit hier nun  letztlich hinaus willst.

mfg Maik


----------



## I am hungry (5. Juli 2010)

garnichts.



```
<div style="max-width:1280px;">


<img src="Enter5.png" border="0"/>
</div>
```

das ist wahrscheinlich völliger Schwachsinn was ich da gemacht hab.


Tut mir Leid das ich mich nen bisschen blöd bei irgendwelchen Sachen ausdrücke aber ich hab da leider echt noch kein Plan von der Materie.


----------



## Maik (5. Juli 2010)

I am hungry hat gesagt.:


> ich habe in Photoshop es soweit entwurfen wie ich die Seite am Ende haben will. Für alles auch einzelne Ebenen gemacht.
> 
> Nur jetzt mein Problem, wie platziere ich das ganze dann so, dass man es auf jedem Monitor auch genau so sieht und nicht dann Ende ist oder die Proportionen anders sind.
> 
> Den Hintergrund habe ich im repeat laufen und macht somit keine Probleme bei anderen Auflösungen nur ebend alles andere.



Du solltest mal diesen erläuterten  Zwischenstand ins Netz stellen, damit man sich davon ein genaueres Bild machen, und so der Lösungsfindung auch konkreter annehmen kann, ansonsten posten wir hier die nächsten ein, zwei Stunden noch weiter munter um den heißen Brei herum 

mfg Maik


----------



## I am hungry (5. Juli 2010)

jo, die Idee is mir ebend auch gekommen^^ werd ich gleich ma machen. Muss aber ersmal nochma Filezilla runterladen

http://physicalserver.kilu.de/Enter-Site/



Diese 5 Links darunter haben damit nix zu tun :-D Das ist nur wegen free Server ;-)


----------



## Maik (5. Juli 2010)

Es bleibt bei einer einzigen Grafik-Datei für diese "Splash"-Seite? 

Bin davon ausgegangen, dass sie für mehrere Ebenen häppchenweise filetiert wird 

Dann hilft dir hier Stu Nicholls' Beispiel http://www.cssplay.co.uk/layouts/background.html weiter (Browserfenstergröße skalieren, um den Effekt auszulösen), sofern du dir das so mit der Größenanpassung vorstellst.

Und was folgt im Anschluß für ein Seitenkonzept? Oder bist du noch nicht so weit? 

mfg Maik


----------



## I am hungry (5. Juli 2010)

naja was heißt hier bei einer einzigen Grafikdatei. Die Flaggen müssten eig. extra verlinkt werden damit auch die dementsprechenden Seiten aufgerufen werden.


----------



## Maik (5. Juli 2010)

*hüstel*

Theoretisch stehen dir dafür Verweis-sensitive Grafiken (Image Maps) zur Verfügung.

Soll sich das Layout (Bild) tatsächlich der Browserfenstergröße angleichen, so wie in meiner Link-Empfehlung, wird das wohl mit den  <area>-Tags und ihrer deklarierten Koordinaten als verweis-sensitive Fläche nicht mehr funktionieren, sprich die Objekte (Flaggen) entfernen sich von deinen jeweiligen Angaben im coords-Attribut, sobald du dein Browserfenster kleiner skalierst.

mfg Maik


----------



## I am hungry (5. Juli 2010)

Ja oder ich animiere und verlinke das alles in Flash u muss dann nur das Flash Objekt so anpassen das es den Bildschirm bedeckt, müsste ja eig. ähnlich ablaufen, oder?


----------



## Maik (5. Juli 2010)

Sollte mit Flash machbar sein. Wenn du den Aufwand für fünf Verweise in einer funktionellen "Splash-Page" (http://www.sebcom-online.de/lexikon/splash-page.html) betreiben willst.

Fragen zur praktischen Umsetzung richtest du bitte an das Flash-Forum, da dies nicht mein Fachgebiet ist, und wir uns hier im CSS-Forum "unterhalten".

mfg Maik


----------



## I am hungry (5. Juli 2010)

und ich hätte noch ein Problem, wenn ich eine neue Internetseite anfange und ein Bild reinlade bleibt aber immer eine Lücke wenn ich es nach oben ausrichte.


----------



## Maik (5. Juli 2010)

Alternativ würde ich kurzerhand das Design schmäler als die derzeitigen 1280px entwerfen, damit es auch theoretisch in den darunterliegenden Bildschirmauflösungen (z.B. 1024*768) vollständig im Browser einzusehen ist.

Der mittlere Bereich der Grafik wird vom oberen rechten Eck zum unteren linken Eck vertikal gemessen herausgetrennt, und für einen DIV-Block genutzt, der im Viewport horizontal und vertikal zentriert ist.

http://d-graff.de/fricca/center.html

Feddisch und Feierabend 

mfg Maik


----------



## Maik (5. Juli 2010)

I am hungry hat gesagt.:


> und ich hätte noch ein Problem, wenn ich eine neue Internetseite anfange und ein Bild reinlade bleibt aber immer eine Lücke wenn ich es nach oben ausrichte.


Ohne den Code zu kennen, tippe ich auf die voreingestellten Polsterungen des Dokumentkörpers, die noch auf null zurückgesetzt werden müssen.

Normalerweise für <body>, und je nach Doctype-Angabe zusätzlich für <html>, hier nutze ich aber zu Beginn eines Stylesheets den Universalselektor *, der alle Elemente einbezieht, die im HTML-Dokument enthalten sind, und ebenfalls solche Initialwerte für diese Eigenschaften besitzen, die zu Abständen im Textfluß führen - Block-Elemente eben, die einen automatischen Umbruch erzeugen; http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente ;-)


```
* { 
margin:0; /* Außenabstand */
padding:0; /* Innenabstand */
}
```

mfg Maik


----------

