Ankündigung

Einklappen
Keine Ankündigung bisher.

css div Problem der höhe bei variablem Inhalt

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • css div Problem der höhe bei variablem Inhalt

    Hy,

    ich habe mal wieder ein Problem.
    Ich habe eine Seite die durch verschiedene übereinandergelegte Grafiken erstellt wird.
    Nun wollte ich um das komplette Konstrukt einen Schatten legen, also einen div Container drum herum und einen Schatten an diesem Container.
    Nun hört er aber bei ca. 300px einfach mit dem Container auf obwohl der ja parent sein sollte.
    Hat einer eine Idee?

    PHP-Code:
    <!doctype html>
    <
    html>
      <
    head>
        <
    meta name="viewport" content="width=device-width, initial-scale=1">
        <
    meta charset="utf-8">
        <
    title>    </title>
        <
    meta name="robots" content="noindex">
        <
    link href="../css/style.css" rel="stylesheet" media="screen">

      </
    head>
      <
    body>
        <
    div id="wrapper" class="clearfix">
            <
    div id="header">
                <
    a href="../index.php"><img src="../images/wortlaut.png" alt="wortlaut" id="wortlaut"></a>
                <
    img src="../images/banner.png" alt="banner" id="banner">
                <
    img src="../images/bg_img.png" alt="Background" id="backgroundimage">
                <
    div id="headfield">
                      <
    div id="pmenu"><div id="admin"><a href="/selfAdmin/"><img src="../images/admin_icon.png"
                            
    onmouseover="this.src='../images/admin_icon_hover.png';"
                             
    onmouseout="this.src='../images/admin_icon.png';"></a></div><div id="pm"><a href="/profil/pmbox.php"><img src="../images/pm_new_icon.png"
                            
    onmouseover="this.src='../images/pm_new_icon_hover.png';"
                             
    onmouseout="this.src='../images/pm_new_icon.png';"></a></div>
                                <
    div id="profil"><a href="/profil/view.php?pid=YLmaDFoWxpmk39gG9Qad"><img src="../images/profil_icon.png"
                                
    onmouseover="this.src='../images/profil_icon_hover.png';"
                                 
    onmouseout="this.src='../images/profil_icon.png';"></a></div>
                                <
    div id="logout"><a href="/logout.php" onclick="return window.confirm('Wirklich abmelden?');">
                                <
    img src="../images/logout_icon.png"
                                
    onmouseover="this.src='../images/logout_icon_hover.png';"
                                 
    onmouseout="this.src='../images/logout_icon.png';"></a></div>
                             </
    div>            </div>
            </
    div>
              <
    div id="logo" style="background: url(../images/logo.png) no-repeat;"></div>
            <
    div id="main">
                <
    table border="0" width="100%" cellpadding="0" cellspacing="0">
                    <
    tr>
                        <
    td>
                            
                    <
    div align="center"><br>
                        
    Inhalt
                    
    </div>
                                        </
    td>
                    </
    tr>
                    <
    tr>
                        <
    td><center>|
                             <
    a href="index.php?site=home">Home</a> | <a href="index.php?site=agb">AGB</a> | <a href="index.php?site=kontakt">Kontakt</a> | <a href="index.php?site=impressum">Impressum</a> |                    </center><br></td>
                    </
    tr>
                </
    table>
            </
    div>
            <
    div id="footer"></div>
        </
    div>
        <
    br style="clear:both" />
      </
    body>
    </
    html
    Es geht um die id wrapper

    Die Seite ist zwischen 700-1000px hoch

    HTML-Code:
    * {
        padding: 0;
        margin: 0;
    }
    body, html {
        width: 900px;
        margin: auto;
        background-color:#D5EFF1;
    }
    
    div#wrapper {
        position: absolute;
        left: auto;
        right: auto;
        top: 35px;
        height: 100%;
        min-height:100%;
        width: 900px;
        -webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67);
    box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67);
    }
    
    img#banner {
      position: absolute;
      left: 0px;
      top: 45px;
      width: 900px;
      height: 75px;
      z-index: 2;
    }
    
    
    img#backgroundimage{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 900px;
      height: 540px;
      z-index: 1;
    }
    
    
    img#wortlaut  {
      position: absolute;
      left: 30px;
      top: 62px;
      width: 290px;
      height: 30px;
      z-index: 3;
    }
    
    div#log_mail {
      /*background: url(log_user.png) no-repeat;*/
      position: absolute;
      left: 450px;
      top: 55px;
      width: 185px;
      height: 27px;
      z-index: 4;
    }
    #mail,#password {
      background-color: transparent;
      border: 0;
      position: absolute;
      outline: 0 none;
      left: 30px;
      top: 0px;
      width: 145px;
      height: 27px;
      z-index: 4;
    }
    
    div#log_key {
      position: absolute;
      left: 650px;
      top: 55px;
      width: 185px;
      height: 27px;
      z-index: 5;
    }
    
    #enter {
      position: absolute;
      left: 850px;
      top: 55px;
      width: 27px;
      height: 27px;
      z-index: 6;
    }
    
    #logo {
      position: absolute;
      left: 734px;
      top: 472px;
      width: 143px;
      height: 143px;
      z-index: 7;
    }
    
    p {
        font-family: "Arial";}
    
    
    .link_banner {
    font-size: 11px;
    color:#fff ;
    text-align: center;
    position: absolute;
    left: 420px;
    top: 70px;
    width:200px;
    z-index: 9;
    }
    
    .welcome {
    font-size: 45px;
    color: #5FBCE3;
    text-align: center;
    position: absolute;
    left: 400px;
    top: 50px;
    width:500px;
    z-index: 9;
    }
    /*
    a
    {text-decoration:none;
    color: #A6C6E0;}
    
    a:hover {
        color:#5FBCE3;
        }
    */
    div#main {
      position: absolute;
      /*border-radius: 18px;*/
      left: 0px;
      top: 540px;
      width: 862px;
      height: auto;
      z-index: 1;
    }
    
    div#pmenu {
      position: absolute;
      float: right;
      left: 500px;
      top: 50px;
      width: 400px;
      height: 50px;
      z-index: 4;
    }
    
    div#admin {
      position: absolute;
      left: 160px;
      top: 0px;
      width: 50px;
      height: 50px;
      z-index: 4;
    }
    
    div#pm {
      position: absolute;
      left: 220px;
      top: 0px;
      width: 50px;
      height: 50px;
      z-index: 4;
    }
    
    div#profil {
      position: absolute;
      left: 280px;
      top: 0px;
      width: 50px;
      height: 50px;
      z-index: 4;
    }
    
    div#logout {
      position: absolute;
      left: 340px;
      top: 0px;
      width: 50px;
      height: 50px;
      z-index: 4;
    }
    
    div#wrapper:after {
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
    
    .clearfix:after {
         visibility: hidden;
         display: block;
         font-size: 0;
         content: " ";
         clear: both;
         height: 0;
         }
    .clearfix { display: inline-block; }
    /* start commented backslash hack \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* close commented backslash hack */
    Ich habe schon ne weile gegooglet und vieles versucht, doch was funktionales kam nicht dabei raus.

    Vielen Dank
    http://phpcodechecker.com/

  • #2
    [MOD: Verschoben von Javascript etc.. ]
    The string "()()" is not palindrom but the String "())(" is.

    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar


    • #3
      Hallo,

      kannst du vielleicht eine Version inklusive der Bilder online stellen?

      Welcher Container hört nach 300px einfach auf?

      Lg,
      Johannes

      Kommentar


      • #4
        Hy, vielen Dank für dein Interesse, ich habe jetzt einfach zum schluss eine Javascript Funktion ausgeführt die ausließt wie groß das variable div ist und das parent div nachträglich vergrößert.
        HTML-Code:
        var divheight = document.getElementById('main').offsetTop + document.getElementById('main').offsetHeight;
                document.getElementById('wrapper').style.height = divheight + "px";
        Mfg
        http://phpcodechecker.com/

        Kommentar

        Lädt...
        X