Div-Container wird nicht im anderen Dargestellt...

mbuchegg · 14 November 2013

Hi hab ein blödes Problem.

Arbeite mit Typo3 und irgendwas stimmt in meiner html oder eher css nicht...
Der Container news-list wird im container content nicht unter dem container mit dem h1-tag dargestellt sondern sozusagen eine absolut-position 0left und 0top im content-container... ich bekomm das einfach nicht anders hin. ist wie verhext... und ich verstehe das überhaupt nicht. ignoriert jedes margin und padding des content-containers und wird ganz oben rechts dargestellt - dann aber wieder nicht so weit oben, dass es am kompletten page-rand klebt.

Theoretisch könnte ich es positionieren, aber das ist nicht die Lösung, weil ich möchte möglicherweise auch mal noch einen Datensatz darunter einfügen, der genau so aussieht, dann überlagert sich ja alles... Außerdem kann auch mal Text dazwischen kommen...

Hier die Codes:

HTML:

<div id="zentrierung">
<div id="container_inhalt">
<div id="menue-leiste">
  <img class="logo" src="fileadmin/template/images/logo.png" border="0" />
  <a href="https://www.facebook.com/musicalplanet" target="_blank"><img class="fb" src="fileadmin/template/images/facebook.png" border="0" /></a>
  <a href="https://plus.google.com/u/0/+MusicalplanetAt/" target="_blank"><img class="gp" src="fileadmin/template/images/googleplus.png" border="0" /></a>
  <a href="https://twitter.com/musicalplanetAT" target="_blank"><img class="tw" src="fileadmin/template/images/twitter.png" border="0" /></a>
  <a href="http://www.youtube.com/user/musicalplanetNET" target="_blank"><img class="yt" src="fileadmin/template/images/youtube.png" border="0" /></a>
  <div id="uhr">&nbsp;</div>
  <div id="menue1a"><own class="menue1">Aus unserer Redaktion</own><br /><a href="http://www.musicalplanet.at" title="Startseite"  class="menue1">Aktuelles</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="redaktion/oesterreich/" title="Österreich"  class="menue1">AT</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="redaktion/deutschland/" title="Deutschland"  class="menue1">DE</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="redaktion/schweiz/" title="Schweiz"  class="menue1">CH</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="redaktion/international/" title="International"  class="menue1">International</a></div>
  <div id="menue1b"><own class="menue1">Sonstiges</own><br /><a href="sonstiges/shows/" title="Shows"  class="menue1">Shows</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="index.php?id=gewinnspiele" title="Gewinnspiele"  class="menue1">Gewinnspiele</a>&nbsp;<own class="menuepoint">&#8226;</own>&nbsp;<a href="sonstiges/suche/" title="Suche"  class="menue1">Suche</a></div>
</div>
<div id="inhalt">
  <div id="content">
<div id="c204" class="csc-default" ><div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Aktuelles</h1></div>
<div id="list-container">


      <div id="list-row">
        <div id="list-news1">
            <div id="list-news1-image"><a href="artikel/archive/2013/october/article/catch-me-if-you-can-was-fuer-eine-show/" title="Catch me if you can - Was für eine Show!"><img src="typo3temp/GB/c8693da35c.png" width="220" height="147" border="0" alt="" /></a></div>
            <div id="list-news1-title">Catch me if you can - Was für eine Show!</div>
            <div id="list-news1-sub"><p>Vergangenen Donnerstag feierte man gleich zwei Premieren, einerseits die Eröffnung der neuen Kammerspiele der Josefstadt und damit auch die erste Produktion. CATCH ME IF YOU CAN. Den Besucher erwarten<span class="news-list-morelink"><a href="artikel/archive/2013/october/article/catch-me-if-you-can-was-fuer-eine-show/" title="Catch me if you can - Was für eine Show!">[mehr]</a></span></p></div>
        </div>
   
        <div id="list-news2">
            <div id="list-news2-image"><a href="artikel/archive/2013/october/article/so-wertvoll-kann-ein-orchester-sein-das-orchester-der-vbw/" title="So wertvoll kann ein Orchester sein. Das Orchester der VBW."><img src="typo3temp/GB/a255d3f266.png" width="220" height="147" border="0" alt="" /></a></div>
            <div id="list-news2-title">So wertvoll kann ein Orchester sein. Das Orchester der VBW.</div>
            <div id="list-news2-sub"><p>Gestern feierten die Vereinigten Bühnen Wien nicht nur die deutschsprachige Erstaufführung der Fortsetzung von Phantom der Oper mit LOVE NEVER DIES, sondern setzten einmal mehr, mit einer konzertanten<span class="news-list-morelink"><a href="artikel/archive/2013/october/article/so-wertvoll-kann-ein-orchester-sein-das-orchester-der-vbw/" title="So wertvoll kann ein Orchester sein. Das Orchester der VBW.">[mehr]</a></span></p></div>
        </div>
   
        <div id="list-news3">
            <div id="list-news3-image"><a href="artikel/archive/2013/october/article/castpraesentation-fuer-der-besuch-der-alten-dame/" title="Castpräsentation für DER BESUCH DER ALTEN DAME"><img src="typo3temp/GB/9f76cf41ce.png" width="220" height="147" border="0" alt="" /></a></div>
            <div id="list-news3-title">Castpräsentation für DER BESUCH DER ALTEN DAME</div>
            <div id="list-news3-sub"><p>Bereits länger bekannt ist, dass das vergangen Sommer erfolgreich uraufgeführte Musical, zur gleichnamigen Tragikomödie DER BESUCH DER ALTEN DAME, im Wiener Ronacher als Folgeproduktion nach NATÜRLICH<span class="news-list-morelink"><a href="artikel/archive/2013/october/article/castpraesentation-fuer-der-besuch-der-alten-dame/" title="Castpräsentation für DER BESUCH DER ALTEN DAME">[mehr]</a></span></p></div>
        </div>
      </div>
   

</div>
</div></div>

mbuchegg · 14 November 2013

hier noch das css

Code:

/* CSS Document */
@charset "utf-8";
body {
    text-align: left;
    margin: 0px;
    padding: 0px;
    background-attachment: fixed;
    background-color: #FFF;
    background-image: url(images/bg.jpg);
    background-size:100% auto;
}
#zentrierung {
  text-align: center;
}


div#container_inhalt {
  height: 100%;
  width: 1000px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  top: 0px;
  left: auto;
  right: auto;
  bottom: auto;
  position: relative;
}

#zentrierung {
  text-align: center;
}

#menue-leiste {
    background-color: #FFF;
    border-radius: 0px 0px 10px 10px;
    position: fixed;
    z-index: 100;
    height: 100px;
    width: 1000px;
    top: 0px;
    opacity: 0.95;
    box-shadow: 0px 0px 10px #bf1e2e;
}

#menue-leiste:hover {
    background-color: #FFF;
    border-radius: 0px 0px 10px 10px;
    position: fixed;
    z-index: 100;
    height: 100px;
    width: 1000px;
    top: 0px;
    opacity: 1.0;
    box-shadow: 0px 0px 10px #bf1e2e;
}

#uhr {
    position: absolute;
    top: 20px;
    font-family: Arial;
    font-size: 10px;
    font-style: italic;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #535353;
    left: 230px;
}

#menue1a {
    position: absolute;
    top: 45px;
    left: 230px;
    text-align: left;
}

#menue1b {
    position: absolute;
    top: 45px;
    left: 600px;
    text-align: left;
}

own.menue1 {
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    line-height: 20px;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #bf1e2e;
    letter-spacing: 0px;
    text-decoration: underline;
    text-align: left;
    vertical-align: top;
}

a.menue1 {
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #535353;
    letter-spacing: 1px;
    text-decoration: none;
}

a.menue1:hover, a.menue1_act {
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #bf1e2e;
    letter-spacing: 1px;
    text-decoration: none;
}

own.menuepoint {
    color: #bf1e2e;
}

#inhalt {
    background-color: #FFF;
    border-radius: 10px;
    z-index: 10;
    width: 960px;
    display: table-row;
    padding: 20px;
    position: absolute;
    top: 120px;
}

#content {
    width: 700px;
    padding-right: 20px;
    float: left;
    display: table-cell;
    padding-top: 20px;
    text-align: left;
}

#medien {
    background-color: #bf1e2e;
    border-radius: 10px;
    z-index: 10;
    width: 200px;
    padding: 20px;
    display: table-cell;
}

#impressum {
    background-color: #FFF;
    border-radius: 10px;
    z-index: 10;
    width: 960px;
    padding: 10px;
    position: fixed;
    height: 20px;
    bottom: 20px;
    opacity: 0.75;

}

#list-container {
    display: table;
    clear: both;
}

#list-row {
    padding: 0px;
    display: table-row;
    margin: 0px;
    height: 147px;
    width: 660px;
}

#list-news1 {
    padding: 0px;
    display: table-cell;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
}

#list-news1-image img {
    padding: 0px;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
}

#list-news1-title {
    padding: 0px;
    width: 180px;
    margin: 0px;
    position: absolute;
    left: 20px;
    border-radius: 10px;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    font-variant: normal;
    text-transform: uppercase;
    color: #FFF;
    text-decoration: none;
    text-align: left;
    vertical-align: bottom;
    bottom: 20px;
    text-shadow: 0px 0px 10px #000000;
}

#list-news2 {
    padding: 0px;
    display: table-cell;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 240px;
    top: 0px;
}

#list-news2-title {
    padding: 0px;
    width: 180px;
    margin: 0px;
    position: absolute;
    left: 20px;
    border-radius: 10px;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    font-variant: normal;
    text-transform: uppercase;
    color: #FFF;
    text-decoration: none;
    text-align: left;
    vertical-align: bottom;
    bottom: 20px;
    text-shadow: 0px 0px 10px #000000;
}

#list-news2-image img {
    padding: 0px;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
}

#list-news3 {
    padding: 0px;
    display: table-cell;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 480px;
    top: 0px;
}

#list-news3-image img {
    padding: 0px;
    height: 147px;
    width: 220px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
}

#list-news3-title {
    padding: 0px;
    width: 180px;
    margin: 0px;
    position: absolute;
    left: 20px;
    border-radius: 10px;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    font-variant: normal;
    text-transform: uppercase;
    color: #FFF;
    text-decoration: none;
    text-align: left;
    vertical-align: bottom;
    bottom: 20px;
    text-shadow: 0px 0px 10px #000000;
}

#impressum:hover {
    background-color: #FFF;
    border-radius: 10px;
    z-index: 10;
    width: 960px;
    padding: 10px;
    position: fixed;
    height: 20px;
    bottom: 20px;
    opacity: 1.0;

}

img.logo {
    background-color: #FFF;
    border-radius: 0px;
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
}

img.tw {
    background-color: #FFF;
    border-radius: 0px;
    position: absolute;
    right: 60px;
    bottom: 15px;
    height: 30px;
    width: 30px;
}

img.gp {
    background-color: #FFF;
    border-radius: 0px;
    position: absolute;
    right: 20px;
    top: 15px;
    height: 30px;
    width: 30px;
}

img.fb {
    background-color: #FFF;
    border-radius: 0px;
    position: absolute;
    right: 60px;
    top: 15px;
    height: 30px;
    width: 30px;
}

img.yt {
    background-color: #FFF;
    border-radius: 0px;
    position: absolute;
    right: 20px;
    bottom: 15px;
    height: 30px;
    width: 30px;
}

threadi · 14 November 2013

Ich verstehe das Problem nicht ganz, zum Einen weil es kein news-list in deinem Code gibt, zum anderen auf Grund der Beschreibung. Kannst Du nicht einen Link zur Seite posten? Dann kann man sich das viel besser anschauen.

mbuchegg · 14 November 2013

Hi.
sorry, das ist der list-container div-tag.

die seite ist hier sichtbar:
http://www.musicalplanet.net/index.php/?id=94

danke ;)

threadi · 14 November 2013

Ohwei, ich verstehe deine Verwirrung. Das liegt aber daran, dass dein HTML- aber insbesondere der CSS-Code nicht wirklich sinnvoll umgesetzt sind. Die Verwendung von absolute Positionierung erscheint mir ziemlich beliebig, auch die display-Eigenschaft wird viel zu oft merkwürdig verwendet. Ich würde dir raten, bevor Du an dem typo3-Konstrukt weiter bastelst dir erstmal eine rein statische Seite ohne CMS im Hintergrund zu erstellen in der der HTML- wie auch der CSS-Code sauberer sind als in diesem Entwurf hier. Eine Anpassung des jetzigen Zustands wäre mit viel mehr Arbeit verbunden.

Tronjer · 15 November 2013

Ins CSS habe ich jetzt nicht mal geschaut, aber das HTML ist eine Katastrophe. Angefangen vom HTML 4.0 Doctype, über veraltete Attribute im Body-Tag, eingebundenes JS zu Beginn des Bodies, Tabellenlayout, und benötigst du Prototype / Scriptacolous wirklich? Dafür verwendet man heutzutage jQuery.

Aus technischer Perspektive ist die Seite ein Totalschaden, da gibt es nichts mehr zu flicken. An deiner Stelle würde ich die neu bauen und mir gegebenenfalls Unterstützung dazu holen.

Div-Container wird nicht im anderen Dargestellt...

mbuchegg

Neues Mitglied

mbuchegg

Neues Mitglied

threadi

Moderator

mbuchegg

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

Neueste Beiträge