Positionierung eines Bildes über einem Video Tag

[egolive]

Hallo Community,

ich hoffe Ihr könnt mir helfen.

Also, was ich versuche ist ein Bild über einem Video zu positionieren. (Wobei das wahrscheinlich nichts zur Sache tut)
Mit der absoluten Positionierung funktioniert das zwar, allerdings verschiebt sich das Bild wieder sobald man das Browser Fenster verkleinert. Was auch logisch ist.

Ich such jetzt nach einer Möglichkeit mein Bild zwar absolute zu positionieren, aber eben an einer bestimmten Stelle. (Über einem Video, rechts in der Ecke).
So das es beim verkleinern oder vergrößern des Browsers immer über dem Video steht.

Ich hoffe das ist nicht widersprüchlich.

Ich komme aber irgendwie nicht so ganz dahinter wie das geht.

Ich hab mal zwei Beispielbilder erstellt:

Hier ist die Grafik einfach ohne Positionierung:
(Es geht jeweils um die Orangene Grafik)



Und so soll es positioniert werden:


Hier mal mein Code:

        <div id="spalte-1">
            <h3>
                Baufinanzierungen</h3>
            <ul>
                <li>Umfassende Produktvielfalt</li>
                <li>Schnell vom Antrag zum Vertrag</li>
                <li>Mehr als 40 Bankpartner</li>
                <li>Gute Konditionen</li>
                <li>Hohe Beleihungsausläufe</li>
                <li>Attraktive Provisionsstaffeln</li>
            </ul>
            <p>
                Abwicklung via Internet, Fax, Mail, Telefon oder Post.</p>
        </div>
        <div id="spalte-2">
            <video controls class="video_home" width="500px" height="281px" poster="img/Content/videoposter.png">
                <source src="img/Content/fpvideo.ogv" type="video/ogg" />
                <source src="img/Content/fpvideo.mp4" type="video/mp4" />
            </video>
            <div class="top_buttom"></div>
        </div>

    #spalte-1 { 
         float: left; 
         width: 350px; 
         padding-left:30px; 
    }
    
    #spalte-1 > p {
         font-size: 13px;
    }
    
    #spalte-2 { 
         float: left; 
         width: 250px; 
         padding-left:40px; 
    }
    
    .video_home {
         border-style:solid;
         border-width:1px;
         border-color:#ff6600;
         z-index:1;
    }
    
    .top_buttom {
        background: url(../img/Content/top.png) 0 0 no-repeat;
        width:147px;
        height:188px;
        z-index:2;
        margin-left:50px;
    }

Ich hoffe jemand kann mir helfen und bedanke mich schon einmal fürs lesen. :)
Falls ihr noch mehr Informationen benötigt sagt kurz bescheid.

Viele Grüße,
danny

 

[Cheffchen]

Hallo,

und wo ist der Link zur seite?

Aaus dem code werde ich auf die schnelle nicht richtig schlau weill sachen fehlen.

normal
ein div mit position relative, meistens wrapper und dann kannst deine grafik mit position absolute positionieren.
So bleibt das an der stelle auch wenn fenster kleiner machst.

Cheffchen

 

[Banana_Jones]

Cheffchen hat Recht, die absolute Positionierung hat ihren Bezugspunkt immer in dem ersten positionierten Elternelement. Der Startpunkt (0,0) ist also nicht zwangsläufig die obere linke Browserecke, sondern die obere linke Ecke des ersten positionierten Elternelements

 

[egolive]

Hi Cheffchen,

die seite liegt noch nicht auf dem webserver bzw. gibt es noch keinen Webserver ^.^

Ich poste dir einfach mal den ganzen Code:

  html,
  button,
  input,
  select,
  textarea {
      color: #222;
  }
  
  body {
      font-size: 1em;
      line-height: 1.4;
  }
  
  ::-moz-selection {
      background: #b3d4fc;
      text-shadow: none;
  }
  
  ::selection {
      background: #b3d4fc;
      text-shadow: none;
  }
  
  hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
  }
  
  img {
      vertical-align: middle;
  }
  
  fieldset {
      border: 0;
      margin: 0;
      padding: 0;
  }
  
  textarea {
      resize: vertical;
  }
  
  .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
  }
  
  body {
      font: 16px/26px Helvetica, Helvetica Neue, Arial;
  }
  
  .wrapper {
      width: 90%;
      margin: 0 5%;
  }
  
  /* ===================
      Theme
     =================== */
  
  .main aside {
      border-top: 20px solid #e44d26;
  }
  
  .main aside {
      background: #d6ebfc;
  }
  
  .header-grafik {
      background: url(../img/leer.png) 0 0 no-repeat;
      width:1074px;
      height:100px;
  }
  
  .title {
      color: white;
  }
  
  /* ==============
      MOBILE: Menu
     ============== */
  
  nav ul {
      margin: 0;
      padding: 0;
  }
  
  nav a {
      display: block;
      margin-bottom: 10px;
      padding: 9px 0;
  
      text-align: center;
      text-decoration: none;
  
      color: white;
  }
  
  nav a:hover,
  nav a:visited {
      color: white;
  }
  
  nav a:hover {
      text-decoration: none;
  }
  
  /* ==============
      MOBILE: Main
     ============== */
  
  .main {
      padding: 30px 0;
  }
  
  .main article h1 {
      font-size: 2em;
  }
  
  .main aside {
      color: white;
      padding: 0px 5% 10px;
  }
  
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  
  @media only screen and (min-width: 480px) {
  
  /* ====================
      INTERMEDIATE: Menu
     ==================== */
  
      nav a {
          float: left;
          margin: 0 1.7%;
          padding: 9px 2%;
          margin-bottom: 0;
      }
  
      nav li:first-child a {
          margin-left: 0;
      }
  
      nav li:last-child a {
          margin-right: 0;
      }
      
      .header-grafik {
          background: url(../img/header_768.png) 0 0 no-repeat;
          width:281px;
          height:100px;
          margin-left:62%;
      }
  
      .nav-bg-effekt {
          background: url(../img/bar_effekt_768.png) 0 0 no-repeat;
          width:396px;
          height:41px;
          margin-left:46%;
      }
      
      /* ========================
      Content Startseite
     ======================== */
      
      .hr_content {
           height:6px;
           width:660px;
           background-color:#ff6600;
           padding:0;
           margin-top:20px 0 0 0;
      }
      
      #spalte-1 { 
           float: left; 
           width: 350px; 
           padding-left:30px; 
      }
      
      #spalte-1 > p {
           font-size: 13px;
      }
      
      #spalte-2 { 
           float: left; 
           width: 250px; 
           padding-left:40px; 
      }
      
      .video_home {
           border-style:solid;
           border-width:1px;
           border-color:#ff6600;
           z-index:1;
      }
      
      .top_buttom {
          background: url(../img/Content/top.png) 0 0 no-repeat;
          width:147px;
          height:188px;
          z-index:2;
          margin-left:20px;
      }
  }
  
  @media only screen and (min-width: 768px) {
  
  /* ====================
      WIDE: CSS3 Effects
     ==================== */
  
      .main aside {
          -webkit-box-shadow: 0 5px 10px #aaa;
             -moz-box-shadow: 0 5px 10px #aaa;
                  box-shadow: 0 5px 10px #aaa;
      }
      
      .header-grafik {
          background: url(../img/header.png) 0 0 no-repeat;
          width:1074px;
          height:100px;
          margin-left:30%;
      }
  
      .nav-bg-effekt {
          background: url(../img/bar_effekt.png) 0 0 no-repeat;
          width:839px;
          height:41px;
          margin-left:45%;
      }
      
      .hr_content {
          height:6px;
          width:935px;
          background-color:#ff6600;
          padding:0;
          margin-top:20px 0 0 0;
      }
      
      .footer_text {
          padding-top:11px;
          padding-left:15%;
          float:left;
      }
  
      .footer_logo 
      {
          padding-left:15%;
          float:left;
      }
          
  /* ============
      WIDE: Menu
     ============ */
  
      .title {
          float: left;
      }
  
      nav {
          float: right;
          width: 38%;
      }
  
  /* ============
      WIDE: Main
     ============ */
  
      .main article {
          float: left;
          width: 57%;
      }
  
      .main aside {
          float: right;
          width: 28%;
      }
  }
  
  @media only screen and (min-width: 1140px) {
  
  /* ===============
      Maximal Width
     =============== */
  
      .wrapper {
          width: 1140px; /* 1140px - 10% for margins */
          margin: 0 auto;
      }
      
      .nav_wrapper 
      {
          width: 1400px; /* 1140px - 10% for margins */
          margin: 0 auto;
      }
     
  }

Ich hoffe das geht so.

Danke schonmal

Edit:// Sry ich habe leider doch keine möglichkeit das Projekt zu Hosten. Ich muss den HTML Teil in einen extra Thread packen. Bitte verzeiht mir :(

 

[egolive]

Grund für Doppelpost: Zeichenbegrenzung (Ich hoffe das geht so in Ordnung)

default.aspx (Quellcode aus dem Browser)

  <!DOCTYPE html> <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <title>Finanzierungspool</title>     <meta name="description" content="">     <meta name="viewport" content="width=device-width">     <link rel="stylesheet" href="css/normalize.min.css">     <link rel="stylesheet" href="css/main.css">     <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>       <script src="js/jquery-1.8.2.js" type="text/javascript"></script>   <script src="js/iphone-style-checkboxes.js" type="text/javascript"></script>   <link rel="stylesheet" href="css/new-ios-theme.css" type="text/css" media="screen" />      <script type="text/javascript">         $(document).ready(function () {             $(':checkbox').iphoneStyle();         });   </script>      <!--[if gte IE 9]>       <style type="text/css">         .gradient {            filter: none;         }       </style>     <![endif]-->  </head> <body>     <form method="post" action="default.aspx" id="masterform"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZBala+eG/pk7IgMjJ7Iejwl5gYylRerON6K3Zfo45/wi" /> </div>      <!--[if lt IE 7]>             <p class="chromeframe">Sie benutzen einen veralteten Browser. <a href="http://browsehappy.com/">Updaten Sie ihren Browser sicherheitshalber noch heute!</a></p>         <![endif]-->      <div class="header-container">     <a href="default.aspx"><img src="img/logo.png" alt="Finanzierungspool" class="logo" border="0" /></a>         <header class="header-grafik">         </header>     </div>      <div class="nav-container">         <div class="nav-bg-effekt">             <nav class="nav_wrapper clearfix">             <ul>                 <li>                     <div class="startseite"><a href="#" style="display:block;width:102px;height:41px;"></a></div>                 </li>                 <li>                     <div class="unternehmen"><a href="#" style="display:block;width:120px;height:41px;"></a></div>                 </li>                 <li>                     <div class="leistung"><a href="#" style="display:block;width:108px;height:41px;"></a></div>                 </li>                 <li>                     <div class="partner"><a href="#" style="display:block;width:88px;height:41px;"></a></div>                 </li>                 <li>                     <div class="sogehts"><a href="#" style="display:block;width:143px;height:41px;"></a></div>                 </li>                 <li>                     <div class="presse"><a href="#" style="display:block;width:88px;height:41px;"></a></div>                 </li>             </ul>             </nav>         </div>      </div>      <div class="main-container">              <div class="main wrapper clearfix">         <hr class="hr_content" />         <div id="spalte-1">             <h3>                 Baufinanzierungen</h3>             <ul>                 <li>Umfassende Produktvielfalt</li>                 <li>Schnell vom Antrag zum Vertrag</li>                 <li>Mehr als 40 Bankpartner</li>                 <li>Gute Konditionen</li>                 <li>Hohe Beleihungsausläufe</li>                 <li>Attraktive Provisionsstaffeln</li>             </ul>             <p>                 Abwicklung via Internet, Fax, Mail, Telefon oder Post.</p>         </div>         <div id="spalte-2">             <video controls class="video_home" width="500px" height="281px" poster="img/Content/videoposter.png">                 <source src="img/Content/fpvideo.ogv" type="video/ogg" />                 <source src="img/Content/fpvideo.mp4" type="video/mp4" />             </video>             <div class="top_buttom"></div>         </div>         <a href="umsatzerhoeher.aspx" style="clear: both; padding-top: 75px; float: left;             width: 327px; height: 183px;">             <img src="img/Content/umsatz.png" width="327px" height="183px" alt="Umsatzerh&ouml;hung"                 style="border: none;" onmouseover="this.src='img/Content/umsatz_ov.png';" onmouseout="this.src='img/Content/umsatz.png';" /></a>         <a href="umsatzbeschleuniger.aspx" style="padding-top: 75px; float: left; width: 327px;             height: 183px;">             <img src="img/Content/beschleuniger.png" width="327px" height="183px" alt="Ihr Usatz-Beschleuniger"                 style="border: none;" onmouseover="this.src='img/Content/beschleuniger_ov.png';"                 onmouseout="this.src='img/Content/beschleuniger.png';" /></a>     </div>      </div>          <div class="footer-container">         <footer>             <a href="#" class="footer_text"><img src="img/footer_text.png" alt="Impressum" border="0" /></a>             <a href="#" class="footer_logo"><img src="img/footer_logo.png" alt="Top" border="0" /></a>         </footer>     </div>      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>     <script>        window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>     <script src="js/main.js"></script>     <script>         var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];         (function (d, t) {             var g = d.createElement(t), s = d.getElementsByTagName(t)[0];             g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';             s.parentNode.insertBefore(g, s)         } (document, 'script'));         </script>     </form> </body> </html>

Edit//

Warum wird der HTML Code so komisch dargestellt? :/
Sry ich bekomme es nicht hin, dass der Code untereinander dargestellt wird :(

 

[Cheffchen]

Hallo,

ne is auch kaum besser.
beim html fehlt wieder viel. kein doctype, das ende fehlt komplett.
ich habe jetzt bloss IE´s auf den rechner und damit komme ich ja bei deiner Seite nicht weit und deine besucher dann auch nicht und Beamer habe ich auch nicht wenn ich das auf die schnelle richtig sehe. da dürfte ich ein großen vertikal scroll haben :O).

.header-grafik {
width:1074px;
margin-left:30%;

bei 1000px breiter viewpoint= 333px von links dann 1074px Bild = 1407 breite der Homepage seite, mindest.

dann mal % mal px usw.

Das ist eher ein wunder wenn da was richtig angezeigt wird, oder besser gesagt, du kannst dir sicher sein, das die Seite nur bei dir so aussieht.

Cheffchen
-----------------------------------
edite: ok vielles hat sich erledigt weil post sich überschnitten, finde ich echt nervig hierr im forum.
Hast viele css und so also vielleicht ist eine auch für IE ok :O)

mach das bild in das tag oder div vom bild und mach das position relativ und das bild dan absolute, mehr geht echt nur online.

Cheffchen

 

[Banana_Jones]

Um nochmal auf dein Problem einzugehen, würde ich folgendes vorschlagen:

[...]
<div id="spalte-2">
    <div class="video-wrapper">     
            <video controls class="video_home" width="500px" height="281px" poster="img/Content/videoposter.png">
                <source src="img/Content/fpvideo.ogv" type="video/ogg" />
                <source src="img/Content/fpvideo.mp4" type="video/mp4" />
            </video>
            <div class="top_buttom"></div>
       </div>
</div>
[...]

[...]
.video-wrapper {
   position: relative;
}

.top_buttom {
   position: absolute;
   z-index: 2;
   top: XXX;
   left: XXX
}

Die Werte für top/left musst du durch Ausprobieren ermitteln, dass kann ich ohne Link nicht erraten. Ich habe jetzt nur die relevanten Styles angegeben.

 

[egolive]

Oh danke, dass hat Super funktionert Vielen Danke =)

@Cheffchen

Ich war schon total verwirrt