Anzeige

Bild positionieren - unten rechts (Fixed)

Bild positionieren - unten rechts (Fixed) | PSD-Tutorials.de

Erstellt von Ironbird, 22.10.2008.

  1. Ironbird

    Ironbird Nicht mehr ganz neu hier

    Dabei seit:
    22.08.2007
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CC + Lightroom CC
    Kameratyp:
    NIKON D810
    Bild positionieren - unten rechts (Fixed)
    Hallo,

    ich habe ein klassisches 3 Spalten-Layout mit Kopf und Fuß-Bereich.
    Das ganze Gerüst steht schon nur habe ich ein kleines positionierungsproblem.

    [​IMG]

    Und zwar möchte ich, dass die seitlichen Spalten (Sidebars) fixed sind. D.h. dass sie beim Scrollen auf ihrer Position stehen bleiben.

    Bei der linken Spalte funktioniert es. Es sit meine Navigation und das ganze beginnt oben und hört auf wenn der Text endet.

    CSS-Code:

    #sidebar1 {
    float: left;
    width: 244px;
    background: #484848;
    padding: 15px 0;
    background-image: url(../pics/bg-nav.gif);
    background-repeat: no-repeat;
    height: 565px;
    position: fixed;
    }


    Bei der rechten Spalte soll nur ein Bild eingefügt werden, dass aber immer nten rechts positioniert werden soll und ebenfalls fixed.
    Aber ich bekomm das nicht hin. Sobald ich auf fixed gehe wird das Bild an der oberen Kante der Spalte angesetzt. Hab schon ettliche möglichkeiten mit der Positionierung probiert, aber es reagiert nix.

    Im Moment habe ich es so:

    #sidebar2 {
    float: right;
    width: 250px;
    background: #484848;
    height: 565px;
    padding: 10px 0;
    }

    #sidebar2 img {
    position: relative;
    top: 315px;
    }

    Jetzt ist zwar das Bild unten, aber es scrollt mit.

    Noch anzumerken wäre, dass das Bild nicht im Document unten rechts immer sein soll, sondern im Browserfenster. D.h. auch wenn der Text über die Grenzen des Browserfensters gehen sollte, soll das Bild im Browserfenster bleiben.

    Kann mir jemand nen Tip geben wie ich das machen kann?

    Danke schon mal für die Hilfe

    Ironbird
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Bild positionieren - unten rechts (Fixed)
    AW: Bild positionieren - unten rechts (Fixed)

    Um das Bild zu fixieren:

    position: absolute;
    bottom: 0px;
    right: 0px;
     
    #2      
  3. Ironbird

    Ironbird Nicht mehr ganz neu hier

    Dabei seit:
    22.08.2007
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CC + Lightroom CC
    Kameratyp:
    NIKON D810
    Bild positionieren - unten rechts (Fixed)
    AW: Bild positionieren - unten rechts (Fixed)

    Unglaublich :uhm:

    manchmal sollte man es ganz einfach und simpel lassen. Ich habe es immer mit padding-bottom probiert.

    Danke für die schnelle Hilfe
     
    #3      
  4. Igel2

    Igel2 Der Weg ist das Ziel

    Dabei seit:
    10.12.2006
    Beiträge:
    476
    Ort:
    Süddeutschland
    Software:
    PS CS3 Extended
    Kameratyp:
    Cannon EOS 400d
    Bild positionieren - unten rechts (Fixed)
    AW: Bild positionieren - unten rechts (Fixed)

    Aber dann wirst Du das bild nicht wirklich sehen denn der Bezugspunkt für die Positionierung ist immer oben Links. D.H. du müsstest einen margin-left und margin-top von jeweils 100% eingeben, damit der Bezugspunkt nach unten rehts verschoben wird. außerdem position:fixed, damit das Ganze dann auch stehen bleibt.

    Also wenn ich mich damit irren sollte dann bitte nicht gleich schlagen - ist jetzt schon ein bisschen spät und das war mir spontan dazu eingefallen.

    LG
     
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Bild positionieren - unten rechts (Fixed)
    AW: Bild positionieren - unten rechts (Fixed)

    Deswegen werden solche Sachen auch vorher getestet, bevor man sie hier veröffentlicht und sich irrt... :rolleyes:
     
    #5      
x
×
×
teststefan