problem mit Positionen im CSS
Hub
- 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:
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;
}
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
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
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