imgs in list

[baws]

Hallo

Ik heb een UL met LI items
deze li items bevatten imgs

dus ik heb
<div>
<ul>
<li>
<img>
</li>
<li>
<img>
</li>
<li>
<img>
</li>
</ul>
</div>

Nu is het de bedoeling dat de div evenhoog wordt als de inhoud (li items met afbeelding)
maar hij wordt niet hoger.
als ik de <div #subafbeelding> om elk <li> zet staat het wel goed.
ligt dit aan img's in li items?


mijn php

		<div id="subafbeeldingen">
			<div id="subafbeelding">
				<ul>
					<?php
					$query  = "SELECT * FROM Afbeeldingen WHERE ImgId = $imgid ORDER BY AfbeeldingPrior ASC";
					$result = mysql_query($query);
					
					while($row = mysql_fetch_array($result, MYSQL_ASSOC))
					{
						?>
						<li id="recordsArray_<?php echo $row['AfbeeldingId']; ?>">
						<?php
							$imgpath = "/media/img/badkamer/".$row['AfbeeldingUrl'];
						?>
						
						<?php echo "<img src=\"".$imgpath."\" alt=\"Volgoorde wijzigen\" >"; ?></li>
						<?php 
					}	
						?>
				</ul>
			</div>

en mijn bijbehorende css.

 #subafbeeldingen{	

		width:97%;
		float:left;
		min-height:30%;
		margin-top:20px;
		background-color:#c2c0c0;
		padding-bottom:20px;
	 }
	 
	 
	 #subafbeelding {	
	 margin-left:1%;
	 margin-top:25px;
	 height:175px;
	 min-height:175px;
	 float:left;
	 
	
	 
	 }
	 #subafbeelding li 
	 {
	 
	
	
	 float:left;

	 list-style-type: none;
	 
	 }
	 
	 #subafbeelding img
	 {		
	 
		max-width:96%;
		max-height:96%;
		
	 }

 

[Tha Devil]

Komt voornamelijk omdat je de elementen "float" vermoed ik.

Normaliter pas ik een clearfix toe:

.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}

<div id="subafbeeldingen">
            <div id="subafbeelding">
                <ul>
                    <?php
                    $query  = "SELECT * FROM Afbeeldingen WHERE ImgId = $imgid ORDER BY AfbeeldingPrior ASC";
                    $result = mysql_query($query);
                    
                    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
                    {
                        ?>
                        <li id="recordsArray_<?php echo $row['AfbeeldingId']; ?>">
                        <?php
                            $imgpath = "/media/img/badkamer/".$row['AfbeeldingUrl'];
                        ?>
                        
                        <?php echo "<img src=\"".$imgpath."\" alt=\"Volgoorde wijzigen\" >"; ?></li>
                        <?php 
                    }   
                        ?>
                </ul>
                <div class="clearfix"></div>
            </div>
</div>

Wellicht heeft iemand anders een betere oplossing (CSSHunter? )

 

[baws]

Mm brengt helaas geen veranderingen.

ik heb in mijn css bij #subafbeeldingen height:500px; toegevoegd wat wel het goede resultaat geeft maar niet dynamisch is.
hij blijft hetzelfde als ik bijvoorbeeld super veel li items heb en dan is hij nog te klein.

 

[Tha Devil]

Haal de height en min-height eens van #subafbeelding

http://jsfiddle.net/vp5zF/

Dan heb je blijkbaar ook geeneens de clearfix nodig
http://jsfiddle.net/vp5zF/2/

 

[baws]

Super ik heb die hight waardes toegevoegd aan #subafbeelding img en nu is het precies goed.
Bedankt

 

[csshunter]

Hoewel al opgelost: hoorde ik daar mijn naam tussen de ontluikende krokussen?

Het lijkt me dat de hele tussenliggende <div id="subafbeelding"> gemist kan worden. Deze voegt niets anders toe dan een margin-left van 1% en nog wat extra margin-top. De hoogte is vastgeprikt op 175px, dan hoeft er geen min-height bij (of omgekeerd). En in de omvattende <div id="subafbeeldingen"> zit ook al een min-height, maar dan van 30% (van wat?).
Alle floats uit die twee containers lijken me ook overbodig: of zit er in de 2% resterende breedte aan de rechterkant ook nog iets?
Tenslotte kan de container <div id="subafbeeldingen"> ook nog gemist worden, als die eigenschappen aan de <ul> worden toegekend.

Kan het niet worden:

<ul id="subafbeeldingen">
   <li><img></li>
   <li><img></li>
   <li><img></li>
   <li><img></li>
</ul>

met:

#subafbeeldingen {
   width: 97%;
   min-height: 30%; /* of niks? */
   margin: 20px 0 0 0;
   padding: 20px 1%;
   background-color:#c2c0c0;
   overflow: hidden; /* ipv clearfix */
   }
#subafbeeldingen li {
   float: left;
   height: 175px;
   list-style: none;
   }
#subafbeeldingen img {	
   max-width: 96%;
   max-height: 96%; /* of: 168px ( 96% van 175px) */
}

Zie deze: jsfiddle.net/vp5zF/9/

 

[baws]

Hallo,

Bedankt voor de suggesties, heb de div verwijderd.
ik gebruik de css ook op een andere pagina met een soortgelijke opmaak daar is de 30% van toepassing.