Positionierung in px und %

[Jörn]

hi @ll,

irgendwie bin ich zu blöd ;-) ...

habe drei Elemente, das Erste hat eine feste Höhe und soll ganz oben positioniert werden. Das Dritte hat ebenso eine feste Höhe und soll ganz unten auf die Seite. Bislang kein Problem. ABER: das zweite Element soll (muss) den Rest der Seite einnehmen und hat keine feste Höhe.

Wenn ich diesem Element 2 die Höhe 100% geben, dann "kickt" es das untere Element aus dem Bild. Die Höhe müsste also 100% - Höhe der beiden anderen Elemente sein ... und das bekomme ich nicht hin.

Ich MUSS aber eine Höhe vergeben, denn in das Element zwei kommt ein Flashobjekt und dieses verlangt eine Größenangabe ...

Vielleicht kann mir jemand helfen

Viele Grüße

Jörn

[fastix®]

Moin!

Ich MUSS aber eine Höhe vergeben, denn in das Element zwei kommt ein Flashobjekt und dieses verlangt eine Größenangabe ...

Was spricht dagegen, die Größenangabe des Bereiches (<div>) für das Flash-Objekt mit JavaScript zu errechnen und zu übergeben?

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Jörn]

Was spricht dagegen, die Größenangabe des Bereiches (<div>) für das Flash-Objekt mit JavaScript zu errechnen und zu übergeben?

Hallo fastix®

danke für die schnelle Antwort. Das Flashobjekt ist ein "Bildbetrachter" und passt die Bilder sofort der Fenstergröße an, verändere ich das Fenster, dann veränderen sich die Bildgrößen und damit das Flashobjekt.

Wenn ich alle Höhen in % angeben, dann ändert sich beim Vergrößern des Fensters auch der Flashbereich (leider aber auch die Elementhöhen oben und unten - was sie nicht sollen).

Viele Grüße

Jörn

[gary]

Hi Jörn,

Beispiel:
Head-Div oben=25px
Foot-Div unten=25px

100%(Gesamthöhe)* 50px (head+foot)
__________________________________ = m % (Mittel-Div in Prozent)

px<f> (Fensterhöhe)

Dein Mitteldiv ist dann m%, dass hängst du unter dein Head-Div - sollte passen!

Dies setzt aber die Möglichkeit vorraus, dass du die Fensterhöhenpix mit JS abfragen kannst.

Die Höhe des Mittelteils in px kannst du auch ausrechnen:

Mitte % * px<f>
_______________ = px<m> (Pixhöhe  des Mittelteils)

100%

Leider alles JavaScript

Viele Grüsse gary

[gast]

versuch mal folgendes:

pack die elemente 1 und 2 in ein <div id="outer">
und dann

.outer
{
 min-height:100%;
 margin-bottom:-30px;   // hier schreibst du die höhe vol element 3 rein
 height:auto;
}

ciao

[gary]

Hi gast,

Hmm, so geht natürlich auch *g*

Grüsse gary

[gast]

Dazu hätte ich noch eine ähnliche Frage:

Ich habe ebenfalls 3 Elemente: head, content, footer.
Head und Footer haben eine feste Höhe.

Bei wenig Text im Content, soll der Footer ganz unten an der Seite hängen.
Habe ich viel Text, soll der Footer mit runterwandern und am Ende vom Content-Bereich hängen.

Der Seitenhintergrund ist rot, der Content-Hintergrund ist weiß und soll IMMER bis zum footer reichen.

Egal was ich auch probiere, entweder der footer sitzt unten und wander ggf mit - dann habe ich aber (bei wenig Text) eine sichtbare Lücke zwischen content und footer. (Variante 1)
Oder die Lücke ist geschlossen, dann fließt der Text bei viel Content allerdings "unter dem footer durch", der sich NICHT mit nach unten bewegt. (Variante 2)

Mein Seitenaufbau ist wie folgt:

<div class="outer">
 <div class="header">
   HEADER
 </div>

<div class="content">
  CONTENT
 </div>
</div>

<div class="footer">
 FOOTER
</div>

Und mein CSS:

.outer
{

min-height:100%;
 margin-bottom:-45px;
 height:auto;

}

* html .outer
{
 height:100%;
}

/* backslash hack \*/
html, body{height:100%;}
/* end */

div.header
{
 position:relative;
 padding-top:38px;
 padding-left:205px;
 margin:0px;
}

.content {

background-color: #ff0000;
  position:relative;     // wenn ich hier ABSOLUT schreibe, hab ich Variante 2
 left:205px;
}

.footer {
 padding-top:5px;
 padding-bottom:5px;
 background-color: #ffffff;
 clear:both;
 position:relative;
 text-align:center;
 left:205px;

}

**

Irgendwer eine Idee?
kay

[Jörn]

Der Seitenhintergrund ist rot, der Content-Hintergrund ist weiß und soll IMMER bis zum footer reichen.

hallo Kay,

ich frage mal dumm (weil ich von CSS nicht so viel Ahnung habe):

wieso tauschst du nicht: Contenthintergrund mit Seitenhintergrund - Header und Footer müssten dann halt rot "gefärbt" werden. Da der Seitenhintergrund nun weiß ist, enthält der neue Contentbereich keine Farbe (und man sieht den weißen Seitenhintergrund überall, auch bei wenig Content ...).

Grüße

Jörn

PS. bei mir macht wohl das Flash-Plug-In Probleme. Es "orientiert" sich nicht an der Größe des zugewiesenen DIV-Tags, sondern immer an der ganzen Fenstergröße. D.h. wenn noch 80% an Platz für das Flashdingens bleibt und ich eine Größe von 100% eingebe, dann nimmt es nicht 100% von den 80% - sondern ragt über den "Rand" hinaus. Auch auf der Herstellerseite fand ich keine Hilfe - das Plugin ist der Bildbetrachter "SimpleViewer" von Air tight Interactive ...

[kay]

Der Seitenhintergrund ist rot, der Content-Hintergrund ist weiß und soll IMMER bis zum footer reichen.

hallo Kay,

ich frage mal dumm (weil ich von CSS nicht so viel Ahnung habe):

wieso tauschst du nicht: Contenthintergrund mit Seitenhintergrund - Header und Footer müssten dann halt rot "gefärbt" werden. Da der Seitenhintergrund nun weiß ist, enthält der neue Contentbereich keine Farbe (und man sieht den weißen Seitenhintergrund überall, auch bei wenig Content ...).

ähhh, naja, ich will halt keinen roten content sondern einen weißen :)

[kay]

hallo nochmal,
bin leider noch keinen schritt weiter :-/
hat niemand einen tipp für mich? hab zwar eine notlösung mittels JS gefunden, aber das würde ich mir gerne sparen.

danke & gruß
kay