[HTML] DIV so hoch wie Elterndiv

**YannikSMYLIE** · 24. 01. 2012, 15:20

Nein, es ist keine der üblichen fragen.
Mein Problem findet ihr hier: http://homepage.selfip.info/user/gol...hof/index3.php

Ich versuch nun schon seit TAGEN, das rote DIV genau so hoch zu bekommen wie das DIV, in dem das Hintergrundbild ist. Selbst wenn kein INhalt bis nach unten reicht, soll es bis unten laufen, so weit so gut, bis auf einen kleinen Hacken: Sobald ich einen Doctype setze (was ich für den IE tun muss -.-), verschwindet der Effekt... des rote div wird genau so hoch wie sein inhalt.. und nicht höher..

irgendwelche Ideen?
Danke schon mal

.

**Freakdead85** · 24. 01. 2012, 17:01

hallo

versuch es mal mit dieser doctype :

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

sollte eigentlich funzen.

**Kugelfisch23** · 24. 01. 2012, 17:05

Der Grund dafür, dass die Prozentangabe der Höhe für dein inneres div-Element (im Standards-Mode) wirkungslos ist, ist, dass dein äusseres div-Element in modernen Browsern eine height-Eigenschaft mit Wert auto erhält. Dadurch hängt die Höhe des äusseren div-Elements von dessen Inhalt ab und die Prozentangabe für die Höhe des inneren div-Element evaluiert gemäss http://www.w3.org/TR/CSS21/visudet.h...eight-property zu auto, wird also ignoriert:

<percentage>: Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Benötigst du das äussere div-Element überhaupt? Bedenke, dass du auch für das body-Element ein Hintergrundbild festlegen kannst.

Zitat von Freakdead85

versuch es mal mit dieser doctype :

Das wird kaum etwas ändern. Sowohl deine wie auch seine DOCTYPE-Deklaration lösen in modernen Browsern den Standards-Mode aus, die erwartete (dem Standard widersprechende) Darstellung liefert offenbar nur der Quirks-Mode, und dies wohl auch nur in einigen Browsern - gezielt auf Anpassungen des Quirks-Mode zu setzen, ist wenig sinnvoll. Weiterführende Informationen dazu sind unter http://board.gulli.com/thread/22294...-quirks-mode-/ zu finden.

**YannikSMYLIE** · 24. 01. 2012, 23:49

Zitat von Kugelfisch23

Benötigst du das äussere div-Element überhaupt? Bedenke, dass du auch für das body-Element ein Hintergrundbild festlegen kannst.
.

Ja leider schon (hier hab ich ein 2. Problem umgangen).
Setze ich das Hintergrundbild in den BODY und sage dem body sei 100% und mach das bild in die mitte unten hin, dann ist das "unten" immer da, wo man noch nicht scrollen muss, heißt also: sobald ich scrolle, hängt das bild in der mitte anstatt am ende.

Edit: Hab das mal geändert damit du das DISASTER siehst

**Freakdead85** · 25. 01. 2012, 01:09

um dein body bild festzusetzen das dies nicht mitscrollt sondern nur was du drüberlegst benutze am bsten den css befehl:

HTML-Code:

body
{
background-attachment:fixed;
}

damit fixierst du deinen hintergrund das er nicht mitscrollen kann.

**YannikSMYLIE** · 25. 01. 2012, 14:39

wenn ich eingebe: center bottom, will ich das das bild center bottom ist, und nicht fixed.

**Kugelfisch23** · 25. 01. 2012, 15:54

Das Problem ist, dass CSS 2.1 es wie erwähnt nicht erlaubt, zwei ineinander verschachtelte Elemente mit prozentualen Angaben für die min-height- oder max-height-Eigenschaften (und einer height-Eigenschaft mit Wert auto) zu nutzen, da dann die Höhe des äusseren Elements (potentiell) von dessen Inhalt abhängt, wodurch die Prozentangaben für das innere Element unzulässig sind.

Durch die fixe Höhenangabe von 100% für das html- und das body-Element sind diese Elemente genau so hoch wie der Viewport des Browsers, deshalb wird das gesetzte Hintergrundbild mit Vertikaler bottom-Positionierung am unteren Rand des initialen Viewports, nicht am unteren Rand der Seite angezeigt.

Da es durch die vertikale Repetition des Hintergrundbildes für das innere div-Element zudem nicht möglich ist, die beiden Hintergrundbilder in einer einzigen Grafik zu kombinieren, sehe ich bloss die Nutzung mehrerer Hintergrundbilder für ein Element gemäss dem CSS-3-Entwurf (http://www.w3.org/TR/css3-background/#layering) als Möglichkeit, die gewünschte Darstellung zu erreichen. In deinem Fall müsstest du http://homepage.selfip.info/user/gol...intergrund.jpg und http://homepage.selfip.info/user/gol...rhof/mitte.png als Hintergrund für ein Element mit voller Breite und min-height-100%-Eigenschaft (z.B. für das body-Element, dem du diese Eigenschaften zuweist) setzen. Die Positionierung und Repetition kann für jedes Hintergrundbild einzeln festgelegt werden.

**YannikSMYLIE** · 25. 01. 2012, 17:49

Das hatte ich schon gegoogelt aber nichts gefunden

Danke für den Link!
Wie sieht das aus mit der Browserverträglichkeit?

**Kugelfisch23** · 25. 01. 2012, 18:37

Aktuelle Versionen moderner Browser unterstützen mehrere Hintergrundbilder, ebenso der IE ab Version 9 - siehe https://developer.mozilla.org/en/CSS/background. Für ältere IE-Versionen könntest du JavaScript nutzen (z.B. http://archive.plugins.jquery.com/project/multiple-bg), alternativ dürfte sich das wohl auch über die proprietäre filter-Eigenschaft für den IE erreichen lassen - vgl. http://coding.smashingmagazine.com/2...rnet-explorer/, speziell der Abschnitt Multiple Backgrounds dürfte von Interesse sein.

**YannikSMYLIE** · 28. 01. 2012, 01:17

Zitat von Kugelfisch23

Aktuelle Versionen moderner Browser unterstützen mehrere Hintergrundbilder, ebenso der IE ab Version 9 - siehe https://developer.mozilla.org/en/CSS/background. Für ältere IE-Versionen könntest du JavaScript nutzen (z.B. http://archive.plugins.jquery.com/project/multiple-bg), alternativ dürfte sich das wohl auch über die proprietäre filter-Eigenschaft für den IE erreichen lassen - vgl. http://coding.smashingmagazine.com/2...rnet-explorer/, speziell der Abschnitt Multiple Backgrounds dürfte von Interesse sein.

Danke für die Links!
Und: Ich hätte niemals gedacht dass ich diese tollen Dinge die ich in Info lerne anwenden kann

Ohne den ganzen "formale Sprachen" kram hätte ich die Syntax bei Mozilla gar nicht verstanden!
KLAPPT GANZ PRIMA (:, beinahe, aber das kleine Problemchen lässt sich lösen.
Allerdings: Der 2. Link klappt nicht so ganz, hast du vielleicht eine andere Quelle?

Dass das so einfach ist hätte ich nicht gedacht

, und ich saß da STUNDEN dran um eine Lösung zu finden... und die Lösung ist ein Komma....

DANKE NOCHMAL!

**Kugelfisch23** · 28. 01. 2012, 08:45

Zitat von YannikSMYLIE

Allerdings: Der 2. Link klappt nicht so ganz, hast du vielleicht eine andere Quelle?

Ja: http://www.chicowebdesign.com/blog/2...round-plug-in/ - diese ist in der angegebenen Originalquelle http://www.chicowebdesign.com/blog/2...efox/#more-406 verlinkt.

**YannikSMYLIE** · 29. 01. 2012, 23:15

So, dann sag ich mal danke (: Wenn du willst kannst du dir ja mal das fertige "Produkt" anschauen und bewerten

.
http://www.goldbergerhof.de

DANKE DANKE DANKE nochmal (:

**HansZ** · 30. 01. 2012, 00:40

Rein für die Benutzerfreundlichkeit: Ich würde noch das hinzufügen:

PHP-Code:


.navSchildText a {

display:block;

height:30px;

width:135px;

line-height:34px !important;

}

Pixelangaben evtl. anpassen

**toldyou** · 30. 01. 2012, 11:19

Wenn du es schon Benutzerfreundlich machen willst, dann verwende wenigstens relative Angaben, damit der Benutzer auch wirklich die Freiheit hat, seine Schriftgröße frei einzustellen

Ansonsten wird bei fixen Breiten- und Höhenangaben in px der Text einfach abgeschnitten, wenn die Schriftgröße vergrößert wird. Das wäre dann nicht mehr Benutzerfreundlich.

**Kugelfisch23** · 30. 01. 2012, 11:28

HansZ, die grosse Zeilenhöhe (welche du zwecks Zentrierung setzt) führt zu Problemen, wenn mehr als eine Zeile Text angezeigt werden soll. Ich würde eine Lösung vorschlagen, welche einerseits die Links auf der ganzen Fläche klickbar macht und andererseits die semantisch inkorrekten Layout-Tabellen zur Zentrierung eliminiert: In modernen Browsern und aktuellen IE-Versionen reicht dazu ein (X)HTML-Struktur wie

HTML-Code:

<div class="navSchild"><a href="?page=2">...</a></div>

mit den folgenden Ergänzungen im Stylesheet:

Code:

.navSchild {
    display: table;
}
.navSchild a {
    display: table-cell;
    padding: 15px;
    height: 23px;
    width: 128px;
    text-align: center;
    vertical-align: middle;
}

Abgesehen davon wird der im Query-String übergebene page-Parameter offenbar korrekt nicht geprüft oder gefiltert, bevor er in mehreren SQL-Querys verwendet wird. Dadurch entsteht eine SQL-Injection-Schwachstelle - wie kritisch diese ist, hängt davon ab, ob sich in der Datenbank auch schützenswerte, private Daten z.B. zur Administration der Seite befinden. Diese Schwachstelle solltest du unbedingt zeitnah beheben.

Nachtrag:

Zitat von toldyou

Wenn du es schon Benutzerfreundlich machen willst, dann verwende wenigstens relative Angaben, damit der Benutzer auch wirklich die Freiheit hat, seine Schriftgröße frei einzustellen

Das ist im Allgemeinen sicherlich sinnvoll, in diesem Fall besteht innerhalb der seitlichen Navigationsleiste jedoch das Problem, dass die Hintergrundgrafiken (http://homepage.selfip.info/user/gol...hof/schild.png) bestimmte, fixe Dimensionen in Pixeln vorgeben. Angaben relativ zur Schriftgrösse würden hier dazu führen, dass bei einer kleineren oder grösseren Schriftgrösse das Layout nicht mehr korrekt dargestellt würde. Insofern scheinen mir Angaben in Pixeln in diesem Fall durchaus angebracht.