✔ Höhe von Div-Container und beinhaltende Bilder dynamisch verändern

O

omothes

Grünschnabel
Hallo zusammen,

Ich versuche gerade meine Webseite zu überarbeiten. Die Spielwiese findet ihr unter http://www.mothes.info/test
Es geht um die Darstellung meiner Galerien (aktuell is nur "Sport" eingerichtet). Dort sollen sich die Bilder automatisch so skalieren, dass sie den Bereich zwischen Head und Foot möglichst gut ausnutzen (kleiner Rand wie oben zum Head ist ok, sogar gewollt). Ich dachte, dies könne man per CSS lösen (height=100%, oder 90% oder so), klappt aber nicht. Erstmal der Code:
HTML: 
<div id="content">
 <?php
	 if($typ=="")
	 	{	?>
	 		
		<div id="content-wrapper">
         		<h1>Das eine Auge des Fotografen schaut weit geöffnet durch den Sucher, <br/>das andere, das geschlossene, blickt in die eigene Seele.</h1>
			<p>Henri Cartier-Bresson</p>
		</div>
			
<?php
	}
	else
	{			?>
		<div id="content-wrapper">
			<div id="images" style="margin-top: 20px; margin-left:10px; overflow-x: auto; overflow-y:hidden; width: 955px; height:50%; white-space: nowrap;">

      		        <?php
				$pfad = "img/$typ/";
				$verz = opendir ( "$pfad" );
				while ( $file = readdir ( $verz ) )
			  	   {
  				   if ( $file != '.' && $file != '..')
  				   {
     			           echo "<a href='$pfad/$file' rel='lightbox[$file]' target='_blank'><img style='margin-left:2px;margin-right:2px;max-height:100%;' src='$pfad/$file'/></a><!-- <br style='clear:both' /> -->";
  				    }
				    }
				closedir ( $verz );
	} ?>
	
			</div>
		</div>
</div>

Davor liegt die Head, dahinter der Foot, umschlossen wird das ganze von <div id="wrapper">

dazu das CSS
Code: 
html {
		height: 100%;
		overflow: hidden;
	}

#wrapper { 
		width:980px; 
		height:auto; 
		margin-left:auto; 
		margin-right:auto;
	}

img {
		border: none;
	}
	
#content {
		float: left;
		width: 900px;
		height: auto;
	}	

.content-wrapper {
		margin:40px 11px 8px 11px;
	}

body {
		height: 100%;
		margin: 0px;
		padding: 0px;
		background-color: #FFFFFF;
		color: #000000;
		font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
	}

Wenn ich jetzt dem <div id="images"> eine fixe height von bsp. 200px gebe, wird dies umgesetzt, Prozentwerte werden ignoriert und die komplette Höhe wird genutzt.

Nachtrag: ok, der Safari setzt jetzt immerhin die Prozentwerte um, IE und FF ignorieren weiterhin. Allerdings ändert sich auch im Safari nicht dynamisch bei Änderung der Fenstergröße die Höhe des Divs.

Ist das so überhaupt möglich wie ich es mir vorstelle oder komme ich um JS nicht drumrum?

Danke schomal!

Olli
 
Zuletzt bearbeitet:
Theoretisch wäre es möglich. Hierfür müssten aber beim DIV #wrapper beginnend, über #content-wrapper hinweg, bis hin zum DIV #images diese Blöcke ebenfalls mit height:100% formatiert werden.

Dies hätte aber zur Folge, dass sich die Höhe von #content-wrapper u. #images über den Footer-Bereich hinaus erstrecken würde, und zwar exakt um das Maß, dass der Header-Bereich im Viewport einnimmt, da sich height:100% immer auf die volle Fensterhöhe des Browsers bezieht.
 
hmmm, bringt mich also auch nicht weiter, es sei denn ich setze innerhalb des content-wrappers noch einen blank-div mit definierter höhe des footers, oder?

an eine fenstergrößen änderung passt sich das ganze dann live an? oder sollte ich noch sowas wie onResize=reload in den body packen?
 
Ein "blank"-DIV wird da nichts bewirken, mein erläutertes Verhalten bzgl. der Boxenhöhenausdehnung zu verhindern.

Und was soll der Event-Handler nutzen, wenn hier kein explizites Javascript mit der Funktion reload am Start ist?
 
Code: 
<div id="content">
 <?php
     if($typ=="")
         {    ?>
             
        <div id="content-wrapper">
                 <h1>Das eine Auge des Fotografen schaut weit geöffnet durch den Sucher, <br/>das andere, das geschlossene, blickt in die eigene Seele.</h1>
            <p>Henri Cartier-Bresson</p>
        </div>
            
<?php
    }
    else
    {            ?>
        <div id="content-wrapper">
            <div id="images">

                      <?php
                $pfad = "img/$typ/";
                $verz = opendir ( "$pfad" );
                while ( $file = readdir ( $verz ) )
                     {
                     if ( $file != '.' && $file != '..')
                     {
                            echo "<a href='$pfad/$file' rel='lightbox[$file]' target='_blank'><img style='margin-left:2px;margin-right:2px;max-height:100%;' src='$pfad/$file'/></a><!-- <br style='clear:both' /> -->";
                      }
                    }
                closedir ( $verz );
    } ?>
    
            </div>
        </div>
</div>

Code: 
html {
        height: 100%;
        overflow: hidden;
    }
 
#wrapper { 
        width:980px; 
        height:auto; 
        margin-left:auto; 
        margin-right:auto;
    }

#images {
    float: left;
    width: 100%;
    clear: both;
}
 
img {
        border: none;
    }
    
#content {
        float: left;
        width: 900px;
        height: auto;
    }   
 
.content-wrapper {
        margin:40px 11px 8px 11px;
    }
 
body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
        color: #000000;
        font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
 
tsbmusic hat gesagt.:
Code: 
<div id="content">
 ...
Zum Vergrößern anklicken....

Danke fürs aufräumen, gebracht hat es allerdings nichts. ohne die weggelassenen attribs bei #images klappte es übrigens nicht ;)
Code: 
#images {
    float: left;
    width: 955px;
		white-space: nowrap;
		margin-top: 20px; 
		margin-left:10px; 
		overflow-x: auto; 
		overflow-y:hidden; 
    clear: both;
}

da wir jetzt wissen was "nicht" gehen würde...was würde denn gehen? ;)
 
Übrigens deklarierst du entgegen dem Klassenbezeichner .content-wrapper im Dokument mehrfach einen gleichlautenden ID-Bezeichner, der so darin nicht enthalten sein darf, da er im Dokumentbaum eindeutig sein muß.

tsbmusic ist beim Kopieren des Quellcodes der Fehler auch nicht aufgefallen, was darauf deuten lässt, dass er seinen vermeintlichen Lösungsvorschlag noch nicht mal zuvor überprüft hat.

Was gehen würde? Mit JS die verbleibende Höhe (in px) ermitteln, und diese den Bildern übergeben - fertitsch.
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Übrigens deklarierst du entgegen dem Klassenbezeichner .content-wrapper im Dokument einen gleichlautenden ID-Bezeichner, der so darin nicht enthalten sein darf, da er im Dokumentbaum eindeutig sein muß.

tsbmusic ist beim Kopieren des Quellcodes der Fehler auch nicht aufgefallen, was darauf deuten lässt, dass er seinen vermeintlichen Lösungsvorschlag noch nicht mal zuvor überprüft hat.

Was gehen würde? Mit JS die Höhe (in px) ermitteln, und diese den Bildern übergeben - fertitsch.
Zum Vergrößern anklicken....

habs entsprechend angepasst, weiter bringen tut mich das aber auch nicht ;) trotzdem danke!
 
Dies hat mit deiner Frage auch nichts zu tun, sondern war ein grundsätzlicher Hinweis, da die festgelegte Regel so im Dokument überhaupt keine Anwendung findet.

Mein letzter Satz wird dir sehr wohl was bringen :rolleyes:

Bitte, gern geschehen!
 
böse böse, da haben wir gleichzeitig auf editieren und antworten geklickt ;) den hab ich nämlich nicht gelesen.
das mit dem js hab ich schon versucht, war ich anscheinend zu doof für. könntest du mir freundlicherweise bitte etwas unter die arme greifen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück