nicht angemeldet
Skalierung von Bildgrößen entsprechend der Browsergröße
1 
Der Martin
0 0 Der Martin
0 0 Der Martin
0 0 Der Martin
0
Skalierung von Bildgrößen entsprechend der Browsergröße
Matthias ApselHoi !
Also wie ihr wisst, fahren je verschiedene Nutzer mit unterscheidlichen Auflösungen, und da ich möchte, dass mein Hintergrundbild immer komplett über das ganze Fenster geht, habe ich bisl getrickst. Funzt, soweit so gut.
Nur habe ich normale Bilder eingefügt und da merke ich, dass die auf ner anderen Auflösung sich gegenseitig überlappen bzw. aus dem Bild herauslaufen.
Ich will die jedoch genau wie das Hintergrundbild angepasst haben.
Was hab ich falsch gemacht?
Hier mein html Code mit css
<html>
<head>
<title>Hey HO</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
body {
font-family:sans-serif;
}
#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:1;
}
#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}
#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}
</style>
</head>
<body>
<div>
<img id="hintergrund" src="Grafiken/Webseite/back.png" alt="Hintergrund" title="Hintergrund" />
</div>
<div id="scrollbereich">
<div id="inhalt">
</div>
</div>
<img id= "3d-earth" src="Grafiken/Webseite/3d-earth.png" alt="3d-earth" title="3d-earth" />
<style type="text/css">
#3d-earth{
position: absolute;
width: 900px;
height: auto;
left: -350px;
top: -350px;
z-index:2;
}
</style>
<img id= "Logo" src="Grafiken/Webseite/bosch.png" alt="Logo" title="Logo" />
<style type="text/css">
#Logo{
position: absolute;
width: 700px;
height: auto;
left: 55%;
top: 5%;
z-index:3;
}
</style>
<h1>Select your language</h1>
<style type="text/css">
h1{
font-family: Calibri;
font-size: 70pt;
color: #fffaf0;
position: absolute;
left: 25%;
top: 35%;
z-index:4;
}
</style>
<img id= "deutsch" src="Grafiken/Webseite/Deutsch.png" alt="deutsch" title="deutsch" />
<style type="text/css">
#deutsch{
position: absolute;
width: 300px;
height: auto;
left: 10%;
top: 60%;
z-index:4;
}
</style>
<img id= "englisch" src="Grafiken/Webseite/Englisch.png" alt="englisch" title="englisch" />
<style type="text/css">
#englisch{
position: absolute;
width: 300px;
height: auto;
left: 30%;
top: 60%;
z-index:4;
}
</style>
<img id= "russisch" src="Grafiken/Webseite/Russisch.png" alt="russisch" title="russisch" />
<style type="text/css">
#russisch{
position: absolute;
width: 300px;
height: auto;
left: 50%;
top: 60%;
z-index:4;
}
</style>
<img id= "portugisisch" src="Grafiken/Webseite/Portu.png" alt="portugisisch" title="portugisisch" />
<style type="text/css">
#portugisisch{
position: absolute;
width: 300px;
height: auto;
left: 70%;
top: 60%;
z-index:4;
}
</style>
</body>
</html>
<!-- -->
-
Hallo,
Also wie ihr wisst, fahren je verschiedene Nutzer mit unterscheidlichen Auflösungen, und da ich möchte, dass mein Hintergrundbild immer komplett über das ganze Fenster geht, habe ich bisl getrickst. Funzt, soweit so gut.
ja, verwechsle aber bitte nicht Bildschirmauflösung und Fenstergröße; das eine hat mit dem anderen nichts zu tun. Das Prinzip, ein absolut positioniertes img-Element anstatt eines Hintergrundbilds zu nehmen, ist nicht neu, im Gegenteil: Inzwischen können dank CSS3 (background-size) alle erwähnenswerten Browser. Okay, IE8 nicht, aber dann bekommt der halt ein unskaliertes Hintergrundbild, so what.
Nur habe ich normale Bilder eingefügt ...
Nein. Wie aus deinem Code hervorgeht, besteht kein Unterschied zwischen dem, was du Hintergrund nennst, umd dem, was du "normale Bilder" nennst. Alle sind absolut positioniert und damit komplett aus dem Elementfluss herausgelöst.
Ich will die jedoch genau wie das Hintergrundbild angepasst haben.
Was heißt das genau?
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}Nicht gut. Gar nicht gut. Was ist, wenn der darzustellende Inhalt größer ist als das Browserfenster? Dank overflow:hidden ist ein Scrollen nicht möglich, also ist ein Teil des Inhalts nicht erreichbar.
#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}Ach. So baust du das, was eigentlich body sein sollte, wieder nach? Für mich unlogisch.
<body>
<div>
<img id="hintergrund" src="Grafiken/Webseite/back.png" alt="Hintergrund" title="Hintergrund" />
</div>Warum steckst du das sogenannte Hintergrundbild nochmal in einen Container? Und warum das Schließen des img-Elements im XHTML-Stil, obwohl ansonsten nichts auf XHTML hindeutet?
<img id= "3d-earth" src="Grafiken/Webseite/3d-earth.png" alt="3d-earth" title="3d-earth" />Fehler: IDs dürfen in HTML 4 nicht mit einer Ziffer beginnen.
<style type="text/css">Fehler: style-Elemente dürfen nur innerhalb von head vorkommen.
#3d-earth{ position: absolute; width: 900px; height: auto; left: -350px; top: -350px; z-index:2;Du willst das Bild teilweise weit außerhalb des Browserfensters positionieren? Wieso das?
Ich gebe dir insgesamt einen guten Rat:
1. Lerne HTML.
2. Fang frisch an, denk dabei im ersten Moment überhaupt nicht ans Aussehen, sondern
nur an die logische Struktur.
3. Lerne CSS.
4. Gestalte das in 2. erstellte Dokument mit CSS.Bei diesem Prozess sind wir dir gern behilflich, aber vergiss bitte erstmal alles bisherige.
So long,
Martin--
Disziplin: Teppichböden wiederfinden, wenn man sie verlegt hat.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
1. wie beschrieben passt es mir, egal von welchem Fenster ich die Seite aufrufe, den Hintergrundbilschrim immer an. Ich möchte nur dasselbe für die anderen Bilder.
2. Wie würdest dein Code aussehen, wenn du das Hintergrundbild nicht im Container hast?
3. Danke, ich hab das mit dem 3d-geändert.
4. Das mit den Style Elementen hab ich verpennt... sind nun auch alle im header.
5. Ich positioniere das Bild deswegen etwas außerhalb, weil ich nur den Ausschnitt dieses Bildes haben will, links oben. Irgendwie bearbeiten geht nicht, da Programme nicht vorhanden. Und mit nem snipping tool und paint komm ich da nicht weit.
Ich wollte nur wissen, warum es mir alle anderen Bilder "verhaut" aber das Hintzergrund img immer angepasst wird.
-
Hi Manni,
- wie beschrieben passt es mir, egal von welchem Fenster ich die Seite aufrufe, den Hintergrundbilschrim immer an. Ich möchte nur dasselbe für die anderen Bilder.
was genau? Das verstehe ich nicht. Du positionierst doch die anderen Bilder an feste Positionen, gibst ihnen sogar feste Größen. Daher ist für mich nicht zu erkennen, was du wirklich erreichen willst.
- Wie würdest dein Code aussehen, wenn du das Hintergrundbild nicht im Container hast?
Das Containerelement außenrum einfach weglassen. Anders als manche Web-Bastler, die anscheinend glauben, man könne nur div-Elemente mit CSS gestalten, formatierst du ja sowieso das Bild direkt. Also hat das umgebende div-Element keinen Sinn und Zweck.
- Ich positioniere das Bild deswegen etwas außerhalb, weil ich nur den Ausschnitt dieses Bildes haben will, links oben. Irgendwie bearbeiten geht nicht, da Programme nicht vorhanden.
Och nööö, das Argument zieht nicht. Selbst Windows Paint kann das - den relevanten Ausschnitt des Bildes markieren, kopieren, als neues Bild einfügen, speichern. So einfach.
Ich wollte nur wissen, warum es mir alle anderen Bilder "verhaut" aber das Hintzergrund img immer angepasst wird.
Das kann ich dir nicht sagen, weil ich das Problem noch nicht verstanden habe.
Ciao,
Martin--
Vater Staat bringt uns noch alle unter Mutter Erde.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin, ich versuch es nochmal :)
also ich habe paar Std. nach einer Lösung gesucht, wie ein Hintergrundbild sich immer im vollen Browser unabhängig von der Größe oder Auflösung , aufmacht.
Das habe ich geschafft. (Hab hier noch 2 Rechner, bei denen das jeweils anders aussah. Wenn ich meine Seite jetzt aufrufe, dann ist das immer über die ganze Browserseite.Mein Problem ist, dass die anderen Bilder, die ich einfüge, sich nicht wie das Hintergrundbild immer neu skalieren. Ich versuch grad zu verstehen wie ich das mit dem Hintergrundbild gemacht hab, dass das immer die richtige Größe hat. Das Gleiche hätte ich gerne für alle Bilder. Deswegen habe ich auch die Entfernung in % vom Rand angegeben.
p.s. das Argument zieht doch ^^ Schlimm genug, weil ich bis relativ PS efahren und hab auch schin viel mit Photoshop etc gemacht, von daher muss ich das akzeptieren.
Ja, markieren, kopieren klappt. Aber schneid da mal aus, dann hab ich nen weißen Hintergrund (viereckiges Bild) auf schwarzem Hintergrund. Dadurch, dass ein png ist, hab ich glücklicherweise schon von Hausaus keinen Hintergrund.Ich hoffe du hast mich jetzt verstanden ^^
-
Hallo,
also ich habe paar Std. nach einer Lösung gesucht, wie ein Hintergrundbild sich immer im vollen Browser unabhängig von der Größe oder Auflösung , aufmacht.
ja klar, weil du dieses Bild auf 100% Breite und 100% Höhe skalierst.
Mein Problem ist, dass die anderen Bilder, die ich einfüge, sich nicht wie das Hintergrundbild immer neu skalieren.
Wie auch? Deren Größen hast du ja mit festen px-Angaben zementiert (wobei height:auto dabei ziemlich sinnfrei ist).
Das Gleiche hätte ich gerne für alle Bilder. Deswegen habe ich auch die Entfernung in % vom Rand angegeben.
Ja, die Position schon. Aber nicht die Größe, die hast du auf feste Pixel-Maße gesetzt.
p.s. das Argument zieht doch ^^ Schlimm genug, weil ich bis relativ PS efahren und hab auch schin viel mit Photoshop etc gemacht, von daher muss ich das akzeptieren.
Ich habe Photoshop nie verwendet - unter anderem, weil ich nicht einsehe, warum ich ein Programm für mehrere hundert EU$ kaufen soll, wenn ich Vergleichbares auch wesentlich günstiger, teilweise sogar kostenlos haben kann.
Ja, markieren, kopieren klappt. Aber schneid da mal aus, ...
Wozu? Du willst doch nur einen Teilbereich eines Bildes als neues, eigenständiges Bild speichern.
Ich hoffe du hast mich jetzt verstanden ^^
Teilweise. Nicht verstanden habe ich, wo genau du Schwierigkeiten hast. Im Erkennen des Unterschieds zwischen Pixel und Prozent? Im Bearbeiten eines Bildes mit Windows-Bordmitteln?
Ciao,
Martin--
Wie kann es sein, dass ich von 100 Gramm Schokolade zwei Kilo zunehme?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
ich will wissen wie ich die anderen Bilder anbringe, (okay, statt fester Breite halt anders), damit die wie das Hintergrundbild sich ebenfalls richtig dazu anordnen.
Adobe MC dürfen Studenten kostenlos benutzen.
-
Hallo allerseits,
ich will wissen wie ich die anderen Bilder anbringe, (okay, statt fester Breite halt anders), damit die wie das Hintergrundbild sich ebenfalls richtig dazu anordnen.
könnte bitte mal jemand anders übernehmen? Ich schaff's nicht, diesem Burschen den Unterschied zwischen absoluten Maßen in Pixel und relativen Maßen in Prozent klarzumachen ...
*seufz*
Und tschüss,
Martin--
Auch in Eckkneipen geht es manchmal rund.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
ich versteh das schon!!
Nur ich will wissen ob ich Probleme kriege, wenn ich diese Angabe ebenfalls in % mache... Sag mir doch, wie du es machen würdest?!-
Om nah hoo pez nyeetz, Manni!
Nur ich will wissen ob ich Probleme kriege, wenn ich diese Angabe ebenfalls in % mache
nein
Sag mir doch, wie du es machen würdest?!
nein - Die Energie des Verstehens.
Zeig die Seite, so kann man dir am effektivsten helfen und ich erwarte, dass du Martins Hinweise schon umgesetzt hast ;-)
Zudem gleich noch einer: Dein CSS soll bestimmt für mehrere Seiten gelten, also verwende eine CSS-Ressource für alle Seiten deines Projekts.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
Ja, markieren, kopieren klappt. Aber schneid da mal aus, dann hab ich nen weißen Hintergrund (viereckiges Bild) auf schwarzem Hintergrund. Dadurch, dass ein png ist, hab ich glücklicherweise schon von Hausaus keinen Hintergrund.
Was spricht denn dagegen Freeware Programme (wie z.B. GIMP)? Kostenlos und für die gängigen Betriebssysteme verfügbar.
Zu deinem Bilderproblem. Es ist doch logisch, dass sie nicht skaliert werden. Du arbeitest mit absoluten Werten für die Breite:
#Logo{ position: absolute; width: 700px; height: auto; left: 55%; top: 5%; z-index:3; }MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
-
-
-