Anzeige

Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

Hintergrundbild ab bestimmter Browserfenstergröße verdeckt | PSD-Tutorials.de

Erstellt von ruffy85, 18.06.2009.

  1. ruffy85

    ruffy85 RMD

    Dabei seit:
    25.05.2008
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Photoshop, Lightroom, Illustrator
    Kameratyp:
    Canon EOS 450D
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    Ich sehe den Wald vor lauter Bäumen nicht, oder anders gesagt, ich finde den Fehler nicht.

    Problem:
    Ich habe ein Weblayout erstellt, dass mit zwei Ebenen arbeitet. Ebene 1 enthält die fixierten Hintergrundbilder. Ebene 2 die eigentliche Webseite. Für die Swirls oben links habe ich den Flag fixed gesetzt. Nun werden diese Swirls nur bis zu einer bestimmten Größe des Browserfensters angezeigt, danach werden sie von der vorderen Ebene überlagert, bis sie nicht mehr zu sehen sind.

    Hier die derzeitige Seite im Live Betrieb:
    RM Design - The Finest in Art & Design

    HTML Code:
    Code (Text):
    1. <?xml version="1.0" encoding="iso-8859-1"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6.     <title>RM Design - The Finest in Art & Design</title>
    7.     <link href="style.css" rel="stylesheet" type="text/css" />
    8.     <link href="joomla.css" rel="stylesheet" type="text/css" />
    9.     <link rel="shortcut icon" href="favicon.ico">
    10. </head>
    11. <body>
    12.     <div class="swirlsoben">
    13.         <div class="swirlslio"></div><div class="swirlsreo"></div>
    14.     </div>
    15.    
    16.     <div class="webseite">
    17.         <div class="eckeoli"></div><div class="mitteoben"></div><div class="eckeore"></div>
    18.         <div class="eckeoliin"></div><div class="mittenavi">Start | Grafikdesign | Webdesign | Fotografie | Kontakt | Über uns</div><div class="eckeorein"></div>
    19.         <div class="randweissheaderli"></div><div class="header"></div><div class="randweissheaderre"></div>
    20.         <div class="headerabstand"></div>
    21.     </div>
    22.     <div class="swirlsunten"></div>
    23.    
    24.  
    25. </body>
    26. </html>
    CSS Code:
    Code (Text):
    1. /* CSS Doc */
    2.  
    3. body, html {
    4.     background-color: #646567;
    5.     min-height: 750px;
    6.     height: 100%;
    7.     margin: 0px;
    8.     padding: 0px;
    9.     font-family: Tahoma, Verdana, sans-serif;
    10.     font-size: small;
    11. }
    12.  
    13. .webseite {
    14.     width: 880px;
    15.     height: auto;
    16.     margin: auto;
    17.     position: absolute;
    18.     top: 25px; left: 50%;
    19.     margin-left: -440px;
    20.     z-index: 2;
    21. }
    22.  
    23. .eckeoli {
    24.     width: 20px;
    25.     height: 9px;
    26.     background-image: url(eckeoli.png);
    27.     float: left;
    28. }
    29.  
    30. .mitteoben {
    31.     width: 840px;
    32.     height: 9px;
    33.     background-color: white;
    34.     float: left;
    35. }
    36.  
    37. .eckeore {
    38.     width: 20px;
    39.     height: 9px;
    40.     background-image: url(eckeore.png);
    41.     float: left;
    42. }
    43.  
    44. .eckeoliin {
    45.     width: 20px;
    46.     height: 20px;
    47.     background-image: url(eckeoliinnen.png);
    48.     float: left;
    49. }
    50.  
    51. .mittenavi {
    52.     width: 840px;
    53.     height: 20px;
    54.     background-image: url(header_verlauf.png);
    55.     float: left;
    56.     color: white;
    57. }
    58.  
    59. .randweissheaderli {
    60.     width: 9px;
    61.     height: 115px;
    62.     background-color: white;
    63.     float: left;
    64. }
    65.  
    66. .randweissheaderre {
    67.     width: 11px;
    68.     height: 115px;
    69.     background-color: white;
    70.     float: left;
    71. }
    72.  
    73. .header {
    74.     width: 860px;
    75.     height: 115px;
    76.     background-image: url(headerhg.png);
    77.     float: left;
    78. }
    79.  
    80. .headerabstand {
    81.     width: 880px;
    82.     height: 12px;
    83.     background-color: white;
    84.     float: left;
    85. }
    86.  
    87. .eckeorein {
    88.     width: 20px;
    89.     height: 20px;
    90.     background-image: url(eckeoreinnen.png);
    91.     float: left;
    92. }
    93.  
    94. .swirlsoben {
    95.     margin: auto;
    96.     width: 990px;
    97.     height: 236px;
    98.     background-color: #646567;
    99.     z-index: 1;
    100.     position: absolute;
    101.     top: 0px; left: 50%;
    102.     margin-left: -495px;
    103.    
    104. }
    105.  
    106. .swirlslio {
    107.     width: 106px;
    108.     height: 100%;
    109.     background: url(swirllio.png) no-repeat fixed;
    110.     float: left;
    111.     padding: 0px;
    112.  
    113. }
    114.  
    115. .swirlsreo {
    116.     width: 106px;
    117.     height: 100%;
    118.     background-image: url(swirlreo.png);
    119.     float: right;
    120.     background-repeat: no-repeat;
    121. }
    122.    
    123. .webseite-test {
    124.     width: 892px;
    125.     height: 700px;
    126.     margin: auto;
    127.     background-image: url(seite_ohne_hg.png);
    128.     background-repeat:no-repeat;
    129.    
    130. }
    131.  
    132. .swirlsunten {
    133.     width: 990px;
    134.     height: 100%;
    135.     background-image: url(swirls_unten.png);
    136.     z-index: 1;
    137.     background-repeat:no-repeat;
    138.     background-position:center bottom;
    139.     position: absolute;
    140.     bottom: 0px; left: 50%;
    141.     margin-left: -495px;
    142. }
    Sieht jemand den Fehler? hat jemand Ähnliches erlebt und kennt einen Workaround? Bin für jeden Tipp dankbar.
     
    #1      
  2. Thyras

    Thyras Nicht mehr ganz neu hier

    Dabei seit:
    16.06.2009
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    Chemnitz
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

    Ich würde es eigentlich nochmal neu strukturieren, soviel ist es ja noch nicht. Dann erspart man sich spätere Probleme, als da jetzt lange dran rumzubasteln. Geht sicher irgendwie, aber mit diesen left: 50% und riesigen Negativ-Margins find' ich das so recht unschön gelöst.
     
    #2      
  3. Stilbruch

    Stilbruch Noch nicht viel geschrieben

    Dabei seit:
    07.01.2007
    Beiträge:
    21
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

    Ist halt ne schnelle zentriermethode...
    würde aber das ganz auch neu und sauberer Strukturieren...
     
    #3      
  4. ruffy85

    ruffy85 RMD

    Dabei seit:
    25.05.2008
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Photoshop, Lightroom, Illustrator
    Kameratyp:
    Canon EOS 450D
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

    Hmm, eigentlich habt ihr Recht. Wüsste nicht, wie ich sonst, abhängig vom Viewport zentrieren sollte und wundere mich darüber, dass der beschriebene Fehler nur auftritt, wenn ich den Flag fixed setze.

    Die inkludierende Box swirlsoben, an denen sich die beiden inneren Boxen swirlslio und swirlsreo orinetieren sollten, skaliert korrekt mit.

    Irgendwie muss ich die anders fixieren oder sie erst einmal mit scrollen lassen.

    Anderer Aufbau, hmm. Was schlagt ihr vor? Wollte schön einfach mit Box oben und Box unten, sowie Box auf höherer Ebene, die Webseite enthält. Ist doch recht einfach gehalten.

    Also alles in eine große Box ist doch blöd. Vorallem kommt es immer wieder zu Ebenenkonflikten, deswegen habe ich mich dafür entschieden.
     
    #4      
  5. Rakete

    Rakete Nicht mehr ganz neu hier

    Dabei seit:
    05.04.2007
    Beiträge:
    66
    Geschlecht:
    männlich
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

    Wenn du dem Div swirlsoben eine Hintergrundfarbe gibst, die man vor dem Hintergrund sehen kann ;), z.B. red, dann siehst du dass genau dieser Div deine Grafik überlagert.

    Du solltest nicht position:absolute und float und z-index mischen, weil diese Angaben sich gegenseitig beeinflußen/behindern können.
     
    #5      
  6. ruffy85

    ruffy85 RMD

    Dabei seit:
    25.05.2008
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Photoshop, Lightroom, Illustrator
    Kameratyp:
    Canon EOS 450D
    Hintergrundbild ab bestimmter Browserfenstergröße verdeckt
    AW: Hintergrundbild ab bestimmter Browserfenstergröße verdeckt

    Rakete, habe ich gerade mit einem rahmen gesehen. Für den linken oberen Swirl kann ich position:fixed verwenden und ein Bild einsetzen <img src...>. Für den rechten läuft das nicht. Hat da jemand eine Idee?

    Ich sehe keine Möglichkeit, es alternativ zu implementieren? Sonst geht wieder die Zentrierung flöten. Und eine fixierte Ausrichtung (no scroll), die sich nicht am <body> orientiert, ist mir nicht bekannt.

    Lasse mir aber gerne die Augen öffnen.

    EDIT2:
    So, nun hat's mir gereicht. Ein Container für oben mit einem Bild und ein Container für unten mit einem Bild. Läuft nun. Quick & Dirty, aber was solls. Und Laderzeit q.q Aber das ist der beste Kompromiss.
     
    Zuletzt bearbeitet: 18.06.2009
    #6      
x
×
×