• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschiedene Ebenen anordnen

X

Xen

Neues Mitglied
Hallo Forum,
ich bin dabei eine Seite zu erstellen. Etwa in diesem Stil:
Code: 
http://www.designtagebuch.de/forum-mediendesign-2011/
Der Mittelteil im Vordergrund ist bei mir eine Flash Animation. Das Problem ist, der Hintergrund mit den grauen Scanlinien (habe ich mit CSS positioniert) steht bei mir im Vordergrund vor dem Flash Teil. Ich arbeite mit Dreamweaver und wüßte gerne wie ich das lösen kann (habe das mit z index versucht, aber das hat nicht funktioniert). Die zweite Frage ist, wie bekomme ich das hin, das der Mittelteil in den orange-farbenen Kopfbereich hineinragt? Wenn nötig poste ich noch den Code. Vielen Dank schonmal
 
code ist immer sinnvoll und soweit ich das verstanden habe sollte zumindest das letze problem mit z-index und float irgendwie zu regeln sein. dein erstes problem war mir nicht ganz ersichtlich
 
Hallo hier ist erstmal der Html Code:
HTML: 
 <body bgcolor="#E0DEDF">
<div class="kopfzeile"></div>

  <div class="flash">
  
<center>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="bit20" height="696" width="800">
        <param name="movie" value="bit20.swf">
        <param name="bgcolor" value="#FFCC33">
        <param name="quality" value="high">
        <param name="seamlesstabbing" value="false">
        <param name="allowscriptaccess" value="samedomain">
        
<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="bit20" src="bit20.swf" bgcolor="#FFCC33" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain" height="696" width="800">
          
        
      </object>
    </center> </div>

    
<!-- <div style="text-align: center; top: 649px; left: 657px;" class="fusszeile"></div> -->
<div CLASS="mitte"></DIV>

  
</body>
</html>

Und die CSS:
Code: 
.kopfzeile
{
    height: 140px;
    BACKGROUND-COLOR:#090;
    border-bottom: 2px;
    /* [disabled]border: solid ffffff; */
    /* [disabled]border-style: solid; */
    border-bottom-color: #FFF;
    border-bottom-style: solid;
    
}
.mitte
         {
    height: 400px;
    /* [disabled]BACKGROUND-COLOR:0f0f0f; */
    POSITION: relative;
    /* [disabled]width: auto; */
    /* [disabled]text-align: center; */
    /* [disabled]top: 669px; */
    /* [disabled]left: auto; */
    top: -696px;
    /* [disabled]left: 50%; */
    /* [disabled]margin-top: 150px; */
    background-image: url(background.gif);
    z-index: 10;
    /* [disabled]border-top: 4px; */
    /* [disabled]border-color: #FFF; */
}
.flash
{
    z-index: 20;
    /* [disabled]padding-bottom: -20px; */
}
Sorry, ist ein bischen viel auskommentiert.
Ich habe mit padding und margin experimentiert, aber ich bekomme den Flash Film nicht so verschoben, wie ich ihn gerne hätte. Und der <div> Conteiner class="mitte" soll in den Hintergrund, ging mit z index so auch nicht. Vielen Dank schonmal. Gruß Xen
 
Probier mal genau diesen Code hier:

HTML: 
<!DOCTYPE html>
<html>
    <head>  
        <meta charset=UTF-8>
        <title>Seitenname fehlt
        </title>
        <meta name="description" content="">
        <style>
        * {margin:0; padding:0;}
        body {
            background-color:#E0DEDF;
        }
        div.kopfzeile {
            height: 140px;
            background-color:#090;
            border-bottom: 2px solid white;;
        }
        div.mitte {
            background: url(background.gif);
        }
        div.mitte div.flash {
            width:799px; 
            height:696px;
            margin:-20px auto 0 auto;
            background-color: #FFCC33;  
        }
        </style>
    </head>
    <body>
        <div class="kopfzeile">kopfzeile</div>
        <div class="mitte">
            <div class="flash">
            <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="bit20" width="799" height="696" >
                <param name="movie" value="bit20.swf">
                <param name="bgcolor" value="#FFCC33">
                <param name="quality" value="high">
                <param name="seamlesstabbing" value="false">
                <param name="allowscriptaccess" value="samedomain">
                <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="bit20" width="799" height="696" src="bitan20.swf" bgcolor="#FFCC33" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain" >
                </embed>
            </object>
            </div>
        </div>
        <div id="fusszeile">
        </div>
    </body>
</html>

:mrgreen:
 
Hallo Wustersoss,
danke für den aufgeräumten Code. Jetzt ist der Flash Film im Vordergrund. Der Flash Film ragt jedoch nicht in die Kopfbereich, im Dreamweaver wird der Bereich von "margin -20" angezeigt, jedoch im Browser nicht. Ich denke, man sollte die .mitte und .flash Klassen getrennt betrachten. Der mittlere Bereich, soll sich auch nicht bis ganz zum Seitenende ziehen, da kommt noch ein anderer Hintergrund, hier nochmal der angepasste Code:
Code: 
<style>
         {margin:0; padding:0;}
        body {
            background-color:#E0DEDF;
        }
        div.kopfzeile {
            height: 140px;
            background-color:#090;
            border-bottom: 2px solid white;;
        }
        div.mitte {
            background: url(background.gif);
             height: 400px;  
        }
         div.flash {
            width:800px; 
            height:696px;
            margin:-20px auto 0 auto;
            
        }
        </style>

Also besteht nur noch das Problem, dass der margin -20 der Klasse .flash sich nicht im Browser durchsetzt. Schön, dass einem hier geholfen wird Danke.
 
Zuletzt bearbeitet:
Der Flash Film ragt jedoch noch nicht in die Kopfbereich, im Dreamweaver wird der Bereich von "margin -20" angezeigt, jedoch unterhalb der Kopfzeile, also nicht hineinragend.
Zum Vergrößern anklicken....

Dazu sag ich lieber nichts mehr.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben