Fixe Position weit rechts ohne Scrollbalken - wie?

[Ogi]

Hallo allerseits.

Mir wurde dieses Forum empfohlen für folgende Frage:

Ich möchte relativ weit rechts im Browser (Start etwa bei 900px) ein Bild, das nur einmal auftaucht einbinden, ohne dass dieses bei kleineren Auflösungen, wo es "angeschnitten" werden würde, einen horizontalen Scrollbalken hervorruft.

Soll sich also verhalten wie ein background-img, als solches kann/will ich es allerdings nicht einbinden, weil ich dazu bereits eine Kachel verwende. Mit div und position. absolute bekomme ich hingegen einen Scrollbalken.

Gibt es dazu nun eine Lösung die auf IE, NS, Safari und FF läuft?

Vielen Dank schon einmal!

O.

[Ashura]

Hallo Ogi.

Mir wurde dieses Forum empfohlen für folgende Frage:

Richtig so. ;)

Ich möchte relativ weit rechts im Browser (Start etwa bei 900px) ein Bild, das nur einmal auftaucht einbinden, ohne dass dieses bei kleineren Auflösungen, wo es "angeschnitten" werden würde, einen horizontalen Scrollbalken hervorruft.

Alles was du wissen musst, findest du hier.

Gruß, Ashura

[Ogi]

Alles was du wissen musst, findest du hier.

Hallo Ashura.

Danke für die zackige Antwort!

Aber leider klappt das so nicht ... Ich habe bereits mehrere div-Aufrufe in der Seite und irgendwie verschibts mir sonst immer alles ... kannst gerne mal schaun. www.mightymaks.de/wp

O.

[Ogi]

Hm...

Also ich hab als Klasse:

#cdhop { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/cd_hop.gif") no-repeat; height: 420px; width: auto; }

und aufrufen tu ich das dann VOR allem anderen so:

<div id="cdhop">freferf</div>
(Der Text is nur, damit ich überhaupt seh, wo ich bin ...

Dann schauts aus wie momentan auf www.mightymaks.de/wp

Das Bild (die CD oben) soll aber ihne etwas zu verschieben ganz weit rechts, neben dem Content stehen. Wenn ich in der Klasse oben width mit px angebe, habe ich wieder den horiz. Scrollbalken ... *Verzweifel*

O.

[Ashura]

Hallo Ogi.

Das Bild (die CD oben) soll aber ihne etwas zu verschieben ganz weit rechts, neben dem Content stehen.

Dann wollen wir einmal deinen Source auseinandernehmen:

  
body{ background: url("http://www.mightymaks.de/wp/wp-content/themes/desktop/images/desktop_bg.jpg"); }  

Verpasse body eine width...

  
#cdhop{ background: url("http://www.mightymaks.de/wp/wp-content/themes/desktop/images/cd_hop.gif") no-repeat; padding-left: 400px; height: 420px; width: auto; }  

Und diesem DIV ebenfalls (Zeigt nur eine Wirkung, wenn body bzw. ein anderes Elternelement eine Breitenangabe hat).

Dann kannst du das Bild ganz einfach mit background-position rechts ausrichten.
Dann wird es bei niedrigen Auflösungen links abgeschnitten.

Aber bei höheren Auflösungen sieht die ganze Seite dann ein wenig verloren aus, da sie am linken Rand klebt.

BTW: Dein Stylesheet wird _sehr_ chaotisch in den Source geschrieben; ist das gewollt..?

Gruß, Ashura

[Ogi]

Verpasse body eine width...

Ok. Hab ich jetzt mal gemacht. In der eigentlichen CSS-Datei, hab ich dem body eine width: 100%; zugewiesen.

Nun definiere ich die Klasse so:

#cdhop { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/cd_hop.gif") no-repeat; background-position: 100px 800px; }

Und aufgerufen wird diese nun direkt nach dem body-tag, geschlossen ganz am Ende (da sind noch einige divs dazwischen).

Aber nun stellt er das Bild wiederum garnicht mehr da.
Wenn ich dagegen statt ... 100px 800px; } schreibe: ... top right; } dann geht's.

Ich möchte aber nicht, dass das 1.) Bild rechts dran klebt und 2.) mit dem Browser "mitwandert". Es soll an einer festen Position bleiben....

BTW: Dein Stylesheet wird _sehr_ chaotisch in den Source geschrieben; ist das gewollt..?

Ich weiss. :)  Ist nur, solange ich rumexperimentiere .... später kommt alles in die style.css

O.

[Ashura]

Hallo Ogi.

Wenn ich dagegen statt ... 100px 800px; } schreibe: ... top right; } dann geht's.

Zweiteres sind auch gültige Werte für dieses Attribut, ersteres nicht.

Ich möchte aber nicht, dass das 1.) Bild rechts dran klebt und 2.) mit dem Browser "mitwandert". Es soll an einer festen Position bleiben....

Dann wirst du wohl nicht umhin kommen, das DIV selbst auszurichten.

Ich weiss. :)  Ist nur, solange ich rumexperimentiere .... später kommt alles in die style.css

Na dann ist es ja gut. ;)

Gruß, Ashura

[Ogi]

Dann wirst du wohl nicht umhin kommen, das DIV selbst auszurichten.

Naja, das hatte ich ja ursprünglich auch schonmal. Aber dann habe ich auf jeden wieder Scrollbalken .... oder kann man das mit dem z-index umgehen?

O.

[Ashura]

Hallo Ogi.

Naja, das hatte ich ja ursprünglich auch schonmal. Aber dann habe ich auf jeden wieder Scrollbalken .... oder kann man das mit dem z-index umgehen?

Wenn du schon auf diese Idee kommst, warum probierst du es dann nicht einfach selbst aus..? ;)

Gruß, Ashura

[Ogi]

Hallo Ashura.

Ich machs jetzt anders. Positioniere das bg-image links und mach das GIF einfach
1100 px breit, der ganze linke Bereich ist dabei transparent. Klappt wunderbar, auch ohne scrollbars.

Hätte denn der z-index etwas bewirkt? Und vor allem: Ist der browser-übergreifend? Davon steht ja nichts dort in dem Link von Dir.

Danke allemal.

O.

[Ashura]

Hallo Ogi.

Hätte denn der z-index etwas bewirkt?

Das bezweifle ich. Es ging mir nur darum, dass du zuerst probieren und _dann_ fragen solltest. ;)

Und vor allem: Ist der browser-übergreifend?

Definiere "Browser-übergreifend". Wenn du damit meinst, dass dies alle modernen Browser verstehen, dann kann ich dir dies bestätigen.

Gruß, Ashura

[Ogi]

Das bezweifle ich. Es ging mir nur darum, dass du zuerst probieren und _dann_ fragen solltest. ;)

Alles klar. In Zukunft berücksichtige ich das. Bin nur schon etwas entnervt, weil ich schon den ganzen Tag rumspiel ... und in solchen Dingen sowas von unfit bin.

Definiere "Browser-übergreifend". Wenn du damit meinst, dass dies alle modernen Browser verstehen, dann kann ich dir dies bestätigen.

Hab inzwischen gegoogelt ... Danke ;)

O.

[Ingo Turski]

Hi,

Verpasse body eine width...

wozu? Desault ist 100%.

Und diesem DIV ebenfalls (Zeigt nur eine Wirkung, wenn body bzw. ein anderes Elternelement eine Breitenangabe hat).

Unsinn. Jedes Blocklevel Element hat per Default 100% Breite.
Mir scheint, Du verwechselst hier Breite mit Höhe.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Mir scheint, Du verwechselst hier Breite mit Höhe.

Hoppla!
Ich glaube du hast Recht. ;)

Danke für die Korrektur.

Gruß, Ashura

[Detlef G.]

Hallo Ogi

Soll sich also verhalten wie ein background-img, als solches kann/will ich es allerdings nicht einbinden, weil ich dazu bereits eine Kachel verwende. Mit div und position. absolute bekomme ich hingegen einen Scrollbalken.

Du könntest ein Hintergrundbild html und das zweite body zuweisen.

  
html {background: url("Gekacheltes Hintergrundbild.jpg");}  
body {background: url("RechtesBild.jpg") no-repeat 800px 100px;}  

Gibt es dazu nun eine Lösung die auf IE, NS, Safari und FF läuft?

IE 6.0 und zumindest aktuelle Geckos dürften damit keine Probleme haben, andere
Browser müsstest du selbst testen.

Mit einem zusätzlichen Div, mit diesem Hintergrundbild hast du es ja schon probiert.
Nur leider bleibt das Bild unsichtbar, weil es sich genau hinter #page befindet.
(Vielleicht solltest du mal die Positionsangaben tauschen.)

Auf Wiederlesen
Detlef