nicht angemeldet
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;
}
MudGuard