Tabellen-scrolbar+

Vragen/antwoorden betreffende het maken van je eigen website.

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

01 nov 2007, 11:17

Ik zou mijn website willen wijzigen en een pagina met tabellen willen indelen .
VB : tabel met 1 rij en 3 kolommen .
- in de eerste kolom een grote foto.
- tweede kolom niks (scheiding ruimte)
- derde kolom kleine foto's .
nu is mijn vraag kan er een scroll bar in de derde kolom geplaatst worden ????? :oops: :roll:
Omhoog
Gast

01 nov 2007, 15:08

duiver schreef:[...]
- derde kolom kleine foto's .
nu is mijn vraag kan er een scroll bar in de derde kolom geplaatst worden ????? :oops: :roll:
Plaats in die derde kolom een iFrame met een vaste hoogtemaat, een border="0" en met de optie scrolling="auto". Dan komt er beslist een schuifbalk... (Naast Engelse tekst wordt dat vervolgens vanzelf een scroll bar ;-) )
 
Laatst gewijzigd door Gast op 17 nov 2007, 12:49, 1 keer totaal gewijzigd.
Omhoog

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

01 nov 2007, 17:13

Beste duiver,

Even uitleggen wat Kobbe schrijft aan de hand van een voorbeeld
Maak een tabel dmv. onderstaande code en plaats die op je pagina waar je die wil tonen

Code: Selecteer alles

<table style="width:700px; cellspacing=0; cellpadding=0;">
	<tr>
		<td style="width:300px; height:255px">
		<img src="foto_bestandsnaam.jpg" width="300" height="225" alt="foto omschrijving" border="0"></td>
		<td style="width:100px; height:225px">&nbsp;</td>
		<td style="width:300px; height:225px">
		<iframe title="photobox" frameborder="0" SRC="fotos.html" scrolling="auto" style=" width:330px; height:255px;">
		</iframe>
		</td>
	</tr>
</table>
a-De waarden width en height moet je zelf aanpassen aan de width (breedte) en height (hoogte) van je foto.
b-Ook de juiste benaming en omschrijving van de foto ingeven
c-Bewaar deze pagina.

Maak vervolgens een nieuwe pagina aan (fotos.html) waar je de foto's plaatst die in de derde kolom in het iframe moeten getoond worden.
Een uitgewerkt voorbeeld zie je hieronder

Code: Selecteer alles

...
<body>
		<img src="foto_bestandsnaam.jpg" width="300" height="225" alt="foto omschrijving" border="0">
		<br>
		<img src="foto_bestandsnaam.jpg"  width="300" height="225" alt="foto omschrijving" border="0">
</body>
...
a-Ook hier weer zelf de nodige aanpassingen doen in width en height en foto bestandsnaam
b-Achtergrondkleur ed. kan je ook hier opnemen;
c-Bewaar de pagina als fotos.html
d-Je kan natuurlijk zoveel foto's plaatsen als je zelf wil

Beide html pagina's en foto's opladen naar je host server.
Behoud de structuur op de host server die je op je harde schijf hebt toegepast.

Succes

mvg,
Coderunner
Omhoog

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

02 nov 2007, 17:54

KOBBE & CODERUNNER

bedankt voor de info zal het eens proberen om jullie voorbeeld uit te werken.
Mijn website http://www.foli.be is aangemaakt met Draemwaever en de pagina die ik wou veranderen is Reisverhalen.
laat nog wel iets weten wanneer het gelukt is of niet ??????

bedankt voor de hulp.
Omhoog

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

05 nov 2007, 17:04

Kobbe & coderunner

heb het enkele malen uitgeprobeerd, zelfs de code gekopieerd naar dreamweaver en telkens komt de schuifbalk naast de derde kolom zodat de volledige bladzijde scroll
het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.

bedankt voor info
Omhoog

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

05 nov 2007, 19:20

duiver schreef:heb het enkele malen uitgeprobeerd, zelfs de code gekopieerd naar dreamweaver en telkens komt de schuifbalk naast de derde kolom zodat de volledige bladzijde scroll
het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.
Beste duiver,

Plaats de link (url) naar de pagina met de fout hier eens, dan kan ik zien wat er fout gaat.
Want als ik nu naar je site ga en in menu "reisverhalen" aanklik, krijg ik een grotere foto in het midden met daarrond thumbnails.

mvg,
Coderunner
Omhoog
Gast

06 nov 2007, 12:00

Duiver schreef:[...] het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.
Je moet in de testversie van je vernieuwde pagina wel voldoende afbeeldingen opnemen in het html-bestand waarmee je het iFrame van de derde kolom vult!
Scrolling="auto" levert alleen een schuifbalk op als het nodig is. Is de totale hoogte van de derde kolom (nog) niet gevuld, dan verschijnt er ook geen schuifbalk.
Laatst gewijzigd door Gast op 17 nov 2007, 12:50, 1 keer totaal gewijzigd.
Omhoog

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

06 nov 2007, 16:49

KOBBE & CODERUNNER

hier de code van mijn doel stelling maar heb het nog eens geprobeerd maar krijg geen frame in de derde kolom geplaatst via Dreamweaver.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>testen foli</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #999999;
}
.style1 {font-size: 24px}
.style2 {font-size: 18px}
.style3 {font-size: 16px}
-->
</style></head>

<body>
<table width="710" border="2" cellpadding="0">
<tr>
<td width="100" bgcolor="#666666"><div align="center">Frankrijk</div></td>
<td width="100" bgcolor="#666666"><div align="center">Duitsland</div></td>
<td width="100" bgcolor="#666666"><div align="center">Nederland</div></td>
<td width="100" bgcolor="#666666"><div align="center">Tsjechi&euml;</div></td>
<td width="100" bgcolor="#666666"><div align="center">Portugal</div></td>
<td width="100" bgcolor="#666666"><div align="center">Italie</div></td>
<td width="100" bgcolor="#666666"><div align="center">Uitstappen</div></td>
</tr>
</table>
<p>&nbsp;</p>
<table width="800" height="400" border="2" cellpadding="0">
<tr>
<td width="520" ><div align="center">
<table width="510" height="350" border="2" cellpadding="0">
<tr>
<td><div align="center" class="style1">Grote foto </div>
<p><br />
</p>
<p><span class="style2">naast kleine foto's zou ik graag een scrolbar hebben </span></p>
<p class="style3">de afmetingen van de hoofd tabel is groter geworden </p></td>
</tr>
</table>
</div></td>
<td width="13" >&nbsp;</td>
<td width="230" ><table width="219" border="2" align="left" cellpadding="0">
<tr>
<td width="90" height="75">&nbsp;</td>
<td width="115">&nbsp;</td>
</tr>
<tr>
<td height="10"><div align="center">Col d' Aubisque </div></td>
<td><div align="center">Dun dePilar </div></td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10"><div align="center">Woud van Iraty </div></td>
<td><div align="center">Oradour du Glane </div></td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="10">&nbsp;</td>
<td>&nbsp;</td>
</tr>

</table></td>
</tr>
</table>
<p class="style2">&nbsp;</p>
</body>
</html>
wat doe ik nu verkeerd??????

bedankt voor de info .
Omhoog

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

06 nov 2007, 17:57

Beste duiver,

Is het de bedoeling dat alle kleine foto's naar boven of beneden kunnen worden gescrolled ?

Code: Selecteer alles

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>testen foli</title> 
<style type="text/css"> 
<!-- 
body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #FFFFFF; 
} 
body { 
background-color: #999999; 
} 
.style1 {font-size: 24px} 
.style2 {font-size: 18px} 
.style3 {font-size: 16px} 
--> 
</style></head> 

<body> 
<table width="710" border="2" cellpadding="0"> 
<tr> 
<td width="100" bgcolor="#666666"><div align="center">Frankrijk</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Duitsland</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Nederland</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Tsjechië</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Portugal</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Italie</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Uitstappen</div></td> 
</tr> 
</table> 
<p>&nbsp;</p> 
<table width="800" height="400" border="2" cellpadding="0"> 
<tr> 
<td width="520" ><div align="center"> 
<table width="510" height="350" border="2" cellpadding="0"> 
<tr> 
<td><div align="center" class="style1">Grote foto </div> 
<p><br /> 
</p> 
<p><span class="style2">naast kleine foto's zou ik graag een scrolbar hebben </span></p> 
<p class="style3">de afmetingen van de hoofd tabel is groter geworden </p></td> 
</tr> 
</table> 
</div></td> 
<td width="13" >&nbsp;</td> 
<td width="230" >
<iframe style="width: 252px; height: 359px" src="foto.html">title="photobox" frameborder="0" SRC="foto.html" scrolling="auto" style=" width:230px; height:350px;" name="foto"</iframe>
</td>
</tr> 
</table> 
<p class="style2">&nbsp;</p> 
</body> 
</html>
a-De waarden width en height moet je zelf aanpassen aan de width (breedte) en height (hoogte) van je foto.
b-Ook de juiste benaming en omschrijving van de foto ingeven
c-Bewaar deze pagina.

Maak vervolgens een nieuwe pagina aan (fotos.html) waar je de foto's plaatst die in het iframe moeten getoond worden.
Een uitgewerkt voorbeeld zie je hieronder

Code: Selecteer alles

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foto's</title>
</head>
<body>
<table style="align=center">
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 1</td>
		<td>tekst 2</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 3</td>
		<td>tekst 4</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 5</td>
		<td>tekst 6</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 7</td>
		<td>tekst 8</td>
	</tr>
</table>
</body> 
</html>
a-Ook hier weer zelf de nodige aanpassingen doen in width en height en foto bestandsnaam
b-Achtergrondkleur ed. kan je ook hier opnemen;
c-Bewaar de pagina als fotos.html
d-Je kan natuurlijk zoveel foto's plaatsen als je zelf wil

Beide html pagina's en foto's opladen naar je host server.
Behoud de structuur op de host server die je op je harde schijf hebt toegepast.

Is het dit wat je bedoelt ?

mvg,
Coderunner
Omhoog
Gast

06 nov 2007, 18:33

Duiver schreef:[...] wat doe ik nu verkeerd??????
Tja... Als je in die derde kolom een tabel plaatst gevuld met de nodige <td>'s, dan wordt die tabel steeds hoger.
Die tabel in de laatste kolom zou eigenlijk een iFrame moeten zijn met een vaste hoogte.

Ik ken Dreamweaver niet, maar ik meende dat de meeste html-opmaakprogramma's toestaan om rechtstreekt in de html-code in te grijpen?
Dan moet er op die manier toch een iFrame in te voegen zijn, lijkt me!?
Laatst gewijzigd door Gast op 17 nov 2007, 12:51, 1 keer totaal gewijzigd.
Omhoog

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

08 nov 2007, 12:41

coderunner & Kobbe

Met de spontane hulp van jullie is het gelukt om de pagina klaar te krijgen zoals gevraagd was. Heb het uitgetest in een proef opstelling en werkt uitstekend. Maar heb nu een andere vraag.
Had de bedoeling zoals op mijn website pagina Reisverhalen de kleine foto's bij het overgaan van de muis deze te laten verschijnen waar de grote foto staat. Heb dit gedaan via Dreamweaver - Behaviors -Onmouseover-onmouseout nu lukt het niet via deze weg omdat ik nu met 2 pagina's moet werken.
De bedoeling van deze opstelling is dat de pagina steeds kan blijven bestaan en regelmatig foto's kan bijvoegen.
Hebben jullie soms een oplossing via HTML of andere oplossing voor dit probleem.
Nogmaals bedankt voor de goede hulp en nuttige info.
websit : http://www.foli.be
groetjes
duiver
Omhoog

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

09 nov 2007, 06:25

duiver schreef:De bedoeling van deze opstelling is dat de pagina steeds kan blijven bestaan en regelmatig foto's kan bijvoegen.
Hebben jullie soms een oplossing via HTML of andere oplossing voor dit probleem.
Beste duiver,

Ga naar de site van CSS Play - A Scrolling Photograph Gallery en bekijk de broncode. Daar staat een voorbeeld van hetgeen jij wil maken. Alleen staan de thumbnails niet rechts maar onder de vergrootte foto. Maakt geen gebruik van de tag <iframe> en alles is met CSS style sheet opgemaakt. Misschien kan je daar al mee verder.

mvg,
Coderunner
Omhoog

duiver
Lid geworden op: 22 okt 2005, 14:39
Locatie: wijnegem

11 nov 2007, 15:04

coderunner

Bedankt voor je info heb het eens bekeken en uitgetest maar resultaat is niet wat ik in gedachten had. Zal het verlopig wel bij het oude houden, tot er misschien iets anders komt, om uit te werken.

in ieder geval bedankt voor de tijd dat je hier aan verspilt hebt.
Door zulke mensen kunnen vele mensen geholpen worden om hen hobby verder te kunnen uitwerken .
nogmaals bedankt en hoop in de toekomst nog op je hulp te kunnen rekenen.
groetjes duiver
Omhoog

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

12 nov 2007, 14:41

duiver schreef:in ieder geval bedankt voor de tijd dat je hier aan verspilt hebt.
Beste duiver,

Dat was graag gedaan en bedankt om dit hier te melden.

mvg,
Coderunner
Omhoog

Terug naar “Eigen website”