align foto

Status
Niet open voor verdere reacties.
T

the goose

Gebruiker
Lid geworden
15 feb 2007
Berichten
86
hey,

ik zou graag enkele foto's willen plaatsen op mijn website: www.team-ireland.net/jan/veralbo

de eerste rij heb ik met css proberen te maken

eerste rij in portfolio.html:
HTML: 
	<div class="align_foto"><a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier...">
	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>

	<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier...">
	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

en css bestand ziet er zo uit:
Code: 
.align_foto{
margin-left: 15px;
}

de tweede rij (en volgenden) bestaat uit deze codes:
HTML: 
&nbsp;&nbsp;&nbsp;
	<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier...">
	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier...">
	<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>

<br><br><br>

ik zou graag alles mbv css doen, maar je kan zien dat de eerste rij foto's tegen elkaar staan geplakt... hoe kan ik de rechtste foto op de eerste rij naar rechts verschuiven tot op de zelfde hoogte als degene op rijen daaronder?

kan iemand me misschien dan ook vertellen hoe ik die kader die je krijgt wanneer je op een foto klikt, uit de iframe kan halen en "bovenop" heel de pagina kan laten verschijnen, mbv html? de tutorial die ik hiervoor heb gebruikt staat hier: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

dank bij voorbaat!

groeten,
the goose
 
Je code aangepast.
tabel
en img.

Zie comment in code.
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<title>
			Veralbo b.v.b.a.
		</title>
		<link rel="stylesheet" href="css/navigatie.css">
		<link rel="stylesheet" href="css/align.css">
		
<script type="text/javascript" src="js/prototype.js">
</script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects">
</script>
<script type="text/javascript" src="js/lightbox.js">
</script>
		<link rel="stylesheet" href="http://www.team-ireland.net/jan/veralbo/css/lightbox.css" type="text/css" media="screen" />
		
		<!-- toegevoegde img style -->
		
<style type="text/css">
img{
margin:10px;
border: 0;
}
</style>
	</head>
	<body>
		
		
		<table width="100%"  border="0" cellspacing="0" cellpadding="0" style="padding-left:40px;">
			<!--  pad van 40 px links -->
			<tr>
				<td background="http://www.team-ireland.net/jan/veralbo/images/contents_iframe.jpg" width="476" height="571" style="font-family: Verdana, Times New Roman, Arial, Helvetica; font-size: 10; color: #ffffff" valign="top">
					
					<div class="align_titel">
						:: Portfolio ::
					</div>
					<br>
					
<script type="text/javascript">

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=6

if (iens6){
document.write('<div id="container" style="position:relative;width:476px;height:480px;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:476px;left:0;top:0">')
}
</script>
					
					
					<ilayer name="nscontainer" width=476 height=480 clip="0,0,476,480">
					<layer name="nscontent" width=476 height=480 visibility=hidden>
					
					
					<div class="align_foto">
						<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="http://www.team-ireland.net/jan/veralbo/portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
						
						<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="http://www.team-ireland.net/jan/veralbo/portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
					</div>
					
					<br>
					<br>
					
					
					<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
					
					
					<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
					
					<br>
					<br>
					<br>
					
					<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
					
					<a href="portfolio/example_full.jpg" rel="lightbox" title="Eventuele voetnoot hier..."><img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a>
					
					
					</layer>
					</ilayer>
					
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
					
					<table width="476px">
						<tr>
							<!-- was vergeten -->
							<td>
								<p align="right">
								<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="images/up.gif" border=0></a>
								<br>
								<br>
								<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="images/down.gif" border=0></a>
								</p>
							</td>
						</tr>
						<!-- was vergeten -->
					</table>
					
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+480))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+480))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
					
					<center>
						<font color="a1a1a1">
							© 2007
						</font>
					</center>
					
				</td>
				<!-- was vergeten -->
			</tr>
		</table>
		
	</body>
</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan