Hintergrund scalieren

[nico65]

Hallo,

Ich habe folgendes Problem:
Ich habe eine standart Website mit 800px Breite, die zentriert ist.
Bei Monitor Auflösung 1024 habe ich also einen Rand von jeweils 112px.
Bei Monitor Auflösung 1280 dementsprechend jeweils  240px Randbreite.

Ich möchte jetzt gerne Hintergrundgrafiken links und rechts haben, die in div container untergebracht sind, aber nur bei einer auflösung  von >1024px auftauchen.
Diese Grafiken sind 400 px breit und sehen auch zur Hälfte angeschnitten  noch gut aus. Sie wirken aber völlig häßlich, wenn man nur 112 px von ihnen sieht.

Meine Frage: Ist es irgentwie möglich, die Container bei Auflösung >1024 sichtbar zu machen (und zwar so, dass sie am jeweiligen Bildschirmrand anliegen). Und sie irgentwo hinzuschieben (unter den Inhalt oder aus dem Bildschirmbereich) wenn den die Auflösung =< 1024px ist.

Wäre sehr dankbar für eine Antwort. zerbrech mir schon seit zwei Tagen den Kopf darüber.

Gruß Nico

[Daniel]

Ahoi nico65,

Wäre sehr dankbar für eine Antwort. zerbrech mir schon seit zwei Tagen den Kopf darüber.

das geht nicht.
Das heißt es geht schon, aber halt nur mit JS.
Dein CSS stichwort lautet "display" bzw. "visibility".
Du brauchst das <img> nich in ein <div> packen.
vll. solltest du die Mase der bilder entsprechend per CSS skalieren
das es je nach auflösung nunmal unterschiedlich groß erscheinen, und
nicht an oder abgeschnitten werden.

MfG

[Gunnar Bittersmann]

Ich habe folgendes Problem:
Ich habe eine standart Website mit 800px Breite, die zentriert ist.

nico65,
Das ist wirklich ein Problem. Wenn der Viewport der Nutzers (Browserfensterinneres) schmaler als 800px ist, muss der horizontal scrollen – äußerst nutzerfeindlich.

BTW, Standarte vs. Standard; Website vs. Webseite.

Bei Monitor Auflösung 1024 habe ich also einen Rand von jeweils 112px.

Die Monitorauflösung hat nichts mit der Größe des Viewports zu tun. Letztere mag für dich interessant sein, erstere überhaupt nicht.

Bedenke, dass nicht alle Nutzer das Browserfenster den ganzen Bildschirm ausfüllen lassen und einige auch noch Sidebars haben.

Meine Frage: Ist es irgentwie möglich, die Container bei Auflösung >1024 sichtbar zu machen

^Auflösung^Viewportbreite

Mit JavaScript sollte da was zu machen sein: http://de.selfhtml.org/javascript/objekte/window.htm#inner_width@title=innerWidth. Beachte die Bemerkung zum IE.

Und sie irgentwo hinzuschieben (unter den Inhalt […])

Ungünstig. Warum soll der Nutzer nach unten scrollen können, um dort nur Dekoration vorzufinden? Dann lieber gar nicht anzeigen.

Wäre sehr dankbar für eine Antwort. zerbrech mir schon seit zwei Tagen den Kopf darüber.

Zerbrich die lieber den Kopf über ein flexibles Layout; da haben die Nutzer mehr davon.

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

BTW, Standarte vs. Standard; Website vs. Webseite.

Letzteres mit Absicht nicht verlinkt?

Einen schönen Donnerstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Website vs. Webseite.

Letzteres mit Absicht nicht verlinkt?

Ja, Ashura, weil das auf derselben Seite steht.

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

Website vs. Webseite.

Letzteres mit Absicht nicht verlinkt?

Ja, Ashura, weil das auf derselben Seite steht.

Im Text versteckt, aber vorhanden. Also gut.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Im Text versteckt, aber vorhanden. Also gut.

OK, Wäre besser gewesen, gleich das Ganze als Linktitel zu nehmen: Website vs. Webseite.

Live long and prosper,
Gunnar

[nico65]

johoho
ich bitte hiermit ausdrücklich um Entschuldigung, dass mich Besucher mit einer Auflösung (VIEWPORT!!) <800px nicht interessieren, dass ich bis jetzt den Unterschied zwischen website und Webseite nicht kannte und dass ich standard mit t geschrieben habe. Ich finde es großartig, dass es noch Menschen gibt, die soetwas nicht auf die leichte Schulter nehmen und ihre kostbare Zeit, der ehrenvolle Aufgabe opfern, Dummschwätzer wie mich zu belehren.

Aber ma ehrlich dass man dass irgentwie mit js script hinbekommt weiß ich auch, wenn auch nicht genau wie.

Darum wäre ich sehr dankbar, wenn mir jemand die scriptanweisungen mit für die Layer leftpic und rightpic geben könnte.

MfG nico

[Daniel]

Ahoi nico65,

Darum wäre ich sehr dankbar, wenn mir jemand die scriptanweisungen mit für die Layer leftpic und rightpic geben könnte.

schonmal so probiert?

<javascript>
if(fenstergröße > gewünschte pixel)
{
  image.display = inline, oder sonstwas
}
else
{
  fenster zu klein also
  image.display = none
}
</javascript>

Etwas self musst du schon an den tag legen.

MfG

[nico65]

Jo danke schon mal,

klar muss ich das auch selbst irgentwie hinkriegen, aber irgentwie funktionierts halt noch nicht. Ich hab noch nie was mit js gemacht darum fehlt mir hier die Sicherheit.

Ich dachte es geht so:
<script language="JavaScript">
<!--
if(screen.width >= 1024)
document.getElementById("leftpic").style.visibility = "visible";
document.getElementById("rightpic").style.visibility = "visible";
else
document.getElementById("leftpic").style.visibility = "hidden";
document.getElementById("rightpic").style.visibility = "hidden";
 //-->
</script>

und dann füge ich die ebene standardmäßig ein also so:
<div id="leftpic"></div>
<div id="rightpic"></div>

haut aber leider nicht hin
MfG

[Gunnar Bittersmann]

Ich dachte es geht so:
<script language="JavaScript">

nico65,
So schon mal nicht. Das von HTML zwingend vorgeschriebene type-Attribut fehlt.

Eigentlich neu:
  <script type="application/javascript">
[http://forum.de.selfhtml.org/archiv/2005/8/t112798/], aber bis alle[tm] Nutzer Browser einsetzen, die das verstehen, doch so:
  <script type="text/javascript">

Das language-Attribut kommt in die Mülltonne.

if(screen.width >= 1024)

So schon mal auch nicht. Warum beachtest du die dir schon gegebenen Hinweise nicht? Du hast doch gelesen, dass du nicht an der Monitorauflösung, sondern an der Breite des Viewports interessiert bist? http://de.selfhtml.org/javascript/objekte/window.htm#inner_width@title=innerWidth hatte ich dir bereits genannt, sogar mit Link in SELFHTML. Schon mal reingeschaut?

document.getElementById("leftpic").style.visibility = "visible";
document.getElementById("rightpic").style.visibility = "visible";
else
document.getElementById("leftpic").style.visibility = "hidden";
document.getElementById("rightpic").style.visibility = "hidden";

Da fehlen {} um die Anweisungsblöcke.

Bei
  #leftpic {visibility: hidden}
wird dennoch der Platz für das Element reserviert. Ich würde
  #leftpic {display: none}
verwenden. [http://de.selfhtml.org/css/eigenschaften/positionierung.htm]

Du könntest auch die beiden Elemente #leftpic und #rightpic einer Klasse zuordnen, dann brauchst du nur eine Angabe für die Klasse zu ändern.

Live long and prosper,
Gunnar

[Detlef G.]

Hallo Gunnar

Du könntest auch die beiden Elemente #leftpic und #rightpic einer Klasse zuordnen, dann brauchst du nur eine Angabe für die Klasse zu ändern.

Ich würde dazu wohl keine zusätzlichen Elemente rechts und links vom content
verwenden, sondern entsprechend Hintergrundbilder, die, wenn unbeding nötig,
mittels Javascript gesetzt bzw. gelöscht werden.

Auf Wiederlesen
Detlef

[nico65]

Ok danke schon mal,

Das mit dem Viewport sehe ich mitlerweile ja ein ist wirklich eleganter. Die leftpic und rightpic sind dann in einem Layer womit ich dann beide auf einmal ausschalten kann.

Die Bilder sind nicht direkt neben dem Content sondern darunter (nicht auf der y-Achse sondern auf der z-achse) damits auch noch bei einem Viewport >1200 gut aussieht.

Dass einzige was ich nicht verstehe, ist halt wie die Behfehlszeilen genau auszusehen haben, weil ich noch nie was mit js gemacht habe. Wollte ich halt vermeiden weils nicht überall eingeschaltet ist, und möchte mich jetzt auch nicht durch die ganzen Kapitel von selfhtml kämpfen. Die angegebenen Links habe ich mir natürlich angeschaut, so ein Ignorant bin ich ja nun auch wieder nicht.

Ich hab schlichtweg probleme mit dem syntax und würde mich daher sehr über ein anwendbares script freuen. Euer Pädagogischer Eifer in allen Ehren, normalerweise schreibe ich auch nicht gleich in ein Forum wenn ich ein Problem habe ich kann auch schon mit google und Yahoo umgehen aber irgendwie hauts halt noch nicht hin hab da wohl n brett vorm Kopf.

mit besten Grüßen nico