Frage zu div-Positionierung am Browserrand.

[aufgreifen]

Hallo,

ich habe ein Problem.
Ich möchte eine Art "Pinnwand" vom Stil her erstellen.
Das Wichtige ist natürlich das Inhaltsfenster, daneben sollen aber auch andere Dinge zu sehen sein.

Wenn ich nun rechts ein Bild via div und Positionierung absolut an den Rand legen möchte, ist das so erstmal kein Problem.

Aber ich möchte, dass man mit 1024*768 nur einen Teil des Bildes sieht (linke Hälfe, direkt am rechten Rand) ohne dass dadurch Scrollbalken entstehen.
Jemand mit höherer Auflösung soll aber das Bild komplett sehen können (durch die höhere Auflösung den Rest).

Möglich ist das mit div, wenn ich den links positioniere (mit 900 px z.B.). Das Bild ist dann größer als die Div (die nur ~124 breit sein kann wegen Scrollleistenvermeidung).

Das ist aber auch das Problem: Bei hidden ist das Bild immer weg, bei visible ist es immer da (=Scrollbalken).

So, nun habe ich viel gesabbelt, aber kürzer wusste ich es nicht.
Meine Frage ist nun: Gibt es darum ein Workaround oder eine andere Möglichkeit?

Danke im Voraus.

[Hopsel]

Hi aufgreifen!

So, nun habe ich viel gesabbelt, aber kürzer wusste ich es nicht.
Meine Frage ist nun: Gibt es darum ein Workaround oder eine andere Möglichkeit?

Ab in den Hintergrund damit.

MfG H☼psel

[aufgreifen]

Hi aufgreifen!

So, nun habe ich viel gesabbelt, aber kürzer wusste ich es nicht.
Meine Frage ist nun: Gibt es darum ein Workaround oder eine andere Möglichkeit?

Ab in den Hintergrund damit.

MfG H☼psel

Hallo H☼psel,

danke für deine Antwort.

Aber hier stecke ich leider auch ein wenig fest.
Wie bekomme ich das Bild so in den Hintergrund, dass es auch dort bleibt, wo es hin soll?
Denn ich habe schon einen Hintergrund (150x115 für eine Wandtextur), habe den mit CSS und repeat (x und y) gemacht.
Wie kann ich denn nun dieses eine Bild an eine bestimmte Stelle x,y mit gewünschtem Effekt bringen?

[aufgreifen]

Entschuldigung, aber ich weiß nicht, wie ich hier editieren kann.
Ich habe mittlerweile bemerkt, dass ich einfach das eine DIV mit dem Bild hinter das andere mit dem Haupthintergrund für den Inhalt legen kann (so wäre es bei kleineren Größen dem Haupthintergrund nicht im Weg, sondern "dahinter").

Aber das löst leider noch nicht meine Frage.

Ich möchte ja, dass ich bei 1024 z.B. das so habe:

[Rahmen 1][Inhalt][Rah*]
(Rahmen sind jeweils 1 Bild z.B. via DIV; * = Bild zuende, Rahmen 2 nicht ganz sichtbar)

Bei höherer Auflösung:
[Rahmen 1][Inhalt][Rahmen 2]
(hier komplett zu sehen, wenn die Auflösung groß genug ist).

Problem ist, dass ich so beim ersten immer Scrollbalken rechts/links bekomme.

Und darum suche ich ein Workaround - es sei denn, es existiert keins in HTML/CSS ^^

[Detlef G.]

Hallo aufgreifen

Entschuldigung, aber ich weiß nicht, wie ich hier editieren kann.
Ich habe mittlerweile bemerkt, dass ich einfach das eine DIV mit dem Bild hinter das andere mit dem Haupthintergrund für den Inhalt legen kann (so wäre es bei kleineren Größen dem Haupthintergrund nicht im Weg, sondern "dahinter").

Wenn du ein Element absolut positionierst und ihm Maße gibst, wird der Browser dafür sorgen, dass es möglicht vollständig erreichbar ist, also bei Bedarf Scrollbalken einblenden.
Das könntest du verhindern, indem du dem umschließenden Element eine passende Breite und overflow:hidden gibst. Dann kann es allerdings auch passieren, dass bei kleinen Browserfenstern oder großer Schrift auch die wirklichen Inhalte unerreichbar werden.

Du willst, dass ein Bild bei kleinem Fenster abgeschnitten wird, dann verwende ein Hintergrundbild!
Du kannst pro Element zwar nur ein Hintergundbild angeben, das aber bei jedem Element. Verwende also nicht ein positioniertes Element mit Bild, sondern ein Element, dass den eigentlichen Inhalt umschließt mit einem positionierten Hintergrundbild. Das wird dann genau dort abgeschnitten, wo das betreffende Element endet, ohne dass Scrollbalken entstehen.

Besser und konkreter könnte dir geholfen werden, wenn du uns einen Link zu der Seite posten würdest, damit wir uns besser vorstellen können, was du genau willst, und was du bisher geschrieben hast.

Auf Wiederlesen
Detlef

[aufgreifen]

Hallo,

ich werde die Seite mal hochladen, wenn ich Speicher habe.
Wegen zu kleiner Auflösung: Die wäre in der Tat egal.

Es ist nur so: Mein Hauptinhaltsfenster ist ein angepinntes Blatt (feste Maße).
Das Drumherum muss nicht sichtbar sein für niedrige Auflösungen.
Es ist nur halt so, dass jemand auf die Idee kam, dass ich das Drumherum so gestalten könnte, dass Leute, die nun mal höhere Auflösung haben, nicht vor einer leeren Pinnwand sitzen, sondern dass da eben andere Sachen noch zu sehen sind.

Aber erstmal danke, ich probiere das aus und melde mich ggf. (dann auch mit einer Seitendemo zu Anschauungszwecken) noch mal.

[aufgreifen]

Super, jemand lässt mich ein wenig Speicher temporär nutzen, hier ist ein Link:

http://gamegod.pytalhost.com/aufgreifen/indext.html

(Das Design ist natürlich zum...., sollte aber zur Demonstration reichen.)

Dort, wo der Div mit Test-Inhalt (d.h der große weiße Block) ist, soll einmal ein "Papier" sein, welches feste Maße haben wird - d.h. die Tabelle wird immer maximal 800 oder so breit sein, egal, welche Auflösung ein Benutzer hat.

Rechts und links davon möchte ich gerne Fotos ode sonstiges hinpacken.

Das Foto rechts ist nun das, was ich angesprochen habe.
Es ist bei 1024 ja nicht ganz auf dem Bild, jedoch ist eine Scrollleiste rechts/links dabei, um es ganz zu sehen - und das möchte ich verhindern wenn möglich.
Es soll also so "abgeschnitten" sichtbar sein, aber nicht erscrollbar.
Hingegen jemand mit höherer Auflösung (1280 * 1024 z.B.) soll es an derselben Stelle und dafür ganz sehen.

Geht das irgendwie?
Hoffe, ich bin nun etwas besser verstehbar ^^

[Detlef G.]

Hallo aufgreifen

... - d.h. die Tabelle wird immer maximal 800 oder so breit sein, egal, welche Auflösung ein Benutzer hat.

Sollen dort tabellarische Daten rein?

Geht das irgendwie?

Meinst du so?
XHTML:

<body>  
  <div id="testfixed">  
    Test-Inhalt  
  </div>  
</body>  

CSS:

html, body {  
  margin:0;  
  padding:0;  
}  
html {  
  background-image: url(http://gamegod.pytalhost.com/aufgreifen/images/bg.gif);  
  height:100%;  
}  
body {  
  font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif;  
  font-size: 12px;  
  color: #000;  
  background:url(http://gamegod.pytalhost.com/aufgreifen/images/foto1.gif) no-repeat 849px 332px;  
  min-height:100%;  
  border-top: 1px solid transparent;  /* vermeidet collapsing-margins */  
  margin:-1px 0 0 0;  
}  
* html body {  
  height:100%;   /* min-height für IE bis 6 */  
}  
#testfixed {  
  margin:50px 0 0 115px;  
  width: 700px;  
  min-height:500px;  
  background-color:#fff;  
}  
* html #testfixed {  
  height:500px;   /* min-height für IE bis 6 */  
}

Auf Wiederlesen
Detlef

[aufgreifen]

Hallo aufgreifen

... - d.h. die Tabelle wird immer maximal 800 oder so breit sein, egal, welche Auflösung ein Benutzer hat.

Sollen dort tabellarische Daten rein?

Ich denke schon. Ich wollte daraus eine Tabelle 3x3 machen.
(außen für die "Kanten" des Papiers, innen halt einfach weißer Papierhintergrund auf dem der Inhalt steht).

Geht das irgendwie?

Meinst du so?
XHTML:

<body>

<div id="testfixed">
    Test-Inhalt
  </div>
</body>

> CSS:  
> ~~~css

html, body {  

>   margin:0;  
>   padding:0;  
> }  
> html {  
>   background-image: url(http://gamegod.pytalhost.com/aufgreifen/images/bg.gif);  
>   height:100%;  
> }  
> body {  
>   font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif;  
>   font-size: 12px;  
>   color: #000;  
>   background:url(http://gamegod.pytalhost.com/aufgreifen/images/foto1.gif) no-repeat 849px 332px;  
>   min-height:100%;  
>   border-top: 1px solid transparent;  /* vermeidet collapsing-margins */  
>   margin:-1px 0 0 0;  
> }  
> * html body {  
>   height:100%;   /* min-height für IE bis 6 */  
> }  
> #testfixed {  
>   margin:50px 0 0 115px;  
>   width: 700px;  
>   min-height:500px;  
>   background-color:#fff;  
> }  
> * html #testfixed {  
>   height:500px;   /* min-height für IE bis 6 */  
> }

Auf Wiederlesen
Detlef

Genau das meinte ich =D
Danke, das ist, was ich gesucht habe.

... eine Frage hätte ich allerdings noch. Darf ich dann auch  mehrere "background-image"s nehmen?
Ich hätte ja neben einem solchen Bild noch mehrere "fotos" (oder sonstwas).

[Detlef G.]

Hallo aufgreifen

Sollen dort tabellarische Daten rein?

Ich denke schon. Ich wollte daraus eine Tabelle 3x3 machen.
(außen für die "Kanten" des Papiers, innen halt einfach weißer Papierhintergrund auf dem der Inhalt steht).

Designgrafiken bezeichnest du als tabellarischen Inhalt?
Das ist Blödsinn.
Du kannst dir mal tabellenfreies, vollflexibles, angebranntes Papier ansehen, und dieses Prinzip auch als Notizzettel.
Wenn dein Papier eine feste Breite haben soll, dann geht das auch ohne Tabelle noch wesentlich einfacher.

... eine Frage hätte ich allerdings noch. Darf ich dann auch  mehrere "background-image"s nehmen?
Ich hätte ja neben einem solchen Bild noch mehrere "fotos" (oder sonstwas).

Jedes Element kann genau ein Hintergrundbild haben.
Du kannst mit deinem Grafikprogramm aber durchaus mehrere Fotos zu einem Hintergrundbild zusammenbauen. Das kann sogar günstig für die Ladezeit sein, weil jedes Bild einzeln vom Server angefordert werden muss und die Dateigröße bei größere Bilder oft eher kleiner ist, als die Summe vieler kleiner.

Auf Wiederlesen
Detlef

[aufgreifen]

Hallo aufgreifen

Sollen dort tabellarische Daten rein?

Ich denke schon. Ich wollte daraus eine Tabelle 3x3 machen.
(außen für die "Kanten" des Papiers, innen halt einfach weißer Papierhintergrund auf dem der Inhalt steht).

Designgrafiken bezeichnest du als tabellarischen Inhalt?
Das ist Blödsinn.
Du kannst dir mal tabellenfreies, vollflexibles, angebranntes Papier ansehen, und dieses Prinzip auch als Notizzettel.
Wenn dein Papier eine feste Breite haben soll, dann geht das auch ohne Tabelle noch wesentlich einfacher.

... eine Frage hätte ich allerdings noch. Darf ich dann auch  mehrere "background-image"s nehmen?
Ich hätte ja neben einem solchen Bild noch mehrere "fotos" (oder sonstwas).

Jedes Element kann genau ein Hintergrundbild haben.
Du kannst mit deinem Grafikprogramm aber durchaus mehrere Fotos zu einem Hintergrundbild zusammenbauen. Das kann sogar günstig für die Ladezeit sein, weil jedes Bild einzeln vom Server angefordert werden muss und die Dateigröße bei größere Bilder oft eher kleiner ist, als die Summe vieler kleiner.

Auf Wiederlesen
Detlef

Danke für deine erneute Antwort.
Ist es wirklich günstig, statt aneinandergereiter kleiner Bilder als Haupthintergrund und aufliegender kleiner Bilder einen einzigen großen Hintergrund von z.B. 2000x2000 px zu machen?
Wäre das nicht ein riesiges Bild?

[Detlef G.]

Hallo aufgreifen

Ist es wirklich günstig, statt aneinandergereiter kleiner Bilder als Haupthintergrund und aufliegender kleiner Bilder einen einzigen großen Hintergrund von z.B. 2000x2000 px zu machen?

Das kann nicht pauschal gesagt werden.
Das Beispiel verwendet ein gekacheltes Haupthintergrundbild mit 22,5 KB und das Foto mit 40,5 KB.
Dazu kommen dann noch etwa 4 KB für die Serverkommunikation selbst, also insgesamt also etwa 67 KB.

Ein großes Hintergrundbild (2000x2000 px) mit diesem Foto wäre dann als JPG in einer als Hintergrund ausreichenden Qualität etwa 350 KB groß.
Ein großes Hintergrundbild wegen dieses einen Fotos wäre also Nonsens.

Was aber, wenn du viele Fotos auf dem Hintergrund platzieren willst?
Jedes einzelne Foto hätte dann auch wieder etwa 40 KB (aufgrund der notwendigen Transparenz ist JPG-Format nicht möglich, welches die meisten Fotos besser komprimieren kann als GIF oder PNG). Dazu kommen dann pro Grafik etwa 2 KB für die Kommunikation mit dem Server.
Außerdem müsstest du viele Elemente ins XHTML schachteln, weil jedes nur ein Hintergrundbild haben kann.
Die Dateigröße des großen Hintergrundbildes ändert sich aber nicht wesentlich, wenn es mehrere Fotos enthält.

Jetzt hängt es davon ab, wie die Fotos verteilt sein sollen.
Wenn diese rundherum auf dem freien Rand verteilt sein sollen, dürfte ein großes Bild sinnvoll sein.
Sollen sie nur den rechten Rand etwas füllen, dann würde ich es wohl so machen.

Noch etwas:
Überlege dir immer und teste im Zweifelsfall, welches Dateiformat für eine Grafik das jeweils effektivste ist. Einen Anhaltspunkt kann dir der Artikel GIF oder JPEG geben, wobei du das dort nicht erwähnte PNG-Format auch berücksichtigen solltest. Das dort für GIF geschriebene trifft auch für 8bit-PNG zu, wobei PNG meist etwas besser komprimiert als GIF.

Auf Wiederlesen
Detlef

[aufgreifen]

Hallo aufgreifen

Ist es wirklich günstig, statt aneinandergereiter kleiner Bilder als Haupthintergrund und aufliegender kleiner Bilder einen einzigen großen Hintergrund von z.B. 2000x2000 px zu machen?

Das kann nicht pauschal gesagt werden.
Das Beispiel verwendet ein gekacheltes Haupthintergrundbild mit 22,5 KB und das Foto mit 40,5 KB.
Dazu kommen dann noch etwa 4 KB für die Serverkommunikation selbst, also insgesamt also etwa 67 KB.

Ein großes Hintergrundbild (2000x2000 px) mit diesem Foto wäre dann als JPG in einer als Hintergrund ausreichenden Qualität etwa 350 KB groß.
Ein großes Hintergrundbild wegen dieses einen Fotos wäre also Nonsens.

Was aber, wenn du viele Fotos auf dem Hintergrund platzieren willst?
Jedes einzelne Foto hätte dann auch wieder etwa 40 KB (aufgrund der notwendigen Transparenz ist JPG-Format nicht möglich, welches die meisten Fotos besser komprimieren kann als GIF oder PNG). Dazu kommen dann pro Grafik etwa 2 KB für die Kommunikation mit dem Server.
Außerdem müsstest du viele Elemente ins XHTML schachteln, weil jedes nur ein Hintergrundbild haben kann.
Die Dateigröße des großen Hintergrundbildes ändert sich aber nicht wesentlich, wenn es mehrere Fotos enthält.

Jetzt hängt es davon ab, wie die Fotos verteilt sein sollen.
Wenn diese rundherum auf dem freien Rand verteilt sein sollen, dürfte ein großes Bild sinnvoll sein.
Sollen sie nur den rechten Rand etwas füllen, dann würde ich es wohl so machen.

Noch etwas:
Überlege dir immer und teste im Zweifelsfall, welches Dateiformat für eine Grafik das jeweils effektivste ist. Einen Anhaltspunkt kann dir der Artikel GIF oder JPEG geben, wobei du das dort nicht erwähnte PNG-Format auch berücksichtigen solltest. Das dort für GIF geschriebene trifft auch für 8bit-PNG zu, wobei PNG meist etwas besser komprimiert als GIF.

Auf Wiederlesen
Detlef

Hallo und danke für die neuen Tipps.
Das mit dem JPG habe ich auch bereits überlegt.
Ein Freund von mir hat nun ein ähnliches Problem wie ich - bei ihm ist es nur eine Mauer als Hintergrund mit "aufgesprühten" Graffitis im Vordergrund. Dabei hat er auch diese Wahl zu treffen zwischen JPG und Div-Positionierung, sodass der Hintergrund zum wiederholten Html-Hintergrund passt oder die Nutzung von PNGs.
Gifs bieten sich hier aufgrund der begrenzten Möglichkeiten nicht an => Graffitis sind ja gesprüht und nicht in einer regelmäßigen Form.
Dementsprechend ist der Rand dann auch verschwommen und wird immer transparenter.
Dort war Gif doch leicht begrenzt in seinen Möglichkeiten - bei mir sollte es vielleicht je nach Foto sogar funktionieren.
Gehe ich hier nebenbei gefragt, richtig in der Annahme, dass CSS-Opacity kompatibler als PNG-Transparenz-Opacity ist?

Ich denke, ich werde das je nachdem durchmischen (mal gif, mal jpg - je nachdem ob Gifs gehen), ob es geht oder nicht geht.
Denn ein großes Hintergrundbild verbraucht locker mal 300 - 600 KB in JPG oder PNG.

Ich stelle mir allerdings noch eine Frage zu #alles.
Meint "nur den rechten Rand abdecken", dass man diesen Codeabschnitt #alles und *html #alles nicht mehrmals nutzen kann (mit jeweils anderen Namen)?

[Detlef G.]

Hallo aufgreifen

Gifs bieten sich hier aufgrund der begrenzten Möglichkeiten nicht an => Graffitis sind ja gesprüht und nicht in einer regelmäßigen Form.

Auch das kann nicht pauschal gesagt werden.
Es kommt darauf an, wie die Graffitis aussehen und wie kontrastreich der Hintergrund ist.

Dementsprechend ist der Rand dann auch verschwommen und wird immer transparenter.

Manche Graffitis wirken gut, wenn dieser Rand nicht verschwommen sondern eher verpixelt /wie mit grober Sprühdüse) dargestellt wird. Dafür wäre GIF oder 8bit-PNG gut geeignet.

Wenn der Hintergrund nicht zu kontrastreich ist, ist es möglich, dass der Rand nicht ausgefranst wirkt, wenn beim Speichern der Graffitis seine dominierende Farbe als Matte angegeben wird.

Dort war Gif doch leicht begrenzt in seinen Möglichkeiten - bei mir sollte es vielleicht je nach Foto sogar funktionieren.

Bei Fotos ist das GIF-Format aufgrund der wenigen Farben und der schlechten Kompression dabei auch nur sehr begrenzt geeignet.

Es ist aber, wie du an meinem Beispiel siehst, ohne große Probleme möglich ein Hintergrundbild welches einen Teil des darunterliegenden Hintergrundbildes enthält pixelgenau über diesem zu positionieren, so dass keine Transparenz nötig ist.

Gehe ich hier nebenbei gefragt, richtig in der Annahme, dass CSS-Opacity kompatibler als PNG-Transparenz-Opacity ist?

PNG-Alpha-Transparenz ist meines Wissens nur beim IE bis 6 ein Problem. Wie kann man PNG-Alphatransparenz im IE nutzen?
Allerdings bin ich auch nicht der größte Freund davon, zumindest so lange es eine andere Möglichkeit gibt.
CSS-Opacity ist erst in CSS 3 definiert, wird von den meisten aktuellen Browsern aber unterstützt, und bei etwas älteren als -moz-opacity bzw. -khtml-opacity und vom IE ab 4 über die proprietäre Filter-Eigenschaft, die bei strengen Sicherheitseinstellungen eventuell auch nicht funktioniert (genauso, wie der AlphaImageLoader).

Ich stelle mir allerdings noch eine Frage zu #alles.
Meint "nur den rechten Rand abdecken", dass man diesen Codeabschnitt #alles und *html #alles nicht mehrmals nutzen kann (mit jeweils anderen Namen)?

Für Grafiken, die nicht unterhalb des Inhalts angezeigt werden sollen, ist es möglich, für Grafiken, die eventuell weiter reichen sollen nicht.
Den inneren Elementen kannst du nicht min-height:100% geben, bzw. ist dies wirkungslos. Das Hintergrundbild wird darin nicht bis zum unteren Rand des Browserfensters angezeigt, wenn der Inhalt der Seite kürzer ist. Du kannst auch nicht height:100% für #alles verwenden, weil das Hintergrundbild bei höherem Inhalt beim herunterscrollen dann genau dort aufhört, wo das Browserfenster vor dem scrollen zu Ende war.

PS: Bitte lösche alles aus dem Zitat des Vorposters, worauf du dich nicht direkt beziehst,und hänge dein Posting nicht einfach unten dran.

Auf Wiederlesen
Detlef

[aufgreifen]

Hallo noch mal,

ich habe nun ein neues Problem, dass mir bei Nutzung von mehreren Browsern auffiel.
Es gibt ein Problem mit dem html-background und dem bodybackground (CSS, html war meine Pinnwand, body das Foto z.B.) in Netscape bis 6 und IE bis 5.2 (so weit ich es bis jetzt gesehen habe).

Gibt es da ein Workaround?

Und des weiteren: Normalerweise werden doch die <divs>, die als letztes kommen in der "obersten Schicht" angezeigt - das funktioniert jedenfalls überall gut.

Nur: Wenn ich einen Fernseher (Bild) habe und damit die Anleitung mit dem verbrannten Papier befolge (div position relative) oder halt absolute ausmesse und nutze, dann kann ich in dem Fernseher ein Bild anzeigen lassen, dessen Ränder vom "Rahmen", den das TV bildet abgedeckt werden.

<div> bild </div>
<div> tv rahmen oben </div>
<div> tv rahmen unten ..... </div>

Sobald ich aber ein youtube-Video an diese Stelle (bild) setze, passiert es, dass der Firefox unter Linux dieses VOR dem TV-Rahmen anzeigt - unter Windows jedoch normal dahinter.

Gibt es auch hier ein Workaround oder kann man div-Befehle schreiben, um die "Schicht-Reihenfolge" zu festzulegen, sodass es schon definiert ist?

[Detlef G.]

Hallo aufgreifen

ich habe nun ein neues Problem, dass mir bei Nutzung von mehreren Browsern auffiel.
Es gibt ein Problem mit dem html-background und dem bodybackground (CSS, html war meine Pinnwand, body das Foto z.B.) in Netscape bis 6 und IE bis 5.2 (so weit ich es bis jetzt gesehen habe).

Deshalb hatte ich auch mein Beispiel geändert und leider das zusätzliches Div#alles einfügen müssen, statt html und body die verschiedenen Hintergründe zu geben.

Sobald ich aber ein youtube-Video an diese Stelle (bild) setze, passiert es, dass der Firefox unter Linux dieses VOR dem TV-Rahmen anzeigt - unter Windows jedoch normal dahinter.

Soweit ich weiß, drängelt sich das Flashplugin immer nach vorn.
Ob und was du dagegen tun kannst, und in welchen Browsern und bei welchen Pluginversionen das dann hilft, weiß ich nicht. Es gab hier schon Threads zu diesem Thema. Da ich mich mit Flash nicht beschäftige, habe ich mir das nicht gemerkt, auch nicht, wann oder in welchen Threads das war. (Meine Browser haben nicht mal Flashplugins)

Auf Wiederlesen
Detlef