De PHPhulp kroeg
3 foto's naast elkaar
Ik heb een pagina gemaakt, waar 3 foto's naast elkaar in moeten staan. nu heb ik een effect toegevoegd aan de 3 foto's d.m.v javascript, en nu staan de foto's niet meer naast elkaar. Iemand een idee hoe ik dit moet verhelpen?
index.html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Welkom op hoteldevos.nl</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<script type="text/javascript" src="gradualfader.js">
</script>
<body>
<div id="site_content">
<center>Welkom op hoteldevos.nl</center><br/>
<p>
<a href="#" class="gradualfader"><img name="De Echte Pannenkoekenbakker" class="gradualfader" width="460" height="355" title="De Echte Pannenkoekenbakker" src="pannenkoekenbakker.PNG" /></a>
<a href="/hotel" class="gradualfader"><img name="Hotel De Vos" title="Hotel De Vos" class="gradualfader" width="460" height="355" src="hotel.jpg"></a>
<a href="/aetkamer" class="gradualfader"><img name="De Aetkamer van Ech" width="460" class="gradualfader" height="355" title="De Aetkamer van Ech" src="aetkamer.PNG"
</p>
</div><script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</body>
<head>
<title>Welkom op hoteldevos.nl</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<script type="text/javascript" src="gradualfader.js">
</script>
<body>
<div id="site_content">
<center>Welkom op hoteldevos.nl</center><br/>
<p>
<a href="#" class="gradualfader"><img name="De Echte Pannenkoekenbakker" class="gradualfader" width="460" height="355" title="De Echte Pannenkoekenbakker" src="pannenkoekenbakker.PNG" /></a>
<a href="/hotel" class="gradualfader"><img name="Hotel De Vos" title="Hotel De Vos" class="gradualfader" width="460" height="355" src="hotel.jpg"></a>
<a href="/aetkamer" class="gradualfader"><img name="De Aetkamer van Ech" width="460" class="gradualfader" height="355" title="De Aetkamer van Ech" src="aetkamer.PNG"
</p>
</div><script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</body>
en de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1395px;
height: 500px;
margin-bottom: 250px;
margin-top: 150px;}
img {
margin-left: 10px;}
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1395px;
height: 500px;
margin-bottom: 250px;
margin-top: 150px;}
img {
margin-left: 10px;}
Hopelijk heeft iemand een idee om dit op te lossen
float: left;
margin-left: 10p;
}
Voor een betere oplossing (aangezien het door de javascript kan komen) kun je het beste even een demo online zetten zodat we de code beter kunnen zien.
Gewijzigd op 01/02/2012 17:06:21 door Joakim Broden
Ik heb helaas geen website online waar ik het bestand kan uploaden.
Zoals bovenstaan de broncode van het .html bestand en de broncode van het .css bestand.
Ik gebruik een script van dynamic drive, gradualfader genaamt.
De link naar dit script staat hier: http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm
Aan het einde van lijn 16 (jouw eersten post) ontbreekt
></a>
Uiteindelijk heeft het geen effect op het resultaat