[Løst]Hvordan få fyllt opp table? Bildegalleri

Sk!ppy · 23. juli 2009

Hei

Lager et bildegalleri, istede for å bruke ett av de gratis på nettet. men jeg skal ha fem bilder i width, og kanskje 10 rader i høyden. men hvordan får jeg da fyllt ut alle sammen, da jeg er vant med å bruke while for å liste opp ting.

Noen tips? Har sett på mortz.tjokk sitt bildegalleri, men skjønnte ikke helt hva som gjorde det der.

Jonas · 23. juli 2009

IMG er i utgangspunktet et inline-element, så ved å bare printe ut en liten haug med bilder, så vil de automatisk wrappe på nye linjer.

<html>
<head>
	<style type="text/css">
		p {
			width: 500px;
		}
		img {
			width: 150px;
			padding: 3px;
			border: 2px solid #333333;
		}
	</style>
</head>
<body>
	<p>
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
		<img src="http://www.history.noaa.gov/images/art_collage.jpg" />
	</p>
</body>
</html>

Edit: Dersom du absolutt vil bruke tables i galleriet, prøv å se på følgende.

<?php

$totalelements = 17;
$elementsperrow = 4

?>

<table>
<tr>
	<?php for ( $iTell, $iMax = $totalelements; $iTell <= $iMax; $iTell++ ): ?>
		<td><?= $iTell ?></td>
		<?php if ( $iTell % $elementsperrow == 0 && $iTell != $iMax ): ?>
			</tr><tr>
		<?php endif; ?>
	<?php endfor; ?>
</tr>
</table>

Endret 23. juli 2009 av Jonas

Sk!ppy · 23. juli 2009

Det funket kjempebra! Takker!

oxodesign · 23. juli 2009

Eller enklere bruke divs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Gallery</title>
	<style>
		.galleryContainer{
			width: 520px;
		}

		.galleryItems{
			width: 100px;
			float: left;
			height: 70px;
			margin: 5px;
			padding: 5px;
			border: 5px solid #eaeaea;
			background-color: #F1F1F1;
		}

		/**
			Størrelsen fra galleryConteiner beregnes på følgende måte:

			galleryItems width: 100px
			galleryItems margin (left+right): 2x5 = 10px
			galleryItems padding (left+right): 2x5= 10px;
			galleryItems border (left+right): 2x5 = 10px;
			=============================================
			Sum								   = 130px;
			Antall koloner						x 4
			=============================================
			galleryContainer widht				= 520px;
		*/
	</style>
</head>
<body>
	<div class="galleryContainer">
		<?php for($i = 0; $i < 20; $i++): ?>
		<div class="galleryItems">
			<?= $i; ?>
		</div>
		<?php endfor; ?>
	</div>
</body>
</html>

Resultatet ser du her:

Jonas · 23. juli 2009

Alle egenskapene til dine .galleryItems kan settes på et IMG-element, så hvorfor ikke gjøre det? En DIV rundt hvert eneste IMG er bare masse unødvendig markup og div-mania.

oxodesign · 23. juli 2009

Alle egenskapene til dine .galleryItems kan settes på et IMG-element, så hvorfor ikke gjøre det? En DIV rundt hvert eneste IMG er bare masse unødvendig markup og div-mania.

Selv om at i teorien ved å sette de egenskapene på en img element blir resultatet helt likt tror ikke det er lurt å gjøre det i praksis. For på en bildegalleri vil du risikere å få forskjellige størrelse på bildene og om du setter dem til en bestem høyde/bredde så vil de se forferdelig ut!

Jonas · 23. juli 2009

Tja, kommer ann på galleriet. Dersom størrelsen er ulike, så vil man gjerne sentrere hvert enkelt bilde både vertikalt og horisontalt, slik bl.a. facebook har gjort det, hvorav tables er det eneste teknikken hvor dette er mulig. (Så vidt jeg vet om i hvert fall)

Logg inn

[Løst]Hvordan få fyllt opp table? Bildegalleri

Anbefalte innlegg

Sk!ppy

Lenke til kommentar

Videoannonse

Jonas

Lenke til kommentar

Sk!ppy

Lenke til kommentar

oxodesign

Lenke til kommentar

Jonas

Lenke til kommentar

oxodesign

Lenke til kommentar

Jonas

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer