Hub: problem mit Positionen im CSS

Hallo allerseits,

ich bin gerade dabei ein Seite mit Joomla aufzubauen. Habe dafuer eine recht einfache index.php und recht einfache CSS Datei erstellt wie unten:

Mein Problem sind die Positionierungen:
2 Unterelemente tanzen aus der Reihe und vertragen sich nicht:

  • menuright (menu)
  • certificates (grafik)
    Ich glaube ich verstehe auch mehr oder weniger woran es liegt. Beide Unterelemente scheinen das gleiche Elternelement zu benutzen.
    "menuright" klappt sich nach unten aus und daher sollte "certificates" sich immer an der bottomline von "menuright" orientieren. Da aber beide das gleiche Elternelement zu haben scheinen, ueberlappen sich die 2 stattdessen.
    Jetzt wuerde ich gerne "certificates" zu einem Unterelement von "menuright" machen, damit es sich daran orintiert. Nur weiss ich nicht so ganz wie.

Oder bin ich da total auf dem Holzweg?

-----------
index.php Datei

<html>
<head>
  <jdoc:include   type="head" />
<link href="/.../templates/kott/css/template.css"
rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrap">

<div id="headerofpage">
    <img class="bild1" src="templates/kott/images/banner.jpg" alt="Banner"></div>

<div id="middleofpage">
    <div id="breadcrumb">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" /></div>
    <div id="menuright">
      <jdoc:include type="modules" name="user2" style="xhtml" /></div>
      <div id="certificates">
      <jdoc:include type="modules" name="rechts" style="xhtml" /></div>
    <div id="content">
      <jdoc:include type="component" style="xhtml"/></div>
  </div>

<div id="fotterofpage">
    <div id="footer">
      <div align="center"><jdoc:include type="modules" name="footer" style="xhtml" /></div>

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

-------------
css Datei

/* CSS Document */
body {margin:0; padding:0; width: 1024px;
background-color: #ECECEC;

}
/* partitions of the website */
  #headerofpage {
    position: relative;
    width: 1024px;
    height: 200px;
    }

#middleofpage {
    position: relative;
    width: 1024px;
    min-height: 400px;
    border-top: 2px solid #00487D;
    top: 25px;
    }

#fotterofpage {
    position: relative;
    width: 1024px;
    height: 50px;
    border-top: 2px solid #00487D;
    top: 50px;
    }

/* subpartitions of the headerofpage */
  .bild1{margin-left:0px;
    margin-bottom:13px;}

/* subpartitions of the middleofpage */
  #breadcrumb {
    background-color: #ffffff;
    left: 0px;
    width: 700px;
    }

#menuright {
    border-top: 20px solid #00487D;
    border-left: 1px solid #00487D;
    border-right: 1px solid #00487D;
    border-bottom: 1px solid #00487D;
    background-color: #ffffff;
    top: 15px;
    width: 208px;
    position: absolute; left: 815px;
    }

#certificates {
    border-top: 20px solid #00487D;
    position: absolute; left: 820px;
    background-image: url(../images/v11.gif);
    background-repeat: no-repeat;
    float: right;
    width: 208px;
    height: 650px;
    background-color: #ffffff;
    }

#content {
    left: 0px;
    width: 700px;
    }

/* subpartitions of the footerofpage */
  #footer {
    margin: 0pt 0pt 1.1em;
    background-color: #ECECEC;
    }

  1. Hi,

    Beide Unterelemente scheinen das gleiche Elternelement zu benutzen.
    "menuright" klappt sich nach unten aus und daher sollte "certificates" sich immer an der bottomline von "menuright" orientieren. Da aber beide das gleiche Elternelement zu haben scheinen, ueberlappen sich die 2 stattdessen.

    Sie werden an ihrem naechsthoeheren Vorfahrenelement ausgerichtet, dessen position vom Defaultwert static abweicht, ja.

    Jetzt wuerde ich gerne "certificates" zu einem Unterelement von "menuright" machen, damit es sich daran orintiert. Nur weiss ich nicht so ganz wie.

    Dann musst du es im Quelltext in diesem platzieren.

    Oder bin ich da total auf dem Holzweg?

    Auf dem bist du zumindest in anderer Hinsicht.
    menuright ist eine denkbar unguenstig gewaehlte ID, weil sie sich auf die *derzeit* gewuenschte Darstellung bezieht.
    Was ein "fotterofpage" sein soll, weisst wohl auch nur du.
    Und absolute Positionierung und float zu kombinieren, wie du das bei #certificates machst, ist auch unsinnig.

    <jdoc:include   type="head" />

    Und btw., bitte poste *ausschliesslich* den Code, den der Client erhaelt, wenn du ein clientseitiges Problem diskutieren willst, und keinen serverseitigen.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Hi,

      Oder bin ich da total auf dem Holzweg?

      Auf dem bist du zumindest in anderer Hinsicht.

      [...]

      Was ein "fotterofpage" sein soll, weisst wohl auch nur du.

      Und wozu der Footer (fotter ist vermutlich ein Schreibfehler) in 3 (in Worten: drei!) div eingepackt werden muß, ist auch nicht wirklich klar ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Hallo.

        Und wozu der Footer (fotter ist vermutlich ein Schreibfehler) in 3 (in Worten: drei!) div eingepackt werden muß, ist auch nicht wirklich klar ...

        Vieleicht gegen kalte Füße.
        MfG, at