Variabler Header

Status
Nicht offen für weitere Antworten.
N

NY_Katrin

Grünschnabel
Hallo zusammen!

Ich habe das folgende Problem:

Es muss eine Seite implementiert werden, auf der sowohl der Footer dynamisch abhängig von der Größe des Contents positioniert werden kann (das läuft bereits), als auch die Position des Contents abhängig vom jeweiligen Header ist.

Es soll möglich sein, verschiedene Header mit unterschiedliche Höhe einzubauen ohne Änderungen am Design vornehmen zu müssen.

Der Header wird jeweils aus einem eigenen Template dazugeladen. Beträgt die Höhe zum Beispiel 100 px, soll der Content automatisch auf der Höhe 110 px beginnen.

----------------------------------------
| | --> Header 1 (Höhe 100px)
----------------------------------------
| |
| |
| | --> Content beginnt auf Höhe 110 px
| |
| |
----------------------------------------
| | --> Footer
----------------------------------------


Wird nun ein Header mit der Höhe 200 px eingespielt, soll der Content automatisch bei 210 px beginnen.

----------------------------------------
| | --> Header 2 (Höhe 200px)
| |
----------------------------------------
| |
| |
| | --> Content beginnt auf Höhe 210 px
| |
| |
----------------------------------------
| | --> Footer
----------------------------------------

Der Header besteht dabei nicht aus einem Bild, sondern aus mehreren Elementen, die über die Positionierung zusammengesetzt werden.

Ich hoffe, es ist klar geworden, was ich meine. Kann mir einer von euch helfen

Danke!!

Katrin
 
Hi,

ohne jetzt den CSS-Code im Detail zu kennen, würde ich vorschlagen, für das DIV #content einen oberen Außenabstand von 10px zu bestimmen:

Code: 
#content {
margin-top: 10px;
}
 
Das Problem geht etwas tiefer. Hier eine Kurzform des bisher programmierten Teiles:


#frame {
min-height:600px; width:950px; margin-left:-475px; background:lightgrey;
}
#boxHeader {
position:relative; background:white; border: solid blue 1px;
}
#boxContent {
position:relative; top:10px; background:white; border: solid red 1px; min-height:300px;
}
#boxFooter {
position:relative; top:20px; background:orange; border: solid green 1px; height:50px;
}

<div id="frame">

<div id="boxHeader" style="height:180px;">
HEADER
</div>

<div id="boxContent">
CONTENT
</div>

<div id="boxFooter">
FOOTER
</div>

</div>

Die Schwierigkeit besteht darin, dass der Header seinerseits aus verschiedenen Bildern und Boxen besteht. Positioniere ich diese absolut im header-div, geht die relativ-Eigenschaft verloren (headerBox vergrößert sich nicht automatisch mit dem Inhalt).

Eine relative Positionierung geht aufgrund der Menge und Ausrichtung der Elemente nicht, weil sonst reservierter Platz entsteht, den ich in meinem Design auch nicht gebrauchen kann.

Gibt man, so wie oben, eine Höhe für die headerBox vor, funktioniert es mit absoluter Positionierung der Elemente des Headers in der relativen headerBox.

Nur müsste man diese Höhe bei anderen Headern manuell ändern und genau das will ich verhindern. Jeder Header, egal aus welchen Elementen und mit welcher Höhe soll automatisch eingefügt werden können, ohne das Restdesign zu killen...

:confused:
 
Da ich jetzt auch nicht weiß, wie die Elemente innerhalb des Headers angeordnet sind, werfe ich jetzt mal die float-Eigenschaft in den Raum, falls sie ausschliesslich nebeneinander angeordnet sind.
 
Hier der Code des Headers:

<div id="boxHeader" style="height:180px;">

<div style="position:absolute; top:5px; left:760px; width:226px;">
<a href="http://www.xxx.de" class="grey">Home</a>&nbsp;&nbsp;&nbsp;
<img src="{$HTTP_DIR}/images/senkrechte_linie_top.gif" width="1" height="25" align="top" alt="">&nbsp;&nbsp;&nbsp;
<a href="http://www.xxx.de/rating/frame_imp.html" class="grey">Legal</a>&nbsp;&nbsp;&nbsp;
<img src="{$HTTP_DIR}//images/senkrechte_linie_top.gif" width="1" height="25" align="top" alt="">&nbsp;&nbsp;&nbsp;
<a href="{$HTTP_DIR}/commonPhp/logout.php" class="red">Logout</a>&nbsp;&nbsp;&nbsp;
</div>

<div style="position:absolute; top:10px; left:-5px; z-index:3">
<img src="{$HTTP_DIR}/images/Logo.gif" hspace="20" vspace="17" alt="">
</div>

<div style="position:absolute; top:27px; left:721px">
<img src="{$HTTP_DIR}/images/Visualisierung.jpg" width="230" height="104" alt="">
</div>

<div style="position:absolute; top:132px; left:15px">
<img src="{$HTTP_DIR}/images/verlauf.jpg" width="199" height="30" alt="">
</div>

<div id="boxBlue">
</div>

<div style="position:absolute; top: 132px; left:721px">
<img src="{$HTTP_DIR}/images/Visualisierung_unten.jpg" width="230" height="30" alt="">
</div>

Wie du siehst, sind die Bilder sowohl nebeneinander als auch untereinander...
 
So wie ich das überblicke, wirst du wohl für die Seiten mit den unterschiedlichen Header-Höhen ein individuelles Stylesheet in das Dokument laden müssen.
 
Ich fürche auch, dass es dynamisch nicht funktionieren wird. Das Dumme ist, dass es sich um potentielle Header handelt. Das heisst, ich kann jetzt noch gar kein Stylesheet für die anlegen.

Weisst du, ob es eine Möglichkeit gibt, die Höhe eines Divs mittels seiner Inhalte automatisch zu ermitteln?
 
Habs versucht. Geht irgendwie nicht. Hab von Javascript ehrlich gesagt überhaupt keine Ahnung. Kannst du mir mit dem Code helfen?

Wie muss ich das schreiben, damit die Höhe für das div mit der Id "boxHeader" auf eine php-Variable geschrieben wird

DAAAAAAAAAANKE :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück