Alexander Jank: Probleme mit height von untergeordnetem DIV-Tag

SELF-Forum

Probleme mit height von untergeordnetem DIV-Tag

Alexander Jank
– Informationen zu den Bewertungsregeln

Ich habe folgende Seite, bestehend aus DIV-Tags, die ich mit CSS formatieren will.

<html>  
	<head>  
		<style type="text/css">  
			.notes {  
				position: absolute;  
				top: 165px;  
				left: 654px;  
				width: 150px;  
				height: 75px;  
				border: 1px solid black;  
			}  
			.notes .heading {  
				background-color: #eeb;  
				border-bottom: 1px solid black;  
			}  
  
			.notes .text {  
				background-color: #ffc;  
				width: 100%;  
				height: 100%;  
			}  
		</style>  
	</head>  
	<body>  
		<div class="notes">  
			<div class="heading">  
				Titel  
			</div>  
			<div class="text">  
				Text  
			</div>  
		</div>  
	</body>  
</html>

Wenn ihr das Beispiel in euren Browser (ich verwende Firefox) kopiert, dann seht ihr mein Problem. Da in .notes .text "height: 100%;" steht, steht dieser Teil "drüber". Was kann man da machen, um dieses Probelm zu behaben?

(Ich will keine genaue Pixelangabe in CSS machen, da das Feld "notes" evtl. auch größer sein kann als in diesem Beispiel.)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit height von untergeordnetem DIV-Tag

    Kai345 Homepage des Autors
    – Informationen zu den Bewertungsregeln

    [latex]Mae  govannen![/latex]

    Ich habe folgende Seite, bestehend aus DIV-Tags, die ich mit CSS formatieren will.

    DIV-Elemente, nicht Tags.

      	<div class="heading">  
  		Titel  
  	</div>

    Sieht unsinnig aus. -> H1-H6.

      	<div class="text">  
  		Text  
  	</div>

    Sieht ebenfalls unsinnig aus. -> p

          <div class="notes">  
<!-- hier verwende ich exemplarisch in der Annahme einer globalen Seiten-Überschrift h1  
 das nächstfolgende struktriernde Überschrift-Element h2, es kommt aber auf die  
tatsächliche Struktur an -->  
         <h2>Titel</h2>  
         <p>Text</p>  
         <p>mehr Text</p>  
      </div>  
      <!-- ggf weitere div class="notes" -->

    Cü,

    Kai

    --
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
    Foren-Stylesheet Site Selfzeug JS-Lookup
    SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit height von untergeordnetem DIV-Tag

      Alexander Jank
      – Informationen zu den Bewertungsregeln

      Ich habe jetzt noch einmal ein bisschen herumprobiert, bin aber nicht auf den richtigen "Pfad" gekommen.

      Ich habe mein Beispiel etwas vereinfacht. In Wirklichkeit ist statt "Text" eine "textarea" da. Und diese "textarea" sollte genau so groß sein wie das übergeordnete "div"-Element (minus Überschrift).

      Deshalb haut es auch mit der Breite hin, nur die Höhe passt nicht. Da schaut das "div"-Element mit dem Text unten hinaus - genau so viel wie die Überschrift einnimmt. (Nimmt man eine "textarea", so erhält man dasselbe Ergebnis.)

      Die Höhe für das übergeordnete "div"-Element muss ich aber trotzdem angeben, da dies vom Server übergeben wird. (Es gibt also sowohl vertikal als auch horizontal lange sowie kurze "div"-Elemente.)

      Ich hoffe, ich habe mich jetzt klarer ausgedrückt.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit height von untergeordnetem DIV-Tag

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Alexander Jank:

        nuqneH

        Ich hoffe, ich habe mich jetzt klarer ausgedrückt.

        Nicht wirklich.

        Willst du uns vielleicht linken?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit height von untergeordnetem DIV-Tag

          Alexander Jank
          – Informationen zu den Bewertungsregeln

          @@Alexander Jank:

          nuqneH

          Ich hoffe, ich habe mich jetzt klarer ausgedrückt.

          Nicht wirklich.

          Willst du uns vielleicht linken?

          Qapla'

          Das Projekt ist leider nicht online, sonst würde ich euch gerne den Link geben.

          Ich versuch mal folgenden Ansatz: Die übergeordneten div-Elemente sollten (Psydo-)Fenster (also so wie die Fenster bei Windows) sein. Das eine div-Element (das in meinem Beispiel die Klasse "heading" hat) sollte der Titel des Fensters sein, das andere div-Element (mit der Klasse "text") sollte der Inhalt des Fensters sein.

          Die Fenstergröße (Breite und Höhe) ist bekannt. Der Titel hat eine fixe Höhe, und der Inhalt sollte dann die restliche Höhe einnehmen. So ungefähr sollte das Konzept aussehen (ich weiß, dass das kein CSS ist^^):

          fenster-höhe: 546px;
          titel-höhe: 20px;
          inhalt-höhe: 100%-20px; (100% bezieht sich auf die 546px)

          fenster-höhe und titel-höhe lässt sich ja leicht darstellen, aber inhalt-höhe bereitet mir Probleme. Natürlich könnte man "546px-20px=526px" ausrechnen und die Höhe absolut angeben. Das Problem ist jedoch, dass fenster-höhe nicht zwingend 546px haben muss. (titel-höhe mit 20px ist jedoch schon fix.)

          Ich hoffe, dass ich durch diesen Ansatz mein Problem deutlicher und genauer schildern konnte.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Probleme mit height von untergeordnetem DIV-Tag

    cross
    – Informationen zu den Bewertungsregeln

    Hallöchen auch,

    Ich habe folgende Seite, bestehend aus DIV-Tags, die ich mit CSS formatieren will.

    Das ist mal ganz löblich.

    <html>

      		height: 75px;  
  		border: 1px solid black;  

    Das ist schlecht, denn damit bestimmst Du die Höhe des 1. DIV und die anderen DIV's sind darin "eingesperrt".  
  
  

> Wenn ihr das Beispiel in euren Browser (ich verwende Firefox) kopiert, dann seht ihr mein Problem. Da in .notes .text "height: 100%;" steht, steht dieser Teil "drüber". Was kann man da machen, um dieses Probelm zu behaben?  
  
ICH würde es wie folgt lösen:  
~~~html
  
                <style type="text/css">  
                        .notes {  
                                position: absolute;  
                                top: 165px;  
                                left: 654px;  
                                width: 150px;  
                        }  
                        .notes .heading {  
                                background-color: #eeb;  
                                border: 1px solid black;  
                        }  
  
                        .notes .text {  
                                border-width: 0px 1px 1px 1px;  
                                border-style: solid;  
                                border-color: black;  
                                background-color: #ffc;  
                        }  
                </style>  
  
                <div class="notes">  
                        <div class="heading">  
                                Titel  
                        </div>  
                        <div class="text">  
                                Text  
                        </div>  
                </div>

    MfG
    cross

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit height von untergeordnetem DIV-Tag

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@cross:

      nuqneH

      Ich habe folgende Seite, bestehend aus DIV-Tags, die ich mit CSS formatieren will.

      Das ist mal ganz löblich.

      Nein, das ist es ganz und gar nicht, wie Kai345 schon anmerkte.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln