tekst onder elke foto plaatsen

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hoe plaats je 40 foto's gecentreerd op 1 pagina, met tekst/comentaar eronder ?

ik wil een webpagina maken met foto's en onder elke foto wat korte tekst plaatsen. een comentaar over de foto zeg maar. maar hoe doe ik dat?

foto's plaatsen lukt wel in html, maar de tekst eronder niet. tevens moet alles weer in css staan en ik zie maar 1 oplossing tot nu toe, werken met tabellen. of zijn er andere mogelijkheden?
 
Kijk hier maar eens naar: http://www.w3schools.com/css/css_image_gallery.asp

Alleen met dit voorbeeld komen alle plaatjes naast elkaar.
Als je de foto's dan in een div zet met een vaste breedte, dan komt het allemaal onder elkaar.

probeer maar:
HTML: 
<html>
 <head>
 <style type="text/css">
div.album
{
padding: 10px;
width: 700px;
}

 div.img
   {
   margin:2px;
   border:1px solid #0000ff;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
   }
 div.img img
   {
   display:inline;
   margin:3px;
   border:1px solid #ffffff;
   }
 div.img a:hover img
   {
   border:1px solid #0000ff;
   }
 div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:2px;
   }
 </style>
 </head>
 <body>
<div class="album">
 <div class="img">
   <a target="_blank" href="klematis_big.htm">
   <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
   </a>
   <div class="desc">Add a description of the image here</div>
 </div>
 <div class="img">
   <a target="_blank" href="klematis2_big.htm">
   <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
   </a>
   <div class="desc">Add a description of the image here</div>
 </div>
 <div class="img">
   <a target="_blank" href="klematis3_big.htm">
   <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
   </a>
   <div class="desc">Add a description of the image here</div>
 </div>
 <div class="img">
   <a target="_blank" href="klematis4_big.htm">
   <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
   </a>
   <div class="desc">Add a description of the image here</div>
 </div>
</div>

 </body>
 </html>
 
div. Tabellen moet je niet gebruiken voor opmaak, maar voor het weergeven van informatie
 
Baljuin zei:
Tabellen moet je niet gebruiken voor opmaak, maar voor het weergeven van informatie
Klik om te vergroten...

het is een beetje wel en niet spelletje.

zie hier

het hoeft niet zeer profesioneel te worden hoor, maar merkte op dat een tabel wel heel simpel is tegenover en div.

dus vroeg me af of een tabel ook verkeerd is?
 
Vroeger was het een wel en niet spelletje. Tegenwoordig zijn alle webbouwers het er wel over eens om tabellen niet te gebruiken voor layout. Op het eerste gezicht lijkt het makkelijker en zie je het verder niet, maar tabellen worden snel onoverzichtelijk doordat ze meer code gebruiken. Bovendien wordt de content en de html code met tabellen meer met elkaar verweven. En je wilt eigenlijk dat de content zo veel mogelijk los staat van je ontwerp. Dat doe je met Div's en CSS. Daarnaast wordt het bijhouden van tabellen layout moeilijk door de voorgaande redenen.

Dus als je even snel een website moet maken en je hebt er verder geen omkijken meer naar, dan moet je doen wat je nu het makkelijkste vindt. Maar voor update gemak en overzichtelijke code (en dus googlevriendelijk) kun je beter voor div kiezen

Maar misschien moet je ff iets lezen hierover. Deze geeft meer inzicht: http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

En als je zin hebt dit: http://www.dwarshuis.com/nieuwsover...haos-en-resultaten-van-onderzoek-a-list-apart en http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables



Overigens! Je kunt misschien beter lijsten gebruiken ipv divs. Aangezien je fotoalbum meer een lijst van foto's is. Dat is semantisch meer juist en makkelijker en minder qua code


Zoiets:
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
.fotoalbum {
	width: 756px;
	padding: 0;
	margin: 0;
}

.fotoalbum li {
	float: left;
	width: 240px;
	border: 1px #F00 solid;
	margin: 5px;
	list-style-type: none;	
}

.fotoalbum li div{
	width: 240px;
	height: 240px;
	overflow: hidden;
}

.fotoalbum li .caption{
	display: block;
	text-align:center;
	margin-top: 10px;
	font-size: 1 em;
}

</style>


<body>
<ul class="fotoalbum">
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p1.jpg" alt="Alpha" title="Alpha" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p1.jpg" alt="Alpha" title="Alpha" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p3.jpg" alt="Megan" title="Megan" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p4.jpg" alt="Nancy" title="Nancy" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p2.jpg" alt="Minie" title="Minie" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p7.jpg" alt="Rolo" title="Rolo" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p10.jpg" alt="Giga Byte" title="Fishing" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>
	<li>
		<div><img src="http://www.webreference.com/programming/css_gallery/images/p6.jpg" alt="Stray pup" title="Stray pup" /></div>
    	<span class="caption">Photographed by Dorota Mrowka, courtesy of the stock.xchng<span>
	</li>        
</ul>


</body>
</html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan