webForumDet fria alternativet
Logga in

En Fråga kring Iframe!

13 svar · 714 visningar · startad av yOINKfoX

yOINKfoXMedlem sedan apr. 201211 inlägg
#1

Hejsan jag sittar och fixar med en ny hemsida, problemet jag har är att jag har en bild i mitten på sidan som jag vill ska bytas (alltså bara bilden) när man trycker på knappen "next" längst ner till höger (jag bifogar en skärmdump av layouten)
så frågar är du hur man fixar detta, jag antar att det är med en iframe men jag vet inte riktigt hur man gör, har helt glömt.
här är kodningen till sidan:
<!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>
<style type="text/css">
.About {
font-size: 25px;
position: inherit;
margin: bottom;
margin-bottom: 70px;
}
.slash {
color: #666;
font-size: 30px;
}
</style>
</head>

<body>
<h1><img src="img/ricon.jpg" width="590" height="162" />
<table width="590" height="170" border="0" align="right" cellpadding="5" cellspacing="10">
<tr>
<td align="right" valign="bottom" bgcolor="#FFFFFF">
<span class="About">About</span><span class="slash">/</span><span class="About"> Fashion</span><span class="slash">/</span><span class="About"> Portraits</span><span class="slash">/</span><span class="About"> Beauty</span><span class="slash">/</span><span class="About"> Contact</span><br/>
</td>
</tr>
</table>
<table width="844" height="100%"border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td><div align="center">
<table width="779">
<tr>
<td height="300"><div align="center"><img src="img/317244_10150307581332596_561582595_7985997_347757655_n.jpg" width="881" height="591" align="middle" /></div></td>
<td width="8%"> </td>

  \</tr\>
\</table\>
\<img src="img/P.png" alt="previous image" width="108" height="18" align="left" /\>\<img src="img/N.png" alt="next image" width="82" height="19" align="right" /\>\</div\>\</td\>

</tr>
</table>
</body>
</html>
tack på förhand
Robin

Skärmavbild 2012-04-09 kl. 13.52.37.png
Danne VMedlem sedan aug. 20068 090 inlägg
#2

Det finns mängder med olika s.k. slideshows som funkar utan större mankemang och som du borde testa istället för iframes som är "fel". Flera är gjorda i flash, andra med javascript/jQuery (som man bör använda eftersom iPhone tydligen inte vill visa flash).

Bara att testa vilken som passar bäst:

http://search.yippy.com/search?input-form=clusty-simple&v%3Asources=webplus-ns-aaf&v%3Aproject=clusty&query=slideshow+with+buttons+jquery

yOINKfoXMedlem sedan apr. 201211 inlägg
#3

Centrera?

Ja jo de kan man ju göra, kännde bara att ja kanske inte är helt inne på java eller flash.
men ja fixade till ett javascript galleri. men nu har jag ett nytt problem, hur får man visaren till mitten? den ligger för mycket till vänster och går jag in på en större skärm så ändras inte storleken.
jag menar att det måste ju finnas något sätt att alltid få visaren att stanna i mitten.

voigtann1Medlem sedan juni 20019 519 inlägg
#4

Du få berätta vad/hur du har gjort just nu, att säga vad du skall göra är i princip omöjligt att svara på utan att veta hur du har gjort nu.

yOINKfoXMedlem sedan apr. 201211 inlägg
#5

voigtann1 skrev:

Du få berätta vad/hur du har gjort just nu, att säga vad du skall göra är i princip omöjligt att svara på utan att veta hur du har gjort nu.

jo men absolut såhär ser min kodning ut just nu

<!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>Rebecca Fexby</title>
<style type="text/css">
.About {
	font-size: 25px;
	position: inherit;
	margin: bottom;
	margin-bottom: 70px;
}
.slash {
	color: #666;
	font-size: 30px;
}
</style>
<meta charset="utf-8">
	
	<link rel="stylesheet" href="css/global.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
</head>

<body>
<h1><img src="img/ricon.jpg" width="590" height="162" />
<table width="590" height="170" border="0" align="right" cellpadding="5" cellspacing="10">
	<tr>
    	<td align="right" valign="bottom" bgcolor="#FFFFFF">
<span class="About">About</span><span class="slash">/</span><span class="About"> Fashion</span><span class="slash">/</span><span class="About"> Portraits</span><span class="slash">/</span><span class="About"> Beauty</span><span class="slash">/</span><span class="About"> Contact</span><br/>
		</td>
    </tr>
</table>
<table width="844" height="100%"border="0" align="center" cellpadding="5" cellspacing="0" align="center">
<tr>
  <td><div align="center">
    <table width="779">
      <tr>
        <td height="6003"><div align="center">
        <div id="container">
		<div id="example">
			<div id="slides">
				<div class="slides_container">
					<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 1"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
					<img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
				</div>
				<a href="#" class="prev"><img src="img/arrow-prev.png" width="108" height="18" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="img/arrow-next.png" width="71" height="17" alt="Arrow Next"></a>
			</div>
		</div>
	</div>
        </div></td>
        <td width="8%">&nbsp;</td>        
      </tr>
    </table>
</tr>
</table>
</body>
</html>

och galleriet lägger sig alltså inte centrerat (se bilaga)

Skärmavbild 2012-04-09 kl. 17.26.45.png
voigtann1Medlem sedan juni 20019 519 inlägg
#6

vad är det för slides plugin du kör?

Du har en massa </a> element som du aldrig öppna.

en div har inte attributet align, finns bara på en td om jag inte är helt ute och cykla.

sen är jag rätt säker på att du inte behöver använda dig av tabeller för att få den design du är ute efter.

yOINKfoXMedlem sedan apr. 201211 inlägg
#7

voigtann1 skrev:

vad är det för slides plugin du kör?

Du har en massa </a> element som du aldrig öppna.

en div har inte attributet align, finns bara på en td om jag inte är helt ute och cykla.

sen är jag rätt säker på att du inte behöver använda dig av tabeller för att få den design du är ute efter.

Jag hittade den här sliden http://slidesjs.com/ som jag använder mig av.
hur ska jag göra om jag inte ska använda mig av tabeller och fortfarande få sakerna där jag vill ha dom?

voigtann1Medlem sedan juni 20019 519 inlägg
#8

med CSS och en mer semantisk korrekt HTML struktur, men visst tabeller fungera ju.

varför har du satt en höjd på 6003 på din td?

men den div:en du har en align på, sätt en klass på den och sätt dess bredd lika bred som dina bilder och sätt margin-left och margin-right till auto.

yOINKfoXMedlem sedan apr. 201211 inlägg
#9

voigtann1 skrev:

med CSS och en mer semantisk korrekt HTML struktur, men visst tabeller fungera ju.

varför har du satt en höjd på 6003 på din td?

men den div:en du har en align på, sätt en klass på den och sätt dess bredd lika bred som dina bilder och sätt margin-left och margin-right till auto.

Höjden va en väldigt miss av klumpighet.
jag är inte riktigt säker på hur du menar jag ska göra för att få sliden till mitten
såhär ser koden ut nu:

<!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>Rebecca Fexby</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
</head>
<body>
<img src="img/ricon.jpg" width="590" height="162" />
<table width="590" height="170" border="0" align="right" cellpadding="5" cellspacing="10">
<tr>
<td align="right" valign="bottom" bgcolor="#FFFFFF">
<span class="About">About</span><span class="slash">/</span><span class="About"> Fashion</span><span class="slash">/</span><span class="About"> Portraits</span><span class="slash">/</span><span class="About"> Beauty</span><span class="slash">/</span><span class="About"> Contact</span><br/>
</td>
</tr>
</table>
<table width="844" height="100%"border="0" cellpadding="5" cellspacing="0" align="center">
<tr>
<td height="600"><div class="galleri">
<div id="container">
<div id="slides">
<div class="slides_container">
<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 1">
<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
<img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
<img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
<img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5">
<img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6">
<img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7">
</div>
<a href="#" class="prev"><img src="img/arrow-prev.png" width="108" height="18" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/arrow-next.png" width="71" height="17" alt="Arrow Next"></a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Danne VMedlem sedan aug. 20068 090 inlägg
#10

Om du laddar upp alltsammans till en server och ger en länk till oss blir det enklare.

yOINKfoXMedlem sedan apr. 201211 inlägg
#11

Danne V skrev:

Om du laddar upp alltsammans till en server och ger en länk till oss blir det enklare.

Ok, här är hemsidan:)
http://rftestout.site88.net/

voigtann1Medlem sedan juni 20019 519 inlägg
#12

Ta bort tabellen för din slider, finns absolut ingen anledning att ha det, du skapar en massa element helt i onödan:

<!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>Rebecca Fexby</title>
<meta charset="utf-8">
	<link rel="stylesheet" href="css/global.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
</head>
<body>
<img src="img/ricon.jpg" width="590" height="162" />
<table width="590" height="170" border="0" align="right" cellpadding="5" cellspacing="10">
	<tr>
    	<td align="right" valign="bottom" bgcolor="#FFFFFF">
<span class="About">About</span><span class="slash">/</span><span class="About"> Fashion</span><span class="slash">/</span><span class="About"> Portraits</span><span class="slash">/</span><span class="About"> Beauty</span><span class="slash">/</span><span class="About"> Contact</span><br/>
		</td>
    </tr>
</table>

<div id="container">
	<div id="slides">
		<div class="slides_container">
			<img src="img/f1.jpg" width="700" height="450" alt="Slide 1">
			<img src="img/f2.jpg" width="598" height="450" alt="Slide 2">
			<img src="img/f3.jpg" width="677" height="450" alt="Slide 3">
			<img src="img/f4.jpg" width="637" height="450" alt="Slide 4">
			<img src="img/f5.jpg" width="596" height="450" alt="Slide 5">
			<img src="img/f6.jpg" width="595" height="450" alt="Slide 6">
		</div>
		<a href="#" class="prev"><img src="img/arrow-prev.png" width="108" height="18" alt="Arrow Prev"></a>
		<a href="#" class="next"><img src="img/arrow-next.png" width="71" height="17" alt="Arrow Next"></a>
	</div>
</div>

</body>
</html>

Och om du skall posta kod så använd gärna [kod]-blocket runt din kod, bli betydligt lättare att läsa och snabbare att se vad som är text och vad som är kod.

Danne VMedlem sedan aug. 20068 090 inlägg
#13

Du har olika bredder (och höjder) på bilderna och bredderna i de olika elementen som bygger upp bildspelet stämmer inte med dessa.

För att få fason på bildspelet bör du alltså se till att alla bilder har samma bredd (antagligen funkar olika höjder) och därefter prova ut passande bredder på bildspelselementen i stilmallen.

yOINKfoXMedlem sedan apr. 201211 inlägg
#14

Problemet med att ha samma bredd på alla bilder blir att knapparna "previous" och "next" kommer vara jätte långt ut även om man bara har en stående smal bild.
de är om de finns något att lägga in som gör att knapparna följer med bilden i storlek?
förstår ni eller blev det allt för osammanhängande nu?
MVH
Robin

137 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)