height:100% - auch wenn Screen vorbei @ tutorials.de: Tutorials, Forum & Hilfe

maceo · 01.12.04 13:28

Hi zusammen,

mein Problem ist folgendes (habe hier noch keine Antwort gefunden):
Ich habe eine Seite mit dynamischen Inhalt und hätte gern einen sich
mit vergößernden Hintergrund (als div). Ungefähr so vorzustellen:

<div class="hintergrund">
<div class="inhalt">dynamisch</div>
</div>

oder halt:

<div class="hintergrund"></div>
<div class="inhalt">dynamisch</div>

(stark vereinfacht)

Nun ist es leider so, dass sobald der Screen vorbei ist, der Hintergrund
auch weg ist. Ich habe bereits versucht min-height:100% und anderes...
Wichtig ist, dass das Ganze dynamisch bleibt, ich also auch kein Hin-
tergrundbild nehmen kann.

Hat jemand eine Idee? Bin ich zu verstehen?
Ich dachte eigentlich, dass dies ein Problem sei was schon öfter vorkam.

maceo

Gumbo · 01.12.04 13:44

Definiere mal den Hintergrund für das body-Element:

A List Apart: Faux Columns

maceo · 01.12.04 14:06

Hi Gumbo,

vielleicht hab ich es ja falsch verstanden, aber ich soll ein
Hintergrundbild definieren? Das geht ja leider nicht, da die
Seite sehr flexibel bleiben muss.

Magst du noch mal posten?

maceo

Gumbo · 01.12.04 14:10

Dann kommt es natürlich auf die Hintergrundgrafik an

maceo · 01.12.04 14:17

Ja, das ist es eben. Es darf keine Graphik verwendet werden!
So flexibel wie möglich.

.main {
margin-top:100px;
padding:0px;
width:500px;
height:100%;
min-height:100%;
background-color:#FF0000;
position:absolute;
}

...und darauf dynamischer Content. Das Problem ist wie gesagt,
dass bei "runterscrollen" auf einmal Ende ist mit der 500px breiten
roten Farbe, die ja aber eigentlich immer present sein soll...

Noch 'ne Idee?

maceo

maceo · 01.12.04 14:45

Ist mein Problem für alle verständlich? Ich bin davon ausgegangen, dass
schon mehrere CSS-User damit zu kämpfen gehabt hätten...

maceo

Budman · 01.12.04 15:04

Hallo!

Das kann eigentlich nicht sein, also will sagen, da muss irgendwo ein Fehler stecken, allgemeines Problem ist das nicht.

Wenn das div länger wird, muss auch die Hintergrundfarbe "mitwachsen".

Hast Du es denn schon mit content gefüllt? Und versuch mal "height:auto;" anstatt 100%.

Poste doch mal das ganze Stylesheet, vielleicht findet sich da was...

Gruss Bud

maceo · 01.12.04 15:17

Gern, hier das CSS:

Code :

.body {
    margin:0px;
    padding:0px;
    background-color:#000000;
}
.mainheader {
    margin:0px;
    padding:0px;
    width:794px;
    height:145px;
    background-color:#FF0000;
    position:absolute;
}
.mainbody {
    margin-top:145px;
    padding:0px;
    width:794px;
    height:100%;
    background-color:#FF0000;
    position:absolute;
}
.bannerheader {
    margin:0px;
    margin-left:799px;
    padding:0px;
    width:175px;
    height:145px;
    background-color:#FF0000;
    position:absolute;
}
.bannerbody {
    margin-top:145px;
    margin-left:799px;
    padding:0px;
    width:175px;
    height:100%;
    background-color:#FF0000;
    position:absolute;
}
.top {
    margin-top:0px;
    margin-left:0px;
    padding:0px;
    width:770px;
    height:145px;
    background-color:#000000;
    position:absolute;
}
.navi {
    margin-top:145px;
    margin-left:0px;
    padding:0px;
    width:160px;
    height:100%;
    max-height:100%;
    background-color:#EEEEEE;
    position:absolute;
}
.content {
    margin-top:145px;
    margin-left:160px;
    padding:0px;
    width:610px;
    height:100%;
    max-height:100%;
    background-color:#CCCCCC;
    position:absolute;
}

...und hier das grobe Script:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="body">
<div class="mainheader"></div>
<div class="mainbody"></div>
<div class="bannerheader"></div>
<div class="bannerbody"></div>
<div class="top"></div>
<div class="navi"></div>
<div class="content"></div>
<div class="banner"></div>
</body>
</html>

Das Ganze entspricht nicht 100%ig dem Original, da es sonst
zu verwirrend wäre mit den PHP-includes.

div-Tag mit Farbe als Hintergrund - durchgezogen bis zum Ende.
@Budman: "auto" hat leider nix gebracht...

maceo

Gumbo · 01.12.04 15:21

Wieso benutzt du nicht einfach eine Hintergrundgrafik, damit wäre es viel einfacher.

maceo · 01.12.04 15:23

...ja, damit wäre es einfacher und auch
sicher schon fertig - darf aber nicht sein.

Budman · 01.12.04 15:44

Hallo!

Das ist wieder mal ein typisches IE Problem, im Firefox funktioniert's wie gedacht....

Willst Du alle drei Bereiche bis ganz nach unten, oder nur jeweils bis der Content endet? Wenn letzteres, das klappt jetzt schon, wenn nicht, würde ich jetzt folgenden Ansatz probieren:

Ein div durchgehend (100%) mit Hintergrundfarbe #EEEEEE, darauf gelegt ein div mit #CCCCCC (left:160px; ). Und für den roten Bereich ebenfalls ein div, dieses genauso wie das erste draufgelegte (left:770px; ).

Ich schreib's später nochmal ausführlich auf, ich muss nur jetzt leider weg, und komme erst spät wieder. Morgen Vormittag kommt's dann in "fertig".

Gruss

Gumbo · 01.12.04 15:46

Und wer verbietet dir das? Eine Hintergrundgrafik schränkt die Flexibilität einer Webseite nicht zwangsläufig ein.

maceo · 01.12.04 16:13

@Budman: Ist leider nicht ganz richtig, dass es ein IE Problem ist. Teste bereits die ganze Zeit parallel mit IE, Firefox und Opera und da tritt es auch auf...

@Gumbo: Was soll ich sagen, ist halt eine von vielen Anforderungen. Eine Einschränkung ist es dann, wenn z.B. die Farbe schnell geändert werden sollen, dann musst du in dem Fall der Hintergrundgraphik eine Graphik "anfassen" und keinen Code.

Jetzt kommt noch der erhöhte Schwierigkeitsgrad hinzu, was vielleicht nicht aus dem Code ersichtbar ist:

Ich habe quasi zwei Blöcke, von denen der eine dynamischen Content enthält, der andere nicht (somit fällt leider dein Vorschlag raus, Budman, das Ganze in ein div zu packen - wobei ich so in meinen ersten ansätzen ganz gut zurecht gekommen bin (bis ich auf andere Probleme gestoßen bin)). Ich habe mal versucht es graphisch darzustellen, damit wir alle von der gleichen Sache sprechen:

Code :

+-----------------------------+---+------------+
| header                      |   |            |
|                             |   | banner     |
+--------+--------------------+ s |            |
| navi   |                    | p |            |
|        |  dynamischer       | a | 2nd navi   |
|        |                    | c |            |
|        |      Content       | e |            |
|        |                    | r |            |
|        |                    |   |            |
|        |                    |   |            |
+--------+--------------------+---+------------+

Es gibt halt gewisse graphische Vorgaben, die eingehalten werden müssen.
Könnt ihr mich verstehen?

maceo

maceo · 02.12.04 09:06

Hi zusammen,

habe jetzt als "Notlösung" erstmal ein Hintergrundbild genommen. Ist zwar
nicht so wie es sein soll, aber anders komme ich im Moment nicht voran.
@Gumbo: Das heißt jetzt aber nicht, dass dies die Lösung ist ;o)

Vielen Dank erstmal - schreibt gerne, wenn ihr die Lösung zu dem Problem
gefunden habt - ich bin gespannt!

maceo

Budman · 02.12.04 20:47

Hallo nochmal!

Also ich hab heute mehrfach versucht, da eine Lösung zu finden, aber es scheint nicht zu gehen.

Ich bin mir aber 100% sicher, dass ich sowas in der Art schonmal gesehen habe, und meiner Erinnerung nach auch schonmal gemacht habe.

Ich bastel mal weiter, es ist auf jeden Fall nicht vergessen, denn das beschäftigt mich jetzt schon

Ich lass wieder was hören.

Gruss Bud

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Knapp daneben ist auch vorbei.

Beenden des Prg´s wenn Fehler im Splash-Screen

Auch wenn Ostern schon lange vorbei ist...

Problem bei einem alert in Kombination mit +screen.width+ und +screen.height

Wenn das 2. dann auch das 1.!wenn das 3. dann auch das 1.&2.!

E-Mail:

Abonnieren Abbestellen