überlappende layer, aber höhe wird nicht übernommen?

Status
Nicht offen für weitere Antworten.
Promaetheus

Promaetheus

Mitglied
hi leute. ich bin recht neu in der thematik div´s. bisher hatte ich alles mit tabellen geregelt, aber designtechnisch ist mit layern einfach mehr drin. ich habe nun recht viel gelesen und dachte es verstanden zu haben.

aber: bei folgendem beispiel hätte ich mir folgendes erwartet: äusserer div container (id: d1) volle breite und volle höhe. dann ein div (id: d3) welches ein hintergrundbild am untersten rand des containers (d1) anzeigt. darüber zur textausgabe ein div (id: d3) welches den text ausgibt und IM container aber VOR dem d3 liegt.

das haut auch alles gut hin, nur wenn mehr text drin steht so wird ersichtlich dass der d1 container nicht 100% hoch ist, sondern der d2 textlayer über diesen drübersteht.
der übersichlichkeit halber habe ich die divs mit einem 1px breiten rahmen versehen.

ok.jpg zeigt wie es sein sollte, nichtok.jpg zeigt es wenn mehr text enthalten ist und man scrollen muss.
Code: 
<html>
<head>
<style type="text/css">

body {
  font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

div { border: 1px solid; }

#d1 { height: 100%; background-color: #cccccc; }

#d2 { position: absolute; z-index: 2; }

#d3 { position: absolute; bottom: 0px; z-index: 1; }
</style>
</head>
<body margin-top="0">
<div id="d1">
  <div id="d2">text asdfas adsf as dfa sdfa sdf asdf asdf<p>asdf as dfasdfasdf a sdf a sdf as dfas <p>
               text asdfas adsf as dfa sdfa sdf asdf asdf<p>asdf as dfasdfasdf a sdf a sdf as dfas <p>
               text asdfas adsf as dfa sdfa sdf asdf asdf<p>asdf as dfasdfasdf a sdf a sdf as dfas <p>
               text asdfas adsf as dfa sdfa sdf asdf asdf<p>asdf as dfasdfasdf a sdf a sdf as dfas <p>
  </div>
  <div id="d3"><img src="http://localhost/baum.gif"></div>
</div>
</body>
</html>
 

Anhänge

  • ok.jpg
    ok.jpg
    118,4 KB · Aufrufe: 22
  • nichtok.jpg
    nichtok.jpg
    159,6 KB · Aufrufe: 15
Hi,

versuch es mal hiermit:

Code: 
html,body {
height:100%;
}

#d1 {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background-color:#cccccc; 
}

#d2 {
position:relative;
z-index:2;
}

#d3 {
position:absolute;
bottom:0px;
z-index:1;
}
Und bitte beachte den Punkt 15 unserer Netiquette bzgl. deiner durchgehenden Kleinschreibung. Vielen Dank.
 
ich danke dir für die kompetente antwort. ich habe aber doch noch eine kleine frage hierzu:

das mit min-height wird ja nicht vom ie unterstützt. also bräuchte man da wieder ein workaround oder?

dieser von mir gepostete code (das im body war ein übersehenes überbleibsel) ist nur testhalber. es sollte dann in eine komplette seite eingebunden werden, welche allerdings noch mit tabellen aufgebaut ist.
Code: 
 __________________
|    header        |
|__________________|
|                  |
|    content       |
|                  |
|__________________|

im content sollen dann meine divs zum einsatz kommen. die spalte hat nämlich schon ein hintergrundbild (ein farbenfade). hierzu soll eben noch der baum am unteren contentrand eingeblendet werden aber HINTER dem text. also habe ich mich für die div lösung entschieden. soweit wäre das ja noch ok oder?

EDIT: Sorry für die duchgehende Kleinschreibung. Ich bin Programmierer und diese PC-orientierte Kleinschreibung schon so gewöhnt, da diese ja auch in den meisten Foren anerkannt wird (ich wundere mich gerade über diese Ausnahme hier) und tatsächlich sehr viel Zeitersparnis mitsich bringt. Die anderen Punkte sind natürlich verständlich: Satzzeichen, Grammatik und Sinn des Inhalts sind natürlich absolut relevant. Nur der Punkt KLEINschreibung kommt mir etwas KLEINlich vor. :P
Natürlich wird er von mir aber in Zukunft respektiert, wenn auch etwas widerwillig. :rolleyes:
 
min-height wird vom aktuellen IE7 unterstützt, und für seine Vorgängerversionen haben wir height:100% deklariert, der Zwischenschritt height:auto !important ist für die modernen Browser gedacht, damit sie die nachfolgende height-Deklaration ignorieren.

Mag sein, dass in der Programmierer-Welt und in anderen Foren auf die Groß- und Kleinschreibung kein Wert gelegt wird, in diesem Forum schon, und Ausnahmeregelungen werden hier keine erteilt.
 
Maik hat gesagt.:
...und Ausnahmeregelungen werden hier keine erteilt.
Zum Vergrößern anklicken....
hatte auch keine solchen erwartet:
Promaetheus hat gesagt.:
...Natürlich wird er von mir aber in Zukunft respektiert...
Zum Vergrößern anklicken....

Das "height:auto !important" ist dann also so wie wenn man ein * davor schreiben würde. Denn Opera und Mozilla ignorieren das ja dann. Sehe ich das richtig?

Ist das auch "sauber", sprich ist das auch richtig offiziell und konform wenn man solche Sachen macht oder sollte man normalerweise schauen dass das ohne solcher "workarounds" funktioniert?
 
Code: 
#d1 {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background-color: #cccccc; 
}

Der CSS-Validator hat an dem Stylesheet nichts auszusetzen.

Ansonsten müsstest du die Fallunterscheidung für die älteren IEs mit einem "Conditional Comment" vornehmen.
 
Danke für die Antwort Maik. Das schaut jetzt super aus. Ein klitzekleines Problem ergibt sich allerdings noch. Der Container (d1) wird nun korrekt dargestellt, auch das div mit dem Hintergrundbild (d3) wird korrekt am unteren Rand von d1 dargestellt.
ABER: Das div mit dem Text (d2) wird nur korrekt dargestellt wenn eben dieser Text kurz genug ist, sprich bei ok.jpg. Wenn der Text jedoch länger ist, so wird das container div (d1) nicht der Grösse vom Textdiv (d2) entsprechend nach unten ausgedehnt, sondern das Textdiv (d2) steht unten ÜBER das Container Div (d1) hinaus: nichtok.jpg

Ich habe da etwas bezüglich "float" und "clear" gelesen, jedoch braucht man hierfür ja auch wiederum HACKS da es bei diversen Browsern zu Problemen kommt oder?
Kann es sein dass DIV´s doch nicht SO eine tolle Lösung sind? Mit Tabellen hatte ich nie solche Probleme, wobei ich fairerweise sagen muss dass mit Tabellen mehrere transparente Bilder übereinander gar nicht möglich gewesen wären. ;)
 
Kann es sein, dass du #d2 nicht relativ, sondern weiterhin absolut positioniert hast?

Mit einer relativen Positionierung tritt bei mir dieser Darstellungsfehler nämlich nicht auf.
 
Hallo Maik!

Danke erstmal für deine endlose Geduld. Ich bringe es einfach nicht hin. Ich habe nun probiert den Code in der eigentlichen Seite zum Laufen zu bringen, jedoch leider ohne Erfolg.

Ich habe die Seite, bzw. deren Grundgerüst mit Tabellen aufgebaut. Das sieht auch schon super aus, jedoch zum Feinschliff brauche ich leider die divs. In der Spalte für die Navigation hat das TD schon einen Hintergrund. In dieser Spalte sollte logischerweise der Text der Navigation stehen, ganz unten jedoch HINTER diesem Text eine Grafik. Ich habe nun in diese Spalte (TD), welche die Höhe 100% hat, einen Div Container einbauen wollen mit eben auch diesen 100% Höhe wie du oben beschrieben hast, das funktioniert leider nicht. Er ist nie 100% hoch (funktioniert NICHT im Firefox, wohl aber im IE6), sondern nur so hoch wie der Text es eben verlangt. Am einfachsten wäre natürlich wenn die als relativ gekennzeichneten divs die Spalte (TD) als Elternteil anerkennen würden, denn das ist ja bereits 100% hoch, das tun sie aber leider nicht. Hier das Ganze mal im Detail:

Der CSS Teil:
Code: 
TD {
  font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
  font-size: 12px;
  font-weight : normal;
}

TD.rowNav {
  width: 180px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 10px;
  vertical-align: top;
  border-right: 2px #DBC380 solid;
  background-image: url(images/site/content_bg_nav.gif);
}

TD.rowContent {
  padding: 10px;
  vertical-align: top;
}

TD.rowImages {
  width: 250px;
  padding-top: 10px;
  padding-bottom 10px;
  vertical-align: top;
}

DIV.navContainer {
  border: 1px solid red;
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

DIV.navContent {
  position: relative;
  z-index: 2;
}

DIV.navG {
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: 0px;
}

Der HTML Teil (HTML Teil aus Gründen der Übersicht entfernt):
Code: 
<table cellpadding="0" cellspacing="0" border="0" width="950" height="100%" align="center">
  <tr>
    <td width="65" height="87"><img src="{IMAGEDIR}top_left.gif"></td>
    <td width="819" height="87"><img src="{IMAGEDIR}top_middle.gif"></td>
    <td width="66" height="87"><img src="{IMAGEDIR}top_right.gif"></td>
  </tr>
  <tr>
    <td width="65" height="235"><img src="{IMAGEDIR}stop_left.gif"></td>
    <td width="819" height="235"><img src="{IMAGEDIR}stop_middle.gif"></td>
    <td width="66" height="235"><img src="{IMAGEDIR}stop_right.gif"></td>
  </tr>
  <tr>
    <td width="65" height="100%" background="{IMAGEDIR}content_bg_left.gif"></td>
    <td width="819" height="100%" background="{IMAGEDIR}content_bg_fade.gif" valign="top">
      <table cellpadding="0" cellspacing="0" border="0" width="819" height="100%">
        <tr>
          <td class="rowNav">
            <div class="navContainer">
              <div class="navContent">{NAVIGATION1}<p>{NAVIGATION2}<p><center>{LANGUAGE_SELECT}</center></div>
              <div class="navG">xx</div>
            </div>
          </td>
          <td class="rowContent">{MESSAGESTACK}{CONTENT}</td>
          <td class="rowImages">{IMAGES}</td>
        </tr>
      </table>
    </td>
    <td width="66" height="100%" background="{IMAGEDIR}content_bg_right.gif"></td>
  </tr>
</table>

Langsam bin ich echt am verzweifeln. :(
Was mir jetzt gerade noch aufgefallen ist, ist die Tatsache dass es im Internet Explorer 6 zwar von der Höhe des Containers (navContainer) her klappt, jedoch das zu Testzwecken in den navG div eingefügte "xx" wird immer UNTER dem navContent div angezeigt obwohl es verschiedene z-index hat. ABER: braucht es für z-index nicht IMMER eine absolute positionsangabe? Schön langsam bin ich echt komplett verwirrt.

Ein Kollege hat mal zu mir gesagt: "Steig um auf divs, denn mit denen kannst du VIEL EINFACHER alle Designs erledigen."
Also diese Aussage kann ich ehrlich gesagt in keinster Weise teilen, denn mir ist noch nichts so kompliziertes und umständliches untergekommen wie diese divs. :(

Aussehen hätte es so sollen: http://www.gutshof.cc/entwurfcms/4.htm
Das Problem ist eben dieses geschwungene "G" unterhalb/HINTER der Navigation und der Baum unterhalb/HINTER dem Content.

Und so sieht das ganze derzeit aus: http://dev.promadesign.com
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück